711 lines
21 KiB
Vue
711 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<view class="waper">
|
|||
|
|
<u-navbar left-icon-size="0" :placeholder="true" bgColor="#fff">
|
|||
|
|
<view slot='center' class="navbar_title">导览</view>
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="tabs-box" v-if="!showSwiper">
|
|||
|
|
<scroll-view scroll-x="true">
|
|||
|
|
<view class="tab" :class="{active: activeType === item.id}" v-for="(item, index) in typeList" :key="index" @click="getMarkers(item.id)">{{item.potypeName}}</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<map id="map" :style="'height: calc(100% - ' + windowBottom + 'px)'"
|
|||
|
|
:enable-building="enableBuilding" :show-location="showLocation" :latitude="latitude"
|
|||
|
|
:longitude="longitude" :markers="markers" :scale="scale" :max-scale="14.5" @markertap="markertap" @labeltap="labeltap" :polyline="polyline"></map>
|
|||
|
|
<view class="btn-box" :style="'bottom: ' + windowBottom2 + 'px'">
|
|||
|
|
<view class="location" @click="changeLocation">
|
|||
|
|
<image class="icon" src="https://common/location.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="location" @click="closeLine" v-if="showLine || showSwiper">
|
|||
|
|
<image class="icon" src="https://common/out.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="line_btn" v-if="showBtn" @click="getGuideList" :style="'bottom: ' + windowBottom3 + 'px'">
|
|||
|
|
<image class="img" src="https://common/lineBtn.png" mode=""></image>
|
|||
|
|
<view>游览</view>
|
|||
|
|
<view>线路</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="line_swiper" v-if="showLine" :style="'bottom: ' + windowBottom1 + 'px'">
|
|||
|
|
<swiper :interval="5000" :duration="1000" previous-margin="32rpx" next-margin="32rpx" :current="current1" @change="swiperChange1">
|
|||
|
|
<swiper-item v-for="(i, index) in lineList" :key="index">
|
|||
|
|
<view class="line_box">
|
|||
|
|
<view class="line_waper">
|
|||
|
|
<view class="title">{{i.name}}</view>
|
|||
|
|
<view class="msg">预计游览{{i.duration}}小时</view>
|
|||
|
|
<view class="tag">
|
|||
|
|
<view>难度：{{i.difficultyName}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @click="startLine(i)">
|
|||
|
|
<view>开始</view>
|
|||
|
|
<view>游览</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
<!-- -->
|
|||
|
|
<view class="detail_swiper" v-if="showSwiper" :style="'bottom: ' + windowBottom1 + 'px'">
|
|||
|
|
<swiper :interval="5000" :duration="1000" previous-margin="32rpx" next-margin="32rpx" :current="current2" @change="swiperChange2">
|
|||
|
|
<swiper-item v-for="(i, index) in lineInfo" :key="index" :class="[current2 == index ? 'activeClass' : 'defaultClass']" @click="goSpot(i)">
|
|||
|
|
<view class="detail_box">
|
|||
|
|
<view class="detail_waper">
|
|||
|
|
<view class="num">{{index+1}}</view>
|
|||
|
|
<view class="con-box">
|
|||
|
|
<view class="title">
|
|||
|
|
<view class="label">{{i.pointName}}</view>
|
|||
|
|
<!-- <view class="voice">
|
|||
|
|
<image class="icon" src="https://common/voice.png" mode=""></image>
|
|||
|
|
<view class="time">2:30</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="text">{{i.blurb}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="popup1" class="popup-box">
|
|||
|
|
<view class="popup-content1">
|
|||
|
|
<view class="head-box" v-if="data1.ticketId">
|
|||
|
|
<view class="name">
|
|||
|
|
<view class="h4">{{data1.ticketName}}</view>
|
|||
|
|
<view class="price">
|
|||
|
|
¥{{data1.salesRice}}
|
|||
|
|
<text>起</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="go" @click="buyTicket(data1.ticketId)">
|
|||
|
|
去购买
|
|||
|
|
<u-icon name="arrow-right" color="#666666" size="28rpx"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<image class="con-img" :src="$utils.setImgUrl(data1.image)" mode=""></image>
|
|||
|
|
<view class="con-right">
|
|||
|
|
<view class="title">{{data1.pointName}}</view>
|
|||
|
|
<view class="describe">{{data1.blurb}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn">
|
|||
|
|
<image class="btn-img" src="https://common/go.png" mode=""></image>
|
|||
|
|
<view class="label" @click="goLocation(data1)">去这里</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<tabbar name="guide"></tabbar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import tabbar from '@/components/tabbar/index.vue'
|
|||
|
|
import _config from '../../common/http/config.js'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
tabbar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
windowBottom: 0,
|
|||
|
|
windowBottom1: 0,
|
|||
|
|
windowBottom2: 0,
|
|||
|
|
windowBottom3: 0,
|
|||
|
|
popup1: false,
|
|||
|
|
mapCtx: null,
|
|||
|
|
showLine: false,
|
|||
|
|
showSwiper: false,
|
|||
|
|
showBtn: true,
|
|||
|
|
current1: 0,
|
|||
|
|
current2: 0,
|
|||
|
|
// 路线集合
|
|||
|
|
lineList: [],
|
|||
|
|
// 路线点集合
|
|||
|
|
lineInfo: null,
|
|||
|
|
id: 0,
|
|||
|
|
bgColor: 'transparent',
|
|||
|
|
scale: null,
|
|||
|
|
enableBuilding: false,
|
|||
|
|
showLocation: true,
|
|||
|
|
latitude: null,
|
|||
|
|
longitude: null,
|
|||
|
|
polyline: [],
|
|||
|
|
markers: [],
|
|||
|
|
// tab类型集合
|
|||
|
|
typeList: [],
|
|||
|
|
showPointList: [],
|
|||
|
|
// 所有数据
|
|||
|
|
allData: {},
|
|||
|
|
// 选中tab类型id、数据点类型id
|
|||
|
|
activeType: '',
|
|||
|
|
markerId: '',
|
|||
|
|
// 数据点id
|
|||
|
|
spotId: '',
|
|||
|
|
// 当前tab类型点图标
|
|||
|
|
pathIcon: '',
|
|||
|
|
// 弹窗数据
|
|||
|
|
data1: {},
|
|||
|
|
// 是否点击查看所有路线
|
|||
|
|
isAllLine: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop + uni.upx2px(72);
|
|||
|
|
this.windowBottom1 = this.$safeAreaBottom + uni.upx2px(134);
|
|||
|
|
this.windowBottom2 = this.$safeAreaBottom + uni.upx2px(340);
|
|||
|
|
this.windowBottom3 = this.$safeAreaBottom + uni.upx2px(140);
|
|||
|
|
this.mapCtx = uni.createMapContext('map', this);
|
|||
|
|
this.pointMapList()
|
|||
|
|
},
|
|||
|
|
onReady() {},
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
async pointMapList() {
|
|||
|
|
let info = await this.$http.pointMapList({mapId: 1})
|
|||
|
|
if (info.code === 200) {
|
|||
|
|
this.allData = info.data
|
|||
|
|
this.typeList = this.allData.pointTypeList
|
|||
|
|
this.activeType = this.typeList[0].id
|
|||
|
|
this.latitude = this.allData.centerLatitude
|
|||
|
|
this.longitude = this.allData.centerLongitude
|
|||
|
|
this.scale = this.allData.zoomLevel
|
|||
|
|
this.addImageLayer(this.allData);
|
|||
|
|
this.getMarkers(this.activeType)
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(info.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addImageLayer(data) {
|
|||
|
|
const imageLayerOptions = {
|
|||
|
|
id: data.id,
|
|||
|
|
src: _config.url + data.image,
|
|||
|
|
zIndex: 1,
|
|||
|
|
bounds: {
|
|||
|
|
southwest: {
|
|||
|
|
longitude: data.leftLongitude,
|
|||
|
|
latitude: data.leftLatitude
|
|||
|
|
},
|
|||
|
|
northeast: {
|
|||
|
|
longitude: data.rightLongitude,
|
|||
|
|
latitude: data.rightLatitude
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.mapCtx.addGroundOverlay(imageLayerOptions);
|
|||
|
|
},
|
|||
|
|
getMarkers(id) {
|
|||
|
|
this.activeType = id
|
|||
|
|
this.popup1 = false;
|
|||
|
|
this.showLine = false;
|
|||
|
|
this.showSwiper = false;
|
|||
|
|
this.showBtn = true;
|
|||
|
|
|
|||
|
|
this.getMarkersList()
|
|||
|
|
},
|
|||
|
|
getMarkersList() {
|
|||
|
|
this.polyline = [];
|
|||
|
|
this.markers = []
|
|||
|
|
let index = null
|
|||
|
|
this.typeList.forEach((n, i) => {
|
|||
|
|
if (n.id == this.activeType) {
|
|||
|
|
index = i
|
|||
|
|
this.showPointList = this.typeList[index]
|
|||
|
|
this.pathIcon = this.showPointList.image
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (!this.showPointList.pointDataList) return;
|
|||
|
|
this.showPointList.pointDataList.forEach((e, i) => {
|
|||
|
|
this.markers.push({
|
|||
|
|
id: e.id,
|
|||
|
|
latitude: e.latitude,
|
|||
|
|
longitude: e.longitude,
|
|||
|
|
width: '90rpx',
|
|||
|
|
height: '90rpx',
|
|||
|
|
iconPath: _config.url + this.pathIcon,
|
|||
|
|
label: {
|
|||
|
|
padding: '10rpx',
|
|||
|
|
content: e.pointName,
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '24rpx',
|
|||
|
|
anchorX: '0',
|
|||
|
|
anchorY: '0',
|
|||
|
|
borderRadius: '4rpx',
|
|||
|
|
bgColor: 'rgba(0,0,0,0.5)',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
labeltap (e) {
|
|||
|
|
this.markerId = e.markerId
|
|||
|
|
this.showDetail(this.markerId)
|
|||
|
|
},
|
|||
|
|
markertap(e) {
|
|||
|
|
this.markerId = e.markerId
|
|||
|
|
this.showDetail(this.markerId)
|
|||
|
|
},
|
|||
|
|
showDetail(id) {
|
|||
|
|
if (!this.showLine && !this.showSwiper) {
|
|||
|
|
this.showBtn = false;
|
|||
|
|
this.isAllLine = false;
|
|||
|
|
this.current1 = 0;
|
|||
|
|
this.getGuide(id)
|
|||
|
|
let f = this.showPointList.pointDataList.find(m => m.id == id)
|
|||
|
|
if (f) {
|
|||
|
|
this.data1 = f
|
|||
|
|
this.popup1 = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buyTicket(id) {
|
|||
|
|
uni.navigateTo({ url: '/pages/scenic/ticket?id=' + id })
|
|||
|
|
},
|
|||
|
|
goLocation(data) {
|
|||
|
|
let latitude = data.latitude;
|
|||
|
|
let longitude = data.longitude;
|
|||
|
|
uni.openLocation({
|
|||
|
|
latitude: Number(latitude),
|
|||
|
|
longitude: Number(longitude),
|
|||
|
|
name: data.pointName,
|
|||
|
|
address: '',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getGuide(id) {
|
|||
|
|
this.spotId = id;
|
|||
|
|
this.guideList()
|
|||
|
|
},
|
|||
|
|
async guideList() {
|
|||
|
|
let info = await this.$http.guideLineList({spotId: this.spotId})
|
|||
|
|
if (info.code === 200) {
|
|||
|
|
this.showLine = true
|
|||
|
|
this.lineList = info.data
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(info.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async startLine (i) {
|
|||
|
|
let info = await this.$http.guideDetail({id: i.id})
|
|||
|
|
if (info.code === 200) {
|
|||
|
|
this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop;
|
|||
|
|
this.showLine = false
|
|||
|
|
this.showSwiper = true
|
|||
|
|
this.popup1 = false
|
|||
|
|
this.current2 = 0
|
|||
|
|
this.lineInfo = info.data.spotGuideList;
|
|||
|
|
if (!this.lineInfo) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
this.polyline = [];
|
|||
|
|
this.getLine(info.data.coordinate);
|
|||
|
|
let markers = [];
|
|||
|
|
let numArr = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩']
|
|||
|
|
this.lineInfo.forEach((e, i) => {
|
|||
|
|
markers.push({
|
|||
|
|
id: e.id,
|
|||
|
|
latitude: e.latitude,
|
|||
|
|
longitude: e.longitude,
|
|||
|
|
width: '90rpx',
|
|||
|
|
height: '90rpx',
|
|||
|
|
iconPath: _config.url + e.image,
|
|||
|
|
title: i,
|
|||
|
|
label: {
|
|||
|
|
padding: '10rpx',
|
|||
|
|
content: numArr[i] + ' ' + e.pointName,
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '24rpx',
|
|||
|
|
anchorX: '0',
|
|||
|
|
anchorY: '0',
|
|||
|
|
borderRadius: '4rpx',
|
|||
|
|
bgColor: 'rgba(0,0,0,0.5)',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
},
|
|||
|
|
callout: {
|
|||
|
|
bgColor: 'transparent'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
this.markers = markers;
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(info.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getLine (line) {
|
|||
|
|
let array = JSON.parse(line);
|
|||
|
|
if (!array) return false;
|
|||
|
|
this.polyline = ([
|
|||
|
|
{ points: array, color: '#EFE7A7', width: 8, dottedLine: false },
|
|||
|
|
{ points: array, color: '#743F00', width: 2, dottedLine: true }
|
|||
|
|
]);
|
|||
|
|
},
|
|||
|
|
async getGuideList () {
|
|||
|
|
this.showBtn = false;
|
|||
|
|
this.isAllLine = true;
|
|||
|
|
this.current1 = 0;
|
|||
|
|
this.getGuide('')
|
|||
|
|
},
|
|||
|
|
closeLine () {
|
|||
|
|
this.popup1 = false;
|
|||
|
|
if (this.showLine) {
|
|||
|
|
this.showLine = false;
|
|||
|
|
this.showBtn = true;
|
|||
|
|
} else if (this.showSwiper) {
|
|||
|
|
this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop + uni.upx2px(72);
|
|||
|
|
this.showLine = true;
|
|||
|
|
this.showBtn = false;
|
|||
|
|
this.guideList()
|
|||
|
|
if (!this.isAllLine) this.popup1 = true;
|
|||
|
|
}
|
|||
|
|
this.showSwiper = false;
|
|||
|
|
this.getMarkersList()
|
|||
|
|
},
|
|||
|
|
changeLocation() {
|
|||
|
|
let mapObjs = uni.createMapContext('map', this)
|
|||
|
|
mapObjs.moveToLocation({
|
|||
|
|
complete: res => {
|
|||
|
|
console.log('移动完成:', res)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
swiperChange1(e) {
|
|||
|
|
this.current1 = e.detail.current
|
|||
|
|
},
|
|||
|
|
swiperChange2(e) {
|
|||
|
|
this.current2 = e.detail.current
|
|||
|
|
},
|
|||
|
|
goSpot(i) {
|
|||
|
|
if (!i.spotId) return;
|
|||
|
|
uni.navigateTo({ url: '/pages/scenic/spot?id=' + i.spotId })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.line_btn{
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
position: relative;
|
|||
|
|
color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
line-height: 46rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
.img {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.line_swiper{
|
|||
|
|
width: 100%; height: 188rpx; position: fixed; left: 0;
|
|||
|
|
swiper{ width: 100%; height: 100%; }
|
|||
|
|
.line_box{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 12rpx; }
|
|||
|
|
.line_waper{
|
|||
|
|
width: 100%; height: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 24rpx 0; position: relative; padding-right: 148rpx;
|
|||
|
|
.title{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
|||
|
|
.msg{ line-height: 34rpx; margin-top: 12rpx; color: #999; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; }
|
|||
|
|
.tag{
|
|||
|
|
width: 100%; margin-top: 12rpx; display: flex; align-items: center;
|
|||
|
|
view{
|
|||
|
|
height: 32rpx; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 2rpx; padding: 0 8rpx; line-height: 28rpx; color: #03AE80; font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn{ width: 120rpx; height: 120rpx; background: #03AE80; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #FCFCFC; font-size: 24rpx; line-height: 30rpx; border-radius: 50%; position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%); }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.detail_swiper {
|
|||
|
|
width: 100%; height: 204rpx; position: fixed; left: 0;
|
|||
|
|
swiper{ width: 100%; }
|
|||
|
|
.activeClass {
|
|||
|
|
height: 204rpx !important;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.detail_waper {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.defaultClass {
|
|||
|
|
height: 188rpx !important;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.detail_waper {
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.detail_box{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 12rpx; }
|
|||
|
|
.detail_waper{
|
|||
|
|
width: 100%; height: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.num {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
background: #03AE80;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2rpx solid #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 34rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
.con-box {
|
|||
|
|
flex: 1;
|
|||
|
|
.title {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.label {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.voice {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.icon {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
.time {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
width: 528rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.waper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #F4F6FA;
|
|||
|
|
|
|||
|
|
#map{ width: 100%; }
|
|||
|
|
.tabs-box {
|
|||
|
|
padding: 5rpx 0 11rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
scroll-view{ width: 100%; white-space: nowrap; font-size: 0;}
|
|||
|
|
.tab {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: top;
|
|||
|
|
height: 56rpx;
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
padding: 0 38rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
&:first-child {
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
&:last-child {
|
|||
|
|
margin-right: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
background: #03AE80;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .map-box {
|
|||
|
|
// width: 100%;
|
|||
|
|
// height: 100%;
|
|||
|
|
// position: fixed;
|
|||
|
|
// left: 0;
|
|||
|
|
// top: 0;
|
|||
|
|
|
|||
|
|
// .customCallout {
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// align-items: center;
|
|||
|
|
// box-sizing: border-box;
|
|||
|
|
// padding: 8rpx 46rpx;
|
|||
|
|
// background: #00BE69;
|
|||
|
|
// border-radius: 30rpx;
|
|||
|
|
|
|||
|
|
// .txt {
|
|||
|
|
// font-weight: 500;
|
|||
|
|
// font-size: 28rpx;
|
|||
|
|
// color: #FFFFFF;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// .triangle {
|
|||
|
|
// width: 0;
|
|||
|
|
// height: 0;
|
|||
|
|
// border-left: 10rpx solid transparent;
|
|||
|
|
// /* 左边的透明部分 */
|
|||
|
|
// border-right: 10rpx solid transparent;
|
|||
|
|
// /* 右边的透明部分 */
|
|||
|
|
// border-top: 14rpx solid #00BE69;
|
|||
|
|
// /* 底部红色线条 */
|
|||
|
|
// position: absolute;
|
|||
|
|
// bottom: -13rpx;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.btn-box {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 18rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.location {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
.icon {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-bottom: 24rpx;
|
|||
|
|
border-bottom: 1rpx solid #E8E8E8;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
.h4 {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FF3333;
|
|||
|
|
text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.go {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-box {
|
|||
|
|
width: 638rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 400rpx;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.popup-content1 {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
width: 638rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.con {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
border-bottom: 1rpx solid #E8E8E8;
|
|||
|
|
|
|||
|
|
.con-img {
|
|||
|
|
width: 169rpx;
|
|||
|
|
height: 169rpx;
|
|||
|
|
margin-right: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con-right {
|
|||
|
|
.title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.describe {
|
|||
|
|
margin-top: 14rpx;
|
|||
|
|
width: 385rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 266rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
border-radius: 70rpx;
|
|||
|
|
background-color: #03AE80;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.btn-img {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|