stationDetailsMap页卡片

pages/searchPile/stationAndPile/stationDetailsMap.vue

@@ -7,8 +7,65 @@
 				<Chargermap   ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
 				<u-image style='position:absolute;z-index:1023;right:40rpx;bottom:440rpx;' src="@/static/img/location.png" width="30px" height="30px" @click="setCenter"></u-image>
 			</view>
-			 
-			 <view class="chargerCard" @click="stationDetail(item)">
+			<!-- 新版 卡片-->
+			<view  class="chargerCard" >
+				<view  class="charing-slow charing-slow-2" >
+														<view class="address">
+															<view class="name oldTextjp" oldstyle="font-size: 20px;">
+																荆鹏软件园充电站B01
+															</view>
+															<view class="distance oldTextjp2" oldstyle="font-size: 16px;" >
+																<text class="iconfont" style="color:#666666">&#xe615;</text>
+																小于100米
+															</view>
+															<!-- <view class="distance oldTextjp2" oldstyle="font-size: 16px;">
+																<text class="iconfont" style="color:#666666">&#xe615;</text>
+																暂无定位
+															</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="price-1">
+																<view class="num">1.21</view>
+																<view class="unit oldTextjp2" oldstyle="font-size: 14px;">
+																	 元/度 起
+																</view>
+															</view>
+															<view class="price-2 oldTextjp2" oldstyle="font-size: 14px;" >
+																<text class="num">1.23</text>
+																<text class="unit">元/度 起</text>
+															</view>
+														</view>
+														<view class="free">
+															<view class="fast" >
+																<view class="fast-font">
+																	快
+																</view>
+																<view class="num">
+																	1/2
+																</view>
+															</view>
+															<view class="slow" >
+																<view class="slow-font">
+																	慢
+																</view>
+																<view class="num">
+																	1/2
+																</view>
+															</view>
+														</view>
+													</view>
+													</view>
+			</view>
+			 <!--老版卡片  -->
+			 <!-- <view class="chargerCard" @click="stationDetail(item)">
 				<view class="card_item font4" style="padding-top: 5rpx;" >
 					<view style="display: flex;flex-direction: row;">
 						<view :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')"style="margin-right: 5rpx;">
@@ -64,7 +121,7 @@
 				 			</view>
 				 		</view>
 				 	</view>
-				 </view>
+				 </view> -->
 			</view>
 		</view>
 		
@@ -438,312 +495,183 @@
 		
 	}
 	.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;
+		padding: 12px;
 		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;
-		@include themeify{
-			font-size: themed('font-size2');
-		}
-	}
-	 
-	.card_item2{
-		display: flex;
-		flex-direction: row;
-		margin-left: 20rpx;
-		margin-right: 20rpx;
-		margin-bottom: 10rpx;
-		@include themeify{
-			font-size: themed('font-size2');
-		}
-	}
-	.round{
-		border-radius:50rpx; 
-		background-color: #00B962;
-		color: #ffffff;
-		text-align: center;
-		justify-content: center;
-		align-items: center;
-		@include themeify{
-			width: themed('buttonWidth');
-		}
-/*		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);
-			@include themeify{
-				font-size: themed('font-size1');
-				line-height: themed('font-size5');
-				height: themed('font-size5');
-			}
-/*	 		font-size: 12px;*/
-	 		text-align: center;
-	 	}
-		
-		
-		.fast-trickle-charge {
-			display: inline-block;
-			width: 66px;
-/*			height: 20px;
-			line-height: 20px;*/
-			border-radius: 50px;
-			background-color: #00BAC8;
-			color: rgba(255, 255, 255, 100);
-			@include themeify{
-				font-size: themed('font-size1');
-				line-height: themed('font-size5');
-				height: themed('font-size5');
+	
+	
+	.address {
+			width: 100%;
+			line-height: 20px;
+			display: flex;
+			justify-content: space-between;
+			.name{
+				font-size: 16px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
-/*			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;*/
-			@include themeify{
-				font-size: themed('font-size1');
-				line-height: themed('font-size5');
-				height: themed('font-size5');
+			.distance{
+				color: rgba(102, 102, 102, 100);
+				font-size: 12px;
+				.iconfont{
+					font-size: 12px;
+					margin-right: 2px;
+				}
 			}
-			text-align: center;
-		}
-	 
-	 	.station-items {
-	 		display: inline-block;
-/*	 		height: 16px;
-	 		line-height: 16px;
-	 		font-size: 16px;*/
+			
 			@include themeify{
-				font-size: themed('font-size3');
-				line-height: themed('font-size3');
-				height: themed('font-size3');
+				font-size: themed('font-size5');
+				line-height: themed('font-size7');
 			}
-	 		margin-left: 4px;
+	
+	font-weight: 600;
 	 		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;*/
-			@include themeify{
-				font-size: themed('font-size1');
-				line-height: themed('font-size5');
-				height: themed('font-size5');
-			}
-			text-align: center;
-		}
-	 
-	 	.address {
-	 		margin-top: 8px;
-			@include themeify{
-				font-size: themed('font-size1');
-				line-height: themed('font-size3');
- 			}
-/*	 		line-height: 16px;
-	 		font-size: 11px;*/
-	 		color: rgba(119, 119, 119, 100);
-	 	}
-	 
-	 	.price {
-	 		display: flex;
-	 		height: 20px;
+	
+	
 	 
-	 	}
+	 .list {
+	 	margin-left: 2px;
 	 
+	 }
 	 
-	 .num {
-	 	height: 20px;
-	 	color: rgba(255, 98, 0, 100);
-		@include themeify{
-			font-size: themed('font-size5'); 
-		}
-/*	 	font-size: 20px;*/
-	 	text-align: left;
-	 	font-family: Roboto-medium;
+	 .charing-slow {
+	  	background-color: #fff;
+	 	margin: 40rpx;
+	 	border-radius: 16rpx;
+	  	
+	  	position: relative;
+	  	left: 0;
+	  	right: 0;
 	 }
-	  
-	 .unit {
-/*	 	height: 14px;
-	 	line-height: 14px;*/
-	 	color: rgba(102, 102, 102, 100);
-		@include themeify{
-						font-size: themed('font-size2'); 
-						line-height: themed('font-size2'); 
-						height: themed('font-size2'); 
-					}
-/*	 	font-size: 14px;*/
-	 	text-align: left;
-	 	font-family: AlibabaPuHui-regular;
-	 	margin-top: 6px;
-	 	margin-left: 4px;
+	 .charing-slow-2{
+	 	 margin: 0 !important;
+	 	 
+	 	 
 	 }
-	 	.park {
-	 		margin-top: 8px;
-	 		display: flex;
-	 
-	 		
 	 
-	 		
-	 	}
-		.park-p {
-			display: inline-block;
-			width: 20px;
-			@include themeify{
-/*				font-size: themed('font-size1'); */
-				line-height: themed('font-size1'); 
-				height: themed('font-size4'); 
-			}
-/*			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;*/
-			@include themeify{
-				font-size: themed('font-size1'); 
-				height: themed('font-size4'); 
- 			}
-			text-align: left;
-			margin-left: 4px;
-			margin-top: 2px;
-		}
+ .price-free{
+	 width: 100%;
+	 display: flex;
+	 align-items: center;
+	 justify-content: space-between;
+	 margin-top: 8px;
+ }
+ 	.price {
+ 		display: flex;
+		line-height: 40rpx;
 		
-		 .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*/
-			@include themeify{
-				font-size: themed('font-size3');  
-			}
-		} 
-		.distance {
-			width: 130px;
-/*			height: 28px;
-			line-height: 28px;*/
-			color: rgba(255, 255, 255, 100);
-/*			font-size: 14px;*/
+		.price-1{
+			display: flex;
+			justify-content: space-between;
+			.num {
 			
-			@include themeify{
-				font-size: themed('font-size2'); 
-				height: themed('font-size9'); 
-				line-height: themed('font-size9'); 
-			}
-			background-color: #00b962;
-			border-radius: 50px;
-			margin: 12px;
-			text-align: center;
-	
+			 	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: 12px;
+			 			height: themed('font-size2');
+			 			
+			 	}
 			
-	
-		}
-		.distance-font {
-			font-size: 16px
+			  	text-align: left;
+			  	font-family: AlibabaPuHui-regular;
+			  	
+			  	margin-left: 8rpx;
+			  }
 		}
+        .price-2{
+        	color: rgba(153, 153, 153, 100);
+        	margin-left: 6rpx;
+        	text-decoration: line-through;
+			font-size: 24rpx
+        }
+ 	}
+		 .free{
+		 	display: flex;
+		     align-items: center;
+		 	.slow,.fast{
+		 		display: flex;
+		 		.fast-font{
+		 			width: 40rpx;
+		 			height: 40rpx;
+		 			line-height: 40rpx;
+		 			border-radius: 4px;
+		 			background-color: rgba(186, 240, 215, 100);
+		 			color: rgba(0, 130, 69, 100);
+		 			font-size: 28rpx;
+		 			text-align: center;
+		 			margin-right: 2rpx;
+		 		}
+		 		.slow-font{
+		 			width: 40rpx;
+		 			height: 40rpx;
+		 			line-height: 40rpx;
+		 			border-radius: 4px;
+		 			background-color: rgba(226, 226, 226, 100);
+		 			color: rgba(128, 128, 128, 100);
+		 			font-size: 28rpx;
+		 			text-align: center;
+		 			margin-right: 2rpx;
+		 		}
+		 		.num{
+		 			font-size: 32rpx;color: rgba(0, 145, 67, 100);
+		 			line-height: 40rpx;
+		 		}
+		 	}
+		 	.slow{
+		 		margin-left: 40rpx;
+		 	}
+		 }
+		 .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;
+		 	}}
 </style>