[Revt 0000] 可配置首页Complex_list组件回退

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

@@ -5,793 +5,979 @@
     <!-- 部分类型的列表需要加一张图片 -->
     <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
-    <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="flex-grow h-full" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
-        <div :class="`list-item__icon_${type}`"></div>
+        <div :class="`list-item__title_${type}`">{{ item.title }}</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 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>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-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']);
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
+      }[];
+      /** A B */
+      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-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 {
-  --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_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__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_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_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__content_D {
-  line-height: 30px;
-}
-.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 {
-  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_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_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_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__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_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-item__value {
-    flex-basis: unset;
+    @import '@/design/theme.less';
+    @import '@/design/theme.less';
+    /* Timeline 相关的样式 */
+
+    @{theme-green} {
+      .list {
+        --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);
+      }
+    }
+    @{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);
+      --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 {
+      --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-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-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-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;
+      width: 100%;
+      height: 100%;
+    }
+
+    .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 {
+    //   position: absolute;
+    //   left: 35%;
+    //   top: 55px;
+    //   display: flex;
+    //   justify-content: space-evenly;
+    // }
+    .list-item__content_A:nth-of-type(2) {
+      position: absolute;
+      top: 15px;
+      left: 14%;
+      width: 22%;
+      text-align: center;
+      display: block;
+
+      .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-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__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 20px;
+        margin-left: 5px;
+      }
+    }
+
+    .list-item_B {
+      // height: 155px;
+      background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // background-size: auto 100%;
+      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-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
+        // height: 30px;
+        // background-size: auto 80%;
+        // background-position: center;
+        // background-repeat: no-repeat;
+      }
+      .list-item__info {
+        display: none;
+      }
+    }
+
+    .list_C {
+      padding: 5px 10px;
+    }
+
+    .list__wrapper_C {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .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;
+      // font-size: 14px;
+      top: 15px;
+    }
+    .list-item__content_C:nth-of-type(2) {
+      position: absolute;
+      top: 15px;
+      left: 19px;
+      width: 30%;
+      text-align: center;
+      display: block;
+
+      .list-item__label {
+        // font-size: 18px;
+        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-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
+
+
+    .list_D {
+      padding: 5px 10px;
+    }
+
+    .list__wrapper_D {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .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__title_D {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .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-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
+
+  .list_E {
+    padding: 5px 10px;
   }
-  .list-item__label {
-    flex-basis: unset;
+
+  .list__wrapper_E {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 10px;
   }
-  .list-item__info {
-    display: none;
+
+  .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_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_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-item_L:nth-child(2) .list-item__icon_L {
-  background-image: var(--image-list_icon_l2);
-}
-
-.list-item_L:nth-child(3) .list-item__icon_L {
-  background-image: var(--image-list_icon_l3);
-}
-
-.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__title_E {
+    // position: absolute;
+    width: 100%;
+    // top: 0;
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 10px;
   }
-}
-.list-item__content_L > div {
-  flex-basis: 33.3%;
-}
-
-.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_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__content_M {
-  display: flex;
-  text-align: center;
-  align-items: center;
-
-  .list-item__value_M {
-    font-family: 'douyuFont';
-    font-size: 12px;
+  .list-item__content_E:nth-of-type(2) {
+    position: absolute;
+    top: 40%;
+    left: 5%;
+    text-align: left;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
   }
-}
-.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__content_E:nth-of-type(3) {
+    position: absolute;
+    top: 40%;
+    right: 5%;
+    text-align: right;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
   }
-}
 
-.list-item_N:nth-child(3) {
-  background-image: var(--image-list_bg_n3);
-}
+  .list-item_F {
+      // height: 155px;
+      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;
+      // justify-content: space-between;
+      // text-align: center;
+      padding: 0 5%;
+      margin-top: 5px;
+      height: 50px;
 
-.list-item_N:nth-child(4) {
-  background-image: var(--image-list_bg_n4);
-  .list-item__value_N {
-    color: #27cab7;
+      .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__content_N {
-  display: flex;
-  text-align: center;
-  align-items: center;
-  .list-item__value_N {
-    font-family: 'douyuFont';
+
+  .list-item_G {
+      // height: 155px;
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // background-position: center;
+      // justify-content: space-between;
+      // text-align: center;
+      margin-top: 5px;
+
+      .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-item__content_N > div:last-child {
-  flex-basis: 60%;
-}
-
-.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_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__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;
-}
+
+    // .list-item__title_B_O2 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
+    // }
+    // .list-item__title_B_CH4 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
+    // }
+    // .list-item__title_B_CO {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
+    // }
+    // .list-item__title_B_CO2 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
+    // }
+
+    // .list-item__label {
+    //   flex-basis: 55%;
+    // }
+    // .list-item__info {
+    //   flex-grow: 1;
+    // }
+    // .list-item__value {
+    //   flex-basis: 30%;
+    // }
+    /* ===== 后续新增的类型样式 (H, I, J, K, L, M, N, S, R, U, fireList) ===== */
+    .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_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_R {
+      background: none;
+    }
+    .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: 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_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-item__value {
+        flex-basis: unset;
+      }
+      .list-item__label {
+        flex-basis: unset;
+      }
+      .list-item__info {
+        display: none;
+      }
+    }
+
+    .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_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-item_L:nth-child(2) .list-item__icon_L {
+      background-image: var(--image-list_icon_l2);
+    }
+    .list-item_L:nth-child(3) .list-item__icon_L {
+      background-image: var(--image-list_icon_l3);
+    }
+    .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_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_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__content_M {
+      display: flex;
+      text-align: center;
+      align-items: center;
+      .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_N:nth-child(3) {
+      background-image: var(--image-list_bg_n3);
+    }
+    .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_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_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__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>