mky-vent-base/src/views/vent/home/configurable/bule/components/originalNew/moduleTop.vue

<template>
  <div v-if="visible" class="module-content">
    <div class="left-solt"></div>
    <div class="center-solt">
      <div class="data-item">
        <img class="data-icon" src="@/assets/images/vent/homeNew/zonghui.png" />
        <div class="data-content">
          <div class="title">总回风量(m³/min)</div>
          <div class="air-num air-num1">25870</div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="data-item">
        <img class="data-icon" src="@/assets/images/vent/homeNew/zongjin.png" />
        <div class="data-content">
          <div class="title">总进风量(m³/min)</div>
          <div class="air-num air-num2">24989</div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="data-item">
        <img class="data-icon" src="@/assets/images/vent/homeNew/jihua.png" />
        <div class="data-content">
          <div class="title">计划风量(m³/min)</div>
          <div class="air-num air-num3">348</div>
        </div>
      </div>
    </div>
    <div class="right-solt"></div>
  </div>
</template>

<script lang="ts" setup>
  defineProps<{ title: string; visible: boolean }>();
  const emit = defineEmits(['close', 'click']);
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  .module-content {
    background: url('@/assets/images/vent/homeNew/content.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .left-solt {
    left: 8%;
    top: 13%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
    background-size: 100% 100%;
  }

  .right-solt {
    right: 8%;
    top: 13%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
    background-size: 100% 100%;
  }

  .center-solt {
    display: flex;
    position: absolute;
    left: 15%;
    bottom: 50%;
    width: 70%;
    height: 60%;
    align-items: center;
    justify-content: space-around;
  }

  .data-item {
    left: 10%;
    display: flex;
    align-items: center;
    gap: 5px;
    .data-icon {
      width: 60px;
      height: 100%;
    }
    .data-content {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #999999;
      }
      .air-num {
        font-size: 25px;
      }
    }
  }
  .air-num1 {
    color: #4ca8d5;
  }
  .air-num2 {
    color: #b9f3fc;
  }
  .air-num3 {
    color: #4ad1cc;
  }
  .divider {
    width: 1px;
    height: 40px;
    background: url('@/assets/images/vent/homeNew/Top-divider.png') no-repeat;
  }
</style>