perry-mall/components/list/list-one.vue

128 lines
4.4 KiB
Vue

<template>
<view>
<view class="swiper-item mar-x40" v-for="(item,index) in list" :key="index">
<!-- 活动商品 start -->
<h1 style="" class="fon36 bold">{{item.title}}</h1>
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.content}}</view>
<view class="posir">
<image class="radius30" :src="item.mainImg" mode="aspectFill" style="height: 425rpx;width: 100%;"></image>
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20" style="background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;">限时优惠</view>
</view>
<!-- 活动商品 end -->
<!-- 子商品 start -->
<view class="disjbac fw">
<view class="width47 mar-s50 posir" v-for="(childrenitem,childrenindex) in item.childrenList" :key="childrenindex">
<image :src="childrenitem.childrenImg" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{childrenitem.childrenTitle}}</view>
<view class="fon30 colpeili">{{childrenitem.childrenPrice}}</view>
<view v-if="childrenitem.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20" style="background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;"></view>
</view>
</view>
<!-- end -->
</view>
</view>
</template>
<script>
export default {
name:"list-one",
props:{
list:{
type:Array,
default:()=>{
return [
{
title:'虎年快乐',
content:'欢庆虎年,与所爱之人共燃盛典烟花',
mainImg:'/static/public/member-head.png',
isActivity:true,
childrenList:[
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:true,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
}
]
},
{
title:'虎年快乐',
content:'欢庆虎年,与所爱之人共燃盛典烟花',
mainImg:'/static/public/member-head.png',
isActivity:true,
childrenList:[
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:true,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
}
]
},
{
title:'虎年快乐',
content:'欢庆虎年,与所爱之人共燃盛典烟花',
mainImg:'/static/public/member-head.png',
isActivity:true,
childrenList:[
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:true,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
},
{
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
childrenPrice:'2,000',
isActivity:false,
}
]
}
]
}
}
},
data() {
return {
};
}
}
</script>
<style>
</style>