Browse Source

首页修改

常志远 2 years ago
parent
commit
3e9797f868

BIN
assets/img/topup1.png


+ 31 - 2
pages/index/index.vue

@@ -194,11 +194,14 @@
 			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
 			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
 			<view class="img-box2">
 			<view class="img-box2">
 				<view class="left-image">
 				<view class="left-image">
-					<img src="../../assets/img/topup1.png" alt="">
+					<p>充电免服务费包月卡</p>
+					<view class="time-activities">
+						限时活动 <text class="time">127:59:59</text>
+					</view>
 				</view>
 				</view>
 				<view class="right-image" v-if="activityList.length > 0">
 				<view class="right-image" v-if="activityList.length > 0">
 			
 			
-					<img v-for="(item,index) in activityList" :key="item.id" 
+					<img class="margin-bottom" v-for="(item,index) in activityList" :key="item.id" 
 						@click="rechargeActivity(index)" :src="item.picUrl" alt="">
 						@click="rechargeActivity(index)" :src="item.picUrl" alt="">
 					<!-- <img class="margin-top" src="../../assets/img/topup3.png" alt=""> -->
 					<!-- <img class="margin-top" src="../../assets/img/topup3.png" alt=""> -->
 				</view>
 				</view>
@@ -1106,13 +1109,39 @@
 		}
 		}
 		.left-image{
 		.left-image{
 			width: 48.3%;
 			width: 48.3%;
+			height: 166px;
+			padding: 8px 0 0 12px;
+			background: url(@/assets/img/topup1.png);
+			    background-repeat: no-repeat;
+			    background-position: 30% 10%;
+			    background-size: cover;
+				p{
+					color: rgba(56, 47, 33, 100);
+					font-size: 24px;
+					line-height: 28px;
+					font-weight: 600;
+					
+				}
+				.time-activities{
+					color: rgba(56, 39, 14, 100);
+					font-size: 16px;
+					line-height: 22px;
+					margin-top: 4px;
+					.time{
+						margin-left: 4px;
+					}
+				}
 		}
 		}
 		.right-image{
 		.right-image{
 			width: 48.3%;
 			width: 48.3%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
 			
 			
 			.margin-top{
 			.margin-top{
 				margin-top: 12px;
 				margin-top: 12px;
 			}
 			}
+			
 			img{
 			img{
 				height: 77px;
 				height: 77px;
 				
 				

+ 57 - 9
pages/searchPile/chargeProcess/dcChargeEnd.vue

@@ -16,8 +16,43 @@
 					<view class="bot"></view>
 					<view class="bot"></view>
 				</u-circle-progress>
 				</u-circle-progress>
 		</view>
 		</view>
+	<!-- 充电信息 -->
+	<view class="charge-infos">
+		<view class="item">
+			<view class="title">
+				充电金额
+			</view>
+			<view class="content">
+				50.00
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				充电时长
+			</view>
+			<view class="content">
+				00.00.00
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				优惠金额
+			</view>
+			<view class="content discounts">
+				-6.00元
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				会员活动
+			</view>
+			<view class="content">
+				充电服务费包月卡
+			</view>
+		</view>
+	</view>
 	
 	
-	<view class="time-price">
+	<!-- <view class="time-price">
 		<view class="item">
 		<view class="item">
 			<view class="item-num">
 			<view class="item-num">
 				00:20:00
 				00:20:00
@@ -34,7 +69,7 @@
 				充电金额
 				充电金额
 			</view>
 			</view>
 		</view>
 		</view>
-	</view>
+	</view> -->
 	<view class="bottom">
 	<view class="bottom">
 		 <u-button size="default" shape="circle">返回首页</u-button>
 		 <u-button size="default" shape="circle">返回首页</u-button>
 		 <u-button size="default" shape="circle">查看订单详情</u-button>
 		 <u-button size="default" shape="circle">查看订单详情</u-button>
@@ -156,15 +191,28 @@
 		text-align: center;
 		text-align: center;
 	}
 	}
 }
 }
+
+.charge-infos{
+	padding: 20px 36px;
+	margin: 0 auto;
+	.item{
+		display: flex;
+		justify-content: space-between;
+		color: rgba(102, 102, 102, 100);
+		font-size: 18px;
+		margin-bottom: 12px;
+		.discounts{
+			color:red
+		}
+	}
+}
+
 .bottom{
 .bottom{
 	display: flex;
 	display: flex;
-	  width: 343px;
-	  padding: 12px 16px;
-	  position: fixed;
-	  bottom: 0;
-	  left: 0;
-	  right: 0;
-	  margin: auto;
+	  
+	  padding: 12px 36px;
+	 
+	  // margin: auto;
 	  .u-size-default[data-v-3bf2dba7]{
 	  .u-size-default[data-v-3bf2dba7]{
 		  border: 1px solid rgba(0, 185, 98, 100);
 		  border: 1px solid rgba(0, 185, 98, 100);
 		  color: #00b962;
 		  color: #00b962;

+ 58 - 13
pages/searchPile/chargeProcess/dcCharging.vue

@@ -22,9 +22,43 @@
 					
 					
 				</u-circle-progress>
 				</u-circle-progress>
 			</view>
 			</view>
-
-			<view class="">
-				<view class="info" >
+<!-- 充电信息 -->
+			
+				<view class="charge-infos">
+					<view class="item">
+						<view class="title">
+							充电金额
+						</view>
+						<view class="content">
+							50.00
+						</view>
+					</view>
+					<view class="item">
+						<view class="title">
+							充电时长
+						</view>
+						<view class="content">
+							00.00.00
+						</view>
+					</view>
+					<view class="item">
+						<view class="title">
+							优惠金额
+						</view>
+						<view class="content discounts">
+							-6.00元
+						</view>
+					</view>
+					<view class="item">
+						<view class="title">
+							会员活动
+						</view>
+						<view class="content">
+							充电服务费包月卡
+						</view>
+					</view>
+				</view>
+				<!-- <view class="info" >
 					<view class="info-name">
 					<view class="info-name">
 						充电时长
 						充电时长
 					</view>
 					</view>
@@ -64,12 +98,12 @@
 					<view class="info-text">
 					<view class="info-text">
 						{{chargingRecord.remark}}
 						{{chargingRecord.remark}}
 					</view>
 					</view>
-				</view>
+				</view> -->
 				
 				
-			</view>
+		
 			
 			
 			
 			
-			<view
+			<!-- <view
 			
 			
 			style="
 			style="
 				margin-top: 20px;
 				margin-top: 20px;
@@ -79,12 +113,13 @@
 				color:#9e9e9e;
 				color:#9e9e9e;
 			">
 			">
 				<span style="color: red;">*</span>实际充电金额与所选金额会略有出入,最终结算金额将以实际充入电量为准。
 				<span style="color: red;">*</span>实际充电金额与所选金额会略有出入,最终结算金额将以实际充入电量为准。
-			</view>
+			</view> -->
 			
 			
 			<view class="bottom">
 			<view class="bottom">
 				<u-button size="default" shape="circle" @click="gotoMain(0)"  >返回首页</u-button>
 				<u-button size="default" shape="circle" @click="gotoMain(0)"  >返回首页</u-button>
 				<u-button size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
 				<u-button size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
 			</view>
 			</view>
+				<u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
 		</view>
 		</view>
 
 
 		<view style="background-color: #fff; padding-bottom: 60px;" v-else>
 		<view style="background-color: #fff; padding-bottom: 60px;" v-else>
@@ -778,6 +813,20 @@
 			text-align: right;
 			text-align: right;
 		}
 		}
 	}
 	}
+	.charge-infos{
+		padding: 20px 36px;
+		margin: 0 auto;
+		.item{
+			display: flex;
+			justify-content: space-between;
+			color: rgba(102, 102, 102, 100);
+			font-size: 18px;
+			margin-bottom: 12px;
+			.discounts{
+				color:red
+			}
+		}
+	}
 
 
 	.bottom2 {
 	.bottom2 {
 	
 	
@@ -878,12 +927,8 @@
 		background-color: #fff;
 		background-color: #fff;
 		display: flex;
 		display: flex;
 		width: 91.4%;
 		width: 91.4%;
-		padding: 12px 16px;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		margin: auto;
+		padding: 0 16px;
+		margin:0 auto 40px;
 
 
 		.u-size-default {
 		.u-size-default {
 			border: 1px solid rgba(0, 185, 98, 100);
 			border: 1px solid rgba(0, 185, 98, 100);