[Mod 0000]三道沟均压页面样式调整

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -70,11 +70,13 @@ withDefaults(
   --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
   --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
   --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-    --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
+  --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
   --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
   --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
   --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
-    --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
+  --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
+  --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
+  --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
   --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
   --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
   --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
@@ -181,15 +183,32 @@ withDefaults(
 .list-item__value_D {
   font-weight: bold;
 }
+
+.list_S {
+  background: none;
+}
+.list__wrapper_S {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2列均等 */
+  gap: 10px;
+}
 .list-item_S {
-  flex-basis: 25%;
-  height: 60px;
+  height: 45px;
   background-repeat: no-repeat;
   background-position: center;
-  background-size: auto 100%;
+  background-size: 100% 100%;
   background-image: var(--image-list_bg_s);
   text-align: center;
-  margin-bottom: 10px;
+  padding: 0 7px;
+}
+.list-item__content_S {
+  display: flex;
+}
+.list-item__value_S {
+  font-family: 'douyuFont';
+  font-size: 13px;
+  color: @vent-gas-primary-text;
+  padding-top: 3px;
 }
 .list_E {
   background-image: var(--image-list_bg_defflip);
@@ -309,16 +328,39 @@ withDefaults(
   flex-basis: 33.3%;
 }
 
+.list-item__icon_R {
+  width: 24px;
+  height: 25px;
+  background-image: var(--image-list_bg_r_icon1);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-bottom: 5px;
+  position: absolute;
+  left: 35px;
+}
+.list-item_R:last-of-type .list-item__icon_R{
+  background-image: var(--image-list_bg_r_icon2);
+}
 .list-item__content_R {
-  height: 50px;
+  height: 52px;
   background-repeat: no-repeat;
-  padding: 20px 50px 0 50px;
+  padding:0 30px;
   display: flex;
   background-position: bottom;
-  background-size: 100% auto;
+  background-size: 100% 100%;
   background-image: var(--image-list_bg_r);
-  margin-bottom: 10px;
   text-align: center;
+  align-items: center;
+  .list-item__label {
+    font-size: 15px;
+  }
+  .list-item__value_R {
+    font-family: 'douyuFont';
+    font-size: 15px;
+    padding-top: 5px;
+    color: #00bfff;
+  }
 }
 .list-item__content_R > div {
   flex-basis: 33.3%;

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -241,6 +241,20 @@ defineEmits(['click']);
   height: 90px;
   background-image: var(--image-areaR);
   background-size: 100% 100%;
+  position: relative;
+  .mini-board__value_R {
+    position: absolute;
+    left: 30%;
+    top: 30%;
+    font-family: 'douyuFont';
+    color: @vent-gas-primary-text;
+  }
+  .mini-board__label_R {
+    position: absolute;
+    right: 0;
+    bottom: 20px;
+    font-size: 15px;
+  }
 }
 .mini-board_S {
   width: 131px;
@@ -252,10 +266,20 @@ defineEmits(['click']);
 }
 .mini-board_T {
   width: 120px;
-  height: 60px;
+  height: 80px;
   background-image: var(--image-areaT);
   background-size: 100% 100%;
 }
+.mini-board__label_T {
+  margin-top: 15px;
+}
+.mini-board__value_T {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+}
 
 .mini-board_C {
   width: 121px;
@@ -356,11 +380,12 @@ defineEmits(['click']);
 
 .mini-board_N {
   width: 200px;
-  height: 59px;
+  height: 68px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 25px 0 20px;
+  margin-top: -15px;
   background-image: var(--image-board-bg-nl1);
   background-size: 100% 100%;
 }
@@ -368,16 +393,20 @@ defineEmits(['click']);
   background-image: var(--image-board-bg-nr1);
 }
 .mini-board_N:nth-child(3) {
-  margin-top: -15px;
   background-image: var(--image-board-bg-nl2);
 }
 .mini-board_N:nth-child(4) {
-  margin-top: -15px;
   background-image: var(--image-board-bg-nr2);
 }
+.mini-board_N:nth-child(5) {
+  background-image: var(--image-board-bg-nl1);
+}
+.mini-board_N:nth-child(6) {
+  background-image: var(--image-board-bg-nr1);
+}
 
 .mini-board_O {
-  width: 130px;
+  width: 110px;
   height: 50px;
   background-image: var(--image-board-bg-o);
   background-size: 100% 100%;
@@ -561,6 +590,12 @@ defineEmits(['click']);
   color: #218a89;
 }
 
+.mini-board__value_O {
+  font-family: 'douyuFont';
+  font-size: 11px;
+  color:@vent-gas-primary-text
+}
+
 .mini-board_E:nth-child(1) {
   .mini-board__label_E {
     background-image: var(--image-hycd);