修复MainWatch页面的dock

src/views/Home.vue

@@ -179,31 +179,31 @@
               </div>
             </div>
 
-          <!-- Bottom Dock (overlay on map) -->
-          <div
-            class="dock-wrap"
-            :class="{ 'is-hidden': !isNavVisible }"
-            @mousemove="onDockMove"
-            @mouseleave="onDockLeave"
-          >
-            <div class="dock-arrow left" @click="dockPrev" title="上一页"></div>
-            <div class="dockbar">
-              <div
-                v-for="(m, idx) in modules"
-                :key="m.key"
-                class="dock-item"
-                :class="{ active: activeModule === m.key }"
-                :style="navItemStyle(idx)"
-                @click="selectModule(m)"
-                @mouseenter="handleHover(idx)"
-                @mouseleave="currentHoverIndex = null"
-              >
-                <div class="dock-icon" :style="navIconStyle(idx, m)"></div>
-                <div class="dock-label">{{ m.title }}</div>
+            <!-- Bottom Dock (overlay on map) -->
+            <div
+              class="dock-wrap"
+              :class="{ 'is-hidden': !isNavVisible }"
+              @mousemove="onDockMove"
+              @mouseleave="onDockLeave"
+            >
+              <div class="dock-arrow left" @click="dockPrev" title="上一页"></div>
+              <div class="dockbar">
+                <div
+                  v-for="(m, idx) in modules"
+                  :key="m.key"
+                  class="dock-item"
+                  :class="{ active: activeModule === m.key }"
+                  :style="navItemStyle(idx)"
+                  @click="selectModule(m)"
+                  @mouseenter="handleHover(idx)"
+                  @mouseleave="currentHoverIndex = null"
+                >
+                  <div class="dock-icon" :style="navIconStyle(idx, m)"></div>
+                  <div class="dock-label">{{ m.title }}</div>
+                </div>
               </div>
+              <div class="dock-arrow right" @click="dockNext" title="下一页"></div>
             </div>
-            <div class="dock-arrow right" @click="dockNext" title="下一页"></div>
-          </div>
           </div>
         </div>
 
@@ -420,7 +420,7 @@ deviceTab: "signal",
       ],
       activeModule: "home",
       hoverModule: "",
-onlineChart: null,
+      onlineChart: null,
       controlChart: null,
       deviceChart: null,
 

src/views/MainWatch.vue

@@ -85,7 +85,12 @@
             </div>
             
             <!-- Bottom Dock (overlay on map) -->
-            <div class="dock-wrap" @mousemove="onDockMove" @mouseleave="onDockLeave">
+            <div
+              class="dock-wrap"
+              :class="{ 'is-hidden': !isNavVisible }"
+              @mousemove="onDockMove"
+              @mouseleave="onDockLeave"
+            >
               <div class="dock-arrow left" @click="dockPrev" title="上一页"></div>
               <div class="dockbar">
                 <div
@@ -95,8 +100,10 @@
                   :class="{ active: activeModule === m.key }"
                   :style="navItemStyle(idx)"
                   @click="selectModule(m)"
+                  @mouseenter="handleHover(idx)"
+                  @mouseleave="currentHoverIndex = null"
                 >
-                  <div class="dock-icon" :style="navIconStyle(m)"></div>
+                  <div class="dock-icon" :style="navIconStyle(idx, m)"></div>
                   <div class="dock-label">{{ m.title }}</div>
                 </div>
               </div>
@@ -241,6 +248,7 @@ export default {
   },
   data() {
     return {
+      isNavVisible: true,
       baseW: 1920,
       baseH: 1080,
       scale: 1,
@@ -259,14 +267,15 @@ export default {
       mapPopup: null,
       mapBgUrl: "", // 后期替换真实底图：在这里填 url
       modules: [
-        { key: "home", title: "首页", img: "main-home.png", route: { path: "/home" } },
-        { key: "watch", title: "状态监控", img: "main-watch.png", route: { path: "/main-watch", query: { panel: "watch" } } },
-        { key: "vip", title: "特勤安保", img: "main-security.png", route: { path: "/home", query: { panel: "security" } } },
-        { key: "corr", title: "干线协调", img: "main-coor.png", route: { path: "/home", query: { panel: "coor" } } },
-        { key: "overview", title: "状态展示", img: "main-surve.png", route: { path: "/home", query: { panel: "surve" } } },
-        { key: "settings", title: "系统设置", img: "main-setting.png", route: { path: "/home", query: { panel: "setting" } } }
+        { key: "home", title: "首页", img: "main-home", route: { path: "/home" } },
+        { key: "watch", title: "状态监控", img: "main-watch", route: { path: "/watch", query: { panel: "watch" } } },
+        { key: "vip", title: "特勤安保", img: "main-security", route: { path: "/security", query: { panel: "security" } } },
+        { key: "corr", title: "干线协调", img: "main-coor", route: { path: "/coor", query: { panel: "coor" } } },
+        { key: "overview", title: "状态展示", img: "main-surve", route: { path: "/surve", query: { panel: "surve" } } },
+        { key: "settings", title: "系统设置", img: "main-setting", route: { path: "/setting", query: { panel: "setting" } } }
       ],
       activeModule: "watch",
+      hoverModule: "",
       // 左侧Tab菜单数据
       tabs: [
         { id: 'overview', name: '总览' },
@@ -317,6 +326,9 @@ export default {
     this.fetchMenuData(this.currentTab);
   },
   mounted() {
+    this.timer = setTimeout(() => {
+      this.isNavVisible = false;
+    }, 2000); // 2000毫秒（2秒）后收起底部菜单
   },
   beforeDestroy() {
   },
@@ -461,8 +473,8 @@ export default {
         return "";
       }
     },
-    navIconStyle(m) {
-      return { backgroundImage: `url(${this.assetUrl(m.img)})` };
+    navIconStyle(index, item) {
+      return { backgroundImage: this.currentHoverIndex === index ? `url(${this.assetUrl(item.img + '-hover.png')})` : `url(${this.assetUrl(item.img + '.png')})` };
     },
     selectModule(m) {
       this.activeModule = m.key;
@@ -478,6 +490,9 @@ export default {
       const n = (this.dockItems && this.dockItems.length) ? this.dockItems.length : 6;
       this.activeDockIndex = (this.activeDockIndex + 1) % n;
     },
+    handleHover(index) {
+      this.currentHoverIndex = index;
+    },
   }
 };
 </script>