充电中页面修改

pages/searchPile/chargeProcess/charging.vue

@@ -1,10 +1,14 @@
 <template>
 	<view>
 		<ujp-navbar title="充电中">
+			<view class="to-recharge">
+				去充值
+			</view>
 		</ujp-navbar>
 		<!-- 充电状态 -->
 		<view class="charge-state">
-			<view class="img">
+			1111111111111111111111111111111
+		<!-- 	<view class="img">
 				<img src="../../../assets/img/Group (2).png" alt="">
 			</view>
 			<view class="state-infos">
@@ -24,59 +28,37 @@
 					</view>
 				</view>
 
-			</view>
+			</view> -->
 
 		</view>
 		<!-- 充电信息 -->
 		<view class="charge-info">
 			<view class="info-item">
 				<view class="content">
-					15.000
+					00:24:01
 				</view>
 				<view class="name">
-					已充电量(度)
+					充电时长
 				</view>
 			</view>
 			<view class="info-item">
 				<view class="content">
-					11.10
+					15.000
 				</view>
 				<view class="name">
-					已充费用(元)
+					已充电量(度)
 				</view>
 			</view>
 			<view class="info-item">
 				<view class="content">
-					50.00
+					39.90
 				</view>
 				<view class="name">
 					账户余额(元)
 				</view>
 			</view>
-			<view class="info-item">
-				<view class="content">
-					200V
-				</view>
-				<view class="name">
-					电压
-				</view>
-			</view>
-			<view class="info-item">
-				<view class="content">
-					80kW
-				</view>
-				<view class="name">
-					功率
-				</view>
-			</view>
-			<view class="info-item">
-				<view class="content">
-					120A
-				</view>
-				<view class="name">
-					电流
-				</view>
-			</view>
+			
+			
 		</view>
 		<!-- 其他信息 -->
 		<view class="else-infos">
@@ -151,12 +133,12 @@
 
      <view class="bottom">
 		 <view class="img-box">
-		 	<img src="../../../assets/img/customer-service-2-line.svg" alt="">
+			 <img src="../../../assets/img/customer-service-2-line.svg" alt="">
+		 	
 		 </view>
 		 <button>结束充电</button>
 		 <view class="img-box">
-		 	
-			<img src="../../../assets/img/tools-fill.svg" alt="">
+		 	<img src="../../../assets/img/tools-fill.svg" alt="">
 		 </view>
      	
      </view>
@@ -180,81 +162,85 @@
 
 <style lang="scss" scoped>
 	page {
-		background-color: #f6f6f8;
+		background-color: #f6f8f8;
 		padding-bottom: 120px;
 	}
-
+.to-recharge{
+	position: absolute;
+	right: 22px;
+	color: #333333
+}
 	// 充电状态
 	.charge-state {
-		background-image: linear-gradient(#D6EEDC, #f6f6f8 98%);
+		
 		width: 100%;
-		display: flex;
-
-		.img {
-			width: 48%;
-			height: 286px;
-
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.state-infos {
-			padding-top: 38px;
-
-			.state {
-				color: rgba(0, 185, 98, 100);
-				font-size: 28px;
-				line-height: 28px;
-				font-weight: 550;
-
-				text {
-					vertical-align: middle;
-				}
-			}
-
-			.electric-quantity {
-				margin-top: 17px;
-
-				p {
-					height: 22px;
-					color: rgba(119, 119, 119, 100);
-					font-size: 16px;
-				}
-
-				.percent {
-					margin-top: 4px;
-					line-height: 40px;
-					color: rgba(51, 51, 51, 100);
-					font-size: 36px;
-					font-weight: 550;
-
-					text {
-						font-size: 24px;
-						font-weight: 550;
-					}
-				}
-			}
-
-			.charge-time {
-				margin-top: 12px;
-
-				p {
-					line-height: 22px;
-					color: rgba(119, 119, 119, 100);
-					font-size: 16px;
-				}
-
-				.time {
-					margin-top: 4px;
-					line-height: 36px;
-					color: rgba(51, 51, 51, 100);
-					font-size: 36px;
-					font-weight: 550;
-				}
-			}
-		}
+		
+
+		// .img {
+		// 	width: 48%;
+		// 	height: 286px;
+
+		// 	img {
+		// 		width: 100%;
+		// 		height: 100%;
+		// 	}
+		// }
+
+		// .state-infos {
+		// 	padding-top: 38px;
+
+		// 	.state {
+		// 		color: rgba(0, 185, 98, 100);
+		// 		font-size: 28px;
+		// 		line-height: 28px;
+		// 		font-weight: 550;
+
+		// 		text {
+		// 			vertical-align: middle;
+		// 		}
+		// 	}
+
+		// 	.electric-quantity {
+		// 		margin-top: 17px;
+
+		// 		p {
+		// 			height: 22px;
+		// 			color: rgba(119, 119, 119, 100);
+		// 			font-size: 16px;
+		// 		}
+
+		// 		.percent {
+		// 			margin-top: 4px;
+		// 			line-height: 40px;
+		// 			color: rgba(51, 51, 51, 100);
+		// 			font-size: 36px;
+		// 			font-weight: 550;
+
+		// 			text {
+		// 				font-size: 24px;
+		// 				font-weight: 550;
+		// 			}
+		// 		}
+		// 	}
+
+		// 	.charge-time {
+		// 		margin-top: 12px;
+
+		// 		p {
+		// 			line-height: 22px;
+		// 			color: rgba(119, 119, 119, 100);
+		// 			font-size: 16px;
+		// 		}
+
+		// 		.time {
+		// 			margin-top: 4px;
+		// 			line-height: 36px;
+		// 			color: rgba(51, 51, 51, 100);
+		// 			font-size: 36px;
+		// 			font-weight: 550;
+		// 		}
+		// 	}
+		// }
 
 	}
 
@@ -263,8 +249,8 @@
 		background-color: #ffffff;
 		width: 88.2%;
 		padding: 20px 10px 4px 7px;
-		margin: 0 auto;
-		box-shadow: 0px 2px 9px 0px rgba(9, 90, 52, 10);
+		margin: 24px auto 0;
+		box-shadow: 0px 2px 8px 0px #1A095A34;
 		border-radius: 12px;
 		display: flex;
 		flex-wrap: wrap;
@@ -279,7 +265,7 @@
 				line-height: 33px;
 				color: rgba(51, 51, 51, 100);
 				font-size: 24px;
-
+                font-weight: 550;
 			}
 
 			.name {
@@ -340,7 +326,7 @@
 	}
 	// 底部按钮
 	.bottom{
-		background-color: #FFFFFF ;
+		background:linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 100)) ;
 		position: fixed;
 		bottom: 0;
 		left: 0;