From 239933482fd30e099ab9d038bc1a2e0164a65cb4 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Mon, 17 Mar 2025 14:41:10 +0800
Subject: [PATCH] 增加标段筛选和接口字段，调整样式，增加全局放大

---
 src/views/EquipmentView.vue |   59 +++++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index c4dcaae..ffd20dd 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -60,7 +60,7 @@
         <div class="percentage">{{item.percentage}}%</div>
        </div>
        <div class="label mt-[5px] flex flex-row items-center justify-center">
-        <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
+        <div class="text-[16px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
         <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
        </div>
       </div>
@@ -103,42 +103,54 @@
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="">
      <div class="env-info">
       <span class="envlabel">大气温度</span>
-      <span class="envvalue" :style="enviorStyle">5°C</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">5°C</span>
+      </div>
      </div>
     </div>
     <div class="env-item">
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
      <div class="env-info">
       <span class="envlabel">大气湿度</span>
-      <span class="envvalue" :style="enviorStyle">22.9%</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">22.9%</span>
+      </div>
      </div>
     </div>
     <div class="env-item">
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
      <div class="env-info">
       <span class="envlabel">PM2.5</span>
-      <span class="envvalue" :style="enviorStyle">10 μg/m³</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">10 μg/m³</span>
+      </div>
      </div>
     </div>
     <div class="env-item">
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
      <div class="env-info">
       <span class="envlabel">PM10</span>
-      <span class="envvalue" :style="enviorStyle">13 μg/m³</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">13 μg/m³</span>
+      </div>
      </div>
     </div>
     <div class="env-item">
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
      <div class="env-info">
       <span class="envlabel">风力</span>
-      <span class="envvalue" :style="enviorStyle">3级</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">3级</span>
+      </div>
      </div>
     </div>
     <div class="env-item">
      <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
      <div class="env-info">
       <span class="envlabel">风向</span>
-      <span class="envvalue" :style="enviorStyle">北风</span>
+      <div class="envvalue" :style="enviorStyle">
+        <span class="envvalue-text">北风</span>
+      </div>
      </div>
     </div>
    </div>
@@ -456,7 +468,7 @@
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .equipment-container {
  width: 100%;
  display: flex;
@@ -527,12 +539,9 @@
 }
 
 .env-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 70%;
- height: 95%;
+ 
+ width: calc( 100% - 88px);
+ height: 100%;
 }
 
 .satalabel {
@@ -546,17 +555,27 @@
 }
 
 .envlabel {
- font-size: 14px;
+ font-size: 16px;
  color: #C8C8C8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
 }
 
 .envvalue {
   text-align: center;
- font-size: 16px;
- color: #fff;
- margin-top: 4px;
- width: 100%;
- height: 100%;
+  font-size: 18px;
+  color: #fff;
+  margin-top: 4px;
+  width: 100%;
+  height: calc(100% - 28px);
+  position: relative;
+ .envvalue-text{
+  position: absolute;
+  top: 33%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+ }
 }
 
 .equipment-status {

--
Gitblit v1.9.3