系统模式信息

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

@@ -1,8 +1,69 @@
 <template>
   <div class="mode-info-module">
     <common-title title="系统模式信息"></common-title>    
-    <div class="visualization-common-border">
-
+    <div class="visualization-common-border box">
+      <div>
+        <div class="itemHead">温度</div>
+        <div class="item">
+          <div id="demo1">温度：</div>
+          <div>输出：</div>
+        </div>
+        <div class="item">
+          <div id="demo1">升温
+            <div class="img"></div>
+          </div>
+          <div>降温
+            <div class="img2"></div>
+          </div>
+        </div>
+        <div class="item">
+          <div id="demo1">温度设定：(123)℃</div>
+          <div>斜率设定：(123)℃/min</div>
+        </div>
+        <div class="item">
+          <div id="demo1">起始温度：(123)℃</div>
+          <div>目标温度：(123)℃</div>
+        </div>
+        <div class="itemHead">辐照</div>
+        <div class="item">
+          <div id="demo1">辐照强度：(0)W/㎡</div>
+          <div>吹风</div>
+        </div>
+        <div class="item">
+          <div id="demo1">时间 30min</div>
+          <div>辐照强度设定：(0)W/㎡</div>
+        </div>
+      </div>
+      <div>
+        <div class="itemHead">湿度</div>
+        <div class="item">
+          <div id="demo1">湿度：80%</div>
+          <div>输出：80%</div>
+        </div>
+        <div class="item">
+          <div id="demo1">加湿
+            <div class="img"></div>
+          </div>
+          <div>除湿
+            <div class="img2"></div>
+          </div>
+        </div>
+        <div class="item">
+          <div>湿度设定：(123)%/min</div>
+        </div>
+        <div class="item">
+          <div id="demo1">起始湿度：(123)%</div>
+          <div>目标湿度：(123)%</div>
+        </div>
+        <div class="itemHead">淋雨</div>
+        <div class="item">
+          <div id="demo1">中雨</div>
+          <div>暴雨</div>
+        </div>
+        <div class="item">
+          <div id="demo1">时间 30min</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,4 +95,79 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .box {
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    /* row (默认值) : 主轴为水平万向，起点在左端。*/
+    flex-direction: row;
+  }
+  .box>div{
+    width: 50%;
+    height: 89%;
+    margin: 3%;
+    // border: 1px solid rgb(255, 255, 255);
+    // background-color: yellowgreen;
+    // border: 1px solid red;
+  }
+  .itemHead{
+    width: 100%;
+    height: 10%;
+    // border: 1px solid rgb(255, 255, 255);
+    margin-bottom: 2.5%;
+    background-color: #094F8D;
+    color: #0AA1E5;
+    padding-left: 3%;
+    border-radius: 2px;
+  }
+  .item{
+    width: 100%;
+    height: 10%;
+    // border: 1px solid rgb(255, 255, 255);
+    margin-bottom: 2.5%;
+    background-color: #072A54;
+    color: #FEFFFE;
+    padding-left: 3%;
+    border-radius: 2px;
+    display: flex;
+    flex-direction: row;
+  }
+  .item>div{
+    width: 50%;
+    height: 100%;
+    font-size: 10px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+  }
+  .item>div#demo1{
+    width: 46%;
+    height: 100%;
+    font-size: 10px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+  }
+  .item>div{
+    width: 52%;
+    height: 100%;
+    font-size: 10px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+  }
+  .img{
+    width: 23%;
+    height: 100%;
+    margin-left: 10%;
+    background: url(../../../../assets/visualization/taiyang.png);
+    background-size: cover;
+  }
+  .img2{
+    width: 18%;
+    height: 100%;
+    margin-left: 10%;
+    // border: 1px solid rgb(255, 255, 255);
+    background: url(../../../../assets/visualization/lvtaiyang.png);
+    background-size: cover;
+  }
 </style>