Kaynağa Gözat

[Style 0000] 优化了首页全矿井通风监测的样式

houzekong 4 ay önce
ebeveyn
işleme
11f62b6b5a

+ 11 - 10
src/views/vent/home/configurable/components/MonitorBar.vue

@@ -1,10 +1,8 @@
 <template>
   <a-row class="midback-info" :gutter="5">
-    <div v-for="item in computedConfig" :key="item.class" style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
-      <div class="middata" :class="item.class">
-        <div class="midnumberval">{{ item.value }}</div>
-        <div class="infotext1">{{ item.label }}</div>
-      </div>
+    <div v-for="item in computedConfig" :key="item.class" class="middata" :class="item.class">
+      <div class="midnumberval">{{ item.value }}</div>
+      <div class="infotext1">{{ item.label }}</div>
     </div>
     <!-- <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
       <div class="middata middata2">
@@ -129,11 +127,11 @@
   .middata {
     // margin-top: 7px;
     padding: 5px 0px 5px 60px;
-    width: calc(100% - 10px);
-    height: 65px;
-    margin-top: 4px;
-    margin-left: 10px;
-    margin-bottom: 5px;
+    width: 175px;
+    height: 64px;
+    // margin-top: 4px;
+    // margin-left: 10px;
+    // margin-bottom: 5px;
     background-size: 100% 100%;
   }
   .middata0 {
@@ -169,5 +167,8 @@
   .midback-info {
     background-image: url('/@/assets/images/home-container/configurable/middata_bg.png');
     background-size: 100% 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
   }
 </style>

+ 3 - 3
src/views/vent/home/configurable/ventV5.vue

@@ -263,9 +263,9 @@
     .module-monitor-bar {
       position: absolute;
       top: 100px;
-      width: 1000px;
-      height: 200px;
-      left: calc(50% - 500px);
+      width: 970px;
+      // height: 200px;
+      left: calc(50% - 485px);
     }
   }
   :deep(.loading-box) {