From e7f9d0affa38c6147c9b69b8bc58f8f2f47afcfc Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Sun, 28 Dec 2025 23:00:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/control/index.vue | 63 +++++++++++++++++++++++------------------
 utils/uni.css           | 14 ++++++++-
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/pages/control/index.vue b/pages/control/index.vue
index 9ab14d4..89f65f4 100644
--- a/pages/control/index.vue
+++ b/pages/control/index.vue
@@ -16,39 +16,39 @@
 
         <view>
           <view class="uni-flex_control uni-row" >
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.temp1 }}</text>
+            <view class="text uni-flex_control_one uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.temp1 }}<p v-if=(testNumber(liveData.temp1)) class="tempStyle">℃</p></text>
               <text class="data">温度1</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.temp2 }}</text>
+            <view class="text uni-flex_control_one uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.temp2 }}<p v-if=(testNumber(liveData.temp2)) class="tempStyle">℃</p></text>
               <text class="data">温度2</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.temp3 }}</text>
+            <view class="text uni-flex_control_one uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.temp3 }}<p v-if=(testNumber(liveData.temp3)) class="tempStyle">℃</p></text>
               <text class="data">温度3</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.temp4 }}</text>
+            <view class="text uni-flex_control_one uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.temp4 }}<p v-if=(testNumber(liveData.temp4)) class="tempStyle">℃</p></text>
               <text class="data">温度4</text>
             </view>
           </view>
 
           <view class="uni-flex_control uni-row" >
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.humi1 }}</text>
+            <view class="text uni-flex_control_two uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.humi1 }}<p v-if=(testNumber(liveData.humi1)) class="humiStyle"> %RH</p></text>
               <text class="data">湿度1</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.humi2 }}</text>
+            <view class="text uni-flex_control_two uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.humi2 }}<p v-if=(testNumber(liveData.humi2)) class="humiStyle"> %RH</p></text>
               <text class="data">湿度2</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.humi3 }}</text>
+            <view class="text uni-flex_control_two uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.humi3 }}<p v-if=(testNumber(liveData.humi3)) class="humiStyle"> %RH</p></text>
               <text class="data">湿度3</text>
             </view>
-            <view class="text uni-flex_control uni-view">
-              <text class="data" :style="fontStyle">{{ liveData.humi4 }}</text>
+            <view class="text uni-flex_control_two uni-view">
+              <text class="data" :style="fontStyle">{{ liveData.humi4 }}<p v-if=(testNumber(liveData.humi4)) class="humiStyle"> %RH</p></text>
               <text class="data">湿度4</text>
             </view>
           </view>
@@ -283,7 +283,7 @@ export default {
             humi4: response.data.humi4 || '已离线..'
           }
           this.temp = "最后更新时间："+response.data.time;
-          this.fontStyle = 'font-size:16px'
+          this.fontStyle = 'font-size:16px;'
         })
       } else {
         this.selectedText = ''; // 无匹配项时清空
@@ -530,18 +530,18 @@ export default {
           const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10)
 
           this.liveData = {
-            temp1: msgData["201"]==null ? "已离线...":div10(msgData["201"])+"℃",
-            humi1: msgData["101"]==null ? "已离线...":div10(msgData["101"])+"%RH",
-            temp2: msgData["202"]==null ? "已离线...":div10(msgData["202"])+"℃",
-            humi2: msgData["102"]==null ? "已离线...":div10(msgData["102"])+"%RH",
-            temp3: msgData["203"]==null ? "已离线...":div10(msgData["203"])+"℃",
-            humi3: msgData["103"]==null ? "已离线...":div10(msgData["103"])+"%RH",
-            temp4: msgData["204"]==null ? "已离线...":div10(msgData["204"])+"℃",
-            humi4: msgData["104"]==null ? "已离线...":div10(msgData["104"])+"%RH"
+            temp1: div10(msgData["201"]) || "已离线...",
+            humi1: div10(msgData["101"]) || "已离线...",
+            temp2: div10(msgData["202"]) || "已离线...",
+            humi2: div10(msgData["102"]) || "已离线...",
+            temp3: div10(msgData["203"]) || "已离线...",
+            humi3: div10(msgData["103"]) || "已离线...",
+            temp4: div10(msgData["204"]) || "已离线...",
+            humi4: div10(msgData["104"]) || "已离线...",
           }
           // 调用函数获取并输出格式化后的当前时间
           this.temp = "最新更新时间：" + this.getCurrentTime();
-          this.fontStyle = 'font-size:16px'
+          this.fontStyle = 'font-size:16px;'
         }
 
       }
@@ -567,6 +567,11 @@ export default {
       // 拼接成标准格式
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
+
+    testNumber(data) {
+      const reg = /^-?\d+(\.\d+)?$/;
+      return reg.test(String(data).trim());
+    }
   },
   onHide() {
     this.disconnectMqtt();
@@ -664,11 +669,15 @@ export default {
   height: 70rpx;
   line-height: 70rpx;
   text-align: center;
-  background:#fff;
   font-size: 26rpx;
   box-shadow: 0 2rpx 8rpx #bfbec1
 }
 
+.tempStyle,.humiStyle {
+  display: inline-block;
+  font-size: 12px;
+}
+
 .text:first-child {
   margin-left: 10rpx;
 }
diff --git a/utils/uni.css b/utils/uni.css
index 2c5dbf8..61484cd 100644
--- a/utils/uni.css
+++ b/utils/uni.css
@@ -24,6 +24,18 @@ form {
 	display: flex;
 	flex-direction: column;
 }
+
+.uni-flex_control_one {
+	display: flex;
+	flex-direction: column;
+	background: radial-gradient(circle at bottom right, #faf1f1 40%, #F8FCFE 100%);
+}
+.uni-flex_control_two {
+	display: flex;
+	flex-direction: column;
+	background: radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%);
+}
+
 .uni-flex-item {
 	flex: 1;
 }
@@ -49,7 +61,7 @@ form {
 	margin-right: 20rpx;
 }
 .uni-inline-item text:last-child{
-	margin-right: 0rpx;
+	margin-right: 0;
 	margin-left: 20rpx;
 }
 .flex-item-V {