鸟瞰图 - 压缩区域页面2、页面4修改、页面5修改

ui/src/views/aerial/compression2/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="app-container">
-    <!--<div class="compression2-container">-->
-      <!--<el-tooltip class="item" effect="dark" content="123" placement="top">-->
-        <!--<div class="compression-bxjlt"-->
-             <!--id="compression-bxjlt"-->
-             <!--@mouseover="handleMouseover1"-->
-             <!--@mouseleave="handleMouseleave1"-->
-             <!--@click="handleDevClick('123')">-->
-        <!--</div>-->
-      <!--</el-tooltip>-->
-    <!--</div>-->
+    <div class="compression2-container">
+      <el-tooltip class="item" effect="dark" content="VOC压缩机" placement="top">
+        <div class="compression-voc"
+             id="compression-voc"
+             @mouseover="handleMouseover1"
+             @mouseleave="handleMouseleave1"
+             @click="handleDevClick('VOC压缩机')">
+        </div>
+      </el-tooltip>
+    </div>
    </div>
 </template>
 
@@ -27,13 +27,13 @@
       },
       /* mouseover事件 */
       handleMouseover1() {
-        let box = document.getElementById("compression-bxjlt");
+        let box = document.getElementById("compression-voc");
         box.style.backgroundColor = "rgba(64,158,255,0.3)";
         box.style.cursor = "pointer";
       },
       /* mouseleave事件 */
       handleMouseleave1() {
-        let box = document.getElementById("compression-bxjlt");
+        let box = document.getElementById("compression-voc");
         box.style.backgroundColor = "transparent";
       },
     }
@@ -48,18 +48,18 @@
     padding: 0px;
     margin: 0px auto;
     overflow: hidden;
-    background: url('../../../assets/images/aerial/compression1.png') center/cover; /* 替换为实际背景图路径 */
+    background: url('../../../assets/images/aerial/compression2.png') center/cover; /* 替换为实际背景图路径 */
     background-size: contain;
     background-repeat: no-repeat;
   }
 
-  .compression-bxjlt {
+  .compression-voc {
     position:absolute;
-    top: 300px;
-    left: 400px;
+    top: 180px;
+    left: 470px;
     padding: 0px;
     margin: 0px;
-    width: 80px;
-    height: 80px;
+    width: 250px;
+    height: 190px;
   }
 </style>

ui/src/views/aerial/compression4/index.vue

@@ -55,11 +55,11 @@
 
   .compression-c2 {
     position:absolute;
-    top: 0px;
-    left: 400px;
+    top: 20px;
+    left: 450px;
     padding: 0px;
     margin: 0px;
-    width: 200px;
-    height: 450px;
+    width: 180px;
+    height: 400px;
   }
 </style>

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

@@ -56,7 +56,7 @@
   .compression-ljqdegzq {
     position:absolute;
     top: 230px;
-    left: 400px;
+    left: 500px;
     padding: 0px;
     margin: 0px;
     width: 100px;