yak_handcuffs/src/views/monitoringCenter/monitoringTop.vue

<template>
  <div class="monitoring-top-col">
    <div class="item" v-for="item in funcList">
      <div class="item-left">
        <div class="item-left-head">
          <div class="title">{{ item.title }}</div>
          <div class="en">{{ item.en }}</div>
        </div>
        <div class="item-left-bottom">
          <div class="num" :style="{ color: item.color }">{{ item.num || item.num == 0 ? item.num : "--" }}</div>
          <div class="unit" :style="{ color: item.color }">{{ item.unit }}</div>
        </div>
      </div>
      <div class="item-img">
        <img :src="item.icon" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
interface TFuncList {
  title: string;
  en: string;
  icon: string;
  unit: string;
  num: number;
  color: string;
}
defineProps({
  funcList: {
    type: Array<TFuncList>,
    default: () => [],
  },
});
</script>
<style scoped lang="less">
.monitoring-top-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.item {
  height: 160px;
  padding: 25px 33px 16px 36px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  .item-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item-left-head {
      .title {
        font-size: 18px;
        color: #061550;
      }
      .en {
        color: #787878;
        font-size: 8px;
      }
    }
    .item-left-bottom {
      display: flex;
      align-items: baseline;
      .num {
        color: #ff0303;
        font-size: 60px;
      }
      .unit {
        color: #ff0303;
        font-size: 20px;
      }
    }
  }
  .item-img {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>