feat:提交

src/App.vue

@@ -64,6 +64,12 @@
               alt
               style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
             />
+            <img
+              v-show="showd"
+              src="@/assets/imgs/lh.png"
+              alt
+              style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
+            />
             <img
               v-show="showc"
               src="@/assets/imgs/snl.png"
@@ -87,7 +93,11 @@
             style="width: 86%;height: 60%;margin-top: 150px;margin-left: 80px;"
           />-->
 
-          <div class="other1" @click="showa = false;showb = false;showc = false;show=true" v-if="show==false">
+          <div class="other2" v-if="showe==true">
+            <!-- <Icon :size="14" icon="svg-icon:cd" /> -->
+            <span @click="lh()">绿化</span>
+          </div>
+          <div class="other1" @click="showa = false;showb = false;showe = false;showc = false;showd = false;show=true" v-if="show==false">
             <!-- <Icon :size="14" icon="svg-icon:cd" /> -->
             <span>返回</span>
           </div>
@@ -110,33 +120,51 @@ const show = ref(true);
 const showa = ref(false);
 const showb = ref(false);
 const showc = ref(false);
-
+const showd = ref(false);
+const showe = ref(false);
+const lh = () => {
+  showe.value = true;
+  showa.value = !showa.value;
+  showb.value = false;
+  showc.value = false;
+  showd.value = !showd.value;
+}
 const handleUpdateData = data => {
   if(data == "海岳大街") {
     showa.value = true;
+    showe.value = true;
     show.value = false;
     showb.value = false;
     showc.value = false;
+    showd.value = false;
   }else if(data == "雄县") {
     show.value = false;
     showa.value = false;
     showb.value = true;
     showc.value = false;
+    showd.value = false;
+    showe.value = false;
   }else if(data == "水泥路") {
     show.value = false;
     showa.value = false;
     showb.value = false;
     showc.value = true;
+    showd.value = false;
+    showe.value = false;
   }else if(data == "2024") {
     show.value = false;
     showa.value = false;
     showb.value = false;
     showc.value = true;
+    showd.value = false;
+    showe.value = false;
   }else if(data == "2025") {
     show.value = true;
     showa.value = false;
     showb.value = false;
     showc.value = false;
+    showd.value = false;
+    showe.value = false;
   }
   
 };
@@ -149,8 +177,8 @@ const clickedPoint = ref({ x: null, y: null });
 
 const dialogWidth = "20%"; // 设置对话框宽度
 const points = [
-  { x: 120, y: 285 },
-  { x: 606, y: 298 }
+  { x: 120, y: 460 },
+  { x: 606, y: 442 }
 ];
 onMounted(() => {
   const canvas = mapCanvas.value;
@@ -322,4 +350,27 @@ canvas {
     margin-right: 5px;
   }
 }
+.other2 {
+  position: absolute;
+  right: 50px;
+  top: 100px;
+  height: 26px;
+  line-height: 26px;
+  width: 70px;
+  box-sizing: border-box;
+  padding: 0 12px 0 12px;
+  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
+  border-radius: 4px;
+  // margin-right: 9px;
+  font-size: 12px;
+  color: #ffffff;
+  text-align: center;
+  // display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+  cursor: pointer;
+  :deep(.v-icon) {
+    margin-right: 5px;
+  }
+}
 </style>