JP-ChargeTeam51/pages/searchPile/stationAndPile/stationDetails.vue

<template>
	<view style="padding-bottom: 138px;">
		<ujp-navbar title="站点详情">
		<!-- 	<view class="iconfont qr-code">
				&#xe61a;
			</view> -->
		</ujp-navbar>
		 
		<view v-if="stationDetail.station!=null"  class="station-details">
			<u-image border-radius='15rpx'  v-if="stationDetail.station != null && stationDetail.station.image != null" class="img" width="26.6%" height="75px" :src="stationDetail.station.image" loading-icon="photo" @click="previewImage(stationDetail.station.image)"></u-image>			
			<view class="station-name" >
				{{stationDetail.station.name}}
			</view>
			
			<view class="details-item" style="margin-top: 22px;">
				<view class="iconfont font5" :style="stationDetail.station.type.indexOf('1')>=0?(stationDetail.station.type.indexOf('2')>=0?'color: #00BAC8;':'color: #9d9fff;'):('color: #00b962;')">&#xe60a;</view> 
<!--				style="color: #00b962;"-->
				<view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >{{(stationDetail.station.type.indexOf('1')>=0?'直流快充':'')}}{{(stationDetail.station.type.indexOf(',')>=0?'/':'')}}{{(stationDetail.station.type.indexOf('2')>=0?'交流慢充':'')}}</view>
			</view>
			<view class="details-item">
				<view class="iconfont font5" style="color: #4e94ff;">&#xe60e;</view> 
				<view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >
					{{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}
				</view>
			</view>
			 <view class="details-item">
				<view class="iconfont font5" style="color: #ffad79;">&#xe621;</view>
				 <view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >
				 {{stationDetail.station.describe}}</view>
			</view> 
			<view class="station-address" @click="map">
				<img src="static/img/Frame 201.png" alt="">
				<view class="address-text  oldTextjp" oldstyle="font-size: 16px;" >
					{{stationDetail.station.address}}
				</view>
				<!--
				<view class="address-font">
					<view class="iconfont">
						&#xe60c;
					</view>
					<view  class="view-map" >
						查看地图
					</view>
				</view>
-->

				<view class="address-box">
					<view class="iconfont address-font" >
							&#xe60c;
							
					</view>
					<view class="view-map" style="text-align: center;">导航</view>
				</view>
			
				
			</view>
		</view> 
		
		<view class="tabs-box">
			<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
		</view>
		<view class="charging-gun" v-if="stationDetail.devices&&current==0">
			<view   v-for="(device,index) in stationDetail.devices" :key="index">
			<template  v-for="(item,i) in device.gunList" >
			<view class="item" 
			 :style="item.open?'':'  border-bottom: 1px solid rgba(238, 242, 240, 100);'"
			 
			 :key="i+'_'+index"  >
					
					<view 
					:style="item.workStatusText.length>3?' padding: 0 10px':(item.workStatusText.length==3?'padding: 4px;':'padding: 10px;')"
					:class="{
						free:true,
						charging:item.enableShare&&item.workStatus!=0,
						'not-open':!(item.enableShare&&device.online)
						
					}">
						{{item.workStatusText}}
					</view>
					<view class="info">
						<view class="name oldTextjp"  oldstyle="font-size: 20px;line-height: 23px;">
						{{item.sortNo?item.sortNo:item.channelNo}}号/{{device.name}}
						</view>
						<view class="details oldTextjp2" @click="setOpen(item)"  oldstyle="font-size: 16px;line-height:16px;">
							<text :style="device.type=='1' ? 'color:#CA9DFF':'color:#00B962'" style="margin-right:1px;">{{device.interfaceType}}{{device.chargingType}}</text> |
							<text style="margin-left: 1px;">{{device.chargingPower!=null?device.chargingPower+'kW':''}}  <text class="iconfont"  >{{item.open?'&#xe62c;':'&#xe607;'}}</text></text>			
						  
					 
						</view>
					</view>
					<template v-if="item.enableShare&&device.online">
						<view class="tag" v-if="item.workStatus != 2 ">
							<view class="tag-item"    @click="book(item,item.isAppointment&&item.enableAppointment)" :class="item.isAppointment&&item.enableAppointment?'':'not-open-tag'">
								预约
							</view>
							<view class="tag-item"  @click="book2(item,item.enableShare)"   :class="item.enableShare?'':'not-open-tag'" >
								充电
							</view>
						</view>
						<view class="persent" v-else>
							{{item.soc?'电量:'+( item.soc.toFixed(0))+'%':item.workStatusText}}
						
						</view>
					</template>
					
				
					
				
			</view>
				<view  :key="i+'_aa'+index" class="open-time" v-show="item.open">
					<table>
						<tr>
							<td>开放充电时段:</td>
							
							 
								<td v-if="!item.sharedWeekSettingList||item.sharedWeekSettingList.length==0">充电功能未开放</td>
							
							
								<template v-for="(time,index) in  item.sharedWeekSettingList" >
									
									<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
									
								</template>
							 
						</tr>
						<template v-for="(time,index) in  item.sharedWeekSettingList" >
							
							<tr :key="index" v-if="index==1">
								<td></td>
								<td>{{time.startTime}}-{{time.endTime}}</td>
							</tr>
							
						</template>
													 
						
					</table>
					
					<table>
						<tr>
							<td>开放预约时段:</td>
							
							 
								<td v-if="!item.reserveWeekSettingList||item.reserveWeekSettingList.length==0">预约功能未开放</td>
							
							
								<template v-for="(time,index) in  item.reserveWeekSettingList" >
									
									<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
									
								</template>
							 
						</tr>
						<template v-for="(time,index) in  item.reserveWeekSettingList" >
							
							<tr :key="index" v-if="index==1">
								<td></td>
								<td>{{time.startTime}}-{{time.endTime}}</td>
							</tr>
							
						</template>
													 
						
					</table>
					
					 
					</view>
				</template>
			
			</view>
			
			
		</view>
		
		<view class="price-explain" 
		:class="{
			'elderMode':elderMode
		}"
		v-show="current==1" >
			<u-cell-group>
				<u-cell-item
				 
				 @click="priceDetail(1)" v-if="stationDetail.fastPrice != null" title="快充" :value="'当前时段：'+stationDetail.fastPrice.startTime+'~'+stationDetail.fastPrice.endTime+'  '+stationDetail.fastPrice.costPrice+'元/度(含电费'+stationDetail.fastPrice.electricityPrice+'元/度+服务费'+stationDetail.fastPrice.servicePrice+'元/度'"></u-cell-item>
				<u-cell-item 
				
				@click="priceDetail(2)" v-if="stationDetail.slowPrice != null" title="慢充" :value="'当前时段：'+stationDetail.slowPrice.startTime+'~'+stationDetail.slowPrice.endTime+'  '+stationDetail.slowPrice.costPrice+'元/度(含电费'+stationDetail.slowPrice.electricityPrice+'元/度+服务费'+stationDetail.slowPrice.servicePrice+'元/度'"></u-cell-item>
				
 					<u-cell-item :arrow="false" v-if="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
				</u-cell-group>
			
		</view>
		<!-- 弹窗 -->
		<view>
			<u-modal v-model="show"   confirm-text="去看空闲桩" cancel-text="查看处罚规则"
			confirm-color="#00B962">
			<view class="" style="padding: 15px 20px;">
				因您近期存在预约超时未前往充电的违约行为，平台为保证每位车主的合理权益，
				对您作出停用预约充电功能1天的处罚。
				您可于<span style="color: #00b962;">2022年6月20日09时45分</span>后使用此功能。
			</view>
			</u-modal>
			
		</view>
		
		  
		
		 
	 
	</view>
</template>

<script>
	import * as indexAPI from '@/apis/index.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import MapLoader from '@/utils/AMap'
	
	import * as api from "@/apis/site.js"
	let _self;
	 
	
	export default {
 
		data() {
			return {
				
				elderMode:false,
				userId:'',
				show:false,
				list:[
					{"name":"充电桩"},
					{"name":"价格说明"}
				],
				current: 0,
				currentPos:{
/*						name:'荆鹏软件园充电站',
						longitude: 112.28468,
						latitude: 30.307094,*/					
				},
				station:{},
				stationDetail:
				{
					
					devices:[],
					slowPrice:null,
					station:null,
					fastPrice:null
					
				   },
				
				info:{
					station:{
						
						time:'周一到周日 07:00~22:00(节假日除外)',
/*						id:1,
						name:'荆鹏软件园充电站',
						longitude: 112.28468,
						latitude: 30.307094,
						type:'交流慢充',
						distance:0.1,
						address:'湖北省荆州市沙市区江津东路附155号'*/
					},
					prices: [
							{name:'慢充',price:1.20,time:'00:00:00 ~ 23:59.59'},
							{name:'快充',price:1.20,time:'00:00:00 ~ 23:59.59'},
						]	 ,
					park:{ 
						price:'2小时免费停车'
					},
					priceList:[],
					devices:{
						idleNum:1,
						total:6,
						items:[

						]
					}
				}
			}
		},
		onLoad(op){
			_self = this;

//			document.getElementsByTagName('body')[0].style.setProperty('--mode',1)
			_self.processStationsInfo();
				 
			if(op!=null){
				
				if(op.id != null && op.id != undefined){ 
						
					let data = {stationId:op.id};
						//if(station.distance != null)
						//	_self.stationDetail.station.distance = station.distance;
						////('station'+JSON.stringify(station))
						//_self.station = station; 
						api.getChargingStationDetail(data).then(function(res){
//							//('站点详情'+JSON.stringify(res))
							//this.info.st
							if(res && res.result)
							{
								if(res.data){
									let data = res.data;
									//data.station.distance = station.distance;
									
									_self.stationDetail = data;
									
									if(_self.stationDetail.station){
										_self.list[0].name="充电桩("+_self.stationDetail.station.totalNum+")"
									}
									_self.processStationsInfo();							
									if(_self.stationDetail.station.distance == null){
										_self.getPoint();
									}
	//								//('data'+JSON.stringify(data)); 
								}
								
							}
							
						})
				}
				if(op.station != null){
					let station = JSON.parse(decodeURIComponent(op.station))
					let data = {stationId:station.id};
					if(station.distance != null)
						_self.stationDetail.station.distance = station.distance;
					//('station'+JSON.stringify(station))
					_self.station = station; 
					api.getChargingStationDetail(data).then(function(res){
						//('站点详情'+JSON.stringify(res))
						//this.info.st
						if(res && res.result)
						{
							if(res.data){
								let data = res.data;
								data.station.distance = station.distance;
								_self.stationDetail = data;
								_self.processStationsInfo();							
//								//('data'+JSON.stringify(data)); 
							}
							
						}
						
					})
					/*api.getChargingStationPrice(data).then(function(res){
						if(res.result){
							let data = res.data;
							if(data.prices){
								_self.list = [];
								for(let i = 0;i< data.prices.length;i++){
									let _item = data.prices[i];
									let item = {name:data.prices[i].name,items:[]};
									for(let j = 0;j<_item.priceList.length;j++){
										let _subitem = _item.priceList[j];
										let subitem = {time:'00:00-07:00',single_price:0.5,service_price:0.25,price:0.75};
										subitem.time = _subitem.startTime + '-'+_subitem.endTime;
										subitem.single_price = _subitem.electricityPrice;
										subitem.service_price = _subitem.servicePrice;
										subitem.price = _subitem.costPrice;
										item.items.push(subitem);
									}
									_self.priceList.push(item);
								}
								//('站点价格详情'+JSON.stringify(list));
								
							}
						}
					})*/
					//this.info.station = station;
					//('stationDetail onLoad'+JSON.stringify(station))					
				} 
			}
		},
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
						
			}
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			 
		},
		methods:{
			setOpen(item){
				
				if(item.open){
					item.open=false;
					
				}else{
					item.open=true
				}
				this.$forceUpdate()
			},
			getItem(item,device){
				
				return !device.online?('离线'):(item.enableShare&&device.online?item.workStatusText:'暂不开放')
			},
			change(index) {
				this.current = index;
				this.items = this.list[index].items;
			},
			previewImage(img){
				let imgs = [];
				imgs.push(img);
				uni.previewImage({
					urls:imgs,
					current:0
				})
			},
			book2(item,bl){
				if(bl){
					
				}else{
					return
				}
				uni.navigateTo({
					url:'/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id='+item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			book(item,bl){
				if(bl){
					
				}else{
					uni.showToast({
						title:'当前设备不可预约'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/searchPile/apointment/apointmentRecharge?id='+item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			getPoint() {
				 
	//			//('getPoint')
				WxJsApi.getLocation().then((res) => {
					
					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
					var startLngLat = {longitude: longitude,latitude: latitude};
					var endLngLat = {longitude: _self.stationDetail.station.longitude,latitude: _self.stationDetail.station.latitude};
					_self.calculateDistance(startLngLat,endLngLat);
					
					/*uni.showToast({
						title:'getPoint'+JSON.stringify(res)
					})*/
					////('当前位置' +JSON.stringify(data))
					
					//this.latitude2 = latitude;
					//this.longitude2 = longitude;
					/*uni.showToast({
						title:JSON.stringify(res)
					})*/
					//this.message=JSON.stringify(res)
				}).catch(error => {
					uni.showToast({
						title:error//'getPoint'+JSON.stringify()
					})					
				})
			},
			calculateDistance(startLngLat,endLngLat){
				
				var lnglat = new AMap.LngLat(startLngLat.longitude,startLngLat.latitude);
				var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
				_self.stationDetail.station.distance = myDistance/1000;
				_self.stationDetail.station.time = myDistance/500;
				/*
				var _this = this;
				MapLoader().then(AMap1 => {
					
					this.AMap=AMap;
				
					var map=new AMap.Map("container", {
						center: [116.397559, 39.89621],
						zoom: 14
					});  
					var lnglat = new AMap.LngLat(117.186602, 34.261579);
					 
					//AMap.Walking
					 AMap.plugin('AMap.Driving', function() {
					  var driving = new AMap.Driving({
					    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
					    policy: AMap.DrivingPolicy.LEAST_TIME
					  })
 			  
					 //var startLngLat = [116.379028, 39.865042]
					 //var endLngLat = [116.427281, 39.903719]
					 
					  driving.search(startLngLat, endLngLat, function (status, result) {
							//(result)
							//(result.routes[0].time)//秒
							//(result.routes[0].distance)//米
							_self.stationDetail.station.distance = result.routes[0].distance/1000;
							_self.stationDetail.station.time = result.routes[0].time/60;
							 
					  })
					  
					})
					
				
				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
				})*/
			},
			getScanCode() {
				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						if(res) {
							indexAPI.scanCode(res).then((response) => {
						
							}).catch(error => {
								uni.showToast({
									title: 'scanQRCode'+error,
									icon: "none"
								})
							})
						}
					}).catch(error => {
			
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			processStationsInfo(){
				for(let i = 0;i <_self.stationDetail.devices.length;i++){
					
					
					for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
						////('j'+JSON.stringify(_self.stationDetail.devices[i].gunList[j]))
						_self.stationDetail.devices[i].gunList[j].open=false;
					}
					if(!_self.stationDetail.devices[i].online)
					{
						_self.stationDetail.devices[i].workStatus = 99;
						_self.stationDetail.devices[i].workStatusText ='不在线';
						continue;
					}
					////('device['+i.toString()+']'+JSON.stringify(_self.stationDetail.devices[i]))
					_self.stationDetail.devices[i].workStatus = 2;
					_self.stationDetail.devices[i].workStatusText ='充电中';
//					//('站点详情'+JSON.stringify(_self.stationDetail.devices[i]))
						
 					for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
						////('j'+JSON.stringify(_self.stationDetail.devices[i].gunList[j]))
						
						if(_self.stationDetail.devices[i].gunList[j].workStatus == 0)
						{
							_self.stationDetail.devices[i].workStatus =0;
							_self.stationDetail.devices[i].workStatusText ='空闲';
						}
					}
				}
			},
			
			navigate(){
				 /*wx.openLocation({
				     latitude: _self.station.latitude,//目的地latitude
				     longitude: _self.station.longitude,//目的地longitude
				     name: _self.station.name,
				     address: _self.station.address,
				     scale: 15//地图缩放大小，可根据情况具体调整
				 });*/
				 //('station'+JSON.stringify(_self.stationDetail.station))
				 window.location.href="https://uri.amap.com/marker?position="+ _self.stationDetail.station.longitude+","+_self.stationDetail.station.latitude+"&name="+_self.stationDetail.station.name;
				 
			},
			charge(){
				 //('扫码充电')
				//#ifdef MP-WEIXIN
				uni.scanCode({
					success:function(res){
						uni.navigateTo({
							url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
						})
						
					}
				}) 
				return;
				//#endif
				 
				 //('扫码充电1')
				 uni.navigateTo({
				 	url:'chargingPileDetails'
				 })
				
			},
			priceDetail(t){
				uni.navigateTo({
					url:'chargePriceDetails?stationId='+_self.stationDetail.station.id+"&type="+t
				})
			},
			map(){
				//('map'+JSON.stringify(_self.station))
				_self.station.address = 'xxxxxxxxxxxxx'
				//this.carhelp.set(_self.stationDetail.station.id,_self.station);
				uni.navigateTo({
					url:'stationDetailsMap?stationId='+_self.stationDetail.station.id
					//url:'stationDetailsMap?station='+encodeURIComponent(JSON.stringify(_self.station))
					 
				})
			},theme(type) { 
			  if(type == 'elder')	
			  {
 				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 				  
			  }
			  else
			  {
 				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
 				  
			  } 
			}
		}
	}
</script>

<style lang="scss" scoped> 
	@import "@/_theme.scss";
	.qr-code{
		font-size: 24px;
		color: #666666;
		position: absolute;
		right: 16px;
	}
	// 站点信息
	
	.station-details {
		width: 100%;
		height: 100%;
		padding: 20px 16px 0px;
		background-color: #fff;
		position: relative;
     .img{
		 position: absolute;
		 top: 13px;right: 16px;
	 }
		.station-name {
			//line-height: 18px;
			color: #101010;		
			@include themeify{
				line-height: themed('font-size4');
				font-weight: themed('fontWeight');
				font-size: themed('font-size4');
				letter-spacing: themed('letterSpacing');
			}
/*			line-height: 18px;*/
 			margin-bottom: 11px;
		}

		.details-item {
			display: flex;
			justify-content: start;
			width: 100%;
			margin-top: 8px;
			line-height: 17px;

			@include themeify{
				font-size: themed('font-size1');
			}
			/*font-size: 12px;*/
			// position: relative;
		}
		.font5{
		
			
		}

		.item-text {
			
			color: rgba(102, 102, 102, 100);
			margin-left: 10px;
			
			// position: absolute;
			// left: 24px;
			// top: 1px;
		}

		.station-address {
			width: 100%;
			height: 40px;
			margin-top: 14px;
			position: relative;

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

			.address-text {

				
				position: absolute;
				top: 12px;
				left: 0;
				@include themeify{
					font-size: themed('font-size1');
					line-height: themed('font-size4');
					height: themed('font-size4');
				}
/*				font-size: 12px*/
			}
			
			.address-box {
						
			/*				font-size: 28px;*/
							color: #4e94ff;
							position: absolute;
							top: 0;
							right: 0;
							.address-font{
								@include themeify{
									font-size: themed('font-size8');
								}
							}
			 				.view-map{
								@include themeify{
									font-size: themed('font-size1');
			/*						line-height: themed('font-size2');
									height: themed('font-size2'); */
								}
							}
				
			}
			
		}
	}

	// 价格详情
	.price-details {
		width: 100%;
		margin-top: 12px;
		background-color: #fff;
		padding: 20px 15px 16px 16px;
		position: relative;

		.detail-title {
			display: flex;
			justify-content: space-between;

			.title-left {
				@include themeify{
					font-size: themed('font-size3');
				}
/*				font-size: 16px;*/
				color: #101010;
			}

			.title-right {
				@include themeify{
					font-size: themed('font-size2');
					line-height: themed('font-size2');
				}
/*				font-size: 14px;
				line-height: 14px;*/
				color: #00b962;


			}

			.right-text {
				@include themeify{
					font-size: themed('font-size2');
				}
/*				font-size: 14px;*/
				position: absolute;
				top: 23px;
				right: 36px;

			}

			.right-font {
/*                width: 24px;
				height: 24px;
				line-height: 24px;
				font-size: 24px;*/
				@include themeify{
					font-size: themed('font-size7');
					width: themed('font-size7');
					height: themed('font-size7');
					line-height: themed('font-size7');
				}
                position: absolute;
				top: 20px;
				right: 12px;

			}
		}
	.price-item{
		padding: 16px 0;
		display: flex;
		border-bottom: 1px solid rgba(238, 242, 240, 100);
		
		.text1{
			width: 44px;
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
/*			font-size: 12px;*/
			
			@include themeify{
				font-size: themed('font-size1');
				height: themed('font-size5'); 
				line-height: themed('font-size5');
			}
			text-align: center;
		}
		.text5{
			width: 44px;
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: #9d9fff;
			color: rgba(255, 255, 255, 100);
			@include themeify{
				font-size: themed('font-size1');
				height: themed('font-size5'); 
				line-height: themed('font-size5');
			}
			/*font-size: 12px;*/
			text-align: center;
		}
		.text2{
/*			width: 40px;
			line-height: 19px;*/
			margin-left: 8px;
			color: rgba(255, 98, 0, 100);
/*			font-size: 20px;*/
			@include themeify{
				font-size: themed('font-size5');
				line-height: themed('font-size5');
				width:themed('font-size15')
			}
			text-align: left;
		}
		.text3{
			margin-left: 4px;
			color: rgba(51, 51, 51, 100);
/*			font-size: 16px;*/
			@include themeify{
				font-size: themed('font-size3');
 			}
			
		}
		.text4{
			// margin-left: 72px;
/*			font-size: 12px;
			line-height: 20px;*/
			@include themeify{
				font-size: themed('font-size3');
				line-height: themed('font-size5');
			}
			color: rgba(102, 102, 102, 100);
		}
	}
	
	.park-item{
		padding: 16px 0;
		display: flex;
		justify-content: space-between;
		.text-box{
			display: flex;	
		}
		.text1{
			width: 44px;
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
				height: themed('font-size5');
			}
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: rgba(78, 148, 255, 100);
			color: rgba(255, 255, 255, 100);
/*			font-size: 12px;*/
			text-align: center;	
		}
		.text2{
			margin-left: 8px;
			color: rgba(51, 51, 51, 100);
			@include themeify{
				font-size: themed('font-size3');
 			}
/*			font-size: 16px;*/
		}
		.text3{
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
 			}
		   color: #666666;
/*		   font-size: 12px;
		   line-height: 20px;*/
		}
		
	}
	}
	// 设备详情
	.equipment-details{
		background-color: #fff;
		margin-top: 12px;
		padding:16px;
		.title{
			display: flex;
			justify-content: space-between;
			.title-left{
				@include themeify{
					font-size: themed('font-size3');
					height: themed('font-size3');					
					font-weight: themed('fontWeight');
					letter-spacing: themed('letterSpacing');
				}
	
/*				height: 16px;*/
				color: rgba(16, 16, 16, 100);
/*				font-size: 16px;*/
			}
			.title-right{
				@include themeify{
					font-size: themed('font-size2');
					height: themed('font-size3');
					font-weight: themed('fontWeight');
					letter-spacing: themed('letterSpacing');
				}
/*				height: 16px;
				font-size: 14px;*/
				.free{
					color: #00b962;
				}
			}
		}
	.equipment-item{
		margin-left: 52px;
		margin-top: 20px;
		padding-bottom: 17px;
		border-bottom:  1px solid rgba(238, 242, 240, 100);
		position: relative;
		.left-font{
			color:#00b962 ;
			@include themeify{
				font-size: themed('font-size13'); 
			}
/*			font-size: 36px;*/
			position: absolute;
			left: -52px;
			top: -4px
		}
		.name{
			display: flex;
			.name-text{
				color: #101010;
				@include themeify{
					font-size: themed('font-size3'); 
					line-height: themed('font-size3'); 
					font-weight: themed('fontWeight');
				}
/*				font-size: 16px;
				line-height: 16px;*/
			}
		}
		.type{
/*			height: 17px;*/
			color: rgba(102, 102, 102, 100);
			@include themeify{
				font-size: themed('font-size1'); 
				height: themed('font-size4'); 
			}
/*			font-size: 12px;*/
			margin-top: 4px;
		}
		.charging-gun{
			
			display: flex;
			justify-content: space-between;
			width: 100%; 
			margin-top: 12px;
			.iconfont{
				color: #a5aaa8;
				@include themeify{
					font-size: themed('font-size5'); 
 				}
/*				font-size: 20px*/
			}
			.gun-num{
				margin-left: 8px;
				@include themeify{
					font-size: themed('font-size1'); 
					line-height: themed('font-size5'); 
				}
/*				font-size: 12px;
				line-height: 20px;	*/
				color: rgba(102, 102, 102, 100);
			}
			.free-state{
				color: rgba(0, 185, 98, 100);
				@include themeify{
					font-size: themed('font-size1'); 
					line-height: themed('font-size5'); 
				}
/*				font-size: 12px;
				line-height: 20px;*/
				margin-left: 12px;
			}
			
			.recharge-state{
				height: 17px;
				color: rgba(255, 98, 0, 100);
				@include themeify{
					font-size: themed('font-size1'); 
					line-height: themed('font-size5'); 
				}
/*				font-size: 12px;
				line-height: 20px;*/
				margin-left: 12px;
			}
		}
	}
	.tag-recharge{
		
	/*	
		height: 16px;		
		line-height: 15px;*/
		@include themeify{
			font-size: themed('font-size0'); 
			line-height: themed('font-size2'); 
			height: themed('font-size3'); 
			//width: themed('font-size14');
			min-width: 38px;
		}
		border-radius: 2px;
		color: rgba(255, 98, 0, 100);
/*		font-size: 10px;*/
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(255, 98, 0, 100);
		margin-left: 8px;
		
	}
	.tag-free{
/*		width: 28px;*/
		@include themeify{
			font-size: themed('font-size0'); 
			line-height: themed('font-size2'); 
			height: themed('font-size3'); 
			width: themed('font-size9');
		}		
/*		height: 16px;
		line-height: 15px;*/
		border-radius: 2px;
		color: rgba(0, 185, 98, 100);
/*		font-size: 10px;*/
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(0, 185, 98, 100);
		margin-left: 8px;
	}
	}
	// 底部
	.bottom{
		width: 100%;
		height: 56px;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 12px 16px;
		display: flex;
		justify-content: space-between;
		z-index: 9999;
		.button1{
			width: 44%;
			height: 32px;
			border: 1px solid rgba(0, 185, 98, 100);
			color: rgba(0, 185, 98, 100);
/*			font-size: 14px;*/
			@include themeify{
				font-size: themed('font-size2'); 
			}	
		}
		.button2{
			width: 44%;
			height: 32px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			@include themeify{
				font-size: themed('font-size2'); 
 			}	
/*			font-size: 14px;*/
			margin-left: 13px;
		}
		
	}
	
	.buttonAppointment{
		width: 120rpx;
		height: 56rpx;
		position: relative;
		top : -10rpx;
		right: -10rpx;
		border-radius: 100rpx;
		background-color: rgba(0, 185, 98, 100);
		color: rgba(255, 255, 255, 100);
		@include themeify{
			font-size: themed('font-size2'); 
		}	
/*			font-size: 14px;*/
		margin-left: 13px;
	}
	
	.tabs-box {
		width: 100%;
        line-height: 87px;
		border-bottom: 1px solid #7FDCB0;
		margin-top: 12px;
 /deep/.u-scroll-box{
	 width: 53.6% !important;
	 margin: 0 auto;
	 // background-color: #4e94ff;
	 display: flex;
	 
 }
	}
	
	.elderMode .u-cell_title{
		font-size: 22px;
		font-weight: bold !important;
		 
		
	}
	.charging-gun{
		padding-bottom: 50px;
		background-color: #fff;
		.item{
			padding: 12px 0 8px 0;
			margin: 0 16px;
			display: flex;
			
			.free{
				
			
				 max-width: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(228, 246, 234, 100);
				color: rgba(0, 140, 74, 100);
				border-radius: 8px;
				text-align: center;
			}
			.charging{
				background-color: rgba(241, 241, 241, 100);
				color: rgba(74, 74, 74, 100);
			}
			
			.not-open{
				background-color: rgba(255, 233, 233, 100);
				color: rgba(255, 70, 70, 100);
				
			}
			.info{
				width: 45vw;
				margin-left: 8px;
				.name{
					
					font-size: 12px;
					line-height: 16px;
					color: rgba(16, 16, 16, 100);
					
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.details{
					height: 16px;
					margin-top: 8px;
					font-size: 12px;
					.iconfont{
						color: #999999;
						font-size: 16px;
						margin-left: 4px;
					}
				}
				
			}
			.tag{
				width: 30%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-left:4px;
				.tag-item{
					width: 48px;
					height: 24px;
					line-height:24px;
					border-radius: 50px;
					background-color: rgba(0, 185, 98, 100);
					color: rgba(255, 255, 255, 100);
					text-align: center;
					margin-left: 8px;
				}
				.not-open-tag{
					background-color: rgba(192, 196, 208, 100);
					
				}
				
			}
			.persent{
				text-align: right;
				font-size: 16px;
				flex: 1;
				
				
			}
		}
		
	}
	.open-time{
		padding-top:5px;
		border-bottom: 1px solid rgba(238, 242, 240, 100);
		padding-left: 76px;
		padding-bottom: 19px;
		line-height: 24px;
		font-size: 16px;
		color: rgb(136, 136, 136);
		p{
		text-indent: 112px;
		}
	}
	/deep/.u-tab-bar{
		height: 4px !important;
		background-color: #00b962 !important;
		width: 50px !important;
		left: -15px !important;
		bottom: -5px !important;
		
	}
	/deep/.u-cell__value{
		text-align: left;
		margin-left: 12px;
		color: #101010;
	}
	/deep/.u-model__content__message{
		line-height: 22px;
	}
</style>