97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<script>
|
|
import {getFestival} from "@/api/product";
|
|
|
|
export default {
|
|
name: "festival", // 节日专题
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
topImage: '',
|
|
contents: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
getFestival().then(({data}) => {
|
|
this.topImage = data.topImage;
|
|
this.contents = data.contents;
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="pkg-product-festival">
|
|
<image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
|
|
|
|
<view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
|
|
<image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
|
|
|
|
<view class="list flex flex-wrap" :class="cIndex===0?'section12':'section8'">
|
|
<image :class="cIndex===0?'span12':'span8'" mode="scaleToFill" :src="item.image"
|
|
v-for="(item,index) in content.products" :key="index" @click="$global.navToGoods(item.id)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.pkg-product-festival {
|
|
image {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.top-img {
|
|
width: 100vw;
|
|
height: auto;
|
|
}
|
|
|
|
.section12 {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.section8 {
|
|
padding: 0 16rpx;
|
|
}
|
|
|
|
.section {
|
|
position: relative;
|
|
width: 100vw;
|
|
|
|
.section-bg {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.list {
|
|
position: absolute;
|
|
top: 350rpx;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
.span12 {
|
|
width: 332rpx;
|
|
height: 520rpx;
|
|
margin: 0 22rpx 24rpx 0;
|
|
}
|
|
|
|
.span12:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.span8 {
|
|
width: 234rpx;
|
|
height: 384rpx;
|
|
margin: 0 8rpx 24rpx 0;
|
|
}
|
|
|
|
.span8:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |