Feat(民宿&节日&尖货专题页):使用模板配置渲染
This commit is contained in:
lifizer
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<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"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<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"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第五页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-5">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板1
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate1',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 1350rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.span24 {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
}
|
||||
.span12 {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-5 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 350rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<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-4">
|
||||
<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 class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板2
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate2',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 840rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 25rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,140 @@
|
||||
<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
|
||||
:src="templateProperties.page2Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<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
|
||||
:src="templateProperties.page3Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<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-4">
|
||||
<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>
|
||||
/**
|
||||
* 模板4
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate4',
|
||||
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: 0;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 750rpx;
|
||||
height: 400rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
&.item1 {
|
||||
height: 800rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 22rpx 22rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user