页面调整

assets/img/lockstatus/status3.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="20" height="20" style="" filter="none">
+    
+    <g>
+    <path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0c59.733333 0 119.466667 12.8 179.2 29.866667 21.333333 8.533333 34.133333 34.133333 25.6 55.466666-8.533333 21.333333-34.133333 34.133333-55.466667 25.6-46.933333-17.066667-98.133333-25.6-149.333333-25.6C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667c0-76.8-21.333333-149.333333-59.733334-213.333333-12.8-21.333333-4.266667-46.933333 17.066667-59.733334 21.333333-12.8 46.933333-4.266667 59.733333 17.066667 42.666667 76.8 68.266667 166.4 68.266667 256 0 281.6-230.4 512-512 512z" p-id="4823" fill="rgba(157,162,169,1)"></path><path d="M512 772.266667c-17.066667 0-29.866667-8.533333-38.4-25.6L298.666667 379.733333c-8.533333-21.333333 0-46.933333 21.333333-55.466666 21.333333-8.533333 46.933333 0 55.466667 21.333333l136.533333 290.133333L648.533333 341.333333c8.533333-21.333333 34.133333-29.866667 55.466667-21.333333 21.333333 8.533333 29.866667 34.133333 21.333333 55.466667l-174.933333 366.933333c-8.533333 21.333333-21.333333 29.866667-38.4 29.866667z" p-id="4824" fill="rgba(157,162,169,1)"></path>
+    </g>
+  </svg>

pages/business/as-components/componentLockInfo.vue

@@ -77,20 +77,10 @@
 							</view>
 							
 						</view>
-						<view class="page-info" >
-							<view class="info-span" v-if="floorlockInfo.lastOnlineTime">
-								更新时间：{{floorlockInfo.lastOnlineTime}}
 						
-							</view>
-							<view class="info-span" v-if="floorlockInfo.batteryLevel">
-								电压：{{floorlockInfo.batteryLevel}}V
-							</view>
-						</view>
 						<view class="page-info" >
 							<view class="address">
 								<view class="name">
-									{{floorlockInfo.parkingName}}
-									
 									<template v-if="parkingInfo.buildMode">
 										<span class="buildMode buildMode1"  v-if="parkingInfo.buildMode==1">
 												用户自建
@@ -99,6 +89,9 @@
 												平台运营
 										</span>
 									</template>
+									{{floorlockInfo.parkingName}}
+									
+								
 								</view>
 								<view class="text" v-if="floorlockInfo.locationAddress">
 									<u-icon name="map-fill" size="24" color="#999999" ></u-icon>
@@ -198,6 +191,18 @@
 
 					</view>
 					
+					<view class="page-info" v-if="0" >
+						<view class="info-span" v-if="floorlockInfo.lastOnlineTime">
+					
+						</view>
+						<view class="info-span" v-if="floorlockInfo.batteryLevel">
+							电压：{{floorlockInfo.batteryLevel}}V
+						</view>
+					</view>
+					<view class="info-span">
+						状态更新时间：{{floorlockInfo.lastOnlineTime}}
+						
+					</view>
 					<view class=" page   valuestatus">
 						<view class="bo1">
 							<img src="@/assets/img/lockstatus/status2.svg"> <span>雷达</span>  <span :style="floorlockInfo.parkingStatus==1?'color:#FF7B00':'color:#00B962'">{{floorlockInfo.parkingStatus==1?'有车':'无车'}}</span>
@@ -219,6 +224,16 @@
 							</span>
 							
 						</view>
+						<template v-if="floorlockInfo.batteryLevel">
+							<view class="bo2">
+								
+							</view>
+							<view class="bo1">
+								<img src="@/assets/img/lockstatus/status3.svg"> <span>电压</span>  <span style="color:#1677FF">{{floorlockInfo.batteryLevel}}V</span>
+							</view>
+							
+						</template>
+						
 					</view>
 					
 					
@@ -815,10 +830,10 @@
 						    display: flex;
 						    align-items: center;
 						color: rgba(119,119,119,1);
-						font-size: 28rpx;
+						font-size: 24rpx;
 					}
 					.text{
-						color: rgba(51,51,51,1);
+						color: #777777;
 						font-size: 24rpx;
 					}
 				}
@@ -1002,16 +1017,22 @@
 		}
 	
 	}
-	
+	.info-span{
+		text-align: center;
+		color: rgba(119,119,119,1);
+		font-size: 24rpx;
+		margin: 24rpx 0;
+	}
 	
 	.valuestatus{
+		
 		    display: flex;
 		    align-items: center;
 			    justify-content: space-around;
 			border-radius: 8px;
 			background: linear-gradient(180deg, rgba(229,240,255,1) 0%,rgba(255,255,255,1) 100%);
 			color: rgba(16,16,16,1);
-			font-size: 36rpx;
+			font-size: 32rpx;
 			text-align: center;
 			box-shadow: 0px 2px 10px 0px rgba(110,170,255,0.5);
 			
@@ -1021,7 +1042,7 @@
 			height: 120rpx;
 			
 			.bo1{
-				width: 230rpx;
+				//width: 230rpx;
 				    display: flex;
 				    align-items: center;
 					img{
@@ -1034,25 +1055,25 @@
 				border-left: 1px solid #9DA2A9 ;
 			}
 			span{
-				margin-left:  16rpx;
+				margin-left:  4rpx;
 			}
 	}
 	
 	.buildMode{
-		font-size: 24rpx;
-		    border: 1px solid #bbbbbb;
+		//font-size: 24rpx;
+		  //  border: 1px solid #bbbbbb;
 		    border-radius: 4px;
 		    color: #1677ff;
-		    padding: 2rpx 8rpx;
-		    margin:0 8rpx;
+		  
+		    margin-right: 8rpx;
 			
 	}
 	.buildMode1{
 		color: #1677ff;
-		border: 1px solid #1677ff;
+		//border: 1px solid #1677ff;
 	}
 	.buildMode2{
 		color:#4CAF50;
-		border: 1px solid #4CAF50;
+		//border: 1px solid #4CAF50;
 	}
 </style>

pages/business/index.vue

@@ -27,7 +27,19 @@
 								
 							</view>
 							<view class="item2"   >
-								<span class="span" :class="' lockStatus lockStatus'+item.lockStatus">{{item.lockStatusN}}</span><span class="span">|</span><span  class="span" >{{item.parkingName}}</span>
+								<span class="span" :class="' status status'+item.status">{{item.status=='1'?'在线':'离线'}}</span><span class="span">|</span>
+								<span class="span" :class="' lockStatus lockStatus'+item.lockStatus">{{item.lockStatusN}}</span>
+								
+								
+								<template v-if="item.buildMode">
+								
+									<span class="span">|</span>
+									<span  class="span buildMode1" v-if="item.buildMode==1" >用户自建</span>
+									<span  class="span buildMode2" v-if="item.buildMode==2" >平台运营</span>
+									
+								</template>
+								<span class="span">|</span>
+								<view  class="span spanEnd" >{{item.parkingName}}</view>
 							</view>
 						</view>
 						
@@ -71,7 +83,9 @@
 								<span class="tag"  v-if="item.userPreferred" > <u-icon name="star-fill" color="#FFAE00" size="24"></u-icon> 常用 </span>
 							</view>
 							<view class="item2"   >
-								<span class="span" :class="' lockStatus lockStatus'+item.lockStatus">{{item.lockStatusN}}</span><span class="span">|</span><span  class="span" >{{item.parkingName}}</span>
+								<span class="span" :class="' status status'+item.status">{{item.status=='1'?'在线':'离线'}}</span><span class="span">|</span>
+								<span class="span" :class="' lockStatus lockStatus'+item.lockStatus">{{item.lockStatusN}}</span>
+								
 								
 								<template v-if="item.buildMode">
 								
@@ -80,7 +94,10 @@
 									<span  class="span buildMode2" v-if="item.buildMode==2" >平台运营</span>
 									
 								</template>
+								<span class="span">|</span>
+								<view  class="span spanEnd" >{{item.parkingName}}</view>
 							</view>
+							
 						</view>
 						
 					</view>
@@ -377,20 +394,31 @@
 				
 					}
 				
-					.value {
-						color: rgba(119, 119, 119, 1);
-				
-						font-size: 28rpx;
-					}
+					
+				}
+				.value {
+					color: rgba(119, 119, 119, 1);
+					    white-space: pre;
+					font-size: 24rpx;
 				}
 				.item2{
-					
+					display: flex;
+					    white-space: pre;
 						color: rgba(119, 119, 119, 1);
 								
 						font-size: 24rpx;
 						.span{
 							margin-right: 12rpx;
 						}
+						.spanEnd{
+							overflow: hidden;
+							   text-overflow: ellipsis;
+							   white-space: nowrap;
+							   width: 180rpx;
+						}
+						.status1{
+							color: #4CAF50;
+						}
 						.lockStatus{
 							color: #4CAF50;
 						}