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

<template>
  <div class="app-container">
    <div class="office-container">
      <el-tooltip class="item" effect="dark" content="D301办公楼" placement="top">
        <div class="office"
             id="office"
             @mouseover="handleMouseover1"
             @mouseleave="handleMouseleave1"
             @click="handleDevClick('D301办公楼')">
        </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("office");
        box.style.backgroundColor = "rgba(64,158,255,0.3)";//蓝色
        box.style.cursor = "pointer";
      },
      /* mouseleave事件 */
      handleMouseleave1() {
        let box = document.getElementById("office");
        box.style.backgroundColor = "transparent";
      },
    }
  }
</script>

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

  .office {
    position:absolute;
    top: 80px;
    left: 80px;
    padding: 0px;
    margin: 0px;
    width: 1040px;
    height: 230px;
  }
</style>