mky-vent-base/src/views/vent/home/billboard/components/Warning.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="warning">
    <div class="warning-item" v-for="item in WARNING_CONFIG" :key="item.id" @click="$emit('click', item)">
      <div class="img"> <img :src="item.src" alt="" /> </div>
      <div class="text">{{ item.text }}</div>
      <div class="extra">监测数量</div>
      <div class="num">{{ get(warnData, item.prop1) }}</div>
      <div class="risk" :class="`warning-level_${get(warnData, item.prop2)}`">{{ get(warnData, item.prop2) }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { BillboardType, DEFAULT_TEST_DATA, WARNING_CONFIG } from '../billboard.data';
  import { get } from '../utils';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );
  defineEmits(['click']);

  const warnData = computed<BillboardType['warnInfo']>(() => {
    const info = props.data.warnInfo;
    return info;
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/theme.less';
  @font-face {
    font-family: 'douyuFont';
    src: url(/@/assets/images/files/douyuFont.otf);
  }

  .warning {
    height: 100%;
    // display: flex;
    // justify-content: space-evenly;
    // align-items: center;
    // flex-wrap: wrap;
  }

  .warning-item:first-of-type {
    background-image: url(/@/assets/images/vent/home/select-bg.png);
    background-size: auto 100%;
    background-position: left center;
    padding-left: 60px;

    .text {
      width: 130px;
      text-align: left;
    }
    .extra {
      display: none;
    }

    // .warning-level_5 {
    //   color: red;
    // }
    // .warning-level_4 {
    //   color: orange;
    // }
    // .warning-level_3 {
    //   color: yellow;
    // }
    // .warning-level_2 {
    //   color: green;
    // }
  }
  .warning-item {
    display: flex;
    align-items: center;
    background-image: url(/@/assets/images/company/list-item-9.png);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: right center;
    height: 40px;
    margin-top: 10px;

    .text {
      text-align: center;
      width: 60px;
    }
    .extra {
      text-align: center;
      width: 90px;
    }
    .num {
      text-align: center;
      width: 110px;
    }
    .risk {
      text-align: right;
      width: 80px;
    }
  }

  .num {
    font-size: 20px;
    font-family: douyuFont;
    color: @vent-gas-primary-text;
  }
  .risk {
    font-size: 20px;
    font-family: douyuFont;
    color: @vent-gas-primary-text;
  }
</style>