From 000e62c0fdb99d87d4ba34a888e19dfff3442faf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=B9?= <>
Date: Thu, 19 Sep 2024 17:44:14 +0800
Subject: [PATCH] .

---
 pages/index.vue     |  85 ++++++++++++++++++++++++++++--
 static/scss/app.css | 126 +++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 194 insertions(+), 17 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index da49767..1e959e4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
-	<uni-nav-bar :statusBar="true" :fixed="false" backgroundColor="#39ac4f" :border="false" color="#fff">
+	<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff">
 		<block v-slot:left>
-			<view @click="openLand">选择地块</view>
+			<view @click="openLand">地块</view>
 		</block>
 		<view>西安设备测试</view>
 		<block v-slot:right>
@@ -223,11 +223,86 @@
 														<view class="text">
 															<view class="left">-99.63</view>
 															<view class="top">-99.63</view>
-															<view class="content">离线</view>
+															<view class="middle">离线</view>
 															<view class="right">-99.63</view>
 															<view class="bottom">-99.63</view>
 														</view>
-														<image src="../static/images/valves/valve3.png" mode="widthFix">
+														<image src="../static/images/valves/valve3-all.gif" mode="widthFix">
+														</image>
+													</view>
+													<view>
+														<view class="btn fixed">
+															<text>全关</text>
+														</view>
+													</view>
+												</view>
+											</u-col>
+											<u-col span="3">
+												<view class="buttons">
+													<view class="btn fixed">
+														<text>④</text>
+														<text>0.00</text>
+														<view class="iconfont icon-suoding icon"></view>
+													</view>
+												</view>
+											</u-col>
+										</u-row>
+									</view>
+								</view>
+								<view class="card-grey">
+									<view class="card-title">
+										<u-row>
+											<u-col span="2">
+												<view><text class="font-green">●</text>1-1</view>
+											</u-col>
+											<u-col span="5">
+												<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 class="control">
+										<u-row>
+											<u-col span="3" style=" align-items: flex-end;">
+												<view class="buttons">
+													<view class="btn fixed active">
+														<text>①</text>
+														<text>0.00</text>
+														<view class="iconfont icon-suoding icon"></view>
+													</view>
+								
+												</view>
+											</u-col>
+											<u-col span="6">
+												<view class="valve">
+													<view>
+														<view class="btn fixed">
+															<text>全开</text>
+														</view>
+													</view>
+													<view class="btn-img">
+														<view class="text5">
+															<view class="left">-99.63</view>
+															<view class="top">-99.63</view>
+															<view class="middle">离线</view>
+															<view class="right">-99.63</view>
+															<view class="bottom">-99.63</view>
+														</view>
+														<image src="../static/images/fiveValves/valve5.png" mode="widthFix">
 														</image>
 													</view>
 													<view>
@@ -357,7 +432,7 @@
 			border-color: #ffffff !important;
 		}
 	}
-
+.content{background-color: #fff;min-height: 100%;}
 	.content-section {
 		position: relative;
 		top: -92px;
diff --git a/static/scss/app.css b/static/scss/app.css
index ae56e92..bcd467d 100644
--- a/static/scss/app.css
+++ b/static/scss/app.css
@@ -24,24 +24,32 @@
 .u-button--square {
 	border-radius: 5px !important;
 }
+
 .u-button--normal {
 	height: 28px !important;
 }
+
 .u-button--small {
 	height: 25px !important;
 }
+
 .u-button--success {
 	background-color: #39ac4f !important;
 	border-color: #39ac4f !important;
 }
-.u-button--plain{
-    background-color: transparent !important;
+
+.u-button--plain {
+	background-color: transparent !important;
 }
+
 /* 卡片线 */
-.u-collapse > .u-line{border: none !important;}
+.u-collapse>.u-line {
+	border: none !important;
+}
+
 /* 列表 */
-.u-collapse-item > .u-line {
-		border-bottom: none !important;
+.u-collapse-item>.u-line {
+	border-bottom: none !important;
 }
 
 /* fixed */
@@ -50,10 +58,26 @@
 	align-items: center;
 	flex-direction: row;
 }
+
 /* 按钮 */
-.btn{ color: #39ac4f;padding: 0 5px; border: 1px solid #39ac4f;    width: fit-content;height: 28px; border-radius: 5px;}
-.btn text{margin-right:2px;}
-.btn.active{background-color: #39ac4f;color: #fff;}
+.btn {
+	color: #39ac4f;
+	padding: 0 5px;
+	border: 1px solid #39ac4f;
+	width: fit-content;
+	height: 28px;
+	border-radius: 5px;
+}
+
+.btn text {
+	margin-right: 2px;
+}
+
+.btn.active {
+	background-color: #39ac4f;
+	color: #fff;
+}
+
 /* 字体颜色 */
 .font-red {
 	color: #e60012;
@@ -76,7 +100,8 @@
 	box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
 }
 
-.card-grey {background-color: #f3f3f3;
+.card-grey {
+	background-color: #f3f3f3;
 	box-shadow: none;
 }
 
@@ -92,10 +117,87 @@
 .card-grey .card-title .u-row {
 	margin-bottom: 0 !important;
 }
+
 /* 首页阀门 */
 .control {
 	padding: 10px;
 }
-.valve > view{display: flex;justify-content: center;}
-.valve .btn-img{margin: 5px; position: relative;}
-.valve .btn-img .text{position: absolute; z-index: 2;}
+.valve{display: flex;
+	align-items: center;
+	flex-direction: column;}
+.valve>view {
+	display: flex;
+	justify-content: center;
+}
+
+.valve .btn-img {
+	width: 130px;
+	margin: 10px;
+	position: relative;
+}
+
+.valve .btn-img .text,
+.valve .btn-img .text5 {
+	position: absolute;
+	z-index: 2;
+	width: -webkit-fill-available;
+	height: -webkit-fill-available;
+}
+
+.valve .btn-img .text>view,
+.valve .btn-img .text5>view {
+	position: absolute;
+	font-weight: bold;
+	font-size: 14px;
+}
+
+.valve .btn-img .text .left,
+.valve .btn-img .text5 .left {
+	left: 0;
+	top: 24%;
+}
+
+.valve .btn-img .text5 .left {
+	top: 41%;
+}
+
+.valve .btn-img .text .top,
+.valve .btn-img .text5 .top {
+	top: -12px;
+	left: 33%;
+}
+
+.valve .btn-img .text5 .top {
+	top: 0px;
+}
+
+.valve .btn-img .text .middle,
+.valve .btn-img .text5 .middle {
+	font-size: 18px;
+	top: 36%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: #e60012;
+}
+
+.valve .btn-img .text5 .middle {
+	top: 50%;
+}
+
+.valve .btn-img .text .right,
+.valve .btn-img .text5 .right {
+	right: 0;
+	top: 24%;
+}
+
+.valve .btn-img .text5 .right {
+	top: 41%;
+}
+
+.valve .btn-img .text .bottom,
+.valve .btn-img .text5 .bottom {
+	bottom: -4px;
+	left: 33%;
+}
+
+.valve .btn-img .text5 .bottom{bottom: 0px;}
\ No newline at end of file