mky-vent-base/src/views/vent/home/configurable/components/detail/TimelineListNew.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="timelineNew">
    <div class="left-section">
      <div class="warnBg"></div>
      <div class="warnInfo">
        <div>{{ 0 }}</div>
        <div>报警数</div>
      </div>
    </div>
    <div class="center-section"></div>
    <div class="right-section">
      <div v-for="item in listConfig" :key="item.prop" class="flex items-center timeline-item">
        <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`" style="margin-bottom: 15px"></div>
        <div class="timeline-item__label" style="margin-bottom: 15px">{{ item.label }}</div>
        <div :class="`timeline-item__value_${item.color}`" style="margin-bottom: 15px">
          {{ item.value }}
        </div>
      </div>
    </div>

    <!-- <div class="timeline-item__dot"></div> -->
  </div>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    listConfig: {
      value: string;
      color: string;
      label: string;
      prop: string;
    }[];
  }>(),
  {
    listConfig: () => [],
  }
);
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';
@import '@/design/theme.less';
/* Timeline 相关的样式 */

@{theme-deepblue} {
  .timeline-item {
    --image-warn_icon_4: url('/@/assets/images/vent/homeNew/warn_icon_1.png');
    --image-warn_icon_3: url('/@/assets/images/vent/homeNew/warn_icon_2.png');
    --image-warn_icon_2: url('/@/assets/images/vent/homeNew/warn_icon_3.png');
    --image-warn_icon_1: url('/@/assets/images/vent/homeNew/warn_icon_4.png');
  }
}

.timeline-item {
  --image-warn_icon_4: url('/@/assets/images/vent/homeNew/warn_icon_1.png');
  --image-warn_icon_3: url('/@/assets/images/vent/homeNew/warn_icon_2.png');
  --image-warn_icon_2: url('/@/assets/images/vent/homeNew/warn_icon_3.png');
  --image-warn_icon_1: url('/@/assets/images/vent/homeNew/warn_icon_4.png');
  height: 20%;
}

.timelineNew {
  display: flex;
  height: 220px;
  position: relative;

  width: 100%;
}

.left-section {
  width: 24%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 10px;
  .warnBg {
    flex: 1;
    background: url('/@/assets/images/vent/homeNew/Alarm.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .warnInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('/@/assets/images/vent/homeNew/databg/10.png');
    background-repeat: no-repeat;
    background-size: 100%;
    div:first-child {
      font-size: 16px;
      font-weight: bold;
      color: red;
    }
    div:last-child {
      font-size: 14px;
      color: #fff;
    }
  }
}

.center-section {
  width: 22%;
  margin-top: 30px;
  background: url('/@/assets/images/vent/homeNew/warn-dot.png') center/contain no-repeat;
}

.right-section {
  width: 71%;
  height: 100%;
  line-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  .timeline-item {
    display: flex;
    background: url('/@/assets/images/vent/homeNew/databg/12.png');
    background-size: 100%;
    background-repeat: no-repeat;
    align-items: center;
    padding: 0 10px;
    &__icon {
      width: 33px;
      height: 35px;
      background-position: center;
      background-repeat: no-repeat;
      &_red {
        background-image: var(--image-warn_icon_4);
      }
      &_orange {
        background-image: var(--image-warn_icon_3);
      }
      &_yellow {
        background-image: var(--image-warn_icon_2);
      }
      &_blue {
        background-image: var(--image-warn_icon_1);
      }
    }
    &__label {
      width: 100px;
    }
    &__value {
      &_red {
        color: red;
      }
      &_orange {
        color: orange;
      }
      &_yellow {
        color: yellow;
      }
      &_blue {
        color: lightblue;
      }
    }
  }
}
</style>