[Style 0000] 密闭监测实时详情样式优化

src/components/Configurable/detail/MiniBoard.vue

@@ -82,6 +82,7 @@
     --image-board-bg-B: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-B.png');
     --image-board-bg-D: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-D.png');
     --image-board-bg-E: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-E.png');
+    --image-board-bg-G: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-G.png');
     height: 50px;
     line-height: 25px;
     width: 130px;
@@ -302,4 +303,24 @@
     padding-bottom: 10px;
     font-family: 'DDIN-Bold';
   }
+
+  .mini-board_G {
+    width: 95px;
+    height: 67px;
+    background-image: var(--image-board-bg-G);
+    background-size: 100% 100%;
+    padding-top: 4px;
+  }
+
+  .mini-board__label_G {
+    color: #000000;
+    font-size: 14px;
+    font-weight: 800;
+  }
+  .mini-board__value_G {
+    color: #2b6ff0;
+    font-size: 22px;
+    font-family: 'DDIN-Bold';
+    padding-bottom: 3px;
+  }
 </style>

src/design/color.less

@@ -149,6 +149,7 @@ html {
 @gradient-primary-color: linear-gradient(#6fa1ff, #2b6ff0);
 // @gradient-primary-color: linear-gradient(lighten(@primary-color, 20%), @primary-color);
 @gradient-secondary-color: linear-gradient(#719fe3, #284877);
+@gradient-thirdary-color: linear-gradient(transparent, #e5f4fe);
 
 // =================================
 // ==============table==============

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -21,10 +21,10 @@
       <MiniBoard
         v-for="(item, index) in modalDetailsData.board"
         :key="index"
-        type="D"
+        type="G"
         :label="item.label"
         :value="dataRef[item.value] || '-'"
-        layout="val-top"
+        layout="label-top"
       />
     </div>
 
@@ -225,12 +225,15 @@
     border-radius: 10px;
     /* background: black; */
     background: @card-bg-color;
+    --image-title-2: url(/@/assets/images/sealedGoaf/module/module-title-2.png);
+    // --image-bg: linear-gradient();
   }
   .chart-item {
     flex: 1;
     // flex-basis: 6;
     // flex-shrink: 1;
     // min-width: 200px;
+    width: 300px;
     &:first-child {
       // flex-basis: 380px;
       flex: 0 0 380px;
@@ -241,15 +244,20 @@
   .chart-title {
     font-size: 14px;
     font-weight: 500;
-    margin-bottom: 8px;
+    // margin-bottom: 8px;
     font-weight: bold;
     color: @text-color-call-out;
+    background-image: var(--image-title-2);
+    background-size: 100% 100%;
+    height: 32px;
+    line-height: 32px;
   }
   .chart-placeholder {
     width: 100%;
     height: 200px;
     border-radius: 4px;
     overflow: hidden;
+    background-image: @gradient-thirdary-color;
   }
   .chart-placeholder img {
     width: 100%;