首页附近站点修改

pages/index/index.vue

@@ -116,20 +116,65 @@
 		
 			</view>
 		</view>
-		<template v-if="message == 'getLocation:ok' && stationList.length != 0 && chargeList.length == 0">
-		
-			<!-- 充值活动 -->
-			<view class=" top-up" >
-				<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>附近站点</view>
+		<!-- <template v-if="message == 'getLocation:ok' && stationList.length != 0 && chargeList.length == 0"> -->
+		<template v-if="message != 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
 			
+			<view class=" top-up" >
+				<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>附近站点
+				<view class="pack-up">
+					收起<text class="iconfont">&#xe607;</text>
+				</view>
+				<view class="pack-up">
+					展开<text class="iconfont">&#xe62c;</text>
+				</view>
+				</view>
+				
 			</view>
-			<!-- 站点 -->
+			<!-- 附近站点 -->
 			<view class="station"  v-for="(stationData,i) in stationList" :key="i"
+				@click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
+				<view class="text">
+					<view class="station-title">
+						<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #9D9FFF;" v-if="stationData.type == '1'" style="background-color: #9D9FFF;">快充</text>
+						<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #00B962;" v-if="stationData.type == '2'" style="background-color: #00B962;">慢充</text>
+						<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #00BAC8;" v-if="stationData.type == '1,2'" style="background-color: #00BAC8;">快/慢</text>
+						<text class="title-right oldTextjp" oldstyle="font-size: 20px;">{{stationData.name}}</text>
+					</view>
+					<view class="station-price">
+						<view class="flex">
+							<view class="price-left">{{stationData.costPrice}}</view>
+							<view class="price-right">
+								元/度 起 
+							</view>
+						</view>
+						<view class="count-left">
+							<span class="oldTextjp2 free-conut" oldstyle="font-size: 16px;" >空闲{{stationData.availableNum}}/</span>
+							<span class="oldTextjp" oldstyle="font-size: 16px;">总数{{stationData.totalNum}}</span>
+						</view>
+					</view>
+					
+					<view class="park">
+						<view class="flex">
+							<view class="park-p">p</view>
+							<view class="park-text oldTextjp2" oldstyle="font-size: 14px;">2小时停车免费</view>
+						</view>
+						<view class="count-right oldTextjp" oldstyle="font-size: 16px;">
+							<text class="iconfont" style="color: #00B962;">&#xe615;</text>
+							
+							{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
+						</view>
+					</view>
+				</view>
+				
+			</view>
+			<!-- 站点 -->
+			<!-- <view class="station"  v-for="(stationData,i) in stationList" :key="i"
 				@click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
 				<view class="img-box">
 					<img src="static/img/Frame 198 (1).png" alt="">
 				</view>
 				<view class="text">
+					
 					<view class="station-title">
 						<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #9D9FFF;" v-if="stationData.type == '1'" style="background-color: #9D9FFF;">快充</text>
 						<text class="title-left oldTextjp2" oldstyle="font-size: 14px;background-color: #00B962;" v-if="stationData.type == '2'" style="background-color: #00B962;">慢充</text>
@@ -157,11 +202,9 @@
 							<text class="iconfont">&#xe615;</text>
 							{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
 						</view>
-						<!-- <view class="count-right oldTextjp" oldstyle="font-size: 16px;" v-else>
-							<text class="iconfont">&#xe615;</text>小于100米</view> -->
 					</view>
 				</view>
-			</view>
+			</view> -->
 			
 		</template>
 		<!-- 定位 -->
@@ -865,13 +908,23 @@
 		}
 
 	}
-
+   .flex{
+	   display: flex;
+   }
 	// 站点
+	.pack-up{
+		float: right;
+		font-size: 16px;
+		color: rgba(119, 119, 119, 100);
+	}
 	.station {
 		width: 91.4%;
-		height: 120px;
-		margin: 20px auto 0;
-		position: relative;
+		border-radius: 8px;
+		padding: 12px 0px 12px 11px;
+		
+		background-color: #fff;
+		margin: 8px auto 0;
+		// position: relative;
 
 		.img-box {
 			width: 100%;
@@ -885,17 +938,17 @@
 			height: 100%;
 
 		}
-
+ 
 		.text {
 			width: 91.4%;
-			position: absolute;
-			top: 0;
-			left: 20px;
+			// position: absolute;
+			// top: 0;
+			// left: 20px;
 
 			// 头部
 			.station-title {
 				display: flex;
-				margin-top: 12px;
+				
 
 				.title-left {
 					display: inline-block;
@@ -927,9 +980,9 @@
 
 			// 价格
 			.station-price {
-				margin-top: 4px;
+				margin-top: 8px;
 				display: flex;
-
+               justify-content: space-between;
 				.price-left {
 					width: 40px;
 					height: 20px;
@@ -942,41 +995,45 @@
 
 				.price-right {
 					height: 20px;
-					line-height: 14px;
-					margin-left: 2px;
+					
+					margin-left: 4px;
 					margin-top: 3px;
 					color: rgba(102, 102, 102, 100);
 					font-size: 14px;
 					text-align: left;
 					font-family: AlibabaPuHui-regular;
 				}
-
+    .free-conut{
+		color: #009143;
+	}
 			}
+			
 
 			// park
 			.park {
-				margin-top: 4px;
+				margin-top: 8px;
 				display: flex;
+		        justify-content: space-between;
 
 				.park-p {
-					display: inline-block;
+					
 					width: 20px;
-					height: 18px;
+					height: 20px;
 					line-height: 12px;
 					text-align: center;
-					background-color: rgba(125, 177, 255, 100);
+					background-color: #00b962;
 					color: #fff;
 				}
 
 				.park-text {
-					display: inline-block;
-					width: 300px;
-					height: 17px;
+					
+					height: 20px;
+					line-height: 20px;
 					color: rgba(102, 102, 102, 100);
-					font-size: 12px;
+					font-size: 14px;
 					text-align: left;
-					margin-left: 2px;
-					margin-top: 2px;
+					margin-left: 4px;
+					
 				}
 			}