站点详情地图

pages.json

@@ -234,6 +234,15 @@
 			}
 
 		},
+		{
+			"path": "pages/searchPile/stationAndPile/stationDetailsMap",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		
+		}
+		 ,	
 		{
 			"path": "pages/searchPile/searchPileMap",
 			"style": {

pages/search/search.vue

@@ -5,77 +5,29 @@
 			<u-search class="search" placeholder="搜索站点名称" v-model="keyword" color="#c8c8c8"></u-search>
 		</u-navbar>
 		<view class="recommend">推荐充电站</view>
-		<view class="charing-slow">
-			<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
+		<view class="charing-slow" v-for="(item,index) in stations" :key="item.id">
+			<text :class="item.type == '慢充'? 'trickle-charge':'fast-charge'">{{item.type}}</text> <text class="station-items">荆鹏软件园充电站</text>
 			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
+				{{item.position}}
 			</view>
 			<view class="price">
-				<view class="num">1.20</view> <view class="unit">
+				<view class="num">{{item.price}}</view> <view class="unit">
 					起 元/度
 				</view>
 			</view>
 			 <view class="park">
 				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
+				<text class="park-text">{{item.park}}</text>
 			</view>
 			<view class="free">
 				<view class="free-num">
-					  <text style="color:#009143;">空闲1</text>/总数5
+					  <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
 				</view>
 				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>0.1公里 1分钟
+					<text class="iconfont distance-font">&#xe615;</text>{{item.distance}}公里 {{item.time}}分钟
 				</view>
 			</view>
-		</view>
-		<view class="charing-slow">
-			<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
-			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
-			</view>
-			<view class="price">
-				<view class="num">1.25</view> <view class="unit">
-					起 元/度
-				</view>
-			</view>
-			 <view class="park">
-				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
-			</view>
-			<view class="free">
-				<view class="free-num">
-				  <text style="color:#009143;">空闲10</text>/总数10
-				</view>
-				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
-				</view>
-			</view>
-		</view>
-		
-		<view class="charing-slow">
-			<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
-			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
-			</view>
-			<view class="price">
-				<view class="num">1.20</view> <view class="unit">
-					起 元/度
-				</view>
-			</view>
-			 <view class="park">
-				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
-			</view>
-			<view class="free">
-				<view class="free-num">
-				  <text style="color:#009143;">空闲1</text>/总数5
-				</view>
-				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>0.1公里 1分钟
-				</view>
-			</view>
-		</view>
-		
+		</view>		
 	</view>
 </template>
 
@@ -85,7 +37,13 @@
 		
 		data() {
 			return {
-          
+			  stations:[
+					{name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idleNum:10,total:10,distance:0.1,time:1,type:'慢充',park:'2小时免费停车'},
+					{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idleNum:10,total:10,distance:0.15,time:12,type:'快充',park:'3小时免费停车'},
+					{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idleNum:10,total:10,distance:0.2,time:13,type:'慢充',park:'4小时免费停车'},
+					{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idleNum:10,total:10,distance:0.3,time:14,type:'快充',park:'5小时免费停车'},
+				
+				],
 			}
 		},
 		 // conponents:{charingSlows},

pages/searchPile/searchPile.vue

@@ -38,7 +38,7 @@
 				</view>
 			</view>
 		</u-navbar>
-		<view class="content">
+		<view class="content" >
 			<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'">
 				<view class="preference_group">
 					<view class="preference_group_item"><label class="preference_label">距离我</label></view>
@@ -125,9 +125,10 @@
 					<u-button @click="close" style="width: 70%;background-color: #00B962;">确定</u-button>
 				</view>
 			</view>
-			<view v-show="!viewMode">
-				<view v-for="(item,index) in stations" :key="item.id" >
-					<text class="fast-charge">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
+			<view v-show="!viewMode" >
+				 
+				<view v-for="(item,index) in stations" :key="item.id" class="charing-slow" >
+					<text :class="item.type == '快充' ? 'fast-charge':'trickle-charge'">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
 					<view class="address">
 						{{item.position}}
 					</view>
@@ -150,109 +151,16 @@
 						</view>
 					</view>
 				</view>
-				<!--
-				<view class="charing-slow">
-					<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
-					<view class="address">
-						湖北省荆州市沙市区江津东路附155号
-					</view>
-					<view class="price">
-						<view class="num">1.25</view>
-						<view class="unit">
-							起 元/度
-						</view>
-					</view>
-					<view class="park">
-						<text class="park-p">p</text>
-						<text class="park-text">2小时免费停车</text>
-					</view>
-					<view class="free">
-						<view class="free-num">
-							<text style="color:#009143;">空闲10</text>/总数10
-						</view>
-						<view class="distance">
-							<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
-						</view>
-					</view>
-				</view>
-				<view class="charing-slow">
-					<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
-					<view class="address">
-						湖北省荆州市沙市区江津东路附155号
-					</view>
-					<view class="price">
-						<view class="num">1.25</view>
-						<view class="unit">
-							起 元/度
-						</view>
-					</view>
-					<view class="park">
-						<text class="park-p">p</text>
-						<text class="park-text">2小时免费停车</text>
-					</view>
-					<view class="free">
-						<view class="free-num">
-							<text style="color:#009143;">空闲1</text>/总数5
-						</view>
-						<view class="distance">
-							<text class="iconfont distance-font">&#xe615;</text>0.1公里 1分钟
-						</view>
-					</view>
-				</view>
-				<view class="charing-slow">
-					<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
-					<view class="address">
-						湖北省荆州市沙市区荆沙大道15号
-					</view>
-					<view class="price">
-						<view class="num">1.20</view>
-						<view class="unit">
-							起 元/度
-						</view>
-					</view>
-					<view class="park">
-						<text class="park-p">p</text>
-						<text class="park-text">2小时免费停车</text>
-					</view>
-					<view class="free">
-						<view class="free-num">
-							<text style="color:#009143;">空闲10</text>/总数10
-						</view>
-						<view class="distance">
-							<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
-						</view>
-					</view>
-				</view>-->
+				 
+				<u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
+				 
+				
+				
 			</view>
-			<view v-show="viewMode">					
+			<view v-show="viewMode" >					
 				<view>
-					<Chargermap  ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>					
+					<Chargermap   ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
 				</view>
-				
-				<!--<view class="charing-slow">
-					<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
-					<view class="address">
-						湖北省荆州市沙市区江津东路附155号
-					</view>
-					<view class="price">
-						<view class="num">1.25</view>
-						<view class="unit">
-							起 元/度
-						</view>
-					</view>
-					<view class="park">
-						<text class="park-p">p</text>
-						<text class="park-text">2小时免费停车</text>
-					</view>
-					<view class="free">
-						<view class="free-num">
-							<text style="color:#009143;">空闲10</text>/总数10
-						</view>
-						<view class="distance">
-							<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
-						</view>
-					</view>
-				</view>-->
 				 
 				<view v-if="stations.length>0" class="chargerCard" style="border-radius: 20rpx;" > 
 					<swiper :current="currentIndex" @change="swiperChange" @transition="swiperTransition" style="height: 100%;">
@@ -319,8 +227,7 @@
 				</view>
 			</view>
 		</view>
-		<u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
-		<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
+		<u-tabbar  v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
 	</view>
 </template>
 
@@ -430,6 +337,40 @@ export default {
 		this.getNearbyStationInfo();
 		this.isReady = true;
 		this.$refs.amap.init();
+		 
+		//let state = {};
+		uni.getSystemInfo({
+			success: (res) => {
+				// #ifndef MP
+				let navbarH = 0
+				// #endif
+				// #ifdef MP
+				let navbarH = uni.upx2px(90)
+				// #endif
+				/*state.status_width = res.windowWidth;
+				console.log('window width'+state.status_width);*/
+				
+				let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
+				console.log('布局结果'+ JSON.stringify(res));
+				console.log('scrollH'+scrollH)
+				//#ifdef MP-WEIXIN
+				const {
+					statusBarHeight,
+					windowWidth,
+				} = uni.getSystemInfoSync();
+				console.log('height ' + statusBarHeight);
+				//this.status_height = uni.getStatusbarHeight();
+				let res1 =  uni.getMenuButtonBoundingClientRect()
+				console.log('layout selectHeight '+JSON.stringify(res1))
+				//state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
+				//#endif
+				//console.log('status height'+state.status_height)
+				_self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:100%;");
+			}
+		})
+//		this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
+//	this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
+				
 		//		console.log('longitude3  '+this.longitude)
 		//		console.log('latitude3  '+this.latitude)
 	},
@@ -564,16 +505,20 @@ export default {
 				let obj = {name:'荆鹏软件园充电站'+i.toString(),
 							position:'湖北省荆州市沙市区江津东路附155号',
 							price:1.2,idleNum:10,total:10,distance:0.1,
-							time:1,type:'慢充',
+							time:1,
+							type:'慢充',
 							id: i,
 							park: i%2 == 0? '以实际费用为准':'2小时免费停车',
 							longitude: 112.28541 + i * 0.001,
 							latitude: 30.308354 + i * 0.01
 							};
-				if(i == 0){
+				if(i%2 == 0){
 					obj.longitude = 112.28571 ;
 					obj.latitude = 30.307539;
+				}else{
+					obj.type = '快充';
 				}
+				
 				//arr.push(obj);
 				this.stations.push(obj);
 			}
@@ -744,16 +689,14 @@ export default {
  
  .charing-slow {
  	background-color: #fff;
- 	margin: 0 12px;
- 	border-radius: 8px;
+	margin: 20rpx;
+	border-radius: 8px;
  	padding: 10px 12px 0px;
- 	position: fixed;
- 	bottom: 68px;
+ 	position: relative;
  	left: 0;
  	right: 0;
-	/*height: 25%;*/
-	
- 	.fast-charge1 {
+}
+ 	.fast-charge {
  		display: inline-block;
  		width: 44px;
  		height: 20px;
@@ -764,6 +707,17 @@ export default {
  		font-size: 12px;
  		text-align: center;
  	}
+	.trickle-charge {
+		display: inline-block;
+		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;
+		text-align: center;
+	}
  
  	.station-items {
  		display: inline-block;
@@ -799,52 +753,65 @@ export default {
  		display: flex;
  		height: 20px;
  
- 		.num {
- 			height: 20px;
- 			color: rgba(255, 98, 0, 100);
- 			font-size: 20px;
- 			text-align: left;
- 			font-family: Roboto-medium;
- 		}
- 
- 		.unit {
- 			height: 14px;
- 			line-height: 14px;
- 			color: rgba(102, 102, 102, 100);
- 			font-size: 14px;
- 			text-align: left;
- 			font-family: AlibabaPuHui-regular;
- 			margin-top: 6px;
- 			margin-left: 4px;
- 		}
  	}
  
+ 
+ .num {
+ 	height: 20px;
+ 	color: rgba(255, 98, 0, 100);
+ 	font-size: 20px;
+ 	text-align: left;
+ 	font-family: Roboto-medium;
+ }
+  
+ .unit {
+ 	height: 14px;
+ 	line-height: 14px;
+ 	color: rgba(102, 102, 102, 100);
+ 	font-size: 14px;
+ 	text-align: left;
+ 	font-family: AlibabaPuHui-regular;
+ 	margin-top: 6px;
+ 	margin-left: 4px;
+ }
  	.park {
  		margin-top: 8px;
  		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: 4px;
- 			margin-top: 2px;
- 		}
+ 		
  	}
- 
+	.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: 4px;
+		margin-top: 2px;
+	}
+	
+	 .map {
+		width: 100%;
+	 
+		height: 100%;
+		position: relative;
+	}
+	#container {
+	  width: 100%;
+	  height: 100%;
+	}
  	.free {
  		display: flex;
  		justify-content: space-between;
@@ -852,27 +819,27 @@ export default {
  		border-top: 1px solid rgba(238, 242, 240, 100);
  		margin-top: 10px;
  
- 		.free-num {
- 			line-height: 52px;
- 			font-size: 16px
- 		}
- 
- 		.distance {
- 			width: 130px;
- 			height: 28px;
- 			line-height: 28px;
- 			color: rgba(255, 255, 255, 100);
- 			font-size: 14px;
- 			background-color: #00b962;
- 			border-radius: 50px;
- 			margin: 12px;
- 			text-align: center;
- 
- 			.distance-font {
- 				font-size: 16px
- 			}
- 
- 		}
- 	}
- }
+ 		
+ 	} 
+	.free-num {
+		line-height: 52px;
+		font-size: 16px
+	} 
+	.distance {
+		width: 130px;
+		height: 28px;
+		line-height: 28px;
+		color: rgba(255, 255, 255, 100);
+		font-size: 14px;
+		background-color: #00b962;
+		border-radius: 50px;
+		margin: 12px;
+		text-align: center;
+
+		
+
+	}
+	.distance-font {
+		font-size: 16px
+	}
 </style>

pages/searchPile/stationAndPile/stationDetailsMap.vue

@@ -0,0 +1,453 @@
+<template>
+	<view >
+		<u-navbar title="站点详情"></u-navbar>
+		<view class="content" >
+			 
+			<view>
+				<Chargermap   ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
+			</view>
+			 
+			 <view class="chargerCard" >
+				<view class="card_item" style="font-size: 35rpx;padding-top: 5rpx;">
+					<view style="display: flex;flex-direction: row;">
+						<view class="round2" style="margin-right: 5rpx;">
+							{{item.type}}
+						</view>
+						<view>
+							{{item.name}}											
+						</view>
+						
+					</view>
+				</view>		
+				<view class="card_item" style="color:#8898A9;font-size: 15rpx;">
+					{{item.position}}
+				</view>
+				
+				<view class="card_item2" >
+					<view style="color:#FF6573;font-size:45rpx;margin-right: 10rpx;">
+						{{item.price}}
+					</view>
+					<view style="display: flex; justify-content: center;align-items: center">
+					起 元/度										
+					</view>
+				</view>
+				<view class="card_item" style="border-bottom: #F1F4F3; border-bottom-width: 2rpx;border-style: solid;border-top-width: 0rpx;border-left-width: 0rpx;border-right-width:0rpx; padding-bottom:20rpx">
+					<view style="display: flex;flex-direction: row;">
+						<view style="background-color: #7DB1FF;padding-left: 10rpx;padding-right: 10rpx;">
+							P
+						</view>
+						<label>{{item.park}}</label>
+					</view>
+					<view style="display: flex;flex-direction: row;">
+						<view style="color: #00B962;">
+							空闲{{item.idleNum}}
+						</view>
+						
+				 			<view>
+				 				/总数{{item.total}}
+				 			</view>
+				 		</view>
+				 	</view>
+				 	<view class="card_item" style="padding-bottom: 20rpx;">
+				 		<u-button shape='circle' style="color: #00B962;">
+				 			<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
+				 			<label>扫码充电</label></u-button>
+				 		<view class="round">
+				 			<text class="iconfont distance-font">&#xe615;</text>
+				 			<view  style="margin-right: 10rpx;">
+				 				{{item.distance}}公里											
+				 			</view>
+				 			<view  style="margin-right: 10rpx;">
+				 				{{item.time}}分钟
+				 			</view>
+				 		</view>
+				 	</view>
+				 </view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	let _self;
+	import Chargermap from '@/components/Chargermap.vue';
+	export default {
+		components: {
+			Chargermap 
+		},
+		data() {
+			return {
+				id: '',
+				longitude: 112.28468,
+				latitude: 30.307094,
+				//			longitude: '',
+				//			latitude: '',
+				 
+				area: '荆州市',
+				action: '筛选',
+				 
+				item:{name:'荆鹏软件园充电站',
+				position:'湖北省荆州市沙市区江津东路附155号',
+				price:1.2,idleNum:10,total:10,distance:0.1,time:1,type:'慢充',id: 0,
+							park: '以实际费用为准',
+							longitude: 112.28541,
+							latitude: 30.308354 },
+			}
+		},
+		methods:{
+			mapdown() {
+						//console.log('this'+JSON.stringify(this))
+			//			console.log('longitude1  ' + this.longitude);
+			//			console.log('latitude1  ' + this.latitude);
+			
+						var obj = {
+							longitude: _self.longitude,
+							latitude: _self.latitude
+						};
+			//			console.log('obj ' + JSON.stringify(obj));
+						this.$refs.amap.setPerson(obj);
+						 
+						let arr = [];
+						 
+						 
+						/*console.log('stations'+JSON.stringify(this.stations))
+						*/
+					   arr.push(this.item);
+					   console.log('stations'+JSON.stringify(arr))
+						this.$refs.amap.setChargerList(arr);
+						this.$refs.amap.updateCharger(this.item)
+						//this.$refs.amap.setPerson(obj);
+						//this.$refs.amap.setSite(obj2);
+					},
+		},
+		onLoad(op) {
+				_self = this;
+				console.log('longitude0  ' + _self.longitude);
+				console.log('latitude0  ' + _self.latitude);
+				if (op != null) {
+					if (op.longitude != null) this.longitude = op.longitude;
+					if (op.latitude != null) this.latitude = op.latitude;
+					if (op.id != null) this.id = op.id;
+				}
+				this.item.longitude  = this.latitude;
+				this.item.latitude = this.latitude;
+			},
+			onReady() {
+				//		console.log('longitude2  '+this.longitude)
+				//		console.log('latitude2  '+this.latitude) 
+				this.isReady = true;
+				this.$refs.amap.init();
+				 
+				//let state = {};
+				uni.getSystemInfo({
+					success: (res) => {
+						// #ifndef MP
+						let navbarH = 0
+						// #endif
+						// #ifdef MP
+						let navbarH = uni.upx2px(90)
+						// #endif
+						/*state.status_width = res.windowWidth;
+						console.log('window width'+state.status_width);*/
+						
+						let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
+						console.log('布局结果'+ JSON.stringify(res));
+						console.log('scrollH'+scrollH)
+						//#ifdef MP-WEIXIN
+						const {
+							statusBarHeight,
+							windowWidth,
+						} = uni.getSystemInfoSync();
+						console.log('height ' + statusBarHeight);
+						//this.status_height = uni.getStatusbarHeight();
+						let res1 =  uni.getMenuButtonBoundingClientRect()
+						console.log('layout selectHeight '+JSON.stringify(res1))
+						//state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
+						//#endif
+						//console.log('status height'+state.status_height)
+						_self.$refs.amap.setMyStyle("height:"+(scrollH-44)+ "px;width:100%;");
+					}
+				})
+		//		this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
+		//	this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
+						
+				//		console.log('longitude3  '+this.longitude)
+				//		console.log('latitude3  '+this.latitude)
+			},
+			onShow() {
+				 
+			},
+	}
+</script>
+
+<style>
+	.preference_group_item {
+		padding: 15rpx;
+	}
+	.preference_group {
+		padding-bottom: 20rpx;
+	}
+	.preference {
+		background-color: #ffffff;
+		left: 0rpx;
+		position: absolute;
+	}
+	.preference_item {
+		margin-bottom: 10rpx;
+		margin-left: 20rpx;
+		text-align: center;
+		border-style: none;
+		width: 20%;
+	}
+	.preference_item_plus {
+		margin-bottom: 10rpx;
+		margin-left: 20rpx;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		width: 25%;
+		border-style: none;
+	}
+	.preference_label {
+		color: #9f9c99;
+		margin-left: 20rpx;
+		margin-bottom: 100rpx;
+	}
+	.map{
+		background-color: #ffffff;
+		left: 0rpx;
+		position: absolute;
+		
+	}
+	.chargerCard{
+	/*	background-color: #fff;
+		margin: 0 12px;
+		border-radius: 8px;
+		padding: 10px 12px 0px;
+		position: absolute;
+		bottom: 68px;
+		left: 0;
+		right: 0;
+		z-index:1021
+	*/
+		background-color: #fff;
+		margin: 0 12px;
+		border-radius: 8px;
+		padding: 10px 12px 0px;
+		bottom: 28px;
+		left: 0;
+		right: 0;	
+		position: fixed;
+		height:360rpx;
+		/*
+		z-index: 1021; 
+		width: 80%;
+		margin-left: 10%;
+		bottom: 50rpx;
+		
+		*/
+	}
+	.arrow{
+		margin-right: 15rpx;
+	}
+	.card_item{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-left: 20rpx;
+		margin-right: 20rpx;
+		margin-bottom: 10rpx;
+	}
+	.card_item2{
+		display: flex;
+		flex-direction: row;
+		margin-left: 20rpx;
+		margin-right: 20rpx;
+		margin-bottom: 10rpx;
+	}
+	.round{
+		border-radius:50rpx; 
+		background-color: #00B962;
+		color: #ffffff;
+		text-align: center;
+		justify-content: center;
+		align-items: center;
+		width: 250rpx;
+		display: flex;
+		flex-direction: row;
+	}
+	.round2{
+		border-radius:50rpx; 
+		background-color: #00B962;
+		color: #ffffff;
+		text-align: center;
+		justify-content: center;
+		align-items: center;
+		width:125rpx;
+	  }
+	
+	.swiper-item{
+	 }
+	 
+	 .list {
+	 	margin-left: 2px;
+	 
+	 }
+	 
+	 .charing-slow {
+	 	background-color: #fff;
+		margin: 20rpx;
+		border-radius: 8px;
+	 	padding: 10px 12px 0px;
+	 	position: relative;
+	 	left: 0;
+	 	right: 0;
+	}
+	 	.fast-charge {
+	 		display: inline-block;
+	 		width: 44px;
+	 		height: 20px;
+	 		line-height: 20px;
+	 		border-radius: 50px;
+	 		background-color: #9d9fff;
+	 		color: rgba(255, 255, 255, 100);
+	 		font-size: 12px;
+	 		text-align: center;
+	 	}
+		.trickle-charge {
+			display: inline-block;
+			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;
+			text-align: center;
+		}
+	 
+	 	.station-items {
+	 		display: inline-block;
+	 		height: 16px;
+	 		line-height: 16px;
+	 		font-size: 16px;
+	 		margin-left: 4px;
+	 		color: #101010;
+	 
+	 
+	 	}
+		
+		.fast-charge {
+			display: inline-block;
+			width: 44px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: #9d9fff;
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
+		}
+	 
+	 	.address {
+	 		margin-top: 8px;
+	 		line-height: 16px;
+	 		font-size: 11px;
+	 		color: rgba(119, 119, 119, 100);
+	 	}
+	 
+	 	.price {
+	 		display: flex;
+	 		height: 20px;
+	 
+	 	}
+	 
+	 
+	 .num {
+	 	height: 20px;
+	 	color: rgba(255, 98, 0, 100);
+	 	font-size: 20px;
+	 	text-align: left;
+	 	font-family: Roboto-medium;
+	 }
+	  
+	 .unit {
+	 	height: 14px;
+	 	line-height: 14px;
+	 	color: rgba(102, 102, 102, 100);
+	 	font-size: 14px;
+	 	text-align: left;
+	 	font-family: AlibabaPuHui-regular;
+	 	margin-top: 6px;
+	 	margin-left: 4px;
+	 }
+	 	.park {
+	 		margin-top: 8px;
+	 		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: 4px;
+			margin-top: 2px;
+		}
+		
+		 .map {
+			width: 100%;
+		 
+			height: 100%;
+			position: relative;
+		}
+		#container {
+		  width: 100%;
+		  height: 100%;
+		}
+	 	.free {
+	 		display: flex;
+	 		justify-content: space-between;
+	 		height: 52px;
+	 		border-top: 1px solid rgba(238, 242, 240, 100);
+	 		margin-top: 10px;
+	 
+	 		
+	 	} 
+		.free-num {
+			line-height: 52px;
+			font-size: 16px
+		} 
+		.distance {
+			width: 130px;
+			height: 28px;
+			line-height: 28px;
+			color: rgba(255, 255, 255, 100);
+			font-size: 14px;
+			background-color: #00b962;
+			border-radius: 50px;
+			margin: 12px;
+			text-align: center;
+	
+			
+	
+		}
+		.distance-font {
+			font-size: 16px
+		}
+</style>