调整

pages/index/index.vue

@@ -627,14 +627,20 @@
 
 					启动中
 				</view>
-				<view v-if="item.status == '1'" class="text-2 " oldstyle="font-size: 16px;">
+				<view v-if="item.status == '1'" class="show20240403Main " >
 
-					已充
-					<span
-						class="text-21">{{item.electricQuantity?(item.electricQuantity/10000).toFixed(1):'0.0'}}度</span>
-					合计<span class="text-22">{{item.dueFee != null ? item.dueFee.toFixed(2) : '0.00'}}元</span>
-					<view style="display: initial;" v-if="item.endSoc">电量<span class="text-21">{{item.endSoc}}%</span>
+					<view class="show20240403" >充电时长
+						<span
+						class="text-21"> {{showChargingMinute(item.chargingMinute)}}</span>
 					</view>
+					
+					<view class="show20240403" >预计费用
+					<span class="text-22">{{item.dueFee != null ? item.dueFee.toFixed(2) : '0.00'}}元</span>
+					</view>
+					
+					<template  v-if="item.endSoc">
+						<view class="show20240403" >充电SOC<span class="text-21">{{item.endSoc}}%</span></view>
+					</template>
 				</view>
 				<!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
 				超出时间将收取占位费
@@ -644,7 +650,7 @@
 					<span v-else>前方等待{{item.waitNum-1}}位</span>
 				</view>
 				<view class="text-3 " oldstyle="font-size: 16px;">
-					<p style=" width: 160%;">
+					<p >
 						{{item.deviceName}}枪{{channelNoShow(item.channelNo,item.manufacturer,item.customNo)}}/{{item.stationName}}<br />当前电价{{item.chargingCostPrice.toFixed(2)}}元/度
 					</p>
 				</view>
@@ -939,7 +945,25 @@
 			this.onPageScrollMethod()
 		},
 		methods: {
+			showChargingMinute(estimateMinute) {
+				var value="";
+				 
+				var ms =estimateMinute
+				if (ms > 0) {
+					var Hour = parseInt(Math.floor(ms / 60 ));
+					var Fen = parseInt(Math.floor(ms % 60 ));	
+				//	value = Hour + "小时"  + Fen+"分钟"
+					if(Hour){
+						value += Hour + "小时" 
+					}
+						
+					if(Fen){
+						value += Fen+"分钟"
+					}
+				}
 			
+				return value;
+			},
 			findNoLTextConfigure() {
 
 				this.spring()
@@ -2646,11 +2670,15 @@
 	}
 
 	.img-box4 {
-		padding-top: 5px;
-		height: 260rpx;
-
+		
+		// height: 260rpx;
+		    padding-top: 30rpx;
+		    display: flex;
+		    flex-direction: column;
+		    justify-content: space-between;
+		    align-items: flex-end;
 		img {
-			max-width: 100px;
+			width: 200rpx;
 		}
 
 		.img-view {
@@ -2669,20 +2697,42 @@
 
 		}
 	}
-
+	.show20240403Main{
+		    display: flex;
+			    flex-wrap: wrap;
+				font-size: 26rpx;
+				margin: 8rpx 0;
+		.show20240403{
+			    white-space: pre;
+				margin-right: 8rpx;
+		}
+		.text-21,.text-22 {
+			margin-left: 8rpx;
+			font-size: 34rpx;
+		}
+		.text-21 {
+			
+			color: rgba(0, 185, 98, 1);
+		}
+		
+		.text-22 {
+		
+			color: #ed7847;
+		}
+	}
 	.state {
 		width: 91.4%;
 		background-color: #ffffff;
-		height: 260rpx;
-		min-height: 120px;
-		max-height: 130px;
+	padding-bottom: 40rpx;
 		display: flex;
 		margin: 20rpx auto 0;
 		border-radius: 8px;
 		border: #F2F4F4 1px;
 
 		.state-text {
-			min-width: 70%;
+			.text-1 {
+				white-space: pre;
+			}
 			padding: 48rpx 0 0 24rpx;
 			Z-INDEX: 99;