59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<scroll-view scroll-y class="pro-container box-border" :style="{backgroundImage: 'url('+config[brandName]?.src+')',height:`${config[brandName].height}rpx`}">
|
|
<view class="pro-wrapper flex flex-wrap">
|
|
<view v-for="(item,index) in products" :key="index" class="product-container">
|
|
<ProductItem :detail="item" :index="index"/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ProductItem from './product-item'
|
|
import config from '../config'
|
|
const props = defineProps({
|
|
products:{
|
|
type:Array,
|
|
required: true,
|
|
default:() => ([])
|
|
},
|
|
brandName:{
|
|
type:String,
|
|
required:true,
|
|
default:''
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pro-container{
|
|
width:780rpx;
|
|
padding: 136rpx 60rpx 72rpx;
|
|
// margin-bottom: -24rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
overflow-y: auto;
|
|
}
|
|
.pro-wrapper{
|
|
.product-container{
|
|
width: calc((100% - 40rpx) / 3);
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
// view:nth-child(3n) > .pro-item-wrapper{
|
|
// margin-right:0 !important;
|
|
// }
|
|
view:nth-child(3n) {
|
|
margin-right:0 !important;
|
|
}
|
|
// view:nth-child(3n+1):nth-last-child(-n+3) > .pro-item-wrapper,
|
|
// view:nth-child(3n+1):nth-last-child(-n+3)~view > .pro-item-wrapper{
|
|
// margin-bottom: 0 !important;
|
|
// }
|
|
view:nth-child(3n+1):nth-last-child(-n+3),
|
|
view:nth-child(3n+1):nth-last-child(-n+3)~view{
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
</style> |