设备基本运行情况界面优化

src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="equipment-info-module">
     <common-title title="设备基本运行情况"></common-title>
-    <div class="box">
+    <div class="visualization-common-border box">
         <!-- <a-row>
           <a-col :span="12">
             湿度实值
@@ -23,7 +23,7 @@
           </a-col>
         </a-row> -->
 
-      <div id="demo1">
+      <!-- <div id="demo1">
         <div>湿度实值</div>
         <div>温度实值</div>
         <div>辐射强度实值</div>
@@ -32,6 +32,50 @@
         <div>30%R.H</div>
         <div>20℃</div>
         <div>20W/㎡</div>
+      </div> -->
+      <div style="height: 63%; margin-top: 2%; display: flex; flex-direction: row;">
+        <!-- 左 -->
+        <div class="le" style="margin: 0 0.1% 0 2.4%;">
+          <div style="height: 15%; display: flex; justify-content: space-between;">
+            <span style="font-size: 12px;">温度</span>
+            <span style="font-size: 11px;">设定80.0℃</span>
+          </div>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
+            <span style="font-size: 40px;">-100.2</span>
+          </div>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
+            <span style="font-size: 12px;">℃</span>
+          </div>
+        </div>
+        <!-- 中 -->
+        <div class="le" style="margin: 0 0.1% 0 1%;">
+          <div style="height: 15%; display: flex; justify-content: space-between;">
+            <span style="font-size: 12px;">湿度</span>
+            <span style="font-size: 11px;">设定50.0%R.H</span>
+          </div>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
+            <span style="font-size: 40px;">1000.0</span>
+          </div>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
+            <span style="font-size: 12px;">%R.H</span>
+          </div>
+        </div>
+        <!-- 右 -->
+        <div class="le" style="margin: 0 0.1% 0 1%;">
+          <div style="height: 15%; display: flex; justify-content: space-between;">
+            <span style="font-size: 12px;">辐射强度</span>
+            <span style="font-size: 11px;">设定1120W/㎡</span>
+          </div>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
+            <span style="font-size: 40px;">1000.0</span>
+          </div>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
+            <span style="font-size: 12px;">W/㎡</span>
+          </div>
+        </div>
+      </div>
+      <div style="height: 28%; margin-top: 1%;">
+        <div class="bo"></div>
       </div>
     </div>
   </div>
@@ -69,27 +113,69 @@ export default {
     height: calc(100% - 26px);
     border-width: 8px 0 0 6px;
     // border: 1px solid rgb(255, 255, 255);
-    display: flex;
+    // display: flex;
     // /* row (默认值) : 主轴为水平万向，起点在左端。*/
-    flex-direction: row;
+    // flex-direction: row;
   }
-  .box>div#demo1{
-    width: 50%;
-    height: 94%;
-    margin: 2%;
-    color: #eeeeee;
-    font-size: 15px;
+  // .box>div#demo1{
+  //   width: 50%;
+  //   height: 94%;
+  //   margin: 2%;
+  //   color: #eeeeee;
+  //   font-size: 15px;
+  //   // border: 1px solid rgb(255, 255, 255);
+  // }
+  // .box>div{
+  //   width: 70%;
+  //   height: 94%;
+  //   margin-top: 2%;
+  //   color: #eeeeee;
+  //   font-size: 15px;
+  //   // border: 1px solid rgb(255, 255, 255);
+  // }
+  // .box>div>div{
+  //   padding: 5%;
+  // }
+  .box>div{
+    width: 100%;
     // border: 1px solid rgb(255, 255, 255);
   }
-  .box>div{
-    width: 70%;
-    height: 94%;
-    margin-top: 2%;
-    color: #eeeeee;
-    font-size: 15px;
+  .le{
+    height: 100%;
+    width: 31%;
+    // border: 1px solid rgb(255, 255, 255);
+    background: linear-gradient(#207ab7, #207ab7) left top,
+    linear-gradient(#207ab7, #207ab7) left top ,
+    linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom;
+    background-repeat: no-repeat;
+    background-size: 0.05vw 1vw, 1vw 0.05vw;
+  }
+  .bo{
+    height: 95%;
+    width: 95.5%;
     // border: 1px solid rgb(255, 255, 255);
+    margin: 0 0.1% 0.5% 2.4%;
+    background: linear-gradient(#207ab7, #207ab7) left top,
+    linear-gradient(#207ab7, #207ab7) left top ,
+    linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom;
+    background-repeat: no-repeat;
+    background-size: 0.05vw 1vw, 1vw 0.05vw;
   }
-  .box>div>div{
-    padding: 5%;
+  .le>div{
+    width: 100%;
+    padding: 0 3% 0 3%;
+    // border: 1px solid rgb(255, 255, 255);
+    color: #eeeeee;
+    align-items: center;
   }
 </style>