[Feat 0000]皮带巷首页样式优化

src/views/vent/deviceManager/comment/warningTabel/BaseModal1Leather.vue

@@ -75,8 +75,8 @@ const props = defineProps({
 const emit = defineEmits(['add', 'update']);
 
 const [registerPointModal, { openModal: openPointModal }] = useModal();
-const formSchemas = deviceFormColumns({ id: String(props.deviceId) });
-const formSchemas1 = deviceControlColumns({ id: String(props.deviceId) });
+const formSchemas = deviceFormColumns();
+const formSchemas1 = deviceControlColumns();
 
 const title = ref('');
 const isUpdate = ref(false);
@@ -161,6 +161,7 @@ async function selectPoint(model: any) {
     message.info('请先选择设备！');
     return;
   }
+  console.log(model, '=====model');
   // 缓存当前编辑行
   tempCurrentModel.value = model;
   await getDevicePointList(model.deviceType);

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -357,6 +357,7 @@ export const deviceFormColumns = () =>
         isSearch: false,
       },
       colProps: { span: 12 },
+      required: true,
     },
     {
       label: '点位',
@@ -440,6 +441,7 @@ export const deviceControlColumns = () =>
         isSearch: false,
       },
       colProps: { span: 12 },
+      required: true,
     },
     {
       label: '点位',

src/views/vent/home/configurable/belt/components/ventBoxBelt.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vent-box1-bg">
-    <div class="box1-top" v-if="pageType !== 'beltYjkf1'" :class="`box1-top-${pageType}`">
+    <div class="box1-top" :class="`box1-top-${pageType}`">
       <div class="title">
         <slot name="title"></slot>
       </div>
@@ -86,17 +86,29 @@ const props = defineProps({
     background-image: var(--image-box1-bottom1);
   }
 
-  /* 黄色告警 */
+  @keyframes blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  /* 黄色告警  */
   .box1-bottom.alarm-yellow {
     background-image: url('/@/assets/images/beltFire/1-2-1.png');
+    animation: blink 2s infinite;
   }
   /* 橙色告警 */
   .box1-bottom.alarm-orange {
     background-image: url('/@/assets/images/beltFire/1-2-3.png');
+    animation: blink 2s infinite;
   }
-  /* 红色告警 */
+  /* 红色告警  */
   .box1-bottom.alarm-warning {
     background-image: url('/@/assets/images/beltFire/1-2-2.png');
+    animation: blink 2s infinite;
   }
 
   .box1-top-beltYjkf {
@@ -117,7 +129,6 @@ const props = defineProps({
   }
   .box1-center-beltYjkf1 {
     height: calc(100% - 73px);
-    margin-top: 50px;
   }
   .box1-bottom-fireMonitorLeft {
     background: var(--image-box1-left1) no-repeat;

src/views/vent/home/configurable/belt/configurable.data.ts

@@ -861,7 +861,7 @@ export const testBeltNew: Config[] = [
 export const testSpary: Config[] = [
   {
     deviceType: 'sprayData', //
-    moduleName: '',
+    moduleName: '喷淋-喷粉装置',
     pageType: 'beltYjkf1',
     moduleData: {
       header: {
@@ -1251,7 +1251,7 @@ export const testSpary: Config[] = [
 export const testYjkf: Config[] = [
   {
     deviceType: 'plmhInfo', //
-    moduleName: '',
+    moduleName: '风门管控',
     pageType: 'beltYjkf1',
     moduleData: {
       header: {

src/views/vent/home/configurable/components/belt/ComplexList1Belt.vue

@@ -26,7 +26,7 @@ const props = withDefaults(
     listConfig: {
       title: string;
       contents: {
-        value: string | number | null;
+        value: string;
         color?: string;
         label: string;
         info?: string;
@@ -51,17 +51,16 @@ const activeGroup = ref(0);
 const activeItem = ref(0);
 
 // 预警映射表
-const alarmMap: Record<string | number | null, string> = {
+const alarmMap: Record<string, string> = {
   '102': '黄色预警',
   '103': '橙色预警',
   '104': '红色预警',
 };
 
 // 获取背景样式
-const getBgClass = (riskLevel: string | number | null) => {
+const getBgClass = (riskLevel: string) => {
   // 统一处理 null  0
-  const val = riskLevel ?? '0';
-
+  const val = String(riskLevel) ?? '0';
   switch (val) {
     case '0':
     case '101':
@@ -74,7 +73,7 @@ const getBgClass = (riskLevel: string | number | null) => {
       return 'bg-majorRisk';
     case '201':
     case '1001':
-      return 'bg-warning';
+      return 'bg-majorRisk';
     default:
       return 'bg-lowRisk';
   }

src/views/vent/home/configurable/components/content.vue

@@ -420,6 +420,10 @@ const layoutConfig = computed(() => {
                   };
                   if (cfg.pagetype === 'complex_list1') {
                     contentItem.id = getFormattedText(d, e.id, e.trans);
+                    contentItem.value = d.alarm_level ?? '-';
+                  }
+                  if (cfg.pagetype === 'Belt') {
+                    contentItem.value = d.value ?? '-';
                   }
                   return contentItem;
                 }),

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

@@ -5,541 +5,793 @@
     <!-- 部分类型的列表需要加一张图片 -->
     <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
-    <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
-      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
+    <div class="flex-grow" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
-        <div :class="['list-item__title_I', { 'bg-1': type == 'I' && i == 0 }]" v-if="type == 'I' && i == 0">
-          <img src="/src/assets/images/home-container/configurable/device-group-paramer.svg" alt="" style="width: 45px; height: 45px" />
-          <div>{{ item.title }}</div>
-        </div>
-        <div :class="['list-item__title_I', { 'bg-2': type == 'I' && i == 1 }]" v-else-if="type == 'I' && i == 1">
-          <SvgIcon class="icon" size="40" name="device-paramer" /><div>{{ item.title }}</div>
-        </div>
-        <div :class="`list-item__title_${type}`" v-else>{{ item.title }}</div>
+        <div :class="`list-item__icon_${type}`"></div>
         <!-- 列表项的具体内容填充剩余宽度 -->
-        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
-          <div class="list-item__label">{{ ctx.label }}</div>
-          <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
-          <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
+        <div class="flex-grow" :class="`list-item__content_${type}`">
+          <div class="list-item__label">{{ item.label }}</div>
+          <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
+          <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { SvgIcon } from '/@/components/Icon';
-  withDefaults(
-    defineProps<{
-      listConfig: {
-        title: string;
-        contents: {
-          value: string;
-          color: string;
-          label: string;
-          info: string;
-        }[];
-      }[];
-      /** A B */
-      type: string;
-    }>(),
-    {
-      listConfig: () => [],
-      type: 'A',
-    }
-  );
-
-  //   defineEmits(['click']);
+const props = withDefaults(
+  defineProps<{
+    listConfig: {
+      value: string;
+      color: string;
+      label: string;
+      info: string;
+    }[];
+    /** A B C D E F G */
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
+//   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
-  @import '@/design/theme.less';
-  /* Timeline 相关的样式 */
-  @{theme-green} {
-    .list {
-      --image-img-9: url(/@/assets/images/themify/green/home-container/configurable/firehome/img-9.png);
-      --image-list_bg_1: url(/@/assets/images/themify/green/home-container/configurable/dusthome/list_bg_1.png);
-    }
-  }
-  @{theme-deepblue} {
-    .list {
-      --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
-      --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
-      --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
-      --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-9.png);
-      --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/list_bg_1.png);
-    }
-  }
-
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+/* Timeline 相关的样式 */
+@{theme-green} {
   .list {
-    --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-    --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-    --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
-    --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
-    --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
-    --image-list_bg_h_title: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-title.png);
-    --image-list_bg_h_border: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-border.png);
-    --image-list_bg_h_content: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-content.png);
-    --image-linear-gradient-1: linear-gradient(to right, #39a3ff50, #39a3ff00);
-    --image-linear-gradient-2: linear-gradient(to right, #3df6ff40, #3df6ff00);
-    --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
-    --image-linear-gradient-4: linear-gradient(to right, #091d34, #0b223b);
-    padding: 5px 20px;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
+    // --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+    // --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+    // --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+    // --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+    // --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+    // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+    // --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+    // --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
+    // --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/themify/green/home-container/configurable/list_bg_f.png);
+    --image-list_bg_h: url(/@/assets/images/themify/green/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url(/@/assets/images/themify/green/home-container/configurable/list_bg_i.png);
+    // --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
+  }
+}
+@{theme-deepblue} {
+  .list {
+    --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+    --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+    --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+    --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+    --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+    --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+    --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
+    --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
+    --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
+    --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
+  }
+}
 
-  .list-item_A {
-    position: relative;
-    height: 140px;
-    background-repeat: no-repeat;
-    background-image: var(--image-img-3);
-    background-size: auto 100%;
-    background-position: center;
-  }
-  .list-item__title_A {
-    position: absolute;
-    left: 41%;
-    // font-size: 14px;
-    top: 15px;
-  }
-  .list-item__content_A:nth-of-type(2) {
-    position: absolute;
-    top: 15px;
-    left: 14%;
-    width: 22%;
-    text-align: center;
-    display: block;
+.list {
+  --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+  --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+  --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
+  --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_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_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);
+  --image-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
+  --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
+  --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
+  --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
+  --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
+  --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
+  --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
+  --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
+  --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
+  --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
+  --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
+  --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
+  --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
+  --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
+  --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
+  --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
+  --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
+  --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
+  --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
+  --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
+  --image-list_bg_o1: url('/@/assets/images/beltFire/listO1.png');
+  --image-list_bg_o2: url('/@/assets/images/beltFire/listO2.png');
+  --image-list_icon_o1: url('/@/assets/images/beltFire/listO1.svg');
+  --image-list_icon_o2: url('/@/assets/images/beltFire/listO2.svg');
+  padding: 5px 20px;
+  position: relative;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_default);
+}
 
-    .list-item__label {
-      font-size: 18px;
-      margin-bottom: 25px;
-    }
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 24px;
-    }
-  }
-  .list-item__content_A:nth-of-type(3) {
-    position: absolute;
-    left: 41%;
-    top: 55px;
+.list_A {
+  padding-left: 5px;
+}
+.list-item__content_A {
+  background-repeat: no-repeat;
+  background-image: @vent-gas-list-item-bg-img;
+  // padding: 5px 10px;
+  display: flex;
+}
+.list-item__icon_A {
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 29px;
+  background-image: var(--image-triangle_icon);
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 20px;
-    }
-  }
-  .list-item__content_A:nth-of-type(4) {
-    position: absolute;
-    left: 66%;
-    top: 55px;
-
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 20px;
-    }
-  }
-  .list-item__content_A:nth-of-type(5) {
-    position: absolute;
-    left: 35%;
-    bottom: 10px;
-    display: flex;
-    align-items: center;
+.list-item__content_B {
+  background-repeat: no-repeat;
+  padding: 5px 10px 10px 10px;
+  display: flex;
+  background-position: left bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_b);
+}
+.list__image_B {
+  width: 77px;
+  height: 77px;
+  background-repeat: no-repeat;
+  background-image: var(--image-deco_1);
+  background-size: auto;
+  margin-right: 20px;
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 20px;
-      margin-left: 5px;
-    }
-  }
+.list_C {
+  background: none;
+}
+.list-item__content_C {
+  height: 60px;
+  background-repeat: no-repeat;
+  padding: 25px 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_c);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_C > div {
+  flex-basis: 33.3%;
+}
 
-  .list-item_B {
-    background-repeat: no-repeat;
-    background-size: 87% auto;
-    background-position: center;
-    background-image: var(--image-img-7);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    padding: 0 10%;
-    margin-top: 5px;
-    height: 33px;
+.list_D {
+  background-image: var(--image-list_bg_defflip);
+}
+.list__wrapper_D {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_D {
+  display: none;
+}
+.list-item_D {
+  flex-basis: 25%;
+  height: 60px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_d);
+  text-align: center;
+  margin-bottom: 10px;
+}
 
-    .list-item__label {
-      font-size: 11px;
-    }
-    .list-item__value {
-      font-size: 18px;
-      margin-left: 5px;
-    }
-    .list-item__content_B {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      flex-basis: 100px;
-      flex-grow: 1;
-    }
-    .list-item__title_B {
-      width: 40px;
-      text-align: center;
-      margin-right: 50px;
-    }
-    .list-item__info {
-      display: none;
-    }
-  }
+.list-item__content_D {
+  line-height: 30px;
+}
+.list-item__value_D {
+  font-weight: bold;
+}
 
-  .list_C {
-    padding: 5px 10px;
-  }
+.list_S {
+  background: none;
+}
+.list__wrapper_S {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2列均等 */
+  gap: 10px;
+}
+.list-item_S {
+  height: 45px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_s);
+  text-align: center;
+  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);
+}
+.list__wrapper_E {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_E {
+  display: none;
+}
+.list-item_E {
+  flex-basis: 25%;
+  height: 70px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_e);
+  text-align: center;
+  margin: 5px 0px;
+  padding-top: 32px;
+  font-size: 12px;
+}
 
-  .list__wrapper_C {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
+.list_F {
+  background: none;
+}
+.list-item__content_F {
+  height: 40px;
+  background-repeat: no-repeat;
+  padding: 0 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% auto;
+  background-image: var(--image-list);
+  margin-top: 10px;
+  text-align: center;
+}
+.list-item__content_F > div {
+  flex-basis: 33.3%;
+}
 
-  .list-item_C {
-    position: relative;
-    height: 140px;
-    width: 200px;
-    background-repeat: no-repeat;
-    background-image: var(--image-img-8);
-    background-size: 100% 100%;
-    background-position: left center;
-  }
-  .list-item__title_C {
-    position: absolute;
-    left: 99px;
-    top: 15px;
-  }
-  .list-item__content_C:nth-of-type(2) {
-    position: absolute;
-    top: 15px;
-    left: 19px;
-    width: 30%;
-    text-align: center;
-    display: block;
+.list_G {
+  background: none;
+}
+.list__wrapper_G {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.list-item_G {
+  width: 130px;
+  height: 80px;
+  align-items: center;
+  text-align: center;
+  border: 1px solid rgba(25, 237, 255, 0.4);
+  box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+  background: rgba(0, 0, 0, 0.1);
+  margin: 5px 10px;
+}
+.list-item__content_G {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_G > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 80px;
+}
+.list-item__content_G > .list-item__info {
+  width: 70px;
+  height: 30px;
+  line-height: 30px;
+  right: 0;
+  position: absolute;
+}
+.list-item__content_G > .list-item__value {
+  width: 70px;
+  height: 50px;
+  line-height: 50px;
+  top: 30px;
+  right: 0;
+  position: absolute;
+  text-shadow: 0 0 25px #00fbfe;
+  background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+  font-style: normal;
+  background-size: cover;
+  font-family: electronicFont;
+  font-size: 30px;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  color: aliceblue;
+}
 
-    .list-item__label {
-      margin-bottom: 25px;
-    }
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 18px;
-    }
-  }
-  .list-item__content_C:nth-of-type(3) {
-    position: absolute;
-    left: 99px;
-    top: 55px;
+.list_H {
+  background: none;
+}
+.list-item__content_H {
+  height: 50px;
+  background-repeat: no-repeat;
+  padding: 20px 50px 0 50px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_h);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_H > div {
+  flex-basis: 33.3%;
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 18px;
-    }
-  }
+.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_R {
+  background: none;
+}
+.list-item__content_R {
+  height: 52px;
+  background-repeat: no-repeat;
+  padding: 0 30px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_r);
+  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%;
+}
 
-  .list_D {
-    padding: 5px 10px;
-  }
+.list_fireList {
+  background: none;
+}
+.list__wrapper_fireList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-left: 86px;
+}
+.list-item_fireList {
+  width: 167px;
+  height: 58px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_i);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_fireList {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_fireList > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.list-item__content_fireList > .list-item__info {
+  height: 50%;
+  left: 70px;
+  position: absolute;
+}
+.list-item__content_fireList > .list-item__value {
+  top: 50%;
+  height: 50%;
+  left: 70px;
+  position: absolute;
+  font-size: 18px;
+}
+.list_I {
+  background: none;
+}
+.list__wrapper_I {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.list-item_I {
+  width: 160px;
+  height: 63px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_i);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_I {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_I > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.list-item__content_I > .list-item__info {
+  height: 50%;
+  left: 70px;
+  position: absolute;
+}
+.list-item__content_I > .list-item__value {
+  top: 50%;
+  height: 50%;
+  left: 70px;
+  position: absolute;
+  font-size: 18px;
+}
+.list_J {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list-item_J {
+  width: 312px;
+  height: 57px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_j);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_J {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px 0 15px;
+}
+.list_K {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list__wrapper_K {
+  height: 100%;
+}
+.list-item__content_K {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  margin: 4px 0;
+  background-image: var(--image-linear-gradient-3);
 
-  .list__wrapper_D {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+  .list-item__value {
+    flex-basis: unset;
   }
-
-  .list-item_D {
-    position: relative;
-    height: 110px;
-    width: 200px;
-    background-repeat: no-repeat;
-    background-image: var(--image-img-9);
-    background-size: 100% auto;
-    background-position: center top;
-    text-align: center;
-    margin-bottom: 20px;
+  .list-item__label {
+    flex-basis: unset;
   }
-  .list-item__title_D {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    font-size: 16px;
-    font-weight: bold;
+  .list-item__info {
+    display: none;
   }
-  .list-item__content_D:nth-of-type(2) {
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    width: 30%;
-    text-align: center;
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 18px;
-    }
-  }
-  .list-item__content_D:nth-of-type(3) {
-    position: absolute;
-    top: 10%;
-    right: 10%;
-    width: 30%;
-    text-align: center;
+.list_L {
+  background: none;
+  padding: 5px 10px;
+}
+.list-item_L {
+  width: 100%;
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin-bottom: 8px;
+}
+/* 奇数项背景图 */
+.list-item_L:nth-child(odd) {
+  background-image: var(--image-list_bg_l1);
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 18px;
-    }
-  }
+/* 偶数项背景图 */
+.list-item_L:nth-child(even) {
+  background-image: var(--image-list_bg_l2);
+}
+.list-item__icon_L {
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 20px;
+  margin-left: 15px;
+  background-position: center;
+  background-size: contain;
+}
+/* 四个图标样式 */
+.list-item_L:nth-child(1) .list-item__icon_L {
+  background-image: var(--image-list_icon_l1);
+}
 
-  .list_E {
-    padding: 5px 10px;
-  }
+.list-item_L:nth-child(2) .list-item__icon_L {
+  background-image: var(--image-list_icon_l2);
+}
 
-  .list__wrapper_E {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 0 10px;
-  }
+.list-item_L:nth-child(3) .list-item__icon_L {
+  background-image: var(--image-list_icon_l3);
+}
 
-  .list-item_E {
-    position: relative;
-    height: 104px;
-    width: 188px;
-    background-repeat: no-repeat;
-    background-image: var(--image-list_bg_1);
-    background-size: 100% auto;
-    background-position: center top;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-  .list-item__title_E {
-    width: 100%;
-    font-size: 16px;
-    font-weight: bold;
-    margin-top: 10px;
-  }
-  .list-item__content_E:nth-of-type(2) {
-    position: absolute;
-    top: 40%;
-    left: 5%;
-    text-align: left;
+.list-item_L:nth-child(4) .list-item__icon_L {
+  background-image: var(--image-list_icon_l4);
+}
+.list-item__content_L {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  .list-item__value_L {
+    font-family: 'douyuFont';
+  }
+}
+.list-item__content_L > div {
+  flex-basis: 33.3%;
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 16px;
-    }
-  }
-  .list-item__content_E:nth-of-type(3) {
-    position: absolute;
-    top: 40%;
-    right: 5%;
-    text-align: right;
+.list_M {
+  background: none;
+  padding: 0;
+}
+.list__wrapper_M {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 两列均等 */
+  gap: 18px; /* 统一间距 */
+}
+.list-item_M {
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.list-item_M:nth-child(1),
+.list-item_M:nth-child(4),
+.list-item_M:nth-child(5),
+.list-item_M:nth-child(8) {
+  background-image: var(--image-list_bg_m1);
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 16px;
-    }
-  }
+.list-item_M:nth-child(2),
+.list-item_M:nth-child(3),
+.list-item_M:nth-child(6),
+.list-item_M:nth-child(7) {
+  background-image: var(--image-list_bg_m2);
+}
+.list-item_M:nth-child(7),
+.list-item_M:nth-child(8) {
+  margin-bottom: 0;
+}
+.list-item__icon_M {
+  background-repeat: no-repeat;
+  height: 16px;
+  margin-left: 5px;
+  background-position: center;
+  background-size: auto 100%;
+  display: inline-block;
+  width: 40px;
+}
+/* 八个图标样式 */
+.list-item_M:nth-child(1) .list-item__icon_M {
+  background-image: var(--image-list_icon_m1);
+}
+.list-item_M:nth-child(2) .list-item__icon_M {
+  background-image: var(--image-list_icon_m2);
+}
+.list-item_M:nth-child(3) .list-item__icon_M {
+  background-image: var(--image-list_icon_m3);
+}
+.list-item_M:nth-child(4) .list-item__icon_M {
+  background-image: var(--image-list_icon_m4);
+}
+.list-item_M:nth-child(5) .list-item__icon_M {
+  background-image: var(--image-list_icon_m5);
+}
+.list-item_M:nth-child(6) .list-item__icon_M {
+  background-image: var(--image-list_icon_m6);
+}
+.list-item_M:nth-child(7) .list-item__icon_M {
+  background-image: var(--image-list_icon_m7);
+}
+.list-item_M:nth-child(8) .list-item__icon_M {
+  background-image: var(--image-list_icon_m8);
+}
 
-  .list-item_F {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    // background-size: auto 100%;
-    background-position: center;
-    background-image: @vent-gas-list-item-bg-img;
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    margin-top: 5px;
-    height: 50px;
+.list-item__content_M {
+  display: flex;
+  text-align: center;
+  align-items: center;
 
-    .list-item__title_F {
-      flex-basis: 25%;
-    }
-    .list-item__content_F {
-      flex-basis: 25%;
-    }
-    .list-item__label::after {
-      content: '：';
-    }
-    .list-item__value {
-      font-size: 18px;
-      margin-left: 5px;
-      font-weight: bold;
-    }
-    .list-item__content_F {
-      display: flex;
-      align-items: center;
-    }
-    .list-item__info {
-      display: none;
-    }
+  .list-item__value_M {
+    font-family: 'douyuFont';
+    font-size: 12px;
+  }
+}
+.list_N {
+  background: none;
+  padding: 5px 10px;
+}
+.list-item_N {
+  width: 100%;
+  height: 42px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 15px;
+}
+/* 四个背景样式 */
+.list-item_N:nth-child(1) {
+  background-image: var(--image-list_bg_n1);
+}
+
+.list-item_N:nth-child(2) {
+  background-image: var(--image-list_bg_n2);
+  .list-item__value_N {
+    color: #27cab7;
   }
+}
 
-  .list-item_G {
-    margin-top: 5px;
+.list-item_N:nth-child(3) {
+  background-image: var(--image-list_bg_n3);
+}
 
-    .list-item__title_G {
-      position: relative;
-      width: 100%;
-      height: 16px;
-      margin-top: 10px;
-      margin-bottom: 5px;
-      padding-left: 8px;
-      top: -2px;
-      background-image: var(--image-linear-gradient-1);
-      &::before {
-        position: absolute;
-        content: '';
-        width: 100%;
-        height: 100%;
-        top: 4px;
-        left: 0;
-        background-image: var(--image-linear-gradient-2);
-      }
-    }
-    .list-item__content_G {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px;
-      margin: 8px 0;
-      background-image: var(--image-linear-gradient-3);
-    }
-  }
-  .list_H {
-    padding: 0 10px;
-  }
+.list-item_N:nth-child(4) {
+  background-image: var(--image-list_bg_n4);
+  .list-item__value_N {
+    color: #27cab7;
+  }
+}
+.list-item__content_N {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  .list-item__value_N {
+    font-family: 'douyuFont';
+  }
+}
+.list-item__content_N > div:last-child {
+  flex-basis: 60%;
+}
 
-  .list__wrapper_H {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 20px;
-  }
+.list_U {
+  background: none;
+  padding: 0px 20px;
+}
+.list__wrapper_U {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+.list-item_U {
+  width: 80%;
+  height: 42px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
 
-  .list-item_H {
-    position: relative;
-    height: 80px;
-    width: calc((100% - 20px) / 2);
-    background-image: var(--image-list_bg_h_border);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center top;
-    margin-top: 25px;
-  }
-  .list-item__title_H {
-    position: absolute;
-    top: -26px;
-    left: 0;
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    background-repeat: no-repeat;
-    background-image: var(--image-list_bg_h_title);
-    background-size: 100% auto;
-    background-position: center top;
-    font-size: 16px;
-    text-align: center;
-  }
+/* 左右两个背景图（你可以自己换图） */
+.list-item_U:nth-child(odd) {
+  background: var(--image-list_bg_o1);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.list-item_U:nth-child(even) {
+  background: var(--image-list_bg_o2);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 
-  .list-item__content_H {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    background-repeat: no-repeat;
-    background-image: var(--image-list_bg_h_content);
-    background-size: 100% auto;
-    background-position: center top;
-    margin: 13px 10px;
-  }
-  .list-item_I {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 5px;
-  }
-  .list-item__title_I {
-    position: relative;
-    width: 100%;
-    height: 25px;
-    margin-top: 10px;
-    margin-bottom: 5px;
-    padding-left: 8px;
-    top: -2px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .list-item__title_I.bg-1 {
-    background-image: var(--image-linear-gradient-1);
-  }
-  .list-item__title_I.bg-2 {
-    background-image: var(--image-linear-gradient-2);
-  }
-  .list-item__title_I .icon {
-    display: inline-block;
-    flex-shrink: 0;
-    vertical-align: middle;
-  }
-  .list-item__title_I > div {
-    flex: 1;
-    line-height: 25px;
-    font-size: 14px;
-  }
-  .list-item__content_I {
-    width: 50%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 4px;
-    margin: 8px 0;
-    background-image: var(--image-linear-gradient-4);
-  }
-  .list-item__value_red {
-    color: red;
-  }
-  .list-item__value_orange {
-    color: orange;
-  }
-  .list-item__value_yellow {
-    color: yellow;
-  }
-  .list-item__value_green {
-    color: yellowgreen;
-  }
-  .list-item__value_blue {
-    color: @vent-table-action-link;
-  }
-  .list-item__value_white {
-    color: white;
-  }
-  .gallery-item__value_lightblue {
-    color: @vent-configurable-home-light-border;
-  }
+.list-item__icon_U {
+  width: 24px;
+  height: 24px;
+  margin-left: 12px;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.list-item_U:nth-child(1) .list-item__icon_U {
+  background-image: var(--image-list_icon_o1);
+}
+.list-item_U:nth-child(2) .list-item__icon_U {
+  background-image: var(--image-list_icon_o2);
+}
+.list-item__content_U {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 50px 0 15px;
+}
+.list-item__content_U > .list-item__label {
+  font-weight: bold;
+  margin-left: 20px;
+}
+.list-item__value_U {
+  font-family: 'douyuFont';
+  color: #ffffff;
+}
+
+.list-item__label {
+  flex-basis: 55%;
+}
+.list-item__info {
+  flex-grow: 1;
+}
+.list-item__value {
+  flex-basis: 30%;
+}
+.list-item__value_red {
+  color: red;
+}
+.list-item__value_orange {
+  color: orange;
+}
+.list-item__value_yellow {
+  color: yellow;
+}
+.list-item__value_green {
+  color: yellowgreen;
+}
+.list-item__value_blue {
+  color: @vent-table-action-link;
+}
+.list-item__value_white {
+  color: white;
+}
+.gallery-item__value_lightblue {
+  color: @vent-configurable-home-light-border;
+}
 </style>