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

src/components/Configurable/detail/MiniBoard.vue

@@ -120,6 +120,7 @@
     --image-board-bg-content-H: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-content-H.png');
     --image-board-bg-I-label: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-label.png');
     --image-board-bg-I-value: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-value.png');
+    --image-board-bg-J: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I.png');
 
     height: 50px;
     line-height: 25px;
@@ -485,8 +486,28 @@
     background-image: var(--image-board-bg-I-value);
     background-size: 100% 100%;
     white-space: nowrap;
-    overflow: hidden; 
-    text-overflow: ellipsis; 
+    overflow: hidden;
+    text-overflow: ellipsis;
     margin-bottom: -4px;
   }
+
+  .mini-board_J {
+    width: 136px;
+    height: 70px;
+    background-image: var(--image-board-bg-J);
+    background-size: 100% 100%;
+    padding: 4px 20px 4px 0px;
+    text-align: left;
+  }
+  .mini-board__label_J {
+    color: #000000;
+    // font-size: 14px;
+    // font-weight: 800;
+  }
+  .mini-board__value_J {
+    color: #2b6ff0;
+    font-size: 22px;
+    font-family: 'DDIN-Bold';
+    padding-bottom: 3px;
+  }
 </style>

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

@@ -24,7 +24,7 @@
       <MiniBoard
         v-for="(item, index) in modalDetailsData.board"
         :key="index"
-        type="G"
+        type="I"
         :label="item.label"
         :value="dataRef[item.value] || '-'"
         layout="label-top"
@@ -166,12 +166,12 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* 强制每行4列 */
     grid-template-rows: auto auto; /* 两行自动高度 */
-    gap: 16px 12px; /* 行列间距（行间距16px，列间距12px） */
+    gap: 12px 12px; /* 行列间距（行间距16px，列间距12px） */
     margin-bottom: 20px;
-    padding: 20px;
-    border: 1px solid @border-color-base;
+    padding: 20px 10px;
+    // border: 1px solid @border-color-base;
     border-radius: 10px;
-    background: @card-bg-color;
+    background: #ecf4fd;
   }
   .info-item {
     display: flex;
@@ -180,11 +180,14 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    background-image: linear-gradient(to right, #d7eafe, transparent);
+    padding: 5px 10px;
+    border-radius: 5px;
   }
   .label {
     color: #666;
     margin-right: 8px;
-    min-width: 90px;
+    // min-width: 90px;
     flex-shrink: 0; /* 标签宽度不收缩 */
   }
   .value {
@@ -200,9 +203,10 @@
     justify-content: space-evenly;
     margin-bottom: 20px;
     padding: 20px;
-    border: 1px solid @border-color-base;
+    // border: 1px solid @border-color-base;
     border-radius: 10px;
-    background: @card-bg-color;
+    // background: @card-bg-color;
+    background: #ecf4fd;
   }
   .data-card {
     background: #fafafa;
@@ -226,11 +230,12 @@
     flex-wrap: wrap;
     gap: 20px;
     padding: 20px;
-    border: 1px solid @border-color-base;
+    // border: 1px solid @border-color-base;
     border-radius: 10px;
     justify-content: space-evenly;
     /* background: black; */
-    background: @card-bg-color;
+    // background: @card-bg-color;
+    background: #ecf4fd;
     --image-title-2: url(/@/assets/images/sealedGoaf/module/module-title-2.png);
     // --image-bg: linear-gradient();
   }