mky-vent-base/src/views/vent/home/configurable/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;
  z-index: 1;
  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;
  z-index: 1;
  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>