。

pages.json

@@ -13,8 +13,8 @@
 		}, {
 			"path": "pages/index",
 			"style": {
-				"navigationBarTitleText": "若依移动端框架",
+				"navigationBarTitleText": "",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#39ac4f"
 			}
 		},
 		{

pages/index.vue

@@ -75,11 +75,11 @@
 								<u-row>
 									<u-col span="3">
 										<view class="fixed">
-											<text style="color: #39ac4f;">●</text>
+											<text class="font-red">●</text>
 											<view>E0000104</view>
 										</view>
 									</u-col>
-									<u-col span="4" align="center">
+									<u-col span="4">
 										<view class="fixed">
 											<view class="signal">
 												<view class="bar"></view>
@@ -104,11 +104,11 @@
 								<u-row>
 									<u-col span="3">
 										<view class="fixed">
-											<text style="color: #e60012;">●</text>
+											<text class="font-green">●</text>
 											<view>E0000104</view>
 										</view>
 									</u-col>
-									<u-col span="4" align="center">
+									<u-col span="4">
 										<view class="fixed">
 											<view class="signal">
 												<view class="bar green"></view>
@@ -121,9 +121,11 @@
 												</view>
 											</view>
 											<text>(12)</text>
-											<div class="battery-container">
+											<view class="battery-container">
-												<div class="battery-level battery-level-60"></div>
+												<text>60</text>
-											</div>
+												<view class="battery-level battery-level-60">
+												</view>
+											</view>
 										</view>
 									</u-col>
 									<u-col span="5">
@@ -154,18 +156,48 @@
 									<u-col span="4">
 										<view class="fixed">
 											<view>A1</view>
-											<text style="color: #39ac4f;">●离线</text>
+											<text class="font-green">●在线</text>
 										</view>
-
 									</u-col>
-									<u-col span="5" align="left">
+									<u-col span="5">
-										(12)
+										<view class="battery-container">
+											<text>60</text>
+											<view class="battery-level battery-level-60">
+											</view>
+										</view>
 									</u-col>
 									<u-col span="3" style="align-items: flex-end;">
 										<u-switch v-model="value" @change="change" size="20"
 											activeColor="#39ac4f"></u-switch>
 									</u-col>
 								</u-row>
+								<view class="card-grey">
+									<view class="title">
+										<u-row>
+											<u-col span="3">
+												<view><text class="font-green">●</text>1-1</view>
+											</u-col>
+											<u-col span="4">
+												<view class="fixed">
+												<view class="battery-container">
+													<text>60</text>
+													<view class="battery-level battery-level-60">
+													</view>
+												</view>
+												<view>
+													<view class="iconfont icon-wendu icon"></view>26.2
+												</view>
+												</view>
+											</u-col>
+											<u-col span="5" style="align-items: flex-end;">
+												<view class="fixed">
+													<u-button type="success" size="mini" text="刷新" icon="reload"></u-button>
+												</view>
+											</u-col>
+										</u-row>
+									</view>
+									
+								</view>
 							</view>
 						</u-collapse-item>
 					</u-collapse>
@@ -315,10 +347,6 @@
 		}
 
 		.card {
-			margin-bottom: 10px;
-			background-color: #fff;
-			border-radius: 10px;
-			box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
 
 			::v-deep.u-cell__body {
 				padding: 10px;
@@ -375,6 +403,7 @@
 
 		}
 	}
+
 	// 信号
 	.signal {
 		position: relative;
@@ -439,21 +468,43 @@
 
 	// 电池
 	.battery-container {
+		margin: 0 10px;
 		position: relative;
-		width: 30px;
+		width: 31px;
-		height: 12px;
+		height: 16px;
+		line-height: 14px;
 		background-color: #fff;
+		border-radius: 3px;
+		border: 1px solid #333;
+		text-align: center;
+
+		text {
+			position: relative;
+			z-index: 2;
+		}
+	}
+
+	.battery-container::after {
+		content: "";
+		position: absolute;
+		top: 4px;
+		right: -2px;
+		width: 1px;
+		height: 5px;
+		background-color: #333;
 		border-radius: 4px;
 	}
 
 	.battery-level {
+		height: 12px;
 		position: absolute;
-		top: 0;
+		top: 1px;
 		bottom: 0;
-		left: 0;
+		left: 1px;
-		width: 100%;
+		width: 90%;
+		max-width: 90%;
 		background-color: #4CAF50;
-		border-radius: 4px;
+		border-radius: 2px;
 		transition: width 0.5s;
 	}
 

static/scss/app.css

@@ -1,21 +1,85 @@
 /* 徽标数 */
-.u-badge{border-radius: 5px !important;}
+.u-badge {
-.u-badge--not-dot {padding: 4px !important;}
+	border-radius: 5px !important;
-.u-badge--success{ background-color: #39ac4f !important;}
+}
+
+.u-badge--not-dot {
+	padding: 4px !important;
+}
+
+.u-badge--success {
+	background-color: #39ac4f !important;
+}
+
 /* tabs标签 */
-.u-tabs__wrapper__nav__line{background-color: #39ac4f !important;}
+.u-tabs__wrapper__nav__line {
+	background-color: #39ac4f !important;
+}
+
 /* 按钮 */
-.u-button{width: fit-content !important;}
+.u-button {
-.u-button--square{border-radius: 5px !important;}
+	width: fit-content !important;
-.u-button--small{height: 25px !important;}
+}
+
+.u-button--square {
+	border-radius: 5px !important;
+}
+
+.u-button--small {
+	height: 25px !important;
+}
+
 .u-button--success[data-v-5ce41ee6] {
 	background-color: #39ac4f !important;
 	border-color: #39ac4f !important;
 }
+
 /* 列表 */
 .u-collapse-item {
-	&>.u-line{border-bottom: none !important;}
+	&>.u-line {
+		border-bottom: none !important;
+	}
 }
 
 /* fixed */
-.fixed{display: flex;align-items: center;flex-direction: row;}
+.fixed {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+}
+
+/* 字体颜色 */
+.font-red {
+	color: #e60012;
+}
+
+.font-orange {
+	color: #ffa200;
+}
+
+.font-green {
+	color: #39ac4f;
+}
+
+/* 卡片 */
+.card,
+.card-grey {
+	margin-bottom: 10px;
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
+}
+
+.card-grey {
+	background-color: #f3f3f3;
+}
+
+.card-grey {
+	.title {
+		padding: 10px;
+border-bottom: 1px solid #c7c7c7;
+		.icon {
+			color: #39ac4f;
+		}
+	}
+}