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

<template>
	<view style="padding-bottom: 138px;">
		<u-navbar title="站点详情"></u-navbar>
		 
		<view class="station-details">
			<u-image v-if="stationDetail.station.image != null" class="img" width="26.6%" height="75px" :src="stationDetail.station.image" loading-icon="photo"></u-image>			
			<view class="station-name" >
				{{stationDetail.station.name}}
			</view>
			
			<view class="details-item" style="margin-top: 22px;">
				<text class="iconfont font5" style="color: #00b962;">&#xe60a;</text> <text
					class="item-text">{{(stationDetail.station.type.indexOf('1')>=0?'直流快充':'')}}{{(stationDetail.station.type.indexOf(',')>=0?'/':'')}}{{(stationDetail.station.type.indexOf('2')>=0?'交流慢充':'')}}</text>
			</view>
			<view class="details-item">
				<text class="iconfont font5" style="color: #4e94ff;">&#xe60e;</text> 
				<text class="item-text">{{stationDetail.station.distance!=null ? stationDetail.station.distance.toFixed(3):''}}公里</text>
			</view>
			<view class="details-item">
				<text class="iconfont font5" style="color: #ffad79;">&#xe621;</text>
				 <text class="item-text"> {{info.station.time}}</text>

			</view>
			<view class="station-address">
				<img src="static/img/Frame 201.png" alt="">
				<view class="address-text" >
					{{stationDetail.station.address}}
				</view>
				<view class="iconfont address-font" @click="map">
					&#xe60c;
				</view>
			</view>
		</view> 
		
		<view class="price-details">
			<view class="detail-title">
				<view class="title-left font-weight5">价格详情</view>
				<view class="title-right" @click="priceDetail">
					<view class="right-text">价格详情 </view>
					<view class="iconfont right-font">&#xe600;</view>
				</view>
			</view>
			<view class="price-item" v-if="stationDetail.slowPrice != null" style="justify-content: space-between;" >
				<view style="display:flex;flex-direction:row">
					<view class="text1">慢充</view>
					<view class="text2">{{stationDetail.slowPrice.costPrice}}</view>
					<view class="text3">起 元/度</view>
				</view>
				<view class="text4">{{stationDetail.slowPrice.startTime}}-{{stationDetail.slowPrice.endTime}}</view>
			</view>
			<view class="price-item"  v-if="stationDetail.fastPrice != null"  style="justify-content: space-between;" >
				<view style="display:flex;flex-direction:row">
					<view class="text5">快充</view>
					<view class="text2">{{stationDetail.fastPrice.costPrice}}</view>
					<view class="text3">起 元/度</view>					
				</view>				
				<view class="text4">{{stationDetail.fastPrice.startTime}}-{{stationDetail.fastPrice.endTime}}</view>
			</view> 
			<view class="park-item">
				<view class="text-box">
					<view class="text1">
						停车
					</view>
					<view class="text2">
						{{info.park.price}}
					</view>
				</view>
				<view class="text3">
					仅供参考，以停车场实际价格为准
				</view>
			</view>
		</view> 
		
		<view class="equipment-details">
			<view class="title">
				<view class="title-left ">
					设备详情
				</view>
				<view class="title-right">
					<text class="free">空闲{{stationDetail.station.availableNum}}/</text>
					<text>总数{{stationDetail.station.totalNum}}</text>
				
				</view>
			</view>
			
			<view class="equipment-item" v-for="(item,index) in stationDetail.devices" :key="index">
				<view class="left-font iconfont" v-if="item.workStatus==0">
					&#xe60a;
				</view>
				<view class="left-font iconfont" style="color:#ff6200" v-else>
					&#xe60a;
				</view>
				<view class="name">
					<view class="name-text">
						{{item.name}}
					</view>
					<view :class="item.workStatus==0?'tag-free':'tag-recharge'">
						{{item.workStatusText}}
					</view>
				</view>
				<view class="type" style="display: flex;flex-direction: row;">
					<view>
						{{item.interfaceType}}
					</view>
					<view v-show="item.interfaceType!= null && item.chargingType != null" style="margin-left: 5rpx;margin-right: 5rpx;">
						|
					</view>
					<view :style="item.chargingType=='快充' ? 'color:#CA9DFF':'color:#00B962'">
						{{item.chargingType}}
					</view>
					<view v-show="item.chargingPower!= null && item.chargingType != null" style="margin-left: 5rpx;margin-right: 5rpx;">
						|
					</view>
					<view>
						{{item.chargingPower!=null?item.chargingPower+'kW':''}}
					</view> 		
				</view>
				<view class="charging-gun" v-for="(item1,index1) in item.gunList" :key="index1" >
					<view class="iconfont">
						&#xe618;
					</view>
					<view class="gun-num">
						充电枪{{item1.channelNo<10?'0'+item1.channelNo.toString():item1.channelNo.toString()}}
					</view>
					<view :class="item1.workStatus==0?'free-state':'recharge-state'">
 						{{item1.workStatus == 0?item1.workStatusText: item1.workStatusText + ' SOC ' + item1.soc.toFixed(1)+'%'}}
					</view>
				</view>			
			</view> 
			
		</view> 
		
		<view class="bottom">
			<u-button class="button1" shape="circle" size="medium" @click="getScanCode()">扫码充电</u-button>
			<u-button class="button2" shape="circle" size="medium" @click="navigate">导航</u-button>
		</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:'',
				currentPos:{
						name:'荆鹏软件园充电站',
						longitude: 112.28468,
						latitude: 30.307094,					
				},
				station:{},
				stationDetail:{"devices":[{"id":"e451bcad-f4a6-4b3a-9b34-9c806543637d","name":"直流汽车充电桩xx01","deviceNo":"95272018111111111","type":"1","online":false,"stationId":"3865b3a3-13fd-461a-8145-ee9711df35a2","disProportion":null,"unitPrice":null,"roleName":null,"stationName":null,"interfaceType":null,"chargingType":null,"chargingPower":80,"gunList":[{"id":"3a025433-8e7a-41c3-99e5-372bf99950d5","deviceNo":"95272018111111111","gunNo":"952720181111111111001","channelNo":1,"gunType":1,"workStatus":2,"soc":50,"carConnectStatus":0,"dcV":40,"dcA":163,"bmsV":0,"bmsA":0,"bmsModel":0,"acAV":0,"acAA":0,"acBV":0,"acBA":0,"acCV":0,"acCA":0,"remainMin":0,"chargeTimeSec":0,"kwh":0,"beforeMeter":0.67,"nowMeter":0,"startType":0,"strategy":0,"strategyParam":0,"reserve":0,"cardId":"","reserveTimeout":0,"startTime":null,"beforeBalance":0,"power":6.5,"outWindTemperature":0,"envTemperature":0,"gunTemperature":0,"vin":"","doorStatus":0,"createBy":null,"createTime":"2022-05-13 11:40","updateBy":null,"updateTime":"2022-05-18 14:52","delFlag":false,"workStatusText":"充电进行中","gunTypeText":"交流"},{"id":"009507eb-308e-4121-8312-2fbc1de8afb6","deviceNo":"95272018111111111","gunNo":"952720181111111112001","channelNo":2,"gunType":1,"workStatus":0,"soc":0,"carConnectStatus":0,"dcV":0,"dcA":0,"bmsV":0,"bmsA":0,"bmsModel":0,"acAV":0,"acAA":0,"acBV":0,"acBA":0,"acCV":0,"acCA":0,"remainMin":0,"chargeTimeSec":0,"kwh":0,"beforeMeter":0,"nowMeter":0,"startType":0,"strategy":0,"strategyParam":0,"reserve":0,"cardId":"","reserveTimeout":0,"startTime":null,"beforeBalance":0,"power":null,"outWindTemperature":0,"envTemperature":0,"gunTemperature":0,"vin":"","doorStatus":0,"createBy":null,"createTime":"2022-05-17 11:12","updateBy":null,"updateTime":null,"delFlag":false,"workStatusText":"空闲中","gunTypeText":""}]},{"id":"d48f72f0-a951-4c41-85fe-c7deef29a79e","name":"W4702-80kw双枪直流桩","deviceNo":"23470220220422001","type":"1","online":false,"stationId":"3865b3a3-13fd-461a-8145-ee9711df35a2","disProportion":null,"unitPrice":null,"roleName":null,"stationName":null,"interfaceType":null,"chargingType":null,"chargingPower":null,"gunList":[{"id":"2a4b9c34-9e95-44da-94ba-e59eb2f57355","deviceNo":"23470220220422001","gunNo":"234702202204220011001","channelNo":1,"gunType":1,"workStatus":0,"soc":0,"carConnectStatus":0,"dcV":0,"dcA":0,"bmsV":0,"bmsA":0,"bmsModel":0,"acAV":0,"acAA":0,"acBV":0,"acBA":0,"acCV":0,"acCA":0,"remainMin":0,"chargeTimeSec":0,"kwh":0,"beforeMeter":63.29,"nowMeter":59.38,"startType":1,"strategy":2,"strategyParam":1000,"reserve":0,"cardId":"13986703087","reserveTimeout":0,"startTime":"2022-05-14 10:01","beforeBalance":67.49,"power":0,"outWindTemperature":73,"envTemperature":0,"gunTemperature":69,"vin":"","doorStatus":0,"createBy":null,"createTime":"2022-05-13 09:11","updateBy":null,"updateTime":"2022-05-14 10:34","delFlag":false,"workStatusText":"空闲中","gunTypeText":""},{"id":"f56571d1-b202-47e1-8016-72eb96684644","deviceNo":"23470220220422001","gunNo":"234702202204220012001","channelNo":2,"gunType":1,"workStatus":0,"soc":0,"carConnectStatus":0,"dcV":0,"dcA":0,"bmsV":0,"bmsA":0,"bmsModel":0,"acAV":0,"acAA":0,"acBV":0,"acBA":0,"acCV":0,"acCA":0,"remainMin":0,"chargeTimeSec":0,"kwh":0,"beforeMeter":9.12,"nowMeter":0,"startType":0,"strategy":0,"strategyParam":0,"reserve":0,"cardId":"","reserveTimeout":0,"startTime":"0002-11-30 00:00","beforeBalance":0,"power":0,"outWindTemperature":73,"envTemperature":0,"gunTemperature":77,"vin":"","doorStatus":0,"createBy":null,"createTime":"2022-05-13 09:11","updateBy":null,"updateTime":"2022-05-14 10:34","delFlag":false,"workStatusText":"空闲中","gunTypeText":""}]},{"id":"2ab49cd6-2492-4d96-8588-46b07edf5ceb","name":"双枪直流桩","deviceNo":"23470220220422002","type":"1","online":false,"stationId":"3865b3a3-13fd-461a-8145-ee9711df35a2","disProportion":null,"unitPrice":null,"roleName":null,"stationName":null,"interfaceType":"国际直流","chargingType":"快充","chargingPower":80,"gunList":[]}],"slowPrice":null,"station":{"id":"3865b3a3-13fd-461a-8145-ee9711df35a2","name":"荆鹏充电站","address":"江津路156号","longitude":112.28308,"latitude":30.312084,"type":"1","costPrice":null,"electricityPrice":null,"servicePrice":null,"availableNum":0,"totalNum":6,"distance":0.001},"fastPrice":{"id":"3d4f1007-a14c-4c87-a698-12f4bcecd74f","templateId":"0755f694-d1cf-11ec-ae55-0250f2000002","deviceId":"2ab49cd6-2492-4d96-8588-46b07edf5ceb","electricityPrice":0.5,"servicePrice":1,"startTime":"00:00","endTime":"07:00","createBy":"72dc480e-6816-4be3-918d-da2436f39627","createTime":"2022-05-16 10:39","updateBy":null,"updateTime":null,"delFlag":false,"costPrice":1.5,"firstTime":"00:00","latestTime":"20:00"}},
				
				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:'免费'
					},
					priceList:[],
					devices:{
						idleNum:1,
						total:6,
						items:[
							{name:'1号桩',status:'空闲',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]},
							{name:'2号桩',status:'充电中',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]},
							{name:'3号桩',status:'充电中',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]}
						]
					}
				}
			}
		},
		onLoad(op){
			_self = this;

//			document.getElementsByTagName('body')[0].style.setProperty('--mode',1)
			_self.processStationsInfo();
				 
			if(op!=null){
				if(op.id != null){
					let data = {stationId:op.id};
						//if(station.distance != null)
						//	_self.stationDetail.station.distance = station.distance;
						//console.log('station'+JSON.stringify(station))
						//_self.station = station; 
						api.getChargingStationDetail(data).then(function(res){
							console.log('站点详情'+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();							
									if(_self.stationDetail.station.distance == null){
										_self.getPoint();
									}
	//								console.log('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;
					console.log('station'+JSON.stringify(station))
					_self.station = station; 
					api.getChargingStationDetail(data).then(function(res){
						console.log('站点详情'+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();							
//								console.log('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);
								}
								console.log('站点价格详情'+JSON.stringify(list));
								
							}
						}
					})*/
					//this.info.station = station;
					console.log('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) => {
				// console.log(res)
			}).catch(error => {
				console.log(res)
			})
			 
		},
		methods:{
			getPoint() {
				 
	//			console.log('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)
					})*/
					//console.log('当前位置' +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) {
							console.log(result)
							console.log(result.routes[0].time)//秒
							console.log(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('地图加载失败');
					console.log('地图加载失败', 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++){
					if(!_self.stationDetail.devices[i].online)
					{
						_self.stationDetail.devices[i].workStatusText ='不在线';
						continue;
					}
					//console.log('device['+i.toString()+']'+JSON.stringify(_self.stationDetail.devices[i]))
					_self.stationDetail.devices[i].workStatus = 2;
					_self.stationDetail.devices[i].workStatusText ='充电中';
 					for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
						//console.log('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//地图缩放大小，可根据情况具体调整
				 });*/
				 console.log('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(){
				 console.log('扫码充电')
				//#ifdef MP-WEIXIN
				uni.scanCode({
					success:function(res){
						uni.navigateTo({
							url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
						})
						
					}
				}) 
				return;
				//#endif
				 
				 console.log('扫码充电1')
				 uni.navigateTo({
				 	url:'chargingPileDetails'
				 })
				
			},
			priceDetail(){
				uni.navigateTo({
					url:'chargePriceDetails?stationId='+_self.stationDetail.station.id
				})
			},
			map(){
				console.log('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 == 'dark')	
			  {
 				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";
	// 站点信息
	.station-details {
		width: 100%;
		height: 100%;
		padding: 20px 16px 16px;
		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 {
			margin-top: 11px;
			height: 17px;

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

		.item-text {
			display: inline-block;
			color: rgba(102, 102, 102, 100);
			margin-left: 4px;
			line-height: 17px;
			position: absolute;
			left: 24px;
			top: 2px;
		}

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

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

			.address-text {
				height: 17px;
				line-height: 17px;
				position: absolute;
				top: 12px;
				left: 0;
				@include themeify{
					font-size: themed('font-size1');
				}
/*				font-size: 12px*/
			}

			.address-font {
				@include themeify{
					font-size: themed('font-size9');
				}
/*				font-size: 28px;*/
				color: #4e94ff;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}

	// 价格详情
	.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');
			}
			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-size1');
				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');
				}
	
/*				height: 16px;*/
				color: rgba(16, 16, 16, 100);
/*				font-size: 16px;*/
			}
			.title-right{
				@include themeify{
					font-size: themed('font-size2');
					height: themed('font-size3');
				}
/*				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-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;
			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{
		width: 38px;
/*		height: 16px;		
		line-height: 15px;*/
		@include themeify{
			font-size: themed('font-size0'); 
			line-height: themed('font-size2'); 
			height: themed('font-size3'); 
		}
		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'); 
		}		
/*		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;
		.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;
		}
		
	}
</style>