<template>
	<view class="page">
		<!-- 地图 -->
		<image class="picimg" v-if="iconflag"
				src="https://api.ccttiot.com/smartmeter/img/static/uEAmNMMt65U10qwijrsJ" mode=""></image>
		<map class='map' id="map" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="handleMarkerClick" @regionchange="regionchange" :polygons="polyline" :show-location="true"/>
		<!-- 左侧图标 -->
		<view class="lticon">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u8WwVFtQy59eGWWQ9cfy" @click="btnbz" mode=""></image>
			<image src="https://api.ccttiot.com/smartmeter/img/static/ulCxXq0nQDSfdDWg5Ttw" @click="kefuflag = true" mode=""></image>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uDnm3dpbwMh9jLBRMeZw" @click="btnhuiz" mode=""></image>
		</view>
		<!-- 右侧图标 -->
		<view class="rticon">
			<image v-if="rtindex != 1" src="https://api.ccttiot.com/smartmeter/img/static/uyNPBYUMjYxybfRLHyu9" @click="btntap(1)" mode=""></image>
			<image v-if="rtindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/u8zXd0xYhLKD0BvgZDVv" @click="btntap(1)" mode=""></image>
			<image v-if="rtindex != 2" src="https://api.ccttiot.com/smartmeter/img/static/unoWsjJjeFKVrivp7MMF" @click="btntap(2)" mode=""></image>
			<image v-if="rtindex == 2" src="https://api.ccttiot.com/smartmeter/img/static/ukCjlSRsRoqMNNNxcFJ9" @click="btntap(2)" mode=""></image>
			<image v-if="rtindex != 3" src="https://api.ccttiot.com/smartmeter/img/static/uwIWeuTVbjFLNmLTGPOh" @click="btntap(3)" mode=""></image>
			<image v-if="rtindex == 3" src="https://api.ccttiot.com/smartmeter/img/static/uEWVQFGBf10XJn8aTlaZ" @click="btntap(3)" mode=""></image>
			<image style="width: 80rpx;height: 80rpx;" @click="toggleIconAndCallout" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
		</view>
		<!-- 点击地图门店弹窗 -->
		<view class="shoptc" v-if="shoptcflag" @click="btnmendain">
			<view class="top">
				<view class="name">
					云行租车（汇丰公寓）
				</view>
				<view class="zu">
					1辆可租 <image src="https://api.ccttiot.com/smartmeter/img/static/uX3GfXzwzS4GY1J55raG" mode=""></image>
				</view>
			</view>
			<view class="juli">
				<view class="mi">
					727m
				</view>
				<view class="dizhi">
					福建省宁德市霞浦县六一七路402号台铃...
				</view>
			</view>
			<view class="cont">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
				<view class="shuoming">
					<view class="name">
						全新车网红泡泡50KM...
					</view>
					<view class="price">
						日租￥<text>108</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 车辆弹窗 -->
		<view class="biketc" v-if="taocanflag">
			<view class="topfor">
				<view class="biketop">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u6u6mWzrgiVCHICU1IWg" mode=""></image>
					<view class="bianh">
						<view class="bh">
							车辆编号：{{cheobj.sn == null ? '--' : cheobj.sn}}
						</view>
						<view class="">
							车牌号：{{cheobj.vehicleNum == null ? '--' : cheobj.vehicleNum}}
						</view>
					</view>
					<view class="bikebeep" @click="btnxlxc">
						响铃寻车
					</view>
				</view>
				<view class="bikesy">
					<view class="bikelt">
						<view class="bikets">
							剩余骑行
						</view>
						<view class="bikegongli">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uLybsyJqWL4siF7mXkXh" mode=""></image> {{cheobj.remainEndurance == null ? '--' : cheobj.remainEndurance}}公里
						</view>
					</view>
					<view class="bikert">
						<view class="bikets">
							剩余电量
						</view>
						<view class="bikegongli">
							<image src="https://api.ccttiot.com/smartmeter/img/static/u9y1tZIJBWLsO0DRoweT" mode=""></image> {{cheobj.remainingPower == null ? '--' : cheobj.remainingPower}}%
						</view>
					</view>
				</view>
				<!-- <view class="biketaocan">
					<view :class="['bikelist',tcindex == index ? 'active' : '']" v-for="(item,index) in taocaolist" :key="index" @click="btntcxz(index)">
						<view class="bike_item">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uGddSTtK7UhfNpLzQJDc" mode=""></image>
							<view class="name">
								{{item.name == null ? '--' : item.name}}
							</view>
							<view class="qibu">
								<text>起步价</text> <text>{{item.ridingRule == null ? '--' : item.ridingRule}}元</text>(含免费骑行5分钟)
							</view>
							<view class="qibu">
								<text>时长费</text> <text>1.0元/10分钟</text>
							</view>
							<view class="qibu">
								<text>预存费</text> <text>10元</text>
							</view>
							<view class="ckxq">
								查看详情
							</view>
						</view>
					</view>
				</view> -->
				<view class="bikeyc" @click="btncheyc">
					×
				</view>
			</view>
			<view class="anniuks" @click="btndetaxq">
				<text>去下单</text>
			</view>
		</view>
		<view class="clmask" v-if="taocanflag"></view>
		
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode="" @click="kefuflag = false"></image>
			<view class="box">
				<view class="top">
					<view class="dianhua">
						平台客服电话：13360332564
					</view>
					<view class="boda" @click.stop="btnptkf">
						<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
						<text>拨打</text>
					</view>
				</view>
				<view class="bot">
					<view class="wz">
						平台客服工作时间
					</view>
					<view class="wz">
						08：00~20：00
					</view>
					<view class="wzs">
						客服电话高峰期可能遇忙，请耐心等待
					</view>
				</view>
			</view>
		</view>
		<view class="clmask" v-if="kefuflag"></view>
		
		
		<tab-bar :indexs='1'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
               bgc: { 
               	backgroundColor: "",
               },
			   latitude:'',
			   longitude:'',
			   rtindex:2,
			   covers:[],
			   shoptcflag:false,
			   iconPath:'',
			   tcindex:0,
			   taocanflag:false,
			   kefuflag:false,
			   iconflag:false,
			   cheobj:{},
			   jingweidu:'',
			   taocaolist:[],
			   polyline:[]
			}
		},  
		onLoad() {

		},
		onShow() {
			this.getMyLocation()
		},
		methods: {
			// 点击去下单
		    btndetaxq(){
				this.$u.get(`/getInfo`).then(res =>{
					if(res.code == 200){
						this.taocanflag = false
						uni.navigateTo({
							url:'/page_fenbao/storedlist/trueorder?modelId=' + this.cheobj.modelId + '&sn=' + this.cheobj.sn
						})
					}else if(res.code == 401){
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'/pages/login/login'
									})
								} else if (res.cancel) {
									
								}
							}
						})
					}
				})
			},
			// 点击响铃寻车
			btnxlxc(){
				this.$u.put(`/bst/device/iot/ring?id=${this.cheobj.id}`).then((res) => {
					if (res.code == 200) {
					    uni.showToast({
					    	title: '操作成功',
					    	icon: 'success',
					    	duration: 2000
					    })
					}else if(res.code == 401){
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'/pages/login/login'
									})
								} else if (res.cancel) {
									
								}
							}
						})
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击隐藏车辆弹窗
			btncheyc(){
				this.taocanflag = false
				this.getqingqiu()
			},
			// 拖动查询中心点的数据
			regionchange(e) {
				this.iconflag = true
				if (e.type == 'end') {
					if(this.rtindex == 2){
					    this.jingweidu = e.detail.centerLocation.longitude + ',' + e.detail.centerLocation.latitude
					    this.getqingqiu()
					    this.iconflag = false
					}
				} 
			},
			// 点击选择骑行套餐
			btntcxz(index){
				this.tcindex = index
			},
			// 点击跳转到帮助中心
			btnbz(){
				uni.navigateTo({
					url:'/page_user/bangzhu'
				})
			},
			// 点击拨打平台客服电话
			btnptkf(){
				uni.makePhoneCall({
					phoneNumber: '18888888888',
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击跳转到租车门店
			btnmendain(){
				uni.navigateTo({
					url:'/page_fenbao/storedlist/index'
				})
			},
			// 点击右侧图标
			btntap(num){
				if(num == 3){
					uni.showToast({
						title: '导览暂未开放',
						icon: 'none',
						duration:2000
					})
				}else{
					this.covers = []
					this.rtindex = num
					this.shoptcflag = false
					this.getqingqiu()
				}
			},
			// 点击调用回到地图中心点
			btnhuiz(){
				this.setMapScale()
			},
			// 回到地图中心点
			async setMapScale(e, val) {
				let mapContext = uni.createMapContext('map', this);
				let setScale = () => {
					return new Promise((resolve, reject) => {
						mapContext.getScale({
							success: r => {
								resolve()
							}
						})
					})
				};
				await setScale()
				mapContext.moveToLocation({
					success: (res) => {
						const timer = setTimeout(() => {
							clearTimeout(timer)
						}, 500)
					}
				})
			},
			// 点击地图中的店铺操作
			handleMarkerClick(e){
				let id = String(e.detail.markerId) 
				if(id.slice(-1) == 1){
					console.log('店铺')
					this.covers.filter(item =>{
						if(item.id == id){
							item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/u8ONjRuMpydcZ4WuA6vP'
							this.shoptcflag = true
						}
					})
				}else if(id.slice(-1) == 2){
					console.log('车辆')
					this.covers.filter(item =>{
						if(item.id == id){
							item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uCBNaRAdk9kcgQgrom2G'
							this.taocanflag = true
							this.$u.get(`/app/device/availableDetail?id=${id.slice(0, -1)}`).then((res) => {
								if (res.code == 200) {
								    this.cheobj = res.data
									this.getArea()
								}
							})
						}
					})
				}else if(id.slice(-1) == 3){
					console.log('导览')
				}
			},
			// 请求附近车辆and门店
			getqingqiu(){
				if(this.rtindex == 1){
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
				}else if(this.rtindex == 2){
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
					this.$u.get(`/app/device/listNearBy?radius=10000&center=${this.jingweidu}`).then((res) => {
						if (res.code == 200) {
							this.covers = []
							res.data.forEach(item =>{
								const shopCover = {
									// 门店后面拼接1，车辆拼接2，3是导览
									id: this.rtindex == 1 ? parseInt(item.id + "1") : this.rtindex == 2 ? parseInt(item.id + "2") : parseInt(item.id + "3"),
									latitude: item.latitude,
									longitude:item.longitude,
									width: 35,
									height: 40,
									iconPath:this.iconPath,
									label: {
										content: item.vehicleNum,
										anchorX: this.calculateAnchorX(item.vehicleNum),
										fontWeight: 700,
										color: '#0D75E5',
										borderColor: '#fff',
										borderRadius: 5,
										bgColor: '#fff',
										padding:1,
									}
								}
								this.covers.push(shopCover)
							})
						}
					})
				}else if(this.rtindex == 3){
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
				}else{
					this.iconPath = null
				}
			},
			// 获取自身位置
			getMyLocation() {
				uni.getLocation({  
					type: 'wgs84',
					success: (res) => {
						this.latitude = Number(res.latitude) - 0.005
						this.longitude = Number(res.longitude) + 0.005
						this.jingweidu = this.longitude + ',' + this.latitude
						this.setMapScale()
						this.getqingqiu()
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				})
			},
			// 均衡地图文字居中
			calculateAnchorX(name) {
				let chineseLength = 0
				let englishLength = 0
				for (let i = 0; i < name.length; i++) {
					const charCode = name.charCodeAt(i)
					if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
						chineseLength++
					} else if (/[a-zA-Z]/.test(name[i])) {
						englishLength = englishLength + 1.2 // 英文长度加1，但视为两个中文字符长度  
					}
				}
				const totalLength = chineseLength + englishLength * 2;
				return -totalLength * 6.5 // 假设每个中文字符对应的 anchorX 偏移是 -6.5
			},
			
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null
				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}))
				const polyline = {
					points: points,
					fillColor: "#55888840", //填充颜色
					strokeColor: "#22FF00", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				}
				return polyline
			},
			convertBoundaryToPolylines(boundaries, num) {
				if (num == 1) {
					console.log('判断')
					return boundaries.map(boundary => {
						if (!boundary) return null
						let coords
						try {
							coords = JSON.parse(boundary)
						} catch (error) {
							console.error("Error parsing boundary JSON:", error)
							return null
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords)
							return null
						}
						console.log(coords,'1111111');
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}))
						return {
							points: points,
							fillColor: "#3A7EDB40", //填充颜色
							strokeColor: "#3A7EDB", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级
			
						};
					}).filter(polyline => polyline !== null) // 过滤掉无效的折线数据
				} else if (num == 2) {
					return boundaries.map(boundary => {
						if (!boundary) return null
						let coords
						try {
							coords = JSON.parse(boundary)
						} catch (error) {
							console.error("Error parsing boundary JSON:", error)
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords)
							return null;
						}
						console.log(coords,'2222222222222');
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}))
						return {
							points: points,
							fillColor: "#FFF5D640", //填充颜色
							strokeColor: "#FFC107", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级
						}
					}).filter(polyline => polyline !== null) // 过滤掉无效的折线数据
				} else if (num == 3) {
					return boundaries.map(boundary => {
						if (!boundary) return null
						let coords
						try {
							coords = JSON.parse(boundary)
						} catch (error) {
							console.error("Error parsing boundary JSON:", error)
							return null
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords)
							return null
						}
						console.log(coords,'333333333333');
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#FFD1CF40", //填充颜色
							strokeColor: "#FF473E", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级
			
						};
					}).filter(polyline => polyline !== null) // 过滤掉无效的折线数据
				}
			},
			toggleIconAndCallout() {
				if(this.cheobj == ''){
					uni.showToast({
						title: '请选选择车辆',
						icon: 'none',
						duration:2000
					})
				}else{
					this.showIconAndCallout = !this.showIconAndCallout
					if (this.showIconAndCallout) {
						const newMarkers = []
						this.parkingList.forEach(item => {
							newMarkers.push({
								id: parseFloat(item.id),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								width: 20,
								height: 28.95,
								iconPath: item.type == 1 ?
									'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
									.type == 2 ?
									'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
									' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
								callout: {
									content: item.name,
									color: '#ffffff',
									fontSize: 14,
									borderRadius: 10,
									bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : '#FF473E',
									padding: 6,
									display: 'ALWAYS'
								},
								isCalloutVisible: true // 添加标记
							})
						})
						this.$set(this, 'covers', [...this.covers, ...newMarkers])
					} else {
						// 过滤掉所有气泡显示的标记
						this.$set(this, 'covers', this.covers.filter(marker => !marker.isCalloutVisible))
					}
				}
			},
			getParking() {
				// 发送请求获取数据
				this.$u.get(`/app/areaSub/listByArea?areaId=${this.cheobj.areaId}`).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据
						const type1Data = []
						const type2Data = []
						const type3Data = []
						res.data.forEach(row => {
							if (row.type == 1) {
								type1Data.push(row)
							} else if (row.type == 2) {
								type2Data.push(row)
							} else if (row.type == 3) {
								type3Data.push(row)
							}
						})
						const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '')
						const polylines = this.convertBoundaryToPolylines(validBoundaries, 1)
						const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '')
						const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2)
						const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '')
						const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3)
						// 将处理后的数据添加到 this.polyline 中
						this.polyline = this.polyline.concat(polylines2)
						this.polyline = this.polyline.concat(polylines1)
						this.polyline = this.polyline.concat(polylines)
						this.parkingList = res.data
					}
				})
			},
			
			getArea() {
				this.$u.get(`/app/area/detail?id=${this.cheobj.areaId}`).then((res) => {
					if (res.code == 200) {
						const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
						this.polyline.push(polylines)
						this.getParking()
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.active{
		image{
			z-index: 99 !important;
		}
		.bike_item{
			border: 1px solid #4297F3 !important;
		}
	}
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
	.picimg {
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 50%;
		z-index: 99;
	}
	.kefutc{
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 660rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		.bot{
			margin-top: 30rpx;
			.wz{
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.wzs{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.top{
			width: 538rpx;
			height: 122rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 14rpx;
			box-sizing: border-box;
			.dianhua{
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 26rpx;
				box-sizing: border-box;
			}
			.boda{
				width: 94rpx;
				height: 94rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				padding-top: 8rpx;
				box-sizing: border-box;
				text{
					display: block;
				}
			}
		}
		image{
			position: absolute;
			top: -280rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			width: 614rpx;
			height: 748rpx;
		}
	}
	.clmask{
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 98;
		background-color: rgba(0,0,0,0.08);
		top: 0;
		left: 0;
	}
	.biketc{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.topfor{
			width: 750rpx;
			max-height: 664rpx;
			background: #f9f9f9;
			border-radius: 30rpx 30rpx 0 0;
			padding: 44rpx 34rpx;
			box-sizing: border-box;
			position: relative;
			.bikeyc{
				position: absolute;
				top: 20rpx;
				right: 32rpx;
				font-size: 70rpx;
				font-weight: 600;
			}
			.biketaocan{
				display: flex;
				overflow: scroll;
				.bikelist{
					margin-right: 22rpx;
					.bike_item{
						border: 1px solid #fff;
						margin-top: 36rpx;
						padding-top: 16rpx;
						padding-left: 24rpx;
						padding-right: 24rpx;
						box-sizing: border-box;
						width: 368rpx;
						height: 280rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						position: relative;
						overflow: hidden;
						image{
							width: 82rpx;
							height: 50rpx;
							position: absolute;
							top: 0;
							right: 0;
							z-index: -1;
						}
						.name{
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;
						}
						.qibu{
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #3D3D3D;
							margin-top: 16rpx;
						}
						.ckxq{
							width: 368rpx;
							height: 58rpx;
							background: #4297F3;
							font-weight: 600;
							font-size: 28rpx;
							color: #FFFFFF;
							position: absolute;
							left: 0;
							bottom: 0;
							text-align: center;
							line-height: 58rpx;
						}
					}
				}
			}
			.bikesy{
				width: 100%;
				border-top:1rpx solid #D8D8D8;
				margin-top: 30rpx;
				padding-top: 36rpx;
				box-sizing: border-box;
				display: flex;
				.bikelt{
					width: 50%;
					text-align: center;
					.bikegongli{
						font-weight: 600;
						font-size: 48rpx;
						color: #3D3D3D;
					}
					.bikets{
						font-size: 28rpx;
						color: #808080;
						margin-bottom: 28rpx;
					}
					image{
						width: 48rpx;
						height: 36rpx;
						margin-right: 18rpx;
					}
				}
				.bikert{
					width: 50%;
					text-align: center;
					.bikegongli{
						font-weight: 600;
						font-size: 48rpx;
						color: #3D3D3D;
					}
					.bikets{
						font-size: 28rpx;
						color: #808080;
						margin-bottom: 28rpx;
					}
					image{
						width: 22rpx;
						height: 48rpx;
						margin-right: 18rpx;
					}
				}
			}
			.biketop{
				display: flex;
				align-items: center;
				.bikebeep{
					width: 160rpx;
					height: 60rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #4C97E7;
					font-weight: 600;
					font-size: 28rpx;
					color: #4C97E7;
					text-align: center;
					line-height: 60rpx;
					margin-left: 80rpx;
				}
				.bianh{
					view{
						font-weight: 600;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
				image{
					width: 56rpx;
					height: 56rpx;
					margin-right: 24rpx;
				}
			}
		}
		.anniuks{
			width: 750rpx;
			height: 184rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			text-align: center;
			line-height: 184rpx;
			text{
				display: inline-block;
				width: 680rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
	.shoptc{
		position: fixed;
		width: 696rpx;
		max-height: 312rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 28rpx 34rpx;
		box-sizing: border-box;
		.cont{
			margin-top: 40rpx;
			display: flex;
			.shuoming{
				.name{
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.price{
					font-size: 24rpx;
					color: #FF1C1C;
					margin-top: 20rpx;
					text{
						font-size: 44rpx;
					}
				}
			}
			image{
				width: 166rpx;
				height: 128rpx;
				margin-right: 26rpx;
			}
		}
		.juli{
			display: flex;
			align-items: center;
			margin-top: 12rpx;
			.mi{
				padding: 0 10rpx;
				box-sizing: border-box;
				height: 38rpx;
				line-height: 38rpx;
				background: #DCEDFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-size: 24rpx;
				color: #0D75E5;
				margin-right: 20rpx;
			}
			.dizhi{
				font-size: 28rpx;
				color: #808080;
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			.name{
				font-size: 32rpx;
				color: #3D3D3D;
				font-weight: 600;
			}
			.zu{
				font-size: 24rpx;
				color: #3D3D3D;
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
				}
			}
		}
	}
	.rticon{
		position: fixed;
		right:28rpx;
		top: 450rpx;
		image{
			width: 78rpx;
			height: 96rpx;
			display: block;
			margin-top: 32rpx;
		}
	}
	.lticon{
		position: fixed;
		left: 28rpx;
		top: 538rpx;
		image{
			width: 88rpx;
			height: 88rpx;
			display: block;
			margin-top: 32rpx;
		}
	}
	.map{
		width: 100%;
		height: 100vh;
	}
</style>