@@ -1,39 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view class="pkg-product-festival">
|
||||||
|
<hx-navbar
|
||||||
|
:fixed="true"
|
||||||
|
:background-color="[[13,197,197],[13,197,197]]"
|
||||||
|
statusBarFontColor="#ffffff"
|
||||||
|
barPlaceholder="hidden"
|
||||||
|
transparent="auto"
|
||||||
|
color='#ffffff'
|
||||||
|
/>
|
||||||
|
<view v-if="isLoad">
|
||||||
|
<image
|
||||||
|
v-if="topImage"
|
||||||
|
:src="topImage"
|
||||||
|
class="top-img"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
v-for="(content,cIndex) in contents"
|
||||||
|
:key="cIndex"
|
||||||
|
class="section"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="content.backgroundImage"
|
||||||
|
class="section-bg"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
:class="cIndex === 0 ? 'section12' : 'section8'"
|
||||||
|
class="list flex flex-wrap"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
v-for="(item,index) in content.products"
|
||||||
|
:key="index"
|
||||||
|
:class="cIndex === 0 ? 'span12' : 'span8'"
|
||||||
|
:src="item.image"
|
||||||
|
mode="scaleToFill"
|
||||||
|
@click="$global.navToGoods(item.id)"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<goo-skeleton v-else />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {getFestival} from "@/api/product";
|
// 节日专题
|
||||||
|
import { getFestival } from '@/api/product'
|
||||||
|
import GooSkeleton from '@/components/GooSkeleton/index.vue'
|
||||||
export default {
|
export default {
|
||||||
name: "festival", // 节日专题
|
name: 'Festival',
|
||||||
|
components: {
|
||||||
|
GooSkeleton
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
isLoad: false,
|
||||||
topImage: '',
|
topImage: '',
|
||||||
contents: []
|
contents: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
getFestival().then(({data}) => {
|
getFestival().then(({data}) => {
|
||||||
this.topImage = data.topImage;
|
this.isLoad = true
|
||||||
this.contents = data.contents;
|
this.topImage = data.topImage
|
||||||
|
this.contents = data.contents
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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">
|
<style scoped lang="less">
|
||||||
.pkg-product-festival {
|
.pkg-product-festival {
|
||||||
image {
|
image {
|
||||||
@@ -70,12 +105,14 @@ export default {
|
|||||||
top: 350rpx;
|
top: 350rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.span12 {
|
.span12 {
|
||||||
width: 332rpx;
|
width: 332rpx;
|
||||||
height: 520rpx;
|
height: 520rpx;
|
||||||
margin: 0 22rpx 24rpx 0;
|
margin: 0 0 24rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.span12:nth-child(2n) {
|
.span12:nth-child(2n) {
|
||||||
@@ -85,7 +122,7 @@ export default {
|
|||||||
.span8 {
|
.span8 {
|
||||||
width: 234rpx;
|
width: 234rpx;
|
||||||
height: 384rpx;
|
height: 384rpx;
|
||||||
margin: 0 8rpx 24rpx 0;
|
margin: 0 0 24rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.span8:nth-child(3n) {
|
.span8:nth-child(3n) {
|
||||||
|
|||||||
Reference in New Issue
Block a user