newcpms/ui/src/views/aerial/compression5/index.vue

<template>
  <div class="app-container">
    <div class="compression5-container">
      <el-tooltip class="item" effect="dark" content="裂解气第二干燥器" placement="top">
        <div class="compression-ljqdegzq"
             id="compression-ljqdegzq"
             @mouseover="handleMouseover1"
             @mouseleave="handleMouseleave1"
             @click="handleDevClick('裂解气第二干燥器')">
        </div>
      </el-tooltip>
    </div>
   </div>
</template>

<script>
  export default {
    props: {
      area: {
        type: String,
        default: ''
      },
    },
    methods: {
      handleDevClick(devName) {
        this.$emit('handleDevClick', devName);
      },
      /* mouseover事件 */
      handleMouseover1() {
        let box = document.getElementById("compression-ljqdegzq");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";
        box.style.cursor = "pointer";
      },
      /* mouseleave事件 */
      handleMouseleave1() {
        let box = document.getElementById("compression-ljqdegzq");
        box.style.backgroundColor = "transparent";
      },
    }
  }
</script>

<style>
  .compression5-container {
    position: relative;
    width: 1200px;
    height: 500px;
    padding: 0px;
    margin: 0px auto;
    overflow: hidden;
    background: url('../../../assets/images/aerial/compression5.png') center/cover; /* 替换为实际背景图路径 */
    background-size: contain;
    background-repeat: no-repeat;
  }

  .compression-ljqdegzq {
    position:absolute;
    top: 230px;
    left: 500px;
    padding: 0px;
    margin: 0px;
    width: 100px;
    height: 100px;
  }
</style>