JP-ChargeTeam51/pages/index/index.vue

<template>
	<view>

		<!-- 头部图片 -->
		<view class="banner">
			 <u-swiper  bg-color="#fff" 
			 :img-mode="'scaleToFill'" height="400" 
			 :list="bannerList" @click="clickBanner"  :name="'picUrl'" >
			</u-swiper> 
			
<!-- 			<img :src="indexLogo?indexLogo:'static/img/banner1.jpg'" alt="">
 -->			
		</view>

		<!-- 选项列表 -->
		<view class="option-list">

			<view class="list-item" @click="getScanCode">
				<view class="icon iconfont" style="background-color:#59d96e;">
					&#xe61a;
				</view>
				<view class="text oldTextjp2" oldstyle="font-size: 18px;">
					扫码充电
				</view>

			</view>
			<view class="list-item" @click="fastRecharge">
				<view class="icon iconfont" style="background-color:#4BD2C0;">
					&#xe629;
				</view>
				<view class="text oldTextjp2" oldstyle="font-size: 18px;">
					快速充值
				</view>

			</view>
			<view class="list-item" @click="chargingRecord">
				<view class="icon iconfont" style="background-color: #6FA5FF;">
					&#xe625;
				</view>
				<view class="text oldTextjp2" oldstyle="font-size: 18px;">
					充电记录
				</view>

			</view>
			<view class="list-item" @click="toSearchPile">
				<view class="icon iconfont" style="background-color: #9D9FFF;">
					&#xe622;
				</view>
				<view class="text oldTextjp2" oldstyle="font-size: 18px;">
					附近站点
				</view>

			</view>

		</view>

		<!-- 模式选择 -->

		<u-mask :show="show">

			<view class="wrap">


				<view class="shema" @tap.stop>
					<view class="title">
						设置浏览模式
					</view>
					<view class="">
						<u-radio-group v-model="value">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" active-color="#00B962">
								{{item.name}}
								<p v-if="item.name == '长辈模式'">字体更大 看的清楚</p>
								<p v-if="item.name == '标准模式'">信息丰富 功能全面</p>
							</u-radio>

						</u-radio-group>
					</view>
					<view class="hint">可在 {{""}}我的-设置 {{""}}页面中切换</view>
					<view class="btn-box">
						<u-button class="choice-btn" type="success" shape="circle" @click="elderClick">我选好了</u-button>
					</view>
				</view>
			</view>
		</u-mask>



		<view style="height:50px"></view>
		<!-- 站点 -->
		<view class="station" v-if="message == 'getLocation:ok' && stationList.length != 0 && chargeList.length == 0"
			@click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
			<view class="img-box">
				<img src="static/img/Frame 198 (1).png" alt="">
			</view>
			<view class="text">
				<view class="station-title">
					<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #9D9FFF;" v-if="stationData.type == '1'" style="background-color: #9D9FFF;">快充</text>
					<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #00B962;" v-if="stationData.type == '2'" style="background-color: #00B962;">慢充</text>
					<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #00BAC8;" v-if="stationData.type == '1,2'" style="background-color: #00BAC8;">快/慢</text>
					<text class="title-right oldTextjp" oldstyle="font-size: 20px;">{{stationData.name}}</text>
				</view>

				<view class="station-price">
					<view class="price-left">{{stationData.costPrice}}</view>
					<view class="price-right">
						元/度 起 
					</view>
				</view>

				<view class="park">
					<text class="park-p">p</text>
					<text class="park-text oldTextjp2" oldstyle="font-size: 14px;">2小时停车免费</text>
				</view>
				<view class="count">
					<view class="count-left">
						<span class="oldTextjp2" oldstyle="font-size: 16px;">空闲{{stationData.availableNum}}/</span>
						<span class="oldTextjp" oldstyle="font-size: 16px;">总数{{stationData.totalNum}}</span>
					</view>
					<view class="count-right oldTextjp" oldstyle="font-size: 16px;">
						<text class="iconfont">&#xe615;</text>
						{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
					</view>
					<!-- <view class="count-right oldTextjp" oldstyle="font-size: 16px;" v-else>
						<text class="iconfont">&#xe615;</text>小于100米</view> -->
				</view>
			</view>
		</view>
		<!-- 定位 -->
		<view class="location-box" v-if="message != 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
			<view class="location">
				<view class="location-text">
					<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
						定位中...
					</view>
					<view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
						授权定位后可查询附近充电站
					</view>
					<view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
						重新定位
					</view>
				</view>
				<view class="img-box">
					<img src="static/img/暂无网络信号-缺省页 1.png">
				</view>
			</view>


		</view>

		<!-- 充电状态 -->
		<view class="state1 state" v-if="chargeList.length > 0" v-for="(item,index) in chargeList" :key="item.id"
			@click="gotoUrl('pages/searchPile/chargeProcess/dcCharging?id=' + item.id)">
			<view class="state-text">
				<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
					{{item.statusText}}
				</view>
				<view v-if="item.status == '0'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
					启动中
				</view>
				<view v-if="item.status == '1'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
					已充{{item.dueFee != null ? item.dueFee : '0.00'}}元
				</view>
				<!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
				超出时间将收取占位费
			</view> -->
				<view v-if="item.status == '4'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
					<span v-if="item.waitNum==1">请耐心等待</span>
					<span v-else >前方等待{{item.waitNum-1}}位</span>
				</view>
				<view class="text-3 oldTextjp2" oldstyle="font-size: 16px;">
					{{item.deviceName}}<!-- /<br />{{item.deviceNo}} -->
				</view>
			</view>
			<view class="img-box">
				<img v-if="item.status == '0'" src="static/img/等待中-缺省页.png">
				<img v-if="item.status == '1'" src="static/img/充电中-缺省页.png">
				<img v-if="item.status == '2'" src="static/img/已充满-缺省页.png">
				<img v-if="item.status == '4'" src="static/img/等待中-缺省页.png">
			</view>
		</view>

		<!-- 充值活动 -->
		<view class=" top-up" v-if="activityList.length > 0 && description == '0:0:0'">
			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
			<view class="img-box">
				<view class="img-1" v-for="(item,index) in activityList" :key="item.id"
					@click="rechargeActivity(index)">
					<img :src="item.picUrl" alt="">
				</view>
			</view>
		</view>
		<!-- 最新活动 -->
		<view class=" top-up" v-if="description != '0:0:0'">
			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
			<view class="img-box2">
				<view class="left-image" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
					<p>充电免服务费包月卡</p>
					<view class="time-activities">
						距活动结束仅剩 <text class="time">{{description}}</text>
					</view>
				</view>
				<view class="right-image">
			
					<!-- <img class="margin-bottom" v-for="(item,index) in activityList" :key="item.id" 
						@click="rechargeActivity(index)" :src="item.picUrl" alt=""> -->
					<img class="margin-bottom" src="../../assets/img/topup2.png" alt="" @click="rechargeActivity(0)">
					<img class="margin-bottom" src="../../assets/img/topup3.png" alt="" @click="rechargeActivity(1)">
				</view>

			</view>
		</view>
		
		<!-- 新闻 -->
		<view class="news-title" v-if="newsList.length > 0">
			<view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
				<view class="line" style="margin-top:4px;"></view>新闻公告
			</view>

			<view class="more oldTextjp2" oldstyle="font-size:16px;" @click="toNewsNotice">更多<view class="more-icon iconfont"> &#xe600;</view>
			</view>


		</view>
		<view class="news">

			<view class="news-content" v-for="(item,index) in newsList" :key="item.id"
				@click="gotoUrl('pages/article/articleDetails?id=' + item.id)">
				<view class="content-text">
					<view class="content-title oldTextjp2" oldstyle="font-size: 18px;">{{item.title}}</view>
					<view class="news-time">{{item.createTime?item.createTime.slice(5,10):''}}</view>
				</view>
				<view class="content-img">
					<img :src="item.pic ? item.pic : 'static/img/image_default.png'" alt="">
				</view>
			</view>
		</view>
		<view class="bottom" v-if="newsList.length == recordsTotal && newsList.length != 0">
			<view class="bot">
				<view class="bot-line"></view>
				<view class="bot-text oldTextjp2" oldstyle="font-size: 14px;">已经到底了</view>
				<view class="bot-line"></view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navigation">
			<view class="login-prompt" v-if="!userId">
				登录显示更多会员服务
				<text class="button" @click="toLogin">登录/注册</text>
			</view>
		</view>
		<Tabbar :current="0" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as newsApi from '@/apis/news.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import * as siteApi from '@/apis/site.js'
	import * as loginApi from '@/apis/login.js'
	import MapLoader from '@/utils/AMap'
	import Tabbar from '@/components/Tabbar.vue'
	import {
		newDate,
		secondsDistance,
		hourDistanceArr
	} from '@/utils'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				stationList: [],
				bannerList:[],
				timeOut: false,
				pointTimeOut: true,
				stationData: {},
				chargeList: [],
				activityList: [],
				userId: '',
				newsList: [],
				pageIndex: 1,
				recordsTotal: 0,
				longitude: '',
				latitude: '',
				message: '',
				indexLogo: '',
				show: false,
				list: [{
						name: '长辈模式',
						disabled: false
					},
					{
						name: '标准模式',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '长辈模式',
				elderStatus: false,
				fontMode: '',
				description: '0:0:0'
			}
		},
		onLoad(op) {
		
			if (op.jpcode) {
				var k = API.codeOperation(op.jpcode)
				if (k) {
					uni.navigateTo({
						url: k
					})
				}
			}
			
			
			
			
		},
		onUnload() {
			this.timeOut = false;
			this.pointTimeOut = false;
		},
		onHide() {
			this.timeOut = false;
			this.pointTimeOut = false;
		},
		onReachBottom() {
			if (this.newsList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onShow() {
			if(this.$refs.tabbarMain){
				this.$refs.tabbarMain.setcount(0);
			}
			
			
		},
		onReady() {
			if (this.carhelp.get("getElderModeClass")) {
				if(this.carhelp.get("getElderModeClass") == "长辈模式") {
					this.fontMode = '1';
				} else {
					this.fontMode = '0';
				}
				API.changeFont({fontMode: this.fontMode}).then((res) => {
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
			
			this.getUserInfo();
		

			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})

			this.getBannerInfo("homepage")
			this.getPointTimeOut();
			this.getNewsList();
			this.getActivityInfoList();
			this.getDescriptionTime();
		},
		methods: {
			getDescriptionTime() {
				var date = '2022/08/07 23:59:59';
				var dateMonth1 = new Date().getMonth()+1;
				var dateDay1 = new Date().getDate();
				var dateMonth2 =  parseInt(date.slice(5,7));
				var dateDay2 =  parseInt(date.slice(8,10));
				if(dateMonth1 < dateMonth2) {
					var days = new Date(new Date().getFullYear(), dateMonth1, 0).getDate();
					dateDay2 = dateDay2 + days;
					console.log(dateDay2)
				}
				
				if(dateDay1 <= dateDay2-2) {
					this.description = dateDay2 - dateDay1 + '天'
				} else {
					var dateTime2=new Date(date).getTime()
					var c=hourDistanceArr(new Date(),new Date(dateTime2))
					this.description = c[0]+':'+c[1]+':'+c[2];
					setTimeout(()=>{
						this.getDescriptionTime();
					},1000)
				}
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror:true,
				}).then((res) => {
					uni.hideLoading();
					
					if (res.code == 200&&res.result) {
						
						var token = res ? res.data.token : '';					
						this.carhelp.setPersonInfo(res.data.regUser );
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);
					
					}
					
					console.log("--------------")
					if (res.data.regUser) {
						if(res.data.regUser.fontMode == null) {
							this.show = true;
						} else {
							this.show = false;
							this.fontMode = res.data.regUser.fontMode;
							if(this.fontMode == '1') {
								this.carhelp.set("getElderModeClass", "长辈模式");
							} else {
								this.carhelp.set("getElderModeClass", "标准模式");
							}
						}
						
						this.userId = res.data.regUser.id;
						this.getFindChargeData();
						
					
						if (this.carhelp.get("getElderModeClass")) {
							if(this.carhelp.get("getElderModeClass") == "长辈模式") {
								this.elderStatus = true;
							} else {
								this.elderStatus = false;
							}
						}
					}else{
						this.carhelp.set("getElderModeClass", "长辈模式");
						this.elderStatus = true;
						
						var obj=this.carhelp.get("friends_invitation")
						// this.carhelp.set("friends_invitation",{
						// 	op:op,
						// 	date:new Date().getTime()
						// })
						if(obj){
							if(obj.date+1000*60*60*24 > new Date().getTime() ){
							
								this.friendsInvitation(obj)
							}
							
						}
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			friendsInvitation(obj){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				 API.findActivity({
					 id:obj.op.id,
					 code:obj.op.icode
				 }).then((res) => {
					 	uni.hideLoading()
					obj.activityInfo=res.data.activityInfo;
					 var name=res.data.activityInfo.name;
					 var title="参与活动"
					var  okbtn="前往注册"
					var endTime=res.data.activityInfo.endTime;
					
					if(endTime&&secondsDistance(newDate(endTime))>0){
						name="活动已结束"
						okbtn="继续注册"
						title="提示"
						obj=null
					}
					this.carhelp.set("friends_invitation",obj)
					 uni.showModal({
						 title:title,
					 	content:name,
						confirmText:okbtn,
						success: res1 => {
							if (res1.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})		
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					 })
					 
					 
				}).catch(error => {
				 		uni.showToast({
				 		
				 			title: error,icon: "none"
				 		})
				 })
			},
			clickBanner(index){
				var uurl="";
				var mod = this.bannerList[index]
				mod.clickUrl=mod.linkUrl
				if (mod.clickUrl == null) {
				
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
				
				} else if (mod.clickUrl.indexOf('http') == 0) {
					window.location = mod.clickUrl+uurl;
				
				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url=mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url+uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
				
				} else {
					uni.navigateTo({
						url: mod.clickUrl+uurl
					})
				}
			},
			getBannerInfo(code){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					this.bannerList =res.data;
					uni.hideLoading()
					 document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 200px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			elderClick() {
				if(this.value == "长辈模式") {
					this.elderStatus = true;
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
				} else {
					this.elderStatus = false;
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
				}
				
				API.changeFont({fontMode: this.fontMode}).then((res) => {
					this.show = false;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPointTimeOut() {

				setTimeout(() => {
					if (this.pointTimeOut) {
						this.getPoint();
					}
				}, 1000)

			},
			getFindChargeData() {
				API.findChargeData().then((res) => {
					this.chargeList = res.data.chargingRecordList;

					var list = res.data.chargingRecordList;
					for (var i = 0; i < list.length; i++) {
						if (list[i].status == '1' || list[i].status == '4') {
							this.timeOut = true;
						}
					}
					if (this.timeOut) {
						setTimeout(() => {
							this.getFindChargeData();
						}, 5000)
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toSearchPile() {
				uni.navigateTo({
					url: '/pages/searchPile/searchPile'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toNewsNotice() {
				uni.navigateTo({
					url: '/pages/article/newsNotice'
				})
			},
			//微信扫二维码
			getScanCode() {

				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						//("scanQRCode------" + res)
						if (res) {
							API.scanCode(res).then((response) => {

							}).catch(error => {
								uni.showToast({
									title: error,
									icon: "none"
								})
							})
						}
					}).catch(error => {

					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			fastRecharge() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/user/finance/recharge'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			chargingRecord() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/record/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			rechargeActivity(index) {
				if (this.userId) {
					var uurl="&uid="+this.userId;
					
					var mod = this.activityList[index]
					
					if (mod.clickUrl == null) {
					
					} else if (mod.clickUrl.indexOf('http') == 0) {
						window.location = mod.clickUrl+uurl;
					} else if (mod.clickUrl.indexOf('#/') == 0) {
						if (mod.clickUrl.indexOf("?") == -1) {
							mod.clickUrl += '?';
						}
						var url=mod.clickUrl.split("#")[1]
						//window.location = mod.clickUrl;
						uni.navigateTo({
							url: url+uurl
						})
					} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
					
					} else {
						uni.navigateTo({
							url: mod.clickUrl+uurl
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getActivityInfoList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.activityInfoList({
					pageIndex: 1,
					pageSize: 10
				}).then((res) => {
					uni.hideLoading()
					this.activityList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPoint() {
				WxJsApi.getLocation().then((res) => {
					
					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
					this.message = res.errMsg;

					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {
						siteApi.searchStationData({
							longitude: this.longitude,
							latitude: this.latitude
						}).then((response) => {
							this.stationList = response.data.data;
							
							if(response.data.data.length){
								var stationDataList = response.data.data[0];
								
								MapLoader().then(AMap1 => {
									var lnglat = new AMap.LngLat(this.longitude,this.latitude);
									var myDistance = lnglat.distance([this.stationData.longitude,this.stationData.latitude]);
									stationDataList.distance = myDistance/1000;
								})
								this.stationData = stationDataList;
							}
						
						}).catch(error => {
							uni.showToast({
								title: error,
								icon: "none"
							})
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getNewsList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.newsList = [];
					this.pageIndex = 1;
				}

				newsApi.newsInfoList({
					pageIndex: 1,
					pageSize: 10
				}).then((res) => {
					uni.hideLoading()

					this.newsList = [
						...this.newsList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getNewsList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	 
	// 头部图片
	img {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 200px;


	}


	// 选项列表
	.option-list {
		width: 91.4%;
		padding-top: 18px;
		height: 100px;
		line-height: 20px;
		border-radius: 8px;
		text-align: center;
		background-color: #fff;
		position: absolute;
		top: 160px;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-around;

		.list-item {

			// 图标
			.icon {
				width: 40px;
				height: 40px;
				border-radius: 99px;
				line-height: 40px;
				font-size: 24px;
				text-align: center;
				margin: auto;
				color: #ffffff;
			}

		}

	}

	// 站点
	.station {
		width: 91.4%;
		height: 120px;
		margin: 20px auto 0;
		position: relative;

		.img-box {
			width: 100%;
			height: 100%;
			border-radius: 8px;
			overflow: hidden;
		}

		img {
			width: 100%;
			height: 100%;

		}

		.text {
			width: 91.4%;
			position: absolute;
			top: 0;
			left: 20px;

			// 头部
			.station-title {
				display: flex;
				margin-top: 12px;

				.title-left {
					display: inline-block;
					height: 20px;
					width: 44px;
					// margin-left: 12px;
					line-height: 20px;
					border-radius: 50px;
					background-color: rgba(133, 140, 255, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
					text-align: center;
					font-family: Arial;
				}

				.title-right {
					display: inline-block;
					margin-left: 4px;
					margin-top: 2px;
					width: 271px;
					height: 16px;
					line-height: 16px;
					color: rgba(16, 16, 16, 100);
					font-size: 16px;
					text-align: left;
					font-family: AlibabaPuHui-regular;
				}
			}

			// 价格
			.station-price {
				margin-top: 4px;
				display: flex;

				.price-left {
					width: 40px;
					height: 20px;
					line-height: 20px;
					color: rgba(255, 98, 0, 100);
					font-size: 20px;
					text-align: left;
					font-family: Roboto-medium;
				}

				.price-right {
					height: 20px;
					line-height: 14px;
					margin-left: 2px;
					margin-top: 3px;
					color: rgba(102, 102, 102, 100);
					font-size: 14px;
					text-align: left;
					font-family: AlibabaPuHui-regular;
				}

			}

			// park
			.park {
				margin-top: 4px;
				display: flex;

				.park-p {
					display: inline-block;
					width: 20px;
					height: 18px;
					line-height: 12px;
					text-align: center;
					background-color: rgba(125, 177, 255, 100);
					color: #fff;
				}

				.park-text {
					display: inline-block;
					width: 300px;
					height: 17px;
					color: rgba(102, 102, 102, 100);
					font-size: 12px;
					text-align: left;
					margin-left: 2px;
					margin-top: 2px;
				}
			}

			// 数量
			.count {
				margin-top: 14px !important;
				width: 91.4%;
				display: flex;
				justify-content: space-between;
				white-space: nowrap;
				overflow: hidden;

			}
		}

	}

	//定位

	.location {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
				white-space: nowrap; //强制不换行
				text-overflow: ellipsis; //文本超出出现省略号
				overflow: hidden;
			}

			.text-3 {
				width: 80px;
				height: 24px;
				line-height: 22px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}
		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;
		}
	}


	.state {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.state-text {
			width: 61.8%;
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: blueviolet;
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: #101010;
				text-align: left;
				margin-top: 12px;
			}

			.text-3 {
				font-size: 12px;
				line-height: 20px;
				margin-top: 6px;
				color: #999999;
			}

		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;
		}
	}

	//充值
	.top-up {
		margin-left: 16px;
		margin-top: 17px;
		padding-right: 16px;

		.top-up-title {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
		}

		.img-box {
			margin-top: 12px;
			width: 95%;
			height: 146px;
			display: flex;
			justify-content: space-between;

			.img-1 {
				width: 166px;
				height: 146px;
				position: relative;

				.img-text {
					position: absolute;
					top: 12px;
					left: 12px;
					height: 33px;
					color: #ff4444;
					font-size: 24px;
					text-align: left;
					margin-left: 12px;

					.img-text2 {
						font-size: 14px
					}

				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}
	.img-box2{
		margin-top: 12px;
		display: flex;
		justify-content: space-between;
		img{
			width: 100%;
			height: 100%;
		}
		.left-image{
			width: 48.3%;
			height: 166px;
			padding: 8px 0 0 12px;
			background: url(@/assets/img/topup1.png);
			    background-repeat: no-repeat;
			    background-position: 30% 10%;
			    background-size: cover;
				p{
					color: rgba(56, 47, 33, 100);
					font-size: 24px;
					line-height: 28px;
					font-weight: 600;
					
				}
				.time-activities{
					color: rgba(56, 39, 14, 100);
					font-size: 16px;
					line-height: 22px;
					margin-top: 4px;
					.time{
						margin-left: 4px;
						color: #fa3534;
						font-weight: bold;
					}
				}
		}
		.right-image{
			width: 48.3%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.margin-top{
				margin-top: 12px;
			}
			
			img{
				height: 77px;
				
			}
		};
	}
		
	}

	// 小竖线
	.line {
		display: inline-block;
		width: 3px;
		height: 12px;
		margin-right: 7px;
		background-color: rgba(0, 145, 67, 100);
	}

	// 新闻公告
	.news-title {
		padding: 0 16px;
		margin-top: 12px;
		color: rgba(16, 16, 16, 100);
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		background-color: #F2F4F4;

		.news-title-left {
			display: flex;
		}

		.more {
			font-size: 14px;
			color: #777777;
			display: flex;
			line-height: 20px;

			.more-icon {
				font-size: 24px
			}
		}
	}

	.news {
		background-color: #fff;
		width: 91.4%;
		margin: 12px auto 0;
		border-radius: 8px;

		.news-content {
			display: flex;
			justify-content: space-between;
			padding: 12px;

			.content-text {
				width: 56.2%;
				height: 100%;
				line-height: 21px;
				color: #101010;
				text-align: left;
				font-size: 14px;
			}

			.content-title {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}

			.content-img {
				width: 40.57%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 80%;
				}
			}

			.news-time {
				margin-top: 5%;
				color: #999999;
				width: 80px;
				height: 20px;
				font-size: 14px;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 100px;

		.bot {
			width: 100%;
			margin: 0 auto;
			padding: 0 17.3%;
			justify-content: space-between;
			display: flex;

			.bot-line {
				margin-top: 20px;
				width: 21.3%;
				height: 0px;
				border: 1px solid rgba(207, 210, 213, 100);
			}

			.bot-text {
				white-space: nowrap;
				height: 17px;
				margin-top: 13px;
				margin-left: 12px;
				margin-right: 12px;
				font-size: 12px;
				text-align: center;
				color: rgba(182, 189, 195, 100);
			}
		}
	}

	// 导航栏
	.navigation {
		width: 100%;
		// height: 40px;
		padding: 10px 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #999999;

		.nav-icon {
			width: 54px;
			font-size: 24px
		}

		.nav-text {
			font-size: 14px;
		}
	}



	.shema {
		width: 70%;
		padding-bottom: 20px;
		border-radius: 16px;
		background-color: #fff;
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;

		.title {
			height: 33px;
			color: rgba(16, 16, 16, 100);
			font-size: 24px;
			text-align: center;
			padding: 16px 0;
		}

		.u-radio-group {
			margin: 16px 5vw;
		}

		/deep/.u-radio {
			width: 60vw !important;

			padding: 24px 24px 40px;
			line-height: 20px;
			border-radius: 16px;
			text-align: center;
			border: #101010 1px solid;
			margin-top: 12px;

		}

		/deep/ .u-radio__label {
			text-align: left;
			height: 24px;
			// color: rgba(0, 185, 98, 100);
			font-size: 24px;

		}

		p {

			height: 22px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			margin-top: 12px;
			white-space: nowrap
		}

		.hint {
			text-align: center;

		}

		.btn-box {
			margin-top: 20px;

			.choice-btn {
				width: 80%;
			}
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}



























	// 登录提示
	.login-prompt {
		width: 91.4%;
		height: 40px;
		line-height: 40px;
		border-radius: 50px;
		text-align: left;
		padding-left: 16px;
		padding-right: 4px;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		bottom: 75px;
		color: #ffffff;

		.button {
			width: 88px;
			height: 32px;
			line-height: 32px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			text-align: center;
			float: right;
			margin-top: 4px;
		}
	}
</style>