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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
    <template v-if="layout === 'new-top'">
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
      </slot>
    </template>
    <template v-if="layout === 'val-top'">
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ value }}
        </div>
      </slot>
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ label }}
        </div>
      </slot>
    </template>
    <template v-if="layout === 'label-top'">
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ label }}
        </div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ value }}
        </div>
      </slot>
    </template>
  </div>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    label: string;
    value?: string;
    // 告示牌布局，类型为：'val-top' | 'label-top'
    layout: string;
    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
    type?: string;
  }>(),
  {
    value: '/',
    type: 'A',
    layout: 'val-top',
  }
);

// 获取某些 value 对应的特殊的 装饰用的类名
function getValueDecoClass(value) {
  switch (value) {
    case '低风险':
      return 'low_risk';
    case '一般风险':
      return 'risk';
    case '较大风险':
      return 'high_risk';
    case '报警':
      return 'warning';
    default:
      return '';
  }
}

defineEmits(['click']);
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';
@import '/@/design/theme.less';

@font-face {
  font-family: 'douyuFont';
  src: url('/@/assets/font/douyuFont.otf');
}
@{theme-deepblue} {
  .mini-board {
    --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
    --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
    --image-areaNew2: url('/@/assets/images/fireNew/8.png');
  }
}

.mini-board {
  --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
  --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
  --image-areaNew2: url('/@/assets/images/fireNew/8.png');
  height: 50px;
  line-height: 25px;
  width: 130px;
  padding: 0 5px 0 5px;
  text-align: center;
  background-size: 100% 100%;
  position: relative;
}
.mini-board_H {
  width: 174px;
  height: 104px;
  background-image: var(--image-areaNew);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 33px 0 0 82px;
}

.mini-board__value_H {
  font-size: 16px;
  font-weight: bold;
  height: 23px;
  line-height: 50px;
  margin-top: 2px;
  font-family: 'douyuFont';
}
.mini-board__label_H {
  line-height: 20px;
  height: 20px;
}
.mini-board_E:nth-child(1) {
  .mini-board__label_E {
    background-image: var(--image-hycd);
  }
}
.mini-board_E:nth-child(2) {
  .mini-board__label_E {
    background-image: var(--image-dyfl);
  }
}
.mini-board_E:nth-child(3) {
  .mini-board__label_E {
    background-image: var(--image-jdjl);
  }
}

.mini-board_H_low_risk:nth-child(1) {
  background-image: var(--image-areaNew);
}
.mini-board_H_low_risk:nth-child(2) {
  background-image: var(--image-areaNew1);
}

.mini-board_F {
  width: 100px;
  height: 60px;
  background-image: var(--image-areaNew2);
  background-size: 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.mini-board__value_F {
  font-size: 15px;
  color: @vent-gas-primary-text;
}
.mini-board__label_F {
  line-height: 17px;
}
</style>