充电枪详情

pages.json

@@ -494,6 +494,14 @@
                 "enablePullDownRefresh": false
             }
             
+        },{"name":"充电枪详情",
+            "path" : "pages/searchPile/stationAndPile/chargingGunDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
         }
     ],
 	"globalStyle": {

pages/searchPile/stationAndPile/chargingGunDetail.vue

@@ -0,0 +1,146 @@
+<template>
+	<view >
+		<u-navbar title="充电枪详情">
+			<view class="iconfont service">
+				&#xe60d;
+			</view>
+		</u-navbar>
+		<view class="main">
+			<view class="text-1">
+				请下地解锁
+			</view>
+			<view class="text-2">
+				先下降地锁，再启动充电桩
+			</view>
+			<view class="charging-info">
+				<view class="name">
+					1号直流桩/充电枪01
+					<text class="free">当前空闲</text>
+				</view>
+				<view class="price">
+					<text>1.25</text><text class="unit">元/度</text>
+				</view>
+				<view class="address">
+					江津路荆鹏软件园充电站
+					<text class="explain">费用说明</text>
+				</view>
+			</view>
+		</view>
+		<!--提示  -->
+		<view class="tips">
+			<p class="p">提示：</p>
+			<view class="content">
+				点击降锁后，请稍等几十秒，待地锁完全下降后，再驶入车位。
+			</view>
+			
+		</view>
+		<view class="bottom">
+			<u-button shape="circle" type="success">下降地锁</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #F6F8F8;
+	}
+	.service{
+		font-size: 24px;
+		color: #101010;
+		position: absolute;
+		right: 16px;
+	}
+	.main{
+		padding: 28px 20px;
+		 background-image: linear-gradient(#D6EEDC, #F6F8F8);
+		 .text-1{
+			 color: rgba(0, 170, 90, 100);
+			 font-size: 24px;
+			 line-height: 33px;
+			 
+		 }
+		 .text2{
+			 color: rgba(102, 102, 102, 100);
+			 font-size: 16px;
+			 line-height: 22px;
+		 }
+		 .charging-info{
+	
+			 background-color: #fff;
+			 margin: 20px auto 0;
+			 border-radius: 12px;
+			 padding: 20px;
+			 .name{
+				 line-height: 23px;
+				 color: rgba(16, 16, 16, 100);
+				 font-size: 18px;
+				 .free{
+					 display: inline-block;
+					 width: 72px;
+					 height: 20px;
+					 line-height: 20px;
+					 border-radius: 50px;
+					 background-color: rgba(208, 246, 228, 100);
+					 color: rgba(0, 185, 98, 100);
+					 font-size: 14px;
+					 text-align: center;
+					 margin-left: 12px;
+				 }
+		
+			 }
+			 .price{
+				 color: rgba(0, 185, 98, 100);
+				 font-size: 28px;
+				 margin-top: 12px;
+				 .unit{
+					 font-size: 16px
+				 }
+			 }
+			 .address{
+				 line-height: 23px;
+				 color: rgba(102, 102, 102, 100);
+				 font-size: 16px;
+				 margin-top: 12px;
+				 .explain{
+					 line-height: 22px;
+					 color: rgba(22, 119, 255, 100);
+					 font-size: 16px;
+					 float: right;
+				 }
+			 }
+		 }
+	}
+	
+	.tips{
+		background-color: #fff;
+		margin: 0 28px ;
+		border-radius: 12px;
+		padding: 20px;
+		.p{
+			line-height: 25px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 18px;
+		}
+		.content{
+			margin-top: 8px;
+			line-height: 22px;
+			color: rgba(102, 102, 102, 100);
+			font-size: 16px;
+		}
+	}
+	
+	.bottom{
+		background-color: #fff;
+		width: 100%;
+		padding: 12px 0 ;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		.u-btn{
+			width: 91.4%
+		}
+	}
+</style>