mky-vent-base/src/views/vent/BeltLaneThreeLevelFire/home/components/detail/ListThree.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="list flex items-center" :class="`list_${type}`">
    <div class="flex-grow" :class="`list_wrapper_${type}`">
      <!-- 遍历每一组传感器数据 -->
      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type} ${getBgClass(ctx.value)}`">
          <div class="list-item__label"> {{ ctx.label }}</div>
          <div class="list-item__value" :class="`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;
      }[];
    }[];
    type: string;
  }>(),
  {
    listConfig: () => [],
    type: 'C',
  }
);

const getBgClass = (riskLevel: string) => {
  switch (riskLevel) {
    case '低风险':
      return 'bg-lowRisk';
    case '一般风险':
      return 'bg-normalRisk';
    case '较大风险':
      return 'bg-greaterRisk ';
    case '重大风险':
      return 'bg-majorRisk';
    case '报警':
      return 'bg-warning';
    default:
      return 'bg-lowRisk';
  }
};
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.list {
  padding-left: 20px;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
}

.list-item_A {
  align-items: center;
  text-align: center;
  margin: 10px 10px 17px 10px;
  display: flex;
  flex-direction: column; /* 竖排 */
  gap: 5px; /* 间距 */
}
.list-item__content_A {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 35px;
  padding: 0 12px;
  color: #ffffff;
  font-size: 13px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-item__content_A > .list-item__label {
  padding-left: 40px;
}
.list-item__content_A > .list-item__value {
  padding-right: 30px;
  font-weight: bold;
  font-style: italic;
}
.bg-lowRisk {
  background-image: url('/@/assets/images/beltFire/lowRisk.png');
}
.bg-normalRisk {
  background-image: url('/@/assets/images/beltFire/normalRisk.png');
}
.bg-greaterRisk {
  background-image: url('/@/assets/images/beltFire/greaterRisk.png');
}
.bg-warning {
  background-image: url('/@/assets/images/beltFire/warning.png');
}
.bg-majorRisk {
  background-image: url('/@/assets/images/beltFire/majorRisk.png');
}

.list-item__content_A.bg-lowRisk .list-item__value {
  color: #32ddff;
}

.list-item__content_A.bg-normalRisk .list-item__value {
  color: #ffff00;
}

.list-item__content_A.bg-greaterRisk .list-item__value {
  color: #ff9d17;
}

.list-item__content_A.bg-warning .list-item__value {
  color: #ff0000;
}

.list-item__content_A.bg-majorRisk .list-item__value {
  color: #ff3823;
}
</style>