sl-sfy-safety/src/views/institute-safety/components/production-safety/DangerInvestigation.vue

<template>
  <div class="danger-investigation">
    <div class="title">
      <span class="line"></span>
      <span class="text">隐患的排查与治理</span>
    </div>
    <div class="danger-investigation__content">
      <div class="content-item" :class="item.type" v-for="item in itemList" :key="item.name">
        <span class="name">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';

  const hiddenDangerCount = ref<number>(0);
  const rectificationCount = ref<number>(0);
  const closedCount = ref<number>(0);

  const itemList = computed(() => [
    { name: '隐患数', value: hiddenDangerCount.value, type: 'error' },
    { name: '整改数', value: rectificationCount.value, type: 'warning' },
    { name: '闭环', value: closedCount.value, type: 'success' },
  ]);

  onMounted(() => {
    hiddenDangerCount.value = 124;
    rectificationCount.value = 0;
    closedCount.value = 124;
  });
</script>

<style scoped lang="scss">
  .title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
    }

    .text {
      font-weight: 500;
      font-size: 16px;
      color: #000000;
      line-height: 22px;
    }
  }

  .danger-investigation__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 12px;

    .content-item {
      width: 96px;
      height: 92px;
      border-radius: 0px 4px 4px 0px;
      padding: 19px 22px;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .name {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }

      .value {
        font-family: DINAlternate;
        font-weight: 600;
        font-size: 22px;
        line-height: 26px;
      }
    }

    .error {
      border-left: 3px solid #ff0000;
      background: linear-gradient(180deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.3) 100%);

      .value {
        color: #ff0000;
      }
    }

    .warning {
      border-left: 3px solid #ffd300;
      background: linear-gradient(180deg, rgba(250, 173, 20, 0.15) 0%, rgba(250, 173, 20, 0.3) 100%);

      .value {
        color: #cdaa00;
      }
    }

    .success {
      border-left: 3px solid #1777ff;
      background: linear-gradient(180deg, rgba(227, 239, 255, 0.4) 0%, rgba(185, 209, 255, 0.38) 100%);

      .value {
        color: #1777ff;
      }
    }
  }
</style>