You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
816 lines
21 KiB
816 lines
21 KiB
<template> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#fff" |
|
></u-navbar> |
|
<view class="body-background"></view> |
|
<view class="screen-body row" :class="{pad:(tabCheck === 'item')}"> |
|
<u-row :custom-style="{boxSizing:'border-box',width:'100%',flexWrap:'wrap'}"> |
|
<u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0rpx 26rpx',boxSizing:'border-box'}"> |
|
<!-- <u-tabs--> |
|
<!-- :list="list"--> |
|
<!-- u-sticky--> |
|
<!-- lineWidth="64"--> |
|
<!-- lineHeight="4"--> |
|
<!-- :inactiveStyle="{color:'#AFB5BE'}"--> |
|
<!-- :activeStyle="{color:'#F47210'}"--> |
|
<!-- lineColor="#F47210"--> |
|
<!-- :custom-style="{margin:'auto'}"--> |
|
<!-- :scrollable="false"--> |
|
<!-- :current="current"--> |
|
<!-- @change="tabsChange"--> |
|
<!-- ></u-tabs>--> |
|
</u-col> |
|
<u-col |
|
:custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:((tabCheck === 'item')?'0 0':'0 26rpx'),boxSizing:'border-box'}"> |
|
<view class="screen-container row"> |
|
<view class="screen-search col-12" :style="{width:'100%',display:'flex'}"> |
|
<u-input @blur="getServiceList(true)" v-model="pages.name" shape="circle" placeholder="小区/商圈/地铁站" |
|
prefixIcon="search" prefix-icon-style="font-size:32rpx;" |
|
custom-style="background-color:#F5F5F6;"></u-input> |
|
</view> |
|
<view class="item-screen" :style="{display:'block'}" style="width:100%;"> |
|
<u-tabs |
|
:list="listItem" |
|
lineWidth="64" |
|
lineHeight="4" |
|
lineColor="#F47210" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#FF9545'}" |
|
:scrollable="false" |
|
:custom-style="{margin:'auto',width:'auto'}" |
|
@change="tabsChangeItem" |
|
></u-tabs> |
|
</view> |
|
<view :style="{width:'100%',display:'flex'}"> |
|
<view class="row" style="justify-content: space-around;margin-top:10rpx;"> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row " @click="showStreetPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(pages.jurisdiction!=='')" text="辖区" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="button-icon"> |
|
<u-icon name="arrow-down-fill" size="12"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row " @click="showRentPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(pages.type!=='')" text="类别" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="button-icon"> |
|
<u-icon name="arrow-down-fill" size="12"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- --> |
|
</view> |
|
|
|
</u-col> |
|
</u-row> |
|
</view> |
|
|
|
<view class="map-container" :style="{display:(tabCheck === 'room'?'flex':'none')}" > |
|
<view class="top-map" :style="{marginTop:size.height+'px'}"> |
|
<view id="map" class="map" v-if="tabCheck === 'room'"> |
|
<MzMap ref="mzMap" :coordinates="roomCoordinate" @markerTap="markerTap" @tap="mapTap" ></MzMap> |
|
</view> |
|
|
|
</view> |
|
<view id="popMap" class="popMap row " v-if="popMapShow"> |
|
<view class="pop-container row"> |
|
<view class="title row"> |
|
<view class="value"> |
|
<u-text :text="mapData.name" color="#020B18" size="32"></u-text> |
|
</view> |
|
<view class="button" style="width:50rpx;height:50rpx;"> |
|
<u-image mode="widthFix" width="=50" height="50" :src="staticImage.mapClose" @click="popMapShow = false"></u-image> |
|
</view> |
|
</view> |
|
<view class="address row"> |
|
<view class="value"> |
|
<u-text :text="mapData.address" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class="button" style="width:50rpx;height:50rpx;"> |
|
<u-image mode="widthFix" width="=50" height="50" :src="staticImage.position" @click="callPostion"></u-image> |
|
</view> |
|
</view> |
|
<view class="pop-add"></view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
|
|
<view class="room-container" :style="{display:(tabCheck === 'room'?'block':'none')} "> |
|
<view class="gradient-background"></view> |
|
<view class="item-container" style="padding:16rpx 26rpx;position: relative;z-index: 2"> |
|
<view class="item" v-for="item in listWater" style="padding:20rpx;background-color:#fff;border-radius:20rpx;margin-bottom:16rpx;"> |
|
<view class="title row" style="margin-bottom:32rpx;"> |
|
<view class="title-item"> |
|
<u-text :text="item.jurisdiction" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class="title-item"> |
|
<u-text :text="'|'" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class="title-item"> |
|
<u-text :text="item.type" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
<view class="body row"> |
|
<view class="cover" style="margin-right:24rpx;"> |
|
<u-image mode="widthFix" width="260" height="160" :src="item.cover" radius="10"></u-image> |
|
</view> |
|
<view class="content col"> |
|
<view class="content-title" style="margin-bottom:32rpx;"> |
|
<u-text :text="item.name" color="#020B18" size="32"></u-text> |
|
</view> |
|
<view class="content-body"> |
|
<view class="body-address row" style="margin-bottom:10rpx;"> |
|
<view class="icon" style="margin-right:20rpx;"> |
|
<u-image mode="widthFix" width="32" height="32" :src="staticImage.listPosition"></u-image> |
|
</view> |
|
<view class="value col " @click="callLocal(item.lat,item.lng)"> |
|
<u-text :text="item.address" color="#AFB5BE" size="28" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text> |
|
</view> |
|
</view> |
|
<view class="body-phone row" style="justify-content: flex-start"> |
|
<view class="icon" style="margin-right:20rpx;"> |
|
<u-image mode="widthFix" width="32" height="32" :src="staticImage.listPhone"></u-image> |
|
</view> |
|
<view class="value row col" @click="callPhone(item.tel)"> |
|
<view class="" style="margin-right:10rpx;"> |
|
<u-text :text="item.connect_name" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class=""> |
|
<u-text :text="item.tel" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28" |
|
marginBottom="30" marginTop="30" @loadmore="getServiceList()" v-if="(tabCheck === 'room')"/> |
|
</view> |
|
|
|
|
|
<uv-picker |
|
ref="streetPicker" |
|
:show="streetShow" |
|
:columns="[serviceList]" |
|
keyName="name" |
|
@close="streetShow = false" |
|
@cancel="streetShow = false" |
|
@confirm="selectStreet"></uv-picker> |
|
<uv-picker |
|
ref="rentPicker" |
|
:show="rentShow" |
|
:columns="[jurisdictionList]" |
|
keyName="name" |
|
@close="rentShow = false" |
|
@cancel="rentShow = false" |
|
@confirm="selectRent"></uv-picker> |
|
</template> |
|
|
|
<script> |
|
import api from "@/utils/functions.js"; |
|
import {goodsList, goodsType, roomList, streetList} from "@/api/shop"; |
|
import MzCard from "@/components/MzCard/index.vue"; |
|
import {imghost} from "@/config/host"; |
|
import shop from "@/pages/Shop/index.vue"; |
|
import {getServiceStreet, serviceStreet, systemConfig} from "@/api/other"; |
|
import MzMap from "@/components/MzMap/index.vue"; |
|
|
|
const img = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png'; |
|
export default { |
|
computed: {}, |
|
components: { |
|
MzMap, |
|
MzCard, |
|
}, |
|
data() { |
|
return { |
|
mapShow:true, |
|
listWater: [], |
|
list1: [], |
|
list2: [], |
|
listWaterItem: [], |
|
list1Item: [], |
|
list2Item: [], |
|
list: [{ |
|
name: '公寓出租', |
|
id: 'room' |
|
}, { |
|
name: '商品兑换', |
|
id: 'item' |
|
},], |
|
listItem: [{ |
|
name: '全部', |
|
id: '' |
|
}, { |
|
name: '驿站展示', |
|
id: 1 |
|
}, { |
|
name: '爱心商家', |
|
id: 2 |
|
},], |
|
tabCheck: 'room', |
|
current: 0, |
|
show: false, |
|
title: '暖新服务', |
|
size: { |
|
height: 0 |
|
}, |
|
pages: { |
|
page: 1, |
|
limit: 10, |
|
category : '', |
|
jurisdiction : '', |
|
type : '', |
|
name : '', |
|
lng: '', |
|
lat: '', |
|
}, |
|
pagesItem: { |
|
page: 1, |
|
limit: 10, |
|
keyword: '', |
|
goods_type: '' |
|
}, |
|
status: 'loadmore', |
|
statusItem: 'loadmore', |
|
streetShow: false, |
|
rentShow: false, |
|
houseShow: false, |
|
priceShow: false, |
|
columns: [], |
|
streetColumns: [], |
|
rentColumns: [ |
|
{ |
|
name: '合租', |
|
value: 1, |
|
}, |
|
{ |
|
name: '整租', |
|
value: 2 |
|
} |
|
], |
|
houseColumns: [], |
|
priceColumns: [], |
|
serviceList:[], |
|
jurisdictionList:[], |
|
lng: 113.324520, |
|
lat: 23.099994, |
|
mapContext: {}, |
|
popMapShow: false, |
|
isGetLocal:false, |
|
roomCoordinate:[ |
|
// { |
|
// latitude:30.810122, |
|
// longitude:104.194078, |
|
// },{ |
|
// latitude:30.57447, |
|
// longitude:103.92377, |
|
// }, |
|
], |
|
mapIcon1:imghost+'/map-icon1.png', |
|
mapIcon2:imghost+'/map-icon2.png', |
|
staticImage:{ |
|
position:imghost+'/map-position.png', |
|
mapClose:imghost+'/map-close.png', |
|
listPosition:imghost+'/service-position.png', |
|
listPhone:imghost+'/service-phone.png', |
|
}, |
|
mapData:{}, |
|
} |
|
}, |
|
onLoad(option) { |
|
console.log('shop', option) |
|
if (option.tabCheck) { |
|
this.tabCheck = option.tabCheck; |
|
if(this.tabCheck === 'item'){ |
|
this.current = 1; |
|
} |
|
} |
|
console.log('shopPage123') |
|
// this.getStreet(); |
|
}, |
|
onReady() { |
|
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar |
|
|
|
}, |
|
onReachBottom() { |
|
this.getServiceList(); |
|
}, |
|
methods: { |
|
getConfig(){ |
|
systemConfig({type:'service_type'}).then(res => { |
|
let data = [{name:'全部'}]; |
|
res.data.map(item => { |
|
data.push( {name:item}); |
|
}); |
|
this.jurisdictionList = data; |
|
}); |
|
systemConfig({type:'jurisdiction'}).then(res => { |
|
let data = [{name:'全部'}]; |
|
res.data.map(item => { |
|
data.push( {name:item}); |
|
}); |
|
this.serviceList = data; |
|
}); |
|
}, |
|
showStreetPicker(){ |
|
this.$refs.streetPicker.open(); |
|
}, |
|
showRentPicker(){ |
|
this.$refs.rentPicker.open(); |
|
}, |
|
tabsChange(e) { |
|
this.tabCheck = e.id |
|
if(this.tabCheck === 'room'){ |
|
this.getServiceList(true); |
|
}else{ |
|
this.getItemList(true); |
|
} |
|
if(this.tabCheck === 'room' && !this.isGetLocal){ |
|
this.getLocal(); |
|
} |
|
}, |
|
getServiceList(clear = false) { |
|
if (clear) { |
|
this.status = 'loadmore' |
|
this.pages.page = 1; |
|
this.listWater = []; |
|
// this.$refs.waterfall.clear(); |
|
this.list1 = []; |
|
this.list2 = []; |
|
this.roomCoordinate = []; |
|
} |
|
if (this.status === 'nomore') { |
|
return false; |
|
} |
|
this.status = 'loading' |
|
if(!this.pages.lat || !this.pages.lng){ |
|
this.getLocal().then(res1 => { |
|
serviceStreet(this.pages).then(res => { |
|
let data = []; |
|
res.data.map(item => { |
|
data.push({ |
|
latitude:parseFloat(item.lat), |
|
longitude:parseFloat(item.lng), |
|
iconPath:(item.category === 1)?this.mapIcon1:this.mapIcon2, |
|
// width:'48rpx', |
|
// height:'48rpx' |
|
}); |
|
return item; |
|
}); |
|
this.roomCoordinate = this.roomCoordinate.concat(this.roomCoordinate,data) |
|
|
|
this.listWater.push.apply(this.listWater, res.data); |
|
if (res.data.length === 0) { |
|
this.status = 'nomore' |
|
}else{ |
|
this.status = 'loadmore' |
|
} |
|
this.pages.page++; |
|
}); |
|
}); |
|
|
|
}else{ |
|
serviceStreet(this.pages).then(res => { |
|
let data = []; |
|
res.data.map(item => { |
|
data.push({ |
|
latitude:parseFloat(item.lat), |
|
longitude:parseFloat(item.lng), |
|
iconPath:(item.category === 1)?this.mapIcon1:this.mapIcon2, |
|
// width:'48rpx', |
|
// height:'48rpx' |
|
}); |
|
return item; |
|
}); |
|
this.roomCoordinate = this.roomCoordinate.concat(this.roomCoordinate,data) |
|
|
|
this.listWater.push.apply(this.listWater, res.data); |
|
if (res.data.length === 0) { |
|
this.status = 'nomore' |
|
}else{ |
|
this.status = 'loadmore' |
|
} |
|
this.pages.page++; |
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
getItemList(clear = false) { |
|
if (clear) { |
|
this.statusItem = 'loadmore' |
|
this.pagesItem.page = 1; |
|
this.listWaterItem = []; |
|
this.$refs.waterfallItem.clear(); |
|
this.list1Item = []; |
|
this.list2Item = []; |
|
} |
|
if (this.statusItem === 'nomore') { |
|
return false; |
|
} |
|
goodsList(this.pagesItem).then(res => { |
|
this.listWaterItem.push.apply(this.listWaterItem, res.data); |
|
if (res.data.length === 0) { |
|
this.statusItem = 'nomore' |
|
} |
|
}) |
|
this.pagesItem.page++; |
|
}, |
|
changeList(e) { |
|
this[e.name].push(e.value) |
|
}, |
|
changeListItem(e) { |
|
this[e.name + 'Item'].push(e.value) |
|
}, |
|
selectType() { |
|
}, |
|
getStreet() { |
|
streetList({}).then(res => { |
|
this.streetColumns = res.data; |
|
}); |
|
}, |
|
getGoodsType() { |
|
// goodsType({}).then(res => { |
|
// this.listItem = res.data.map(item => { |
|
// return { |
|
// name: item |
|
// } |
|
// }); |
|
// }); |
|
}, |
|
selectRent(e) { |
|
if(e.value[0].name === '全部') { |
|
this.pages.type = ''; |
|
}else{ |
|
this.pages.type = e.value[0].name; |
|
} |
|
this.getServiceList(true); |
|
this.rentShow = false; |
|
}, |
|
selectHouse() { |
|
this.getServiceList(true); |
|
this.houseShow = false; |
|
}, |
|
selectPrice() { |
|
this.getServiceList(true); |
|
this.priceShow = false; |
|
}, |
|
selectStreet(e) { |
|
if(e.value[0].name === '全部'){ |
|
this.pages.jurisdiction = ''; |
|
}else{ |
|
this.pages.jurisdiction = e.value[0].name; |
|
} |
|
this.getServiceList(true); |
|
this.streetShow = false; |
|
}, |
|
tabsChangeItem(e) { |
|
console.log(e) |
|
this.pages.category = e.id |
|
this.getServiceList(true) |
|
}, |
|
navTo(url) { |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
markerTap(e) { |
|
let that = this |
|
let id = e.markerId; |
|
this.mapData = that.listWater[id]; |
|
console.log('mapData',this.mapData) |
|
this.popMapShow = true; |
|
}, |
|
mapTap() { |
|
this.popMapShow = false; |
|
}, |
|
afterCreateMap(){ |
|
this.getServiceList(true); |
|
}, |
|
callPostion(){ |
|
const latitude=parseFloat(this.mapData.lat); |
|
const longitude=parseFloat(this.mapData.lng); |
|
uni.openLocation({ |
|
latitude:latitude, |
|
longitude:longitude, |
|
name:this.mapData.name, |
|
}) |
|
}, |
|
callLocal(lat,lng){ |
|
const latitude=parseFloat(lat); |
|
const longitude=parseFloat(lng); |
|
uni.openLocation({ |
|
latitude:latitude, |
|
longitude:longitude, |
|
name:this.mapData.name, |
|
}) |
|
}, |
|
callPhone(phone){ |
|
uni.makePhoneCall({ |
|
phoneNumber: phone?.toString() |
|
}); |
|
}, |
|
getLocal() { |
|
let that = this; |
|
return new Promise((relove, reject) => { |
|
uni.getLocation({ |
|
type: 'wgs84', |
|
success: function (res) { |
|
that.pages.lng = res.longitude; |
|
that.pages.lat = res.latitude; |
|
relove(res) |
|
}, |
|
}) |
|
}) |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
mounted() { |
|
let shopMore = uni.getStorageSync('shopMore'); |
|
if(shopMore){ |
|
this.current = 1; |
|
this.tabCheck = 'item'; |
|
uni.setStorageSync('shopMore',false); |
|
} |
|
this.getItemList(); |
|
this.getStreet(); |
|
this.getGoodsType(); |
|
this.getConfig(); |
|
this.getServiceList(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.room-container { |
|
box-sizing: border-box; |
|
width: 100%; |
|
} |
|
|
|
.body-background { |
|
background: { |
|
color: #F5F5F6; |
|
} |
|
} |
|
|
|
.screen-type-button { |
|
justify-content: space-between; |
|
//border:2rpx solid #eee; |
|
align-items: center; |
|
//padding:12rpx 24rpx; |
|
border-radius: 10rpx; |
|
|
|
.button-text { |
|
margin-right: 10rpx; |
|
} |
|
} |
|
|
|
.screen-date-button { |
|
justify-content: space-between; |
|
border: 2rpx solid #eee; |
|
align-items: center; |
|
padding: 12rpx 24rpx; |
|
border-radius: 10rpx; |
|
|
|
.button-date { |
|
//margin-right:50rpx; |
|
} |
|
} |
|
|
|
.screen-button-group { |
|
justify-content: flex-start; |
|
|
|
.screen-button + .screen-button { |
|
margin-left: 16rpx; |
|
} |
|
} |
|
|
|
.screen-body { |
|
position: fixed; |
|
top: 91px; |
|
z-index: 9; |
|
transition-duration: .2s; |
|
transition-timing-function: ease-in-out; |
|
transition-delay: .2s; |
|
|
|
-webkit-transition-duration: .2s; |
|
-webkit-transition-timing-function: ease-in-out; |
|
-webkit-transition-delay: .2s; |
|
background: { |
|
color: transparent; |
|
} |
|
padding: 16rpx 26rpx; |
|
|
|
&.pad { |
|
padding: 0rpx 26rpx 16rpx 26rpx; |
|
position: sticky; |
|
background: #fff; |
|
|
|
.screen-container { |
|
margin-bottom: 0; |
|
} |
|
|
|
} |
|
|
|
.screen-container { |
|
position: relative; |
|
opacity: 1; |
|
margin-top: 32rpx; |
|
margin-bottom: 26rpx; |
|
} |
|
|
|
} |
|
|
|
.item-screen { |
|
|
|
} |
|
|
|
@keyframes show { |
|
0% { |
|
display: block; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.show { |
|
animation: show .5s; |
|
} |
|
|
|
.screen-search { |
|
padding-bottom: 16rpx; |
|
} |
|
|
|
.top-map { |
|
width: 100%; |
|
} |
|
|
|
#map { |
|
width: 100%; |
|
height: 1000rpx; |
|
background-color: gray; |
|
} |
|
|
|
.room-container { |
|
position: relative; |
|
bottom:20rpx; |
|
width: 100%; |
|
box-sizing: border-box; |
|
background: rgba(245, 245, 246, 1); |
|
border-radius: 20rpx 20rpx 0 0; |
|
padding: 24rpx 0; |
|
|
|
&.item-container { |
|
padding: 0rpx 0; |
|
background: none; |
|
margin-top: 16rpx; |
|
} |
|
} |
|
|
|
.waterfall-item { |
|
overflow: hidden; |
|
background-color: #fff; |
|
border-radius: 20rpx; |
|
margin-bottom: 16rpx; |
|
|
|
.waterfall-item-body { |
|
padding: 18rpx 16rpx; |
|
|
|
.title { |
|
margin-bottom: 12rpx; |
|
} |
|
|
|
.ext-container { |
|
margin-bottom: 8rpx; |
|
font-size: 28rpx; |
|
font-weight: 400; |
|
color: #AFB5BE; |
|
|
|
.street { |
|
color: #178AF2; |
|
margin-left: auto; |
|
} |
|
} |
|
|
|
.tags { |
|
margin-bottom: 10rpx; |
|
|
|
.tag { |
|
font-size: 24rpx; |
|
color: #AFB5BE; |
|
font-weight: 400; |
|
padding: 10rpx 12rpx; |
|
background-color: rgba(175, 181, 190, 0.1); |
|
border-radius: 8rpx; |
|
margin-right: 8rpx; |
|
margin-bottom: 8rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.item-screen { |
|
background-color: #fff; |
|
} |
|
|
|
#map, .map { |
|
width: 100%; |
|
height: 1000rpx; |
|
} |
|
|
|
#popMap, .popMap { |
|
position: absolute; |
|
z-index: 9999; |
|
width: 100%; |
|
left: 0; |
|
justify-content: center; |
|
|
|
.pop-container { |
|
position: relative; |
|
background: { |
|
color: #fff; |
|
}; |
|
width: 550rpx; |
|
border-radius: 10rpx; |
|
padding: 26rpx; |
|
|
|
.title { |
|
justify-content: space-between; |
|
margin-bottom: 18rpx; |
|
} |
|
|
|
.address { |
|
justify-content: space-between; |
|
} |
|
|
|
.pop-add { |
|
position: absolute; |
|
bottom: -15rpx; |
|
left: 20%; |
|
width: 30rpx; |
|
height: 30rpx; |
|
transform: rotateZ(45deg); |
|
z-index: -1; |
|
background: { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.map-container { |
|
position: relative; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
::v-deep .u-tabs__wrapper__nav__line { |
|
left: 24rpx; |
|
} |
|
::v-deep .u-text__price{ |
|
display:none; |
|
} |
|
.room-container{ |
|
position: relative; |
|
overflow:hidden; |
|
.gradient-background{ |
|
height:500rpx; |
|
width:100%; |
|
position: absolute; |
|
top:0; |
|
left:0; |
|
z-index:1; |
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); |
|
} |
|
.water-container{ |
|
position: relative; |
|
z-index: 2; |
|
} |
|
} |
|
</style> |