@@ -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>
|
||||
import {getFestival} from "@/api/product";
|
||||
|
||||
// 节日专题
|
||||
import { getFestival } from '@/api/product'
|
||||
import GooSkeleton from '@/components/GooSkeleton/index.vue'
|
||||
export default {
|
||||
name: "festival", // 节日专题
|
||||
name: 'Festival',
|
||||
components: {
|
||||
GooSkeleton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
isLoad: false,
|
||||
topImage: '',
|
||||
contents: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
getFestival().then(({data}) => {
|
||||
this.topImage = data.topImage;
|
||||
this.contents = data.contents;
|
||||
this.isLoad = true
|
||||
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 {
|
||||
@@ -70,12 +105,14 @@ export default {
|
||||
top: 350rpx;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.span12 {
|
||||
width: 332rpx;
|
||||
height: 520rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
margin: 0 0 24rpx 0;
|
||||
}
|
||||
|
||||
.span12:nth-child(2n) {
|
||||
@@ -85,7 +122,7 @@ export default {
|
||||
.span8 {
|
||||
width: 234rpx;
|
||||
height: 384rpx;
|
||||
margin: 0 8rpx 24rpx 0;
|
||||
margin: 0 0 24rpx 0;
|
||||
}
|
||||
|
||||
.span8:nth-child(3n) {
|
||||
|
||||
Reference in New Issue
Block a user