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>
|