108 lines
1.9 KiB
Vue
108 lines
1.9 KiB
Vue
<!--
|
||
@name: ScrollGoodRow
|
||
@author: kahu4
|
||
@date: 2023-11-01 15:56
|
||
@description：ScrollGoodRow
|
||
@update: 2023-11-01 15:56
|
||
-->
|
||
<script setup>
|
||
|
||
import Goods from "@/components/goodsComponents/Goods.vue";
|
||
import Options from "@/components/goodsComponents/components/Options.vue";
|
||
|
||
const props = defineProps({
|
||
products: {
|
||
type: Array
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<scroll-view
|
||
scroll-x
|
||
class="scroll-view"
|
||
>
|
||
<view
|
||
class="scroll-inner"
|
||
>
|
||
|
||
<template
|
||
v-for="good in props.products"
|
||
:key="good.id"
|
||
>
|
||
<Goods
|
||
class="scroll-item"
|
||
info-padding="15rpx 20rpx"
|
||
:goods="good"
|
||
>
|
||
<template #options>
|
||
<Options
|
||
:goods="good"
|
||
show-btn
|
||
></Options>
|
||
</template>
|
||
</Goods>
|
||
</template>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</template>
|
||
|
||
<style
|
||
scoped
|
||
lang="scss"
|
||
>
|
||
.scroll-view {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.scroll-inner {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 20rpx;
|
||
|
||
.scroll-item {
|
||
flex-shrink: 0;
|
||
max-width: 290rpx;
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
|
||
.good-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 20rpx;
|
||
|
||
.price {
|
||
color: #EE6D46;
|
||
font-size: 30rpx;
|
||
|
||
.tip {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.sale {
|
||
color: #999999;
|
||
}
|
||
|
||
.btn {
|
||
background: #ee6d46;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 10rpx 24rpx;
|
||
transition: all .3s;
|
||
|
||
&:active {
|
||
transform-origin: right bottom;
|
||
scale: .9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|