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

<template>
  <div v-if="visible" class="module-content">
    <div class="left-solt">
      <div class="left-img"></div>
      <div class="left-title">智能注浆系统</div>
    </div>
    <div class="center-solt">
      <div class="left-content">
        <div class="img-left"></div>
        <div class="title-left">监测区域</div>
      </div>
      <div class="center-content">
        <div class="center-top">自燃倾向性等级：容易自燃</div>
        <div class="center-bottom">低风险</div>
      </div>
      <div class="right-content">
        <div class="title-right">火灾风险</div>
        <div class="img-right"></div>
      </div>
    </div>
    <div class="right-solt">
      <div class="right-img"></div>
      <div class="right-title">智能注氮系统</div>
    </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/fireNew/3-1.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 {
  width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .left-img {
    left: 4%;
    top: 2%;
    width: 75px;
    height: 75px;
    cursor: pointer;
    position: absolute;
    background: url('@/assets/images/fireNew/3-4.png') no-repeat;
    background-size: 100% 100%;
  }
  .left-title {
    left: 3%;
    top: 85px;
    font-size: 13px;
    font-family: 'douyuFont';
    font-weight: bold;
    color: #fff;
    position: absolute;
  }
}

.right-solt {
  width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .right-img {
    right: 4%;
    top: 2%;
    width: 75px;
    height: 75px;
    cursor: pointer;
    position: absolute;
    background: url('@/assets/images/fireNew/3-5.png') no-repeat;
    background-size: 100% 100%;
  }
  .right-title {
    right: 3%;
    top: 85px;
    font-size: 13px;
    font-family: 'douyuFont';
    font-weight: bold;
    color: #fff;
    position: absolute;
  }
}
.center-solt {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 左侧区域 */
.left-content {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.img-left {
  width: 50px; /* 图片尺寸 */
  height: 50px;
  margin-right: 8px; /* 图片文字间距 */
  background: url('@/assets/images/fireNew/3-3.png') no-repeat center; /* 替换为实际图片路径 */
  background-size: contain;
}

/* 右侧区域 */
.right-content {
  display: flex;
  align-items: center;
}
.img-right {
  width: 50px;
  height: 50px;
  margin-left: -10px;
  background: url('@/assets/images/fireNew/3-2.png') no-repeat center; /* 替换为实际图片路径 */
  background-size: contain;
}

/* 中间区域 */
.center-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 330px;
}
/* 文字样式 */
.title-left {
  width: 100px;
  font-size: 20px;
}
.title-right {
  width: 100px;
  font-size: 20px;
}
.center-top {
  margin-bottom: 14px;
  font-size: 20px;
  margin-left: -18px;
}
.center-bottom {
  font-size: 30px;
  color: #52b4e5; /* 红色字体 */
  font-weight: bold;
  letter-spacing: 15px;
  margin-bottom: 18px;
}
</style>