gasInjection-project/src/views/vent/home/configurable/components/detail/ComplexList.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
  <div class="list flex items-center" :class="`list_${type}`">
    <!-- 部分类型的列表需要加一张图片 -->
    <div :class="`list__image_${type}`"></div>
    <!-- 剩下的部分填充剩余宽度 -->
    <div class="flex-grow" :class="`list__wrapper_${type}`">
      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
        <!-- 列表项前面的图标 -->
        <div :class="`list-item__title_${type}`">{{ item.title }}</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>
  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/vent/color.less';
  /* Timeline 相关的样式 */

  .list {
    padding: 5px 20px;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .list-item_A {
    position: relative;
    height: 140px;
    background-repeat: no-repeat;
    background-image: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
    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: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
    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: 21px;
      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-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%;
  // }
  .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: #009bff;
  }
  .list-item__value_white {
    color: white;
  }
</style>