From e77620924b9339bdb5d2f3425cb898fdd659e010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=B9?= <>
Date: Wed, 18 Sep 2024 18:52:48 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json          |   4 +-
 pages/index.vue     | 143 ++++++++++++++++++++++++++++++--------------
 static/scss/app.css |  94 ++++++++++++++++++++++++-----
 3 files changed, 178 insertions(+), 63 deletions(-)

diff --git a/pages.json b/pages.json
index 7da8504..3281b76 100644
--- a/pages.json
+++ b/pages.json
@@ -13,8 +13,8 @@
 		}, {
 			"path": "pages/index",
 			"style": {
-				"navigationBarTitleText": "若依移动端框架",
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#39ac4f"
 			}
 		},
 		{
diff --git a/pages/index.vue b/pages/index.vue
index 8542289..9394a55 100644
--- a/pages/index.vue
+++ b/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">
-												<div class="battery-level battery-level-60"></div>
-											</div>
+											<view class="battery-container">
+												<text>60</text>
+												<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">
-										(12)
+									<u-col span="5">
+										<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>
@@ -178,7 +210,7 @@
 <script>
 	import store from "@/store"
 	import plugin from "@/plugins"
-		
+
 	export default {
 		data() {
 			return {
@@ -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;
@@ -332,7 +360,7 @@
 						margin-bottom: 10px;
 					}
 
-					
+
 
 				}
 			}
@@ -375,109 +403,132 @@
 
 		}
 	}
+
 	// 信号
 	.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 {
+		margin: 0 10px;
 		position: relative;
-		width: 30px;
-		height: 12px;
+		width: 31px;
+		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;
-		width: 100%;
+		left: 1px;
+		width: 90%;
+		max-width: 90%;
 		background-color: #4CAF50;
-		border-radius: 4px;
+		border-radius: 2px;
 		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%;
 	}
diff --git a/static/scss/app.css b/static/scss/app.css
index f97ea99..709ba7b 100644
--- a/static/scss/app.css
+++ b/static/scss/app.css
@@ -1,21 +1,85 @@
 /* 徽标数 */
-.u-badge{border-radius: 5px !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-button{width: fit-content !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-badge {
+	border-radius: 5px !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-button {
+	width: fit-content !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-collapse-item {
+	&>.u-line {
+		border-bottom: none !important;
+	}
 }
 
 /* fixed */
-.fixed{display: flex;align-items: center;flex-direction: row;}
\ No newline at end of file
+.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;
+		}
+	}
+}