100 lines
1.8 KiB
Vue
100 lines
1.8 KiB
Vue
<script>
|
|
import {getHomestay} from "@/api/product";
|
|
|
|
export default {
|
|
name: "homestay", // 民宿专题
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
topImage: '',
|
|
contents: [],
|
|
id: null
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id;
|
|
|
|
getHomestay(this.id).then(({data}) => {
|
|
this.topImage = data.topImage;
|
|
this.contents = data.contents;
|
|
})
|
|
},
|
|
methods: {
|
|
goInnDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/pagesInn/inn/innHome?id=${item.id}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="pkg-product-homestay">
|
|
<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===2?'section12':'section24'">
|
|
<image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
|
|
v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.pkg-product-homestay {
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.top-img {
|
|
width: 100vw;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
.section12 {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.section24 {
|
|
padding: 0 61rpx;
|
|
}
|
|
|
|
.section {
|
|
position: relative;
|
|
width: 100vw;
|
|
|
|
.section-bg{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.list{
|
|
position: absolute;
|
|
top: 350rpx;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
.span24 {
|
|
width: 628rpx;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.span12 {
|
|
width: 332rpx;
|
|
height: 500rpx;
|
|
margin: 0 22rpx 24rpx 0;
|
|
}
|
|
|
|
.span12:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |