找桩页修改

pages/index/index.vue

@@ -1729,21 +1729,6 @@
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 

pages/searchPile/searchPile.vue

@@ -141,58 +141,74 @@
 				
 				  <view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow"   @click="stationDetail(item)">
 					
-					<view class="flex">
-					<view class="left">
+					
+					
 						<view class="address">
-							{{item.name}}
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="distance">
+								<text class="iconfont" style="color:#666666">&#xe615;</text>小于100米
+							</view>
+						</view>
+						<view class="sign">
+							<view class="sign-1">会员享服务费8.5折</view>
+							<view class="sign-2">2小时停车免费</view>
+							<view class="sign-2">包月卡</view>
+							<view class="sign-2">服务费代金券</view>
+							<view class="sign-2">超级代金券</view>
 						</view>
+						<view class="price-free">
 						<view class="price">
-							<view class="num">{{item.price.toFixed(2)}}</view>
-							<view class="unit">
-								 元/度 起
+							<view class="price-1">
+								<view class="num">{{item.price.toFixed(2)}}</view>
+								<view class="unit">
+									 元/度 起
+								</view>
+							</view>
+							<view class="price-2">
+								<text class="num">0.87</text>
+								<text class="unit">元/度 起</text>
 							</view>
 						</view>
-						<view class="park" v-if="item.parkingDescription">
-							<text class="park-p" style="color: #FFFFFF;">p</text>
-							<text class="park-text">{{item.parkingDescription}}</text>
-						</view>	
-						<view class="park" v-else>
-							<text class="park-p" style="color: #FFFFFF;">p</text>
-							<text class="park-text">以实际费用为准</text>
-						</view>	
-						<view class="park"  >
-							<!-- <text class="park-p" style="color: #FFFFFF;">p</text> -->
-							<img src="@/assets/img/riFill-coupon-3-fill.svg">
-							<view class="park-text park-text2">
-								<view class="park-text3"> 
-									本站<span v-if="item.giveDiscount" >会员享服务费{{item.discountRatio/10}}折，</span>支持包月卡、服务费代金券和超级代金券等优惠活动								
+						<view class="free">
+							<view class="fast">
+								<view class="fast-font">
+									快
+								</view>
+								<view class="num">
+									3/4
+								</view>
+							</view>
+							<view class="slow">
+								<view class="slow-font">
+									慢
+								</view>
+								<view class="num">
+									3/4
 								</view>
 							</view>
-						</view>	
-											
-
-					</view>
-					<view class="img-box">
-						<img :src="item.image" alt="">
-					</view>
-					</view>
-					
-					<view class="free">
-						<text :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')">{{item.type}}</text> 
-				<view class="free-num">			
-				  <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
 						</view>
-						<view class="distance" v-if="item.distance!=99999999">
-						
-							<text class="iconfont distance-font">&#xe615;</text>
+					</view>
+										
+	<!-- <view class="free">
+							<text :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')">{{item.type}}</text> 	
+					<view class="free-num">			
+					  <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}	
+							</view>
+							<view class="distance" v-if="item.distance!=99999999">
+								<text class="iconfont distance-font">&#xe615;</text>
 							{{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}} {{item.time.toFixed(0)}}分钟
-						</view>
-						<view class="distance" v-else>
-						
-							<text class="iconfont distance-font">&#xe615;</text>
-							导航
-						</view>
+							</view>
+							<view class="distance" v-else>
+								<text class="iconfont distance-font">&#xe615;</text>
+								导航
+							</view>
+						</view> -->
 					</view>
+
+					
+				
 				</view>
 				 
 				<u-divider margin-top="20" bg-color="#F2F4F4" v-if="stationslist.length != 0">已经到底了</u-divider>
@@ -233,7 +249,7 @@
 										{{item.price.toFixed(2)}}
 									</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">
@@ -1605,16 +1621,25 @@ export default {
  	}
 	//
 	
-  .left{
-	  width: 65%;
-  }
  	.address {
-		
+		width: 100%;
 		line-height: 20px;
- 		
-        white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		display: flex;
+		justify-content: space-between;
+		.name{
+			
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.distance{
+			color: rgba(102, 102, 102, 100);
+			font-size: 16px;
+			.iconfont{
+				font-size: 14px;
+				margin-right: 2px;
+			}
+		}
 		
 		@include themeify{
 			font-size: themed('font-size5');
@@ -1624,41 +1649,93 @@ export default {
 font-weight: 600;
  		color: #101010;
  	}
- 
+ .price-free{
+	 width: 100%;
+	 display: flex;
+	 align-items: center;
+	 justify-content: space-between;
+	 margin-top: 8px;
+ }
  	.price {
  		display: flex;
- 		height: 40rpx;
-        margin-top: 8px;
+		line-height: 20px;
+		
+		.price-1{
+			display: flex;
+			justify-content: space-between;
+			.num {
+			
+			 	color: rgba(255, 98, 0, 100);
+			 
+				 @include themeify{
+					font-size: themed('font-size5');
+					height: themed('font-size5');
+				 }
+			 	text-align: left;
+			 	font-family: Roboto-medium;
+			 }
+			 .unit {
+			
+			  	color: rgba(102, 102, 102, 100);
+			 	@include themeify{
+			 			font-size: themed('font-size2');
+			 			height: themed('font-size2');
+			 			
+			 	}
+			
+			  	text-align: left;
+			  	font-family: AlibabaPuHui-regular;
+			  	// margin-top: 12rpx;
+			  	margin-left: 8rpx;
+			  }
+		}
+        .price-2{
+        	color: rgba(153, 153, 153, 100);
+        	margin-left: 4px;
+        	text-decoration: line-through;
+			font-size: 14px
+        }
  	}
  
- 
- .num {
-/* 	height: 20px;*/
- 	color: rgba(255, 98, 0, 100);
- /*	font-size: 20px;*/
-	 @include themeify{
-		font-size: themed('font-size5');
-		height: themed('font-size5');
-	 }
- 	text-align: left;
- 	font-family: Roboto-medium;
+ .free{
+ 	display: flex;
+     align-items: center;
+ 	.slow,.fast{
+ 		display: flex;
+ 		.fast-font{
+ 			width: 20px;
+ 			height: 20px;
+ 			line-height: 20px;
+ 			border-radius: 4px;
+ 			background-color: rgba(186, 240, 215, 100);
+ 			color: rgba(0, 130, 69, 100);
+ 			font-size: 14px;
+ 			text-align: center;
+ 			margin-right: 2px;
+ 		}
+ 		.slow-font{
+ 			width: 20px;
+ 			height: 20px;
+ 			line-height: 20px;
+ 			border-radius: 4px;
+ 			background-color: rgba(226, 226, 226, 100);
+ 			color: rgba(128, 128, 128, 100);
+ 			font-size: 14px;
+ 			text-align: center;
+ 			margin-right: 2px;
+ 		}
+ 		.num{
+ 			font-size: 16px;color: rgba(0, 145, 67, 100);
+ 			line-height: 20px;
+ 		}
+ 	}
+ 	.slow{
+ 		margin-left: 12px;
+ 	}
  }
+ 
   
- .unit {
- /*	height: 14px;
- 	line-height: 14px;*/
- 	color: rgba(102, 102, 102, 100);
-	@include themeify{
-			font-size: themed('font-size2');
-			height: themed('font-size2');
-			// line-height: themed('font-size2');
-	}
-/* 	font-size: 14px;*/
- 	text-align: left;
- 	font-family: AlibabaPuHui-regular;
- 	margin-top: 12rpx;
- 	margin-left: 8rpx;
- }
+ 
  	.park {
  		margin-top: 16rpx;
  		display: flex;
@@ -1704,50 +1781,9 @@ font-weight: 600;
 	  width: 100%;
 	  height: 100%;
 	}
- 	.free {
- 		
- 		
- 		margin-top: 12px;
-		line-height: 26px;
- 
- 		
- 	} 
-	.free-num {
-		
-		margin-left: 4px;
-		display: inline-block;
-		@include themeify{
-			font-size: themed('font-size3');
-			font-weight: themed('fontWeight');
-		}
-/*		font-size: 16px*/
-	} 
-	.distance {
-		
-		padding: 0 10px;
-		
-		
-	    float: right;
-		// margin-top: 13px;
-		
-/*		height: 28px;
-		line-height: 28px;*/
-		color: rgba(255, 255, 255, 100);
-		@include themeify{
-			font-size: themed('font-size2');
-			line-height: themed('font-size8');
-			height: themed('font-size8');
-		}
-		/*
-		font-size: 14px;*/
-		background-color: #00b962;
-		border-radius: 50px;
-		
-		text-align: center;
+ 	
 
-		
-
-	}
+	
 	.distance-font {
 		@include themeify{
 				font-size: themed('font-size3');
@@ -1775,20 +1811,35 @@ font-weight: 600;
 		border: 2px solid rgba(255, 255, 255, 100);
 		border-radius: 999px;
 	}
-	.img-box{
-		width: 100px;
-		height: 75px;
-		overflow: hidden;
-		 border-radius: 4px;
-		 
-		img{
-			width: 100%;
-			height: 100%;
+	
+	.sign{
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 10px;
+		.sign-1{
+			line-height: 20px;
+			border-radius: 4px;
+			background-color: rgba(255, 255, 255, 100);
+			color: rgba(255, 139, 0, 100);
+			font-size: 12px;
+			text-align: center;
+			border: 1px solid rgba(255, 139, 0, 100);
+			padding: 0 4px;
+			margin-right: 8px;
+			margin-bottom: 4px;
+		}
+		.sign-2{
+			line-height: 20px;
+			border-radius: 4px;
+			background-color: rgba(255, 255, 255, 100);
+			color: rgba(153, 153, 153, 100);
+			font-size: 12px;
+			text-align: center;
+			border: 1px solid rgba(204, 204, 204, 100);
+			padding: 0 4px;
+			margin-right: 8px;
+			margin-bottom: 4px;
 		}
-	}
-	.flex{
-		   display: flex;
-		   justify-content: space-between;
 	}
 	
 		.park-text2 {