97 lines
1.7 KiB
Vue
97 lines
1.7 KiB
Vue
|
<!--
|
|||
|
|
@name: 两行商品
|
|||
|
|
@author: kahu4
|
|||
|
|
@date: 2023-11-01 16:49
|
|||
|
|
@description：TwoRowGoodROw
|
|||
|
|
@update: 2023-11-01 16:49
|
|||
|
|
-->
|
|||
|
|
<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>
|
|||
|
|
<view
|
|||
|
|
class="two-row"
|
|||
|
|
v-if=" props.products"
|
|||
|
|
>
|
|||
|
|
<template v-for="item in props.products.slice(0,2)">
|
|||
|
|
<view class="row-item">
|
|||
|
|
<Goods
|
|||
|
|
row
|
|||
|
|
:goods="item"
|
|||
|
|
img-width="220rpx"
|
|||
|
|
info-padding="20rpx 20rpx"
|
|||
|
|
>
|
|||
|
|
<template #options>
|
|||
|
|
<Options
|
|||
|
|
style="width: 100%;"
|
|||
|
|
:goods="item"
|
|||
|
|
btn-text="立即抢购"
|
|||
|
|
show-btn
|
|||
|
|
></Options>
|
|||
|
|
</template>
|
|||
|
|
</Goods>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style
|
|||
|
|
scoped
|
|||
|
|
lang="scss"
|
|||
|
|
>
|
|||
|
|
.two-row {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.row-item {
|
|||
|
|
@include usePadding(15, 14);
|
|||
|
|
background: #fff;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.good-bottom {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
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>
|