gx

src/view/sy_map.vue

@@ -247,11 +247,20 @@
       </div>
       <div
         class="btnBj"
+        :class="{ collapsed: isCollapsed }"
         v-if="!showEdit && !dialogShow && !openD"
-        @click="openqx()"
       >
-        地图权限：
+        <div class="arrow" @click="toggleCollapse">
-        <p :style="{ color: jsqx ? 'green' : 'red' }">{{ bjtitle }}</p>
+          <span>{{ isCollapsed ? "◀" : "▶" }}</span>
+        </div>
+        <span v-show="!isCollapsed" style="margin-left: 10px">地图权限：</span>
+        <p
+          v-show="!isCollapsed"
+          @click="openqx()"
+          :style="{ color: jsqx ? 'green' : 'red' }"
+        >
+          {{ bjtitle }}
+        </p>
       </div>
       <Dialog
         :dialogShow="dialogShow"
@@ -1115,7 +1124,6 @@ const yaosuTotal = ref([
     url: "/api/ggfwyth/ysyzt/getCdzxx",
     tooltip: "zdmc",
     click: true,
-   
   },
   {
     id: 9,
@@ -5322,6 +5330,13 @@ const reset_font2 = () => {
   document.querySelector(".detail").style.transform =
     "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
+// const bjtitle = ref(锁定);
+// const jsqx = ref(false);
+const isCollapsed = ref(false);
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
 
 onMounted(async () => {
   // 检查浏览器是否支持 WebGL
@@ -5951,6 +5966,7 @@ onMounted(async () => {
     border-radius: 0 3px 3px 0;
   }
 }
+
 .btnBj {
   cursor: pointer;
   z-index: 100;
@@ -5964,7 +5980,26 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   opacity: 0.8;
+  transition: width 0.3s ease;
+  width: auto;
+  overflow: hidden;
+
+  .btnBj.collapsed {
+    width: 15px;
+    justify-content: center;
   }
+
+  .arrow {
+    cursor: pointer;
+    font-size: 16px;
+    color: #ffffff;
+    transition: color 0.2s ease;
+  }
+  .arrow:hover {
+    color: #000000;
+  }
+}
+
 .title {
   background-image: url(@/assets/images/map/map_title_bg.png);
   background-repeat: no-repeat;