。

pages/index.vue

@@ -74,9 +74,7 @@
 							<view class="u-collapse-content">
 								<u-row>
 									<u-col span="3">
-
 										<view class="fixed">
-
 											<text style="color: #39ac4f;">●</text>
 											<view>E0000104</view>
 										</view>
@@ -95,7 +93,6 @@
 											</view>
 											<text>(12)</text>
 										</view>
-
 									</u-col>
 									<u-col span="5">
 										<view class="fixed">
@@ -113,7 +110,20 @@
 									</u-col>
 									<u-col span="4" align="center">
 										<view class="fixed">
+											<view class="signal">
+												<view class="bar green"></view>
+												<view class="bar green"></view>
+												<view class="bar green"></view>
+												<view class="bar green"></view>
+												<view class="bar"></view>
+												<view class="bar-no" style="display: none;">
+													<u-icon name="close"></u-icon>
+												</view>
+											</view>
 											<text>(12)</text>
+											<div class="battery-container">
+												<div class="battery-level battery-level-60"></div>
+											</div>
 										</view>
 									</u-col>
 									<u-col span="5">
@@ -161,7 +171,6 @@
 					</u-collapse>
 				</view>
 			</view>
-
 		</view>
 	</view>
 </template>
@@ -323,58 +332,7 @@
 						margin-bottom: 10px;
 					}
 
-					// 信号
+					
-					.signal {
-						position: relative;
-						display: flex;
-						align-items: flex-end;
-						height: 17px;
-
-						.bar {
-							width: 2px;
-							background-color: #999;
-							border-radius: 2px;
-							margin-right: 2px;
-						}
-
-						.bar:nth-child(1) {
-							height: 4px;
-							background-color: #e60012;
-						}
-
-						.bar:nth-child(2) {
-							height: 7px;
-							background-color: #e60012;
-						}
-
-						.bar:nth-child(3) {
-							height: 10px;
-							background-color: #ffa200;
-						}
-
-						.bar:nth-child(4) {
-							height: 13px;
-							background-color: #39ac4f;
-						}
-
-						.bar:nth-child(5) {
-							height: 16px;
-							background-color: #39ac4f;
-						}
-
-						.bar-no {
-							position: absolute;
-							left: -2px;
-							bottom: 3px;
-
-							.u-icon__icon {
-								font-weight: bold;
-								font-size: 18rpx !important;
-							}
-						}
-					}
-
-
 
 				}
 			}
@@ -417,4 +375,110 @@
 
 		}
 	}
+	// 信号
+	.signal {
+		position: relative;
+		display: flex;
+		align-items: flex-end;
+		height: 17px;
+	
+		.bar {
+			width: 2px;
+			background-color: #999;
+			border-radius: 2px;
+			margin-right: 2px;
+		}
+	
+		.bar:nth-child(1) {
+			height: 4px;
+		}
+	
+		.bar:nth-child(2) {
+			height: 7px;
+	
+		}
+	
+		.bar:nth-child(3) {
+			height: 10px;
+	
+		}
+	
+		.bar:nth-child(4) {
+			height: 13px;
+	
+		}
+	
+		.bar:nth-child(5) {
+			height: 16px;
+	
+		}
+	
+		.bar.red {
+			background-color: #e60012;
+		}
+	
+		.bar.orange {
+			background-color: #ffa200;
+		}
+	
+		.bar.green {
+			background-color: #39ac4f;
+		}
+	
+		.bar-no {
+			position: absolute;
+			left: -2px;
+			bottom: 3px;
+	
+			::v-deep.u-icon__icon {
+				font-weight: bold;
+				font-size: 18rpx !important;
+			}
+		}
+	}
+	
+	// 电池
+	.battery-container {
+		position: relative;
+		width: 30px;
+		height: 12px;
+		background-color: #fff;
+		border-radius: 4px;
+	}
+	
+	.battery-level {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #4CAF50;
+		border-radius: 4px;
+		transition: width 0.5s;
+	}
+	
+	/* 不同的电量级别 */
+	.battery-level-100 {
+		width: 100%;
+	}
+	
+	.battery-level-80 {
+		width: 80%;
+	}
+	
+	.battery-level-60 {
+		width: 60%;
+	}
+	
+	.battery-level-40 {
+		width: 40%;
+	}
+	
+	.battery-level-20 {
+		width: 20%;
+	}
+	
+	.battery-level-0 {
+		width: 0%;
+	}
 </style>