Fix(节日专题):[#1006, #1007]1、缺少返回按钮;2、页面左右滑动

This commit is contained in:
lifizer
2024-03-26 22:36:13 +08:00
parent 5bb9a2a757
commit 78baa1ea47
+60 -23
View File
@@ -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) {