<template>
  <div class="box">
    <div class="box-top">
      <div v-for="index in 3" :key="index" class="box-top-item">
        <div class="item-box">
          <div class="item-box-left">
            <div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
            <div class="iem-box-left-number">
              10 / 13
              <span
                style="
                  color: #04d919;
                  font-size: 14px;
                  margin-left: 5px;
                  font-weight: 700;
                  font-style: normal;
                "
                >+10%</span
              >
            </div>
          </div>
          <div class="item-box-right">
            <img width="54px" height="54px" src="../../../../src/icon/gaojingguanli.svg" />
          </div>
        </div>
      </div>
    </div>
    <div style="flex: 4; width: 100%">2</div>
    <div style="flex: 4; width: 100%">3</div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect

  defineOptions({
    name: 'alarmOverview', // 与页面路由name一致缓存才可生效
  });

  const info = ref({});
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #f0f1f4;
    box-sizing: border-box;
    .box-top {
      flex: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      gap: 5px;
      .box-top-item {
        height: 100%;
        flex: 1;
        gap: 5px;
        background-color: white;
        border-radius: 4px;
        padding: 20px;
        .item-box {
          width: 100%;
          height: 100%;
          display: flex;
          .item-box-left {
            flex: 9;
            height: 100%;
            padding: 0px !important;
            .item-box-left-title {
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #aaaaaa;
              font-kerning: normal;
              font-family: '微软雅黑', sans-serif;
            }
            .iem-box-left-number {
              color: #000000;
              font-weight: 700;
              font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
              font-style: normal;
              font-size: 30px;
            }
          }
          .item-box-right {
            flex: 1;
            height: 100%;
            display: grid;
            place-items: center;
          }
        }
      }
    }
  }
</style>
