<template>
	<view class="page">
		<u-navbar :is-back="false"  title="小鹿骑行" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='44'	id="navbar">
		</u-navbar>
		<view class="gonggao" @click="btntopgg">
			<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>
		<!-- 公告弹窗 -->
		<view class="noticetc" v-if="gonggaoflag">
			<view class="name">
				公告
			</view>
			<view class="biaoti">
				{{gonggaoxq.noticeTitle}}
			</view>
			<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		<!-- 地图 -->
		<view class="ditu">
			<map class='map' id="map" :latitude="latitude" :longitude="longitude" :show-location="true"  @click="btnzk"/>
			<image @click="btnzk" src="https://api.ccttiot.com/smartmeter/img/static/up0OxngKxP5JZ3hRLvCv" class="zk" mode=""></image>
			<view class="kuaijie">
				<image @click="btnpage(2)" style="height: 100rpx;margin-top: 16rpx;" src="https://api.ccttiot.com/smartmeter/img/static/udUQI8zA1tYUEndx9guO" mode=""></image> <!-- 订单 -->
				<image @click="btntiao(2)" src="https://api.ccttiot.com/smartmeter/img/static/uECTLFe6fzWgzNzVdsPs" mode=""></image> <!-- 使用帮助 -->
				<image @click="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uPyDAy2sWgh4UkDr3yX4" mode=""></image> <!-- 编号开锁 -->
				<image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uxLGGshcH6nr557ffO5E" mode=""></image> <!-- 意见反馈 -->
				<image @click="btnkf" src="https://api.ccttiot.com/smartmeter/img/static/up53i8F9cn9wajU8dXuS" mode=""></image> <!-- 客服 -->
			</view>
		</view>
		<view class="guanggao">
			<u-swiper :list="lists" @click="btnshangjia"></u-swiper>
		</view>
		<view class="fujin">
			<view class="names">
				附近门店
			</view>
			<view class="list">
				<view class="list_item" v-if="false" v-for="(item,index) in 2" :key="index" @click="btnxq">
					<view class="top">
						<view class="name">
							云行租车（汇丰公寓）
						</view>
						<image src="https://api.ccttiot.com/smartmeter/img/static/uebBGQwgvIO4BgJB5nd0" @click.stop="btntel" mode=""></image>
					</view>
					<view class="dizhi">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uxTxqrn1kIVJEHCS57YU" mode=""></image> 2.3km | 天目山路134号
					</view>
					<view class="bot">
						<view class="lt">
							<view class="yytime">
								<text>营业时间 | </text>06:00-23:00
							</view>
							<view class="songqu">
								免费送取车
							</view>
						</view>
						<view class="rt">
							<view class="rizu">
								<view class="price">
									日均￥<text>69</text>起
								</view>
								<view class="qizu">
									3辆车可租
								</view>
							</view>
							<image src="https://api.ccttiot.com/smartmeter/img/static/uXOW5yZvS1fBGH7xz77A" mode=""></image>
						</view>
					</view>
					<view class="cheliang">
						<view class="quanxin" v-for="(item,index) in 2" :key="index">
							<view class="qxlt">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
							</view>
							<view class="qxrt">
								<view class="name">
									全新车网红...
								</view>
								<view class="junjia">
									日均￥69
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="dibutishi">
					<!-- <text>当前附近没有更多门店咯...</text> -->
					<image src="https://api.ccttiot.com/smartmeter/img/static/usBtiESbpV8GIY3k4ukv" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uTSMnIgvw7eS13LxZjvt" mode="" @click="kefuflag = false"></image>
			<view class="box">
				<view class="" style="max-height: 640rpx;overflow: scroll;">
					<view class="" style="font-weight: 600;color: #3D3D3D;">
						订单要售后:
					</view>
					<view class="top" v-for="(item,index) in kefulist" :key="index">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
							<view class="wz">
								工作时间：{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
							<text>拨打</text>
						</view>
					</view>
					<view class="" style="margin-top: 20rpx;font-weight: 600;color: #3D3D3D;" v-if="kefuarr.length > 0">
						骑行前咨询:
					</view>
					<view class="top" v-for="(item,index) in kefuarr" :key="index">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
							<view class="wz">
								工作时间：{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
							<text>拨打</text>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="wzs">
						客服电话高峰期可能遇忙，请耐心等待
					</view>
				</view>
			</view>
		</view>
		<!-- 有订单弹窗 -->
		<view class="conts_box" v-if="orderflag" @click="btntz">
			<view class="orderzt">
				<view class="" style="font-size: 32rpx;font-weight: 600;">
					订单状态
				</view>
				<view class="">
					<view style="color: #333;">订单进行中<u-icon name="arrow-right" color="#333" size="28"></u-icon></view>
				</view>
			</view>
			<view class="cont_li">
				<view class="right">
					<image :src="iconobj.mapimg" mode="aspectFill">
					</image>
					<view class="NO">
						SN：{{orderobj.deviceSn == null ? '--' : orderobj.deviceSn}}
					</view>
				</view>
				<view class="left">
					<view class="km">
						可继续行驶{{orderobj.deviceRemainEndurance == null ? '--' : orderobj.deviceRemainEndurance}}公里
					</view>
					<view class="speed">
						<view class="speeds" :style="{ width: orderobj.deviceRemainingPower + '%' }"></view>
					</view>
					<view class="NO">
						电量{{orderobj.deviceRemainingPower == null ? '--' : orderobj.deviceRemainingPower}}%
					</view>
				</view>
			</view>
			<view class=""
				style="display: flex;width: 100%;padding: 0 20rpx;box-sizing: border-box;justify-content: space-between;">
				<view class="dh" @click.stop="danghang">
					导航 <u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
				<view class="suocheanniu">
					<view class="lssc" @click.stop="btnjsdd">
						结束订单
					</view>
					<view class="lssc" @click.stop="btnqd">
						{{orderobj.deviceLockStatus == 1 ? '临时锁车' : '开锁'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 扫码用车未在停车点内还车弹窗 -->
		<view class="tingchetc" v-if="fjflag">
			<view class="topname">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uDfEXjApmdS6ByM88pv3" mode=""></image>
				{{fajinobj.manageFee > 0 ? '不在运营区' : fajinobj.dispatchFee > 0 ? '不在停车点' : ''}}
			</view>
			<view class="shuom">
				需支付<text>{{fajinobj.manageFee > 0 ? fajinobj.manageFee : fajinobj.dispatchFee > 0 ? fajinobj.dispatchFee : ''}}元</text>，你可查看<text @click="btntcd">最近停车点</text>
			</view>
			<image :src="iconobj.tingcheimg" class="tcimg" mode="aspectFill"></image>
			<view class="btnan">
				<view class="fj" @click="btnfajin">
					缴纳罚金还车
				</view>
				<view class="qx" @click="btnjjqx">
					继续骑行
				</view>
			</view>
		</view>
		<view class="mask" v-if="fjflag"></view>
		<view class="mask" v-if="kefuflag"></view>
		<tab-bar :indexs='0'></tab-bar>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js")
	export default {
		data() {
			return {
               bgc: {
                 backgroundColor: "#F4FCFF",
               },
			   latitude:'',
			   longitude:'',
			   covers:[],
			   kefuflag:false,
			   gonggaoxq:{},
			   gonggaoflag:false,
			   announcements: {},
			   kefulist:[],
			   lists: [],
			   info:{},
			   tiaozhuanlist:[],
			   jinweidu:'',
			   kefuarr:[],
			   fjflag: false,
			   orderflag: false,
			   iconobj:this.$store.state.iconobj,
			   orderobj: {},
			   orderAreaReturnVerify:'',
			   latsc:'',
			   lngsc:'',
			   fajinobj:{}
			}
		},  
		onLoad() {
          uni.getLocation({
              type: 'gcj02', // 国内地图更兼容
          	isHighAccuracy: true,
              success: (res) => {
                  console.log('精确坐标:', res)
              },
              fail: (err) => {
                  console.error('获取位置失败:', err)
              }
          })
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '小鹿骑行',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '小鹿骑行',
				query: '',
				path: '/pages/index/index'
			}
		},
		onShow() {
			this.getinfo()
			this.getlunbo()
			this.getorderdevice()
		},
		methods: {
			// 点击跳转到车辆
			btntz() {
				uni.switchTab({
					url: '/pages/myorder/returned/index'
				})
			},
			// 点击继续骑行
			btnjjqx(){
				this.orderflag = true
				this.fjflag = false
			},
			// 点击跳转导航
			danghang() {
				if (this.orderobj.deviceLatitude && this.orderobj.deviceLongitude) {
					uni.openLocation({
						latitude: this.orderobj.deviceLatitude, //纬度-目的地/坐标点
						longitude: this.orderobj.deviceLongitude, //经度-目的地/坐标点
						name: '', //地点名称
						address: '' //详细地点名称
					})
				} else {
					uni.showToast({
						title: '车辆暂无法导航',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 点击启动and关闭
			btnqd() {
				if (this.orderobj.deviceLockStatus == 0) {
					let that = this
					uni.showModal({
						title: '提示',
						content: '您是否要解锁车辆？',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								that.$u.put(`/app/order/openDevice?orderId=${that.orderobj.orderId}`).then((
									res) => {
									if (res.code == 200) {
										uni.showToast({
											title: '解锁成功',
											icon: 'success',
											duration: 2000
										})
										that.getorderdevice()
									} else {
										uni.showModal({
											title: '提示',	
											content: '设备离线，请前往车辆详情连接车辆操作',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.switchTab({
														url:'/pages/myorder/returned/index'
													})
												} else if (res.cancel) {
										
												}
											}
										})
									}
								})
							} else if (res.cancel) {
								console.log('取消')
							}
						}
					})
				} else if (this.orderobj.deviceLockStatus == 1) {
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							this.latsc = res.latitude
							this.lngsc = res.longitude
						},
						fail: (err) => {
							console.error('获取位置失败：', err)
							this.latsc = null
							this.lngsc = null
						}
					})
					let that = this
					uni.showModal({
						title: '提示',
						content: '您是否要临时锁车？',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								let query = {
									orderId: that.orderobj.orderId,
									lat: that.latsc,
									lon: that.lngsc,
								}
								let url = '/app/order/closeDevice?' + that.$tansParams(query)
								that.$u.put(url).then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: '临时锁车成功',
											icon: 'success',
											duration: 2000
										})
										that.getorderdevice()
									} else {
										uni.showModal({
											title: '提示',	
											content: '设备离线，请前往车辆详情连接车辆操作',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.switchTab({
														url:'/pages/myorder/returned/index'
													})
												} else if (res.cancel) {
										
												}
											}
										})
									}
								})
							} else if (res.cancel) {
								console.log('取消')
							}
						}
					})
				}
			},
			// 点击结束订单
			btnjsdd() {
				if (this.orderAreaReturnVerify == true) {
					uni.navigateTo({
						url: '/page_user/hcshenhe?sn=' + this.orderobj.deviceSn + '&orderid=' + this.orderobj.orderId + '&orderAreaId=' + this.orderobj.orderAreaId
					})
				} else {
					uni.getLocation({
						type: 'gcj02', // 国内地图更兼容
						isHighAccuracy: true,
						success: (res) => {
							this.latsc = res.latitude
							this.lonsc = res.longitude
							this.getfeiyong()
						},
						fail: (err) => {
							console.error('获取位置失败：', err)
							this.getfeiyong()
						}
					})
				}
			},
			// 点击还车判断是否需要另外缴费
			getfeiyong() {
				let data = {
					orderId: this.orderobj.orderId,
					lon: this.lonsc,
					lat: this.latsc,
					checkLocation:true
				}
				this.$u.post(`/app/order/calcFee`, data).then(res => {
					if (res.code == 200) {
						this.fajinobj = res.data
						if (res.data.manageFee > 0 || res.data.dispatchFee > 0) {
							this.fjflag = true
							this.orderflag = false
						} else {
							this.gethuan()
						}
					}else if(res.code == 30001){
						uni.showToast({
							title: '必须在停车点内还车',
							icon: 'none',
							duration: 5000
						})
					}else if(res.code == 30002){
						uni.showToast({
							title: '不允许在禁停区内还车',
							icon: 'none',
							duration: 5000
						})
					}else if(res.code == 30003){
						uni.showToast({
							title: '必须在运营区内还车',
							icon: 'none',
							duration: 5000
						})
					}
				})
			},
			// 点击缴纳罚金继续还车
			btnfajin() {
				this.gethuan()
			},
			// 还车统一调用
			gethuan() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要还车吗？',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							let data = {
								orderId: that.orderobj.orderId,
								picture: that.imgs,
								lon: that.lonsc,
								lat: that.latsc
							}
							that.$u.put(`/app/order/end`, data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '还车成功',
										icon: 'success',
										duration: 2000
									})
									setTimeout(()=>{
										that.fjflag = false
										that.orderflag = false
										setTimeout(()=>{
											uni.navigateTo({
												url:'/page_user/yongche/orderxq?id=' + that.orderobj.orderId
											})
										},1000)
									},1000)
								} else {
									uni.showModal({
										title: '提示',	
										content: '设备离线，请前往车辆详情连接车辆操作',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.switchTab({
													url:'/pages/myorder/returned/index'
												})
											} else if (res.cancel) {
									
											}
										}
									})
								}
							})
						} else if (res.cancel) {
			
						}
					}
				})
			},
			// 点击跳转到最近停车点
			btntcd() {
				uni.navigateTo({
					url: '/pages/myorder/returned/tingche?areaId=' + this.orderobj.orderAreaId
				})
			},
			// 获取本人正在使用的订单设备
			getorderdevice() {
				this.$u.get("/app/orderDevice/mineUsing").then((res) => {
					if (res.code == 200) {
						if (res.data) {
							this.orderobj = res.data
							this.orderAreaReturnVerify = res.data.orderAreaReturnVerify
			                this.orderflag = true
						} else {
							this.orderflag = false																																	
						}
					}
				})
			},
			// 点击跳转轮播图跳转
			btnshangjia(e){
				console.log(e,'1212121',this.tiaozhuanlist[e].urlType);
				if(this.tiaozhuanlist[e].urlType == 1){
					uni.navigateTo({
						url: '/page_fenbao/webview?url=' + this.tiaozhuanlist[e].url
					})
				}else{
					uni.navigateTo({
						url: '/' + this.tiaozhuanlist[e].url
					})
				}
			},
			// 点击显示客服
			btnkf(){
				if(this.kefulist.length > 0){
					this.kefuflag = true
				}else{
					uni.showToast({
						title: '当前暂无客服',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 获取客服
			getkefu(){
				this.$u.get(`/app/customerService/indexList?radius=1000&center=${this.jinweidu}`).then(res => {
					if(res.code == 200){
						this.kefulist = res.after
						this.kefuarr = res.before
					}
				})
			},
			// 获取广告轮播图
			getlunbo(){
				this.$u.get("/app/ad").then(res => {
					if(res.code == 200){
						this.lists = []
						this.tiaozhuanlist = res.data
						if(res.data.length > 0 && res.data[0] != null){
							res.data.forEach(item =>{
								this.lists.push({
									image:item.picture,
									title: item.adId
								})
							})
						}else{
							this.lists.push({
								image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
								title: ""
							})
						}
					}else{
						this.lists.push({
							image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
							title: ""
						})
					}
				})
			},
			// 获取个人用户信息
			getinfo(){
				this.$u.get("/getInfo").then(res => {
					if(res.code == 200){
						this.info = res.user
						this.getMyLocation()
						this.getgonggao()
					}else if(res.code == 401){
						this.getlogo()
					}
				})
			},
			// 静默登录
			getlogo(){
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
								appId:taht.$store.state.appid
							}
							taht.$u.post('/wxLogin', data).then(res => {
                                if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.getinfo()
									taht.getlunbo()
								}else{
									taht.getinfo()
								}
							})
						}
					},
				})
			},
			// 点击头部滚动通知
			btntopgg(){
				this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
					if(resp.code == 200){
						this.gonggaoxq = resp.data
						this.gonggaoflag = true
					}
				})
			},
			// 点击公告我知道了
			btnggtc(){
				this.gonggaoflag = false
				uni.setStorageSync('noticeId', this.announcements.noticeId)
			},
			// 获取最新公告
			getgonggao(){
				this.$u.get("/app/notice/new?noticeType=1").then(res =>{
					if(res.code == 200){
						this.announcements = res.data
						if(res.data){
							this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
								if(resp.code == 200){
									this.gonggaoxq = resp.data
									if(resp.data.noticeId != uni.getStorageSync('noticeId')){
										this.gonggaoflag = true
									}
								}
							})
						}
					}
				})
			},
			// 点击拨打平台客服电话
			btnptkf(tel){
				uni.makePhoneCall({
					phoneNumber: tel,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击进行跳转页面
			btntiao(num){
				if(num == 1){ //跳转到地图页
					uni.switchTab({
						url:'/pages/nearbystores/index'
					})
				}else if(num == 2){ //跳转到使用帮助页
					uni.navigateTo({
						url:'/page_user/bangzhu'
					})
				}else if(num == 3){ //跳转到车辆故障上报
					uni.navigateTo({
						url:'/page_user/guzhang/index'
					})
				}else{ //跳转到意见反馈页
					uni.navigateTo({
						url:'/page_user/yijian'
					})
				}
			},
			// 点击附近门店跳转到门店详情页
			btnxq(){
				uni.navigateTo({
					url:'/page_fenbao/storedlist/index'
				})
			},
			// 点击门店拨打电话
			btntel() { 
				uni.makePhoneCall({
					phoneNumber: '18888888888',
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击跳转
			btnpage(num){
				if(num == 1){ //跳转到附近门店页面
					uni.navigateTo({
						url:'/page_fenbao/storedlist/fujinshop'
					})
				}else if(num == 2){ //跳转到我的订单页面
					uni.navigateTo({
						url:'/pages/myorder/index'
					})
				}else if(num == 3){ //跳转到租借车辆页面
					uni.switchTab({
						url:'/pages/myorder/returned/index'
					})
				}else{
					uni.navigateTo({
						url:'/page_fenbao/index'
					})
				}
			},
			// 点击跳转到地图页
			btnzk(){
				uni.switchTab({
					url:'/pages/nearbystores/index'
				})
			},
			// 获取自身位置
			getMyLocation() {
				uni.getLocation({  
					type: 'wgs84',
					success: (res) => {
						this.jinweidu =res.longitude + ',' + res.latitude
						this.getkefu()
						this.latitude = Number(res.latitude.toFixed(5)) - 0.005
						this.longitude = Number(res.longitude.toFixed(5)) + 0.005
						this.setMapScale()
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				})
			},
			// 回到地图中心点
			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)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ wx-swiper{
		height: 180rpx !important;
	}
	.tingchetc {
		width: 624rpx;
		height: 610rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 572rpx;
		z-index: 99;
		padding: 28rpx 36rpx;
		box-sizing: border-box;
		.btnan {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.fj {
				width: 252rpx;
				height: 72rpx;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				border: 2rpx solid #808080;
				font-weight: 600;
				font-size: 32rpx;
				color: #808080;
				text-align: center;
				line-height: 72rpx;
			}
			.qx {
				width: 252rpx;
				height: 72rpx;
				background: #4C97E7;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				text-align: center;
				line-height: 72rpx;
				box-sizing: border-box;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.tcimg {
			width: 552rpx;
			height: 300rpx;
			margin-top: 28rpx;
		}
		.shuom {
			font-size: 26rpx;
			color: #3D3D3D;
			margin-top: 18rpx;
			text {
				color: #4C97E7;
			}
		}
		.topname {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			display: flex;
			align-items: center;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 14rpx;
			}
		}
	}
	.conts_box {
		width: 680rpx;
		height: 360rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-top: 38rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 220rpx;
		.orderzt {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}
		.txtss {
			margin-top: 18rpx;
			padding-left: 20rpx;
			width: 100%;
			font-weight: 500;
			font-size: 28rpx;
			color: #808080;
		}
		.dh {
			width: 160rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			border: 1px solid #333;
			font-size: 28rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
		}
		.suocheanniu {
			display: flex;
			align-items: center;
			.lssc {
				width: 160rpx;
				height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				background-color: #0D75E5;
				color: #fff;
				font-size: 28rpx;
				box-sizing: border-box;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.cont_li {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			.left {
				display: flex;
				flex-wrap: wrap;
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				.km {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.speed {
					margin-top: 18rpx;
					width: 226rpx;
					height: 22rpx;
					background: #ccc;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					.speeds {
						height: 100%;
						background: #4297F3;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}
				.NO {
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 18rpx;
				}
			}
			.right {
				width: 70%;
				padding-right: 20rpx;
				font-size: 24rpx;
				color: #333;
	
				image {
					width: 160rpx;
					height: 110rpx;
				}
			}
		}
	}
	.gonggao{
		width: 680rpx;
		height: 60rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
		margin: auto;
		margin-top: 30rpx;
	}
	.container {
	  width: 560rpx;
	  height: 60rpx; /* 根据需要调整高度 */
	  display: flex;
	  align-items: center;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  color: #fff;
	  box-sizing: border-box;
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10px;
	  font-size: 16px;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.noticetc{
		width: 680rpx;
		height: 950rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	
	
	/deep/ .u-title{
		padding-bottom: 12rpx !important;
	}
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
	.kefutc{
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 580rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.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;
			margin-top: 20rpx;
			.dianhua{
				font-size: 24rpx;
				color: #666;
				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;
				image{
					width: 42rpx;
					height: 40rpx;
				}
				text{
					display: block;
				}
			}
		}
		.bj{
			position: absolute;
			top: -280rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			width: 614rpx;
			height: 1140rpx;
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.fujin{
		margin-top: 28rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		.list{
			padding-bottom: 230rpx;
			box-sizing: border-box;
			.dibutishi{
				width: 100%;
				text-align: center;
				margin-top: 24rpx;
				color: #ccc;
				image{
					width: 480rpx;
					height: 400rpx;
				}
			}
			.list_item{
				width: 670rpx;
				height: 340rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin: auto;
				margin-top: 24rpx;
				.cheliang{
					border-top: 1rpx solid #D8D8D8;
					margin-top: 22rpx;
					display: flex;
					.quanxin:nth-child(1){
						border-right: 1px solid #D8D8D8;
						margin-right: 24rpx;
					}
					.quanxin{
						display: flex;
						width: 50%;
						margin-top: 16rpx;
						.qxrt{
							.junjia{
								font-size: 24rpx;
								color: #3D3D3D;
							}
							.name{
								font-weight: 600;
								font-size: 28rpx;
								color: #3D3D3D;
							}
						}
						.qxlt{
							margin-right: 24rpx;
							image{
								width: 100rpx;
								height: 76rpx;
							}
						}
					}
				}
				.bot{
					display: flex;
					justify-content: space-between;
					.rt{
						display: flex;
						align-items: center;
						image{
							width: 48rpx;
							height: 48rpx;
							margin-left: 16rpx;
						}
						.rizu{
							.qizu{
								font-size: 28rpx;
								color: #3D3D3D;
							}
							.price{
								font-size: 24rpx;
								color: #FF1C1C;
								text{
									font-size: 36rpx;
									font-weight: 600;
								}
							}
						}
					}
					.lt{
						.songqu{
							margin-top: 12rpx;
							max-width: 140rpx;
							text-align: center;
							font-size: 24rpx;
							color: #4297F3;
							height: 38rpx;
							line-height: 38rpx;
							background: #DCEDFF;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
						}
					   .yytime{
					   	font-size: 24rpx;
					   	color: #3D3D3D;
					   	margin-top: 8rpx;
					   	display: flex;
					   	align-items: center;
					   	text{
					   		font-weight: 600;
					   		margin-right: 4rpx;
					   	}
					   }
					}
				}
				.dizhi{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 12rpx;
					image{
						width: 22rpx;
						height: 22rpx;
						margin-right: 4rpx;
					}
				}
				.top{
					display: flex;
					justify-content: space-between;
					.name{
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
					}
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.names{
			width: 142rpx;
			height: 52rpx;
			background: #4297F3;
			border-radius: 0 30rpx 0 30rpx;
			font-weight: 600;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 52rpx;
		}
	}
	.guanggao{
		width: 700rpx;
		height: 180rpx;
		margin: auto;
		margin-top: 34rpx;
		position: relative;
		.kefu{
			width: 108rpx;
			height: 146rpx;
			position: absolute;
			bottom: -80rpx;
			right: 10rpx;
		}
		/deep/ .u-swiper-image{
			width: 700rpx !important;
			height: 180rpx !important;
			border-radius: 10rpx;
		}
	}
	.kuaijie{
		display: flex;
		justify-content: space-between;
		padding: 0 26rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		image{
			width: 96rpx;
			height: 116rpx;
		}
	}
	.ditu{
		width: 700rpx;
		height: 580rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin: auto;
		margin-top: 22rpx;
		position: relative;
		.caozuo{
			display: flex;
			justify-content: space-between;
			padding-top: 38rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			box-sizing: border-box;
			image{
				width: 96rpx;
				height: 40rpx;
			}
		}
		.zk{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			right: 8rpx;
			bottom: 180rpx;
		}
		map{
			width: 700rpx;
			height: 412rpx;
		}
	}
</style>