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