1111

pages/index/index.vue

@@ -183,8 +183,14 @@
 				<view class="nav-icon iconfont">&#xe627;</view>
 				<view class="nav-text">我的</view>
 			</view> -->
+			<view class="login-prompt">
+				登录显示更多会员服务
+				<text class="button" >登录/注册</text>
+			</view>
 					<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
 				</view>
+				<!-- 登录提示 -->
+				
 			</view>
 </template>
 
@@ -1082,7 +1088,7 @@
 	// 导航栏
 	.navigation {
 		width: 100%;
-		// height: 40px;
+		height: 60px;
 		padding: 10px 0;
 		background-color: #fff;
 		position: fixed;
@@ -1102,4 +1108,28 @@
 			font-size: 14px;
 		}
 	}
+// 登录提示
+.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>

pages/searchPile/chargeProcess/dcChargeEnd.vue

@@ -1,8 +1,130 @@
 <template>
+	<view >
+		<u-navbar title="充电结束">
+		</u-navbar>
+		<view class="progress-bar">
+				<u-circle-progress width="400" active-color="green" :percent="50" border-width="20">
+					<view class="u-progress-content">
+						<!-- <view class="u-progress-dot"></view> -->
+						<text class='u-progress-info'>
+							50%
+							<p class="progress-text">当前电量</p>
+						</text>
+						
+					</view>
+					
+					<view class="bot"></view>
+				</u-circle-progress>
+		</view>
+	
+	<view class="time-price">
+		<view class="item">
+			<view class="item-num">
+				00:20:00
+			</view>
+			<view class="item-text">
+				充电时长
+			</view>
+		</view>
+		<view class="item">
+			<view class="item-num">
+			20:00元
+			</view>
+			<view class="item-text">
+				充电金额
+			</view>
+		</view>
+	</view>
+	<view class="bottom">
+		 <u-button size="default" shape="circle">返回首页</u-button>
+		 <u-button size="default" shape="circle">查看订单详情</u-button>
+	</view>
+	</view>
 </template>
 
 <script>
 </script>
-
 <style>
+	page{
+		background: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	.progress-bar{
+		
+		
+		
+		/deep/.u-circle-progress{
+			margin-left: 23.3% !important;
+			position: relative;
+			
+		}
+		
+		.u-progress-content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			
+			
+			.u-progress-dot {
+				width: 16rpx;
+				height: 16rpx;
+				border-radius: 50%;
+				background-color: #fb9126;
+			}
+			
+			.u-progress-info {
+				display: block;
+				font-size: 36px;
+				padding-left: 16rpx;
+				letter-spacing: 2rpx;
+				color: rgba(51, 51, 51, 100);
+				.progress-text{
+					font-size: 14px;
+					text-align: center;
+					color: #666666;
+				}
+			}
+			
+			/deep/.u-progress-dot[data-v-05b104e0]{
+				display: none;
+			}
+			/deep/.u-circle-progress[data-v-cab6fc66]{
+				margin: 30px ;
+			}
+		
+	}
+.time-price{
+	display: flex;
+	justify-content: space-between;
+	padding: 0 65px;
+	.item-num{
+		height: 33px;
+		color: rgba(51, 51, 51, 100);
+		font-size: 24px;
+		text-align: center;
+	}
+	.item-text{
+		eight: 20px;
+		color: rgba(153, 153, 153, 100);
+		font-size: 14px;
+		text-align: center;
+	}
+}
+.bottom{
+	display: flex;
+	  width: 343px;
+	  padding: 12px 16px;
+	  position: fixed;
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  margin: auto;
+	  .u-size-default[data-v-3bf2dba7]{
+		  border: 1px solid rgba(0, 185, 98, 100);
+		  color: #00b962;
+		  width: 44%;
+	  }
+}
 </style>

pages/searchPile/chargeProcess/dcCharging.vue

@@ -6,12 +6,15 @@
 			
 		</view>
 		
+			
+		
 		<view class="progress-bar">
-				<u-circle-progress width="500" active-color="#2979ff" :percent="0" border-width="50">
+				<u-circle-progress width="440" active-color="green" :percent="0" border-width="50">
 					<view class="u-progress-content">
 						<view class="u-progress-dot"></view>
 						<text class='u-progress-info'>0.0%</text>
 					</view>
+					<view class="bot"></view>
 				</u-circle-progress>
 		</view>
 		<view class="starting">
@@ -95,7 +98,7 @@
 		 			</view>
 		 </view>
 		<view class="bottom">
-			 <u-button type="primary" shape="circle">主要按钮</u-button>
+			 <u-button type="primary" shape="circle">结束充电</u-button>
 		</view>
 	</view>
 	
@@ -103,7 +106,11 @@
 
 <script>
 </script>
-
+<style>
+	page{
+		background: #fff;
+	}
+</style>
 <style lang="scss" scoped>
 	.tittle-font {
 		font-size: 24px;
@@ -113,21 +120,32 @@
 		z-index: 99999;
 
 	}
-	
+	.bot{
+		width: 220px;
+		height: 220px;
+		border: 2px #00b962 dotted;
+		border-radius: 999px;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		margin: auto;
+	}
 .progress-bar{
-	margin:0 auto;
-	width: 100%;
-	// height: 400px;
 	
 	
+	
+	/deep/.u-circle-progress{
+		margin-left: 23.3% !important;
+		position: relative;
+	}
+	
 	.u-progress-content {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 		}
-		/deep/.u-circle-progress{
-			margin: 0 auto;
-		}
+		
 		
 		.u-progress-dot {
 			width: 16rpx;

pages/searchPile/chargeProcess/exChanging.vue

@@ -1,8 +1,272 @@
 <template>
+	<view style="background-color: #fff; padding-bottom: 196px;">
+		<u-navbar title="排队中">
+		</u-navbar>
+		<view class="iconfont tittle-font">
+			&#xe616;
+		</view>
+		
+			
+		
+		<view class="progress-bar">
+				<u-circle-progress width="440" active-color="green" :percent="0" border-width="50">
+					<view class="u-progress-content">
+						<!-- <view class="u-progress-dot"></view> -->
+						<text class='u-progress-info'>前方等待
+10位</text>
+					</view>
+					<view class="bot"></view>
+				</u-circle-progress>
+		</view>
+
+		<view class="timer">
+			00:00:00
+		</view>
+		<view class="charged">
+			已充电0度
+		</view>
+		<view class="cost">
+			<view class="">
+				<view class="cost-top">
+					0元
+				</view>
+				<view class="cost-bottom">
+					实时费用
+				</view>
+			</view>
+			<view class="line"></view>
+			<view class="">
+				<view class="cost-top">
+					50.00元
+					<view class="iconfont cost-font">&#xe633;</view>
+				</view>
+				<view class="cost-bottom">
+					账户余额
+				</view>
+			</view>
+		</view>
+		<view class="power">
+			<view>
+				<view class="power-num">
+					0.0v
+				</view>
+				<view class="power-text">
+					电压
+				</view>
+			</view>
+			<view class="line"></view>
+			<view>
+				<view class="power-num">
+					0.00kW
+				</view>
+				<view class="power-text">
+					功率
+				</view>
+			</view>
+			<view class="line"></view>
+			<view>
+				<view class="power-num">
+					0.0A
+				</view>
+				<view class="power-text">
+					电流
+				</view>
+			</view>
+		</view>
+	     <view class="info">
+	     	<view class="info-name">
+	     		充电车辆
+	     	</view>
+			<view class="info-text">
+				鄂D999999
+			</view>
+	     </view>
+		 <view class="info">
+		 	<view class="info-name">
+		 		站点
+		 	</view>
+		 			<view class="info-text">
+		 				荆鹏软件充电站 / A000152
+		 			</view>
+		 </view>
+		 <view class="info">
+		 	<view class="info-name">
+		 		占位费说明
+		 	</view>
+		 			<view class="info-text">
+		 				停止充电后30分钟即开始收取占位费用，1元/分钟
+		 			</view>
+		 </view>
+		<view class="bottom">
+			 <u-button type="primary" shape="circle">结束充电</u-button>
+		</view>
+	</view>
+	
 </template>
 
 <script>
 </script>
-
 <style>
-</style>
+	page{
+		background: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	.tittle-font {
+		font-size: 24px;
+		position: fixed;
+		top: 12px;
+		right: 16px;
+		z-index: 99999;
+
+	}
+	.bot{
+		width: 220px;
+		height: 220px;
+		border: 2px #8161ff dotted;
+		border-radius: 999px;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		margin: auto;
+	}
+.progress-bar{
+	
+	
+	
+	/deep/.u-circle-progress{
+		margin-left: 23.3% !important;
+		position: relative;
+	}
+	
+	.u-progress-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		
+		
+		.u-progress-dot {
+			width: 16rpx;
+			height: 16rpx;
+			border-radius: 50%;
+			background-color: #fb9126;
+		}
+		
+		.u-progress-info {
+			font-size: 28px;
+			padding-left: 16rpx;
+			letter-spacing: 2rpx;
+			color: #8161ff;
+			font-weight: 600;
+			text-align: center;
+		}
+		/deep/.u-progress-dot[data-v-05b104e0]{
+			display: none;
+		}
+		/deep/.u-circle-progress[data-v-cab6fc66]{
+			margin: 30px ;
+		}
+	
+}
+
+.starting{
+	height: 22px;
+	color: rgba(0, 185, 98, 100);
+	font-size: 16px;
+	text-align: center;
+}
+.timer{
+	height: 43px;
+	color: rgba(51, 51, 51, 100);
+	font-size: 36px;
+	text-align: center;
+	margin-top: 40px;
+}
+.charged{
+	height: 20px;
+	color: rgba(153, 153, 153, 100);
+	font-size: 14px;
+	text-align: center;
+	margin-top: 4px;
+}
+.cost{
+	// width: 50%;
+	padding: 0 90px;
+	margin-top: 16px;
+	display: flex;
+	justify-content: space-between;
+	.cost-top{
+		line-height: 33px;
+		text-align: center;
+		font-size: 24px;
+		position: relative;
+		.cost-font{
+			position: absolute;
+			top: 0;right: -25px;
+			color: #ff6200;
+			font-size: 24px
+		}
+	}
+	.cost-bottom{
+		line-height: 20px;
+		color: #999999;text-align: center;
+	}
+}
+.line{
+	width: 0;
+	height:36px;
+	border: 1px solid rgba(237, 237, 237, 100);
+	margin-top: 10px;
+	background-color: #ededed;
+}
+
+.power{
+	display: flex;
+	justify-content: space-around;
+	padding: 0 55px;
+	margin-top: 40px;
+	.power-num{
+		height: 27px;
+		color: rgba(51, 51, 51, 100);
+		font-size: 20px;
+		text-align: center;
+	}
+	.power-text{
+		height: 20px;
+		color: rgba(153, 153, 153, 100);
+		font-size: 14px;
+		text-align: center;
+	}
+}
+
+.info{
+	display: flex;
+	justify-content: space-between;
+	margin: 0 40px;
+	// height: 48px;
+	line-height: 48px;
+	background-color: rgba(255, 255, 255, 100);
+	color: rgba(16, 16, 16, 100);
+	border-bottom: 1px solid #ededed;
+	.info-text{
+		line-height: 23px;
+		padding: 13px 0 12px;
+		width: 200px;
+		text-align: right;
+	}
+}
+
+.bottom{
+	  width: 343px;
+	  position: fixed;
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  margin: auto;
+	  .u-btn--primary[data-v-3bf2dba7]{
+		  background-color: #00b962;
+	  }
+}
+</style>

pages/searchPile/chargeProcess/exChargeEnd.vue

@@ -1,8 +1,130 @@
 <template>
+	<view >
+		<u-navbar title="充电结束">
+		</u-navbar>
+		<view class="progress-bar">
+				<u-circle-progress width="400" active-color="#00B962" :percent="100" border-width="20">
+					<view class="u-progress-content">
+						<!-- <view class="u-progress-dot"></view> -->
+						<text class='u-progress-info'>
+							20.000
+							<p class="progress-text">已充电量(度)</p>
+						</text>
+						
+					</view>
+					
+					<view class="bot"></view>
+				</u-circle-progress>
+		</view>
+	
+	<view class="time-price">
+		<view class="item">
+			<view class="item-num">
+				00:20:00
+			</view>
+			<view class="item-text">
+				充电时长
+			</view>
+		</view>
+		<view class="item">
+			<view class="item-num">
+			20:00元
+			</view>
+			<view class="item-text">
+				充电金额
+			</view>
+		</view>
+	</view>
+	<view class="bottom">
+		 <u-button size="default" shape="circle">返回首页</u-button>
+		 <u-button size="default" shape="circle">查看订单详情</u-button>
+	</view>
+	</view>
 </template>
 
 <script>
 </script>
-
 <style>
+	page{
+		background: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	.progress-bar{
+		
+		
+		
+		/deep/.u-circle-progress{
+			margin-left: 23.3% !important;
+			position: relative;
+			
+		}
+		
+		.u-progress-content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			
+			
+			.u-progress-dot {
+				width: 16rpx;
+				height: 16rpx;
+				border-radius: 50%;
+				background-color: #fb9126;
+			}
+			
+			.u-progress-info {
+				display: block;
+				font-size: 36px;
+				padding-left: 16rpx;
+				letter-spacing: 2rpx;
+				color: #333333 ;
+				.progress-text{
+					font-size: 14px;
+					text-align: center;
+					color: #666666;
+				}
+			}
+			
+			/deep/.u-progress-dot[data-v-05b104e0]{
+				display: none;
+			}
+			/deep/.u-circle-progress[data-v-cab6fc66]{
+				margin: 30px ;
+			}
+		
+	}
+.time-price{
+	display: flex;
+	justify-content: space-between;
+	padding: 0 65px;
+	.item-num{
+		height: 33px;
+		color: rgba(51, 51, 51, 100);
+		font-size: 24px;
+		text-align: center;
+	}
+	.item-text{
+		eight: 20px;
+		color: rgba(153, 153, 153, 100);
+		font-size: 14px;
+		text-align: center;
+	}
+}
+.bottom{
+	display: flex;
+	  width: 343px;
+	  padding: 12px 16px;
+	  position: fixed;
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  margin: auto;
+	  .u-size-default[data-v-3bf2dba7]{
+		  border: 1px solid rgba(0, 185, 98, 100);
+		  color: #00b962;
+		  width: 44%;
+	  }
+}
 </style>

pages/searchPile/searchPileList.vue

@@ -1,7 +1,8 @@
 <template>
 	<view style="padding-bottom: 205px;">
 		<!-- 头部 -->
-		<view>
+		
+		<view class="top-box">
 			<view class="top">
 				<view class="">
 					荆州市 <text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
@@ -11,22 +12,25 @@
 					<text class="iconfont">&#xe622;</text> <text class="list">地图</text>
 				</view>
 			</view>
-		</view>
-		<!-- 条件选项 -->
-		<view class="condition">
-			<view class="condition-distance">
-				10公里<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
-			</view>
-			<view class="condition-type">
-				直流快充<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
-			</view>
-			<view class="condition-screen">
-				筛选<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
+			<!-- 条件选项 -->
+			<view class="condition">
+				<view class="condition-distance">
+					10公里<text class="iconfont"
+						style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
+				<view class="condition-type">
+					直流快充<text class="iconfont"
+						style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
+				<view class="condition-screen">
+					筛选<text class="iconfont" style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
+		
 			</view>
-
 		</view>
-	
 		
+	
+		<view style="height: 88px;"></view>
 		<view class="charing-slow">
 			<text class="trickle-charge">慢充</text> <text class="station-items">荆沙大道救助站充电站</text>
 			<view class="address">
@@ -76,7 +80,7 @@
 			</view>
 		</view>
 		<view class="charing-slow">
-			<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
+			<text class="fast-slow">快/慢</text> <text class="station-items">荆鹏软件园充电站</text>
 			<view class="address">
 				湖北省荆州市沙市区江津东路附155号
 			</view>
@@ -164,6 +168,17 @@
 </script>
 
 <style lang="scss" scoped>
+	
+
+	.top-box {
+		width: 100%;
+		height: 88px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999;
+	}
+	
 	.top {
 		display: flex;
 		justify-content: space-between;
@@ -172,36 +187,36 @@
 		color: #666666;
 		background-color: rgba(255, 255, 255, 100);
 		padding: 12px 16px;
-		position: fixed;
-		top: 0;
-		left: 0;
-
+	
+	
 		.u-search[data-v-1a326067] {
 			flex: 0.9;
 		}
-
+	
 		.list {
 			margin-left: 2px;
-
+	
 		}
 	}
-
+	
 	.condition {
+		width: 100%;
 		height: 44px;
 		line-height: 20px;
 		padding: 12px 16px;
 		display: flex;
-		justify-content: space-between;
+	
 		background-color: #fff;
-
+	
 		.condition-type {
-			margin-left: 12px;
+			margin-left: 36px;
 		}
-
+	
 		.condition-screen {
-			margin-left: 135px;
+			margin-left: 159px;
 		}
 	}
+	
 
 	
 	.charing-slow {
@@ -233,6 +248,17 @@
 			font-size: 12px;
 			text-align: center;
 		}
+		.fast-slow{
+			display: inline-block;
+			width: 44px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: #00bac8;
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
+		}
 
 		.station-items {
 			display: inline-block;
@@ -255,6 +281,7 @@
 		.price {
 			display: flex;
 			height: 20px;
+			margin-top: 8px;
 
 			.num {
 				height: 20px;
@@ -277,7 +304,7 @@
 		}
 
 		.park {
-			margin-top: 8px;
+			margin-top: 10px;
 			display: flex;
 
 			.park-p {
@@ -311,7 +338,7 @@
 
 			.free-num {
 				line-height: 52px;
-				font-size: 16px
+				font-size: 14px
 			}
 
 			.distance {

pages/searchPile/searchPileMap.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<!-- 头部 -->
-		<view>
+		<view class="top-box">
 			<view class="top">
 				<view class="">
 					荆州市 <text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
@@ -11,24 +11,28 @@
 					<text class="iconfont">&#xe613;</text> <text class="list">列表</text>
 				</view>
 			</view>
-		</view>
-		<!-- 条件选项 -->
-		<view class="condition">
-			<view class="condition-distance">
-				10公里<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
-			</view>
-			<view class="condition-type">
-				直流快充<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
-			</view>
-			<view class="condition-screen">
-				筛选<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
-			</view>
+			<!-- 条件选项 -->
+			<view class="condition">
+				<view class="condition-distance">
+					10公里<text class="iconfont"
+						style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
+				<view class="condition-type">
+					直流快充<text class="iconfont"
+						style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
+				<view class="condition-screen">
+					筛选<text class="iconfont" style="color: #bdbdbd;font-size: 24px;position: absolute;">&#xe62a;</text>
+				</view>
 
+			</view>
 		</view>
+
 		<!-- 地图 -->
+		<view style="height: 88px;"></view>
 		<view class="map">
 			<view class="station-icon"><text class="iconfont">&#xe606;</text>
-			<view class="corner"></view>
+				<view class="corner"></view>
 			</view>
 			<view class="station-icon2">
 				<view class="iconfont icon2-left">&#xe606;</view>
@@ -42,32 +46,38 @@
 					</view>
 				</view>
 			</view>
-			
+			<view class="station-icon3"><text class="iconfont">&#xe606;</text>
+				<view class="corner"></view>
+			</view>
 			<img src="/static/img/地图@1x.png" alt="">
 		</view>
+
 		<view class="charing-slow">
-			<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
+			<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="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">
+				<text class="park-text">以实际费用为准</text>
 				<view class="free-num">
 					<text style="color:#009143;">空闲10</text>/总数10
 				</view>
+			</view>
+			<view class="free">
+				<view class="scan-qrcode"> <text class="iconfont font">&#xe61b;</text><text class="text">扫码充电</text>
+				</view>
 				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
+					<text class="iconfont distance-font">&#xe615;</text><text class="text">1.2公里 3分钟</text>
 				</view>
 			</view>
+			<view class="img-box"><img src="/static/img/定位.png" alt=""></view>
 		</view>
 
 		<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
@@ -110,6 +120,15 @@
 </script>
 
 <style lang="scss" scoped>
+	.top-box {
+		width: 100%;
+		height: 88px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999;
+	}
+
 	.top {
 		display: flex;
 		justify-content: space-between;
@@ -118,9 +137,7 @@
 		color: #666666;
 		background-color: rgba(255, 255, 255, 100);
 		padding: 12px 16px;
-		position: fixed;
-		top: 0;
-		left: 0;
+
 
 		.u-search[data-v-1a326067] {
 			flex: 0.9;
@@ -133,26 +150,27 @@
 	}
 
 	.condition {
+		width: 100%;
 		height: 44px;
 		line-height: 20px;
 		padding: 12px 16px;
 		display: flex;
-		justify-content: space-between;
+
 		background-color: #fff;
 
 		.condition-type {
-			margin-left: 12px;
+			margin-left: 36px;
 		}
 
 		.condition-screen {
-			margin-left: 135px;
+			margin-left: 159px;
 		}
 	}
 
 	.map {
 		width: 100%;
 
-		height: 100%;
+		flex: 1;
 		position: relative;
 
 		img {
@@ -171,9 +189,37 @@
 			position: absolute;
 			top: 89px;
 			left: 38px;
-			.corner{
-			   width: 0;
-			   height: 0;
+
+			.corner {
+				width: 0;
+				height: 0;
+				position: absolute;
+				top: 34px;
+				left: 0;
+				right: 0;
+				margin: auto;
+				border-bottom: 4px solid transparent;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				border-top: 6px solid #b58cff;
+			}
+		}
+
+		.station-icon3 {
+			width: 36px;
+			height: 36px;
+			line-height: 36px;
+			text-align: center;
+			border: 1px solid rgba(0, 185, 98, 100);
+			color: #00b962;
+			border-radius: 999px;
+			position: absolute;
+			top: 124px;
+			left: 255px;
+
+			.corner {
+				width: 0;
+				height: 0;
 				position: absolute;
 				top: 34px;
 				left: 0;
@@ -182,7 +228,7 @@
 				border-bottom: 4px solid transparent;
 				border-left: 4px solid transparent;
 				border-right: 4px solid transparent;
-				border-top: 6px solid #b58cff ;
+				border-top: 6px solid #b58cff;
 			}
 		}
 
@@ -191,13 +237,14 @@
 			height: 36px;
 			line-height: 20px;
 			border-radius: 50px;
-			background-color: rgba(0, 185, 98, 100);
+			background-color: #00bacb;
 			text-align: center;
 			display: flex;
 			position: absolute;
-			top: 191px;
-			left: 168px;
-			.icon2-left{
+			top: 188px;
+			left: 146px;
+
+			.icon2-left {
 				width: 36px;
 				height: 36px;
 				line-height: 36px;
@@ -205,17 +252,19 @@
 				border: 1px solid rgba(0, 185, 98, 100);
 				border-radius: 999px;
 				background-color: #fff;
-				color: #00b962;
+				color: #00bacb;
 			}
-			.icon2-right{
+
+			.icon2-right {
 				color: #ffffff;
 				line-height: 14px;
 				padding: 4px;
 			}
 		}
-		.corner2{
-		   width: 0;
-		   height: 0;
+
+		.corner2 {
+			width: 0;
+			height: 0;
 			position: absolute;
 			top: 36px;
 			left: 0;
@@ -224,8 +273,8 @@
 			border-bottom: 6px solid transparent;
 			border-left: 6px solid transparent;
 			border-right: 6px solid transparent;
-			border-top: 8px solid #00b962 ;
-			
+			border-top: 8px solid #00b962;
+
 		}
 	}
 
@@ -245,7 +294,7 @@
 			height: 20px;
 			line-height: 20px;
 			border-radius: 50px;
-			background-color: #9d9fff;
+			background-color: #00bac8;
 			color: rgba(255, 255, 255, 100);
 			font-size: 12px;
 			text-align: center;
@@ -309,7 +358,7 @@
 
 			.park-text {
 				display: inline-block;
-				width: 300px;
+
 				height: 17px;
 				color: rgba(102, 102, 102, 100);
 				font-size: 12px;
@@ -317,6 +366,12 @@
 				margin-left: 4px;
 				margin-top: 2px;
 			}
+
+			.free-num {
+				margin-left: 119px;
+				font-size: 14px;
+
+			}
 		}
 
 		.free {
@@ -326,9 +381,12 @@
 			border-top: 1px solid rgba(238, 242, 240, 100);
 			margin-top: 10px;
 
-			.free-num {
-				line-height: 52px;
-				font-size: 16px
+			.iconfont {
+				font-size: 15px
+			}
+
+			.text {
+				margin-left: 4px;
 			}
 
 			.distance {
@@ -342,11 +400,35 @@
 				margin: 12px;
 				text-align: center;
 
-				.distance-font {
-					font-size: 16px
-				}
+
 
 			}
+
+			.scan-qrcode {
+				width: 100px;
+				height: 28px;
+				line-height: 28px;
+				border-radius: 50px;
+				margin: 12px 0px 12px 89px;
+				text-align: center;
+				border: 1px solid rgba(0, 185, 98, 100);
+				color: rgba(0, 185, 98, 100);
+
+			}
+		}
+	}
+	.img-box{
+		width: 36px;
+		height: 36px;
+		line-height: 36px;
+		text-align: center;
+		background-color: #fff;
+		border-radius: 8px;
+		position: fixed;
+		top: 377px;
+		right: 16px;
+		img{
+			vertical-align:middle;
 		}
 	}
 </style>

pages/searchPile/stationAndPile/stationDetails.vue

@@ -7,8 +7,8 @@
 				荆鹏软件园充电站
 			</view>
 			<view class="details-item" style="margin-top: 22px;">
-				<text class="iconfont" style="color: #00b962;font-size: 20px;">&#xe60a;</text> <text
-					class="item-text">交流慢充</text>
+				<text class="iconfont" style="color: #00bac8;font-size: 20px;">&#xe60a;</text> <text
+					class="item-text">直流快充/交流慢充</text>
 			</view>
 			<view class="details-item">
 				<text class="iconfont" style="color: #4e94ff;font-size: 20px;"">&#xe60e;</text> <text class="
@@ -39,11 +39,17 @@
 				</view>
 			</view>
 			<view class="price-item">
-				<view class="text1">慢充</view>
+				<view class="text-fast">快充</view>
 				<view class="text2">1.20</view>
 				<view class="text3">起 元/度</view>
 				<view class="text4">00:00:00 ~ 23:59:59</view>
 			</view>
+			<view class="price-item">
+				<view class="text-slow">慢充</view>
+				<view class="text2">1.10</view>
+				<view class="text3">起 元/度</view>
+				<view class="text4">00:00:00 ~ 23:59:59</view>
+			</view>
 			<view class="park-item">
 				<view class="text-box">
 					<view class="text1">
@@ -219,6 +225,7 @@
 			line-height: 18px;
 			color: #101010;
 			margin-bottom: 11px;
+			font-size: 18px
 		}
 
 		.details-item {
@@ -273,7 +280,6 @@
 	// 价格详情
 	.price-details {
 		width: 100%;
-		height: 145px;
 		margin-top: 12px;
 		background-color: #fff;
 		padding: 20px 15px 16px 16px;
@@ -321,7 +327,7 @@
 		display: flex;
 		border-bottom: 1px solid rgba(238, 242, 240, 100);
 		
-		.text1{
+		.text-slow{
 			width: 44px;
 			height: 20px;
 			line-height: 20px;
@@ -330,6 +336,16 @@
 			color: rgba(255, 255, 255, 100);
 			font-size: 12px;
 			text-align: center;
+		}
+			.text-fast{
+			width: 44px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: #8161ff;
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
 		}
 		.text2{
 			line-height: 19px;