更新驾驶舱

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-03 08:58:07
+ * @LastEditTime: 2022-11-08 16:06:39
  * @Description:
 -->
 <template>
@@ -10,20 +10,31 @@
     <div
       v-for="i in areaArr"
       :key="i"
-      :style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
+      :style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
       class="area"
     >
       <el-row>
-        <el-col :span="1"><div class="areaName">{{ i }}</div></el-col>
+        <el-col :span="1">
+          <div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div>
+        </el-col>
         <el-col :span="23">
           <div class="locationFlex">
             <div
               v-for="l in 72"
               :key="l"
-              :class="l>Math.round(Math.random()*100)?'waring':''"
-              :style="{ marginRight: 6 * beilv + 'px',marginTop: 2 * beilv + 'px',marginBottom: 1 * beilv + 'px',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}"
+              :class="l > Math.round(Math.random() * 100) ? 'waring' : ''"
+              :style="{
+                marginRight: 6 * beilv + 'px',
+                marginTop: 2 * beilv + 'px',
+                marginBottom: 1 * beilv + 'px',
+                height: 28 * beilv + 'px',
+                lineHeight: 28 * beilv + 'px',
+                fontSize: 12 * beilv + 'px'
+              }"
               class="location"
-            >{{ l }}</div>
+            >
+              {{ l }}
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -53,33 +64,29 @@ export default {
 
 <style scoped>
 .area {
-  background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent);
+  background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent);
   background-size: 100% 100%;
   padding: 5px 0;
   padding-left: 15px;
   text-align: center;
   border-radius: 4px;
-  border: 1px dotted #5EC3D8;
+  border: 1px dotted #5ec3d8;
 }
 .areaName {
-  margin-top: 100%;
   font-weight: 600;
-  font-size: 24px;
-  line-height: 30px;
 }
-.locationFlex{
+.locationFlex {
   margin-left: 25px;
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;
 }
-.location{
+.location {
   background: #63cf74;
+  width: 4.5%;
   border-radius: 4px;
-  font-size: 12px;
-  line-height: 25px;
 }
-.waring{
-  background: #FF5D6B;
+.waring {
+  background: #ff5d6b;
 }
 </style>