liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(民宿&节日&尖货专题页):使用模板配置渲染

Browse Source
This commit is contained in:
lifizer
2024-08-13 17:19:04 +08:00
parent 017f34bbf4
commit 75a821eb6c
9 changed files with 928 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/components/ThemePageTemplate3.vue
+108
View File
@@ -0,0 +1,108 @@
<template>
<view>
<image
:src="topImage"
class="top-img"
mode="widthFix"
/>
<!-- 第二页 -->
<view class="page-wrap">
<view class="page-2">
<image
:src="templateProperties.page3BackgroundImage"
class="section-bg"
mode="widthFix"
/>
<view class="list flex flex-wrap">
<image
v-for="(item, index) in templateProperties.page3Links"
:key="index"
:src="item.image"
class="item"
mode="scaleToFill"
@click="itemClick(item)"
/>
</view>
</view>
</view>
<!-- 第三页 -->
<view class="page-wrap">
<view class="page-2">
<image
:src="templateProperties.page3BackgroundImage"
class="section-bg"
mode="widthFix"
/>
<view class="list flex flex-wrap">
<image
v-for="(item, index) in templateProperties.page3Links"
:key="index"
:src="item.image"
class="item"
mode="scaleToFill"
@click="itemClick(item)"
/>
</view>
</view>
</view>
<!-- 第四页 -->
<view class="page-wrap">
<view class="page-2">
<image
:src="templateProperties.page4BackgroundImage"
class="section-bg"
mode="widthFix"
/>
<view class="list flex flex-wrap">
<image
v-for="(item, index) in templateProperties.page4Links"
:key="index"
:src="item.image"
class="item"
mode="scaleToFill"
@click="itemClick(item)"
/>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 模板3
*/
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
export default {
name: 'ThemePageTemplate3',
mixins: [themeTemplateMixins]
}
</script>
<style scoped lang="less">
.top-img {
display: block;
width: 100%;
}
.page-wrap {
position: relative;
.page-2 {
.section-bg {
display: block;
width: 100%;
height: auto;
}
.list {
position: absolute;
top: 400rpx;
left: 35rpx;
right: 35rpx;
.item {
display: block;
width: 680rpx;
height: 700rpx;
margin: 0 0 35rpx 0;
}
}
}
}
</style>