Explorar el Código

feat: 对Home页面和Main页面新增dock导航菜单鼠标hover效果

sequoia tungfang hace 1 día
padre
commit
d94c6b11b3

BIN
src/assets/main/main-coor-hover.png


BIN
src/assets/main/main-coor.png


BIN
src/assets/main/main-home-hover.png


BIN
src/assets/main/main-home.png


BIN
src/assets/main/main-security-hover.png


BIN
src/assets/main/main-security.png


BIN
src/assets/main/main-setting-hover.png


BIN
src/assets/main/main-setting.png


BIN
src/assets/main/main-surve-hover.png


BIN
src/assets/main/main-surve.png


BIN
src/assets/main/main-watch-hover.png


BIN
src/assets/main/main-watch.png


+ 17 - 9
src/views/Home.vue

@@ -190,8 +190,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>
@@ -310,6 +312,7 @@ export default {
   name: "Home",
   data() {
     return {
+      currentHoverIndex: null,
       baseW: 1920,
       baseH: 1080,
       scale: 1,
@@ -399,12 +402,12 @@ deviceTab: "signal",
       ],
 
       modules: [
-        { key: "home", title: "首页", img: "main-home.png", route: { path: "/home" } },
-        { key: "watch", title: "状态监控", img: "main-watch.png", route: { path: "/home", 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: "/home", query: { panel: "watch" } } },
+        { key: "vip", title: "特勤安保", img: "main-security", route: { path: "/home", query: { panel: "security" } } },
+        { key: "corr", title: "干线协调", img: "main-coor", route: { path: "/home", query: { panel: "coor" } } },
+        { key: "overview", title: "状态展示", img: "main-surve", route: { path: "/home", query: { panel: "surve" } } },
+        { key: "settings", title: "系统设置", img: "main-setting", route: { path: "/home", query: { panel: "setting" } } }
       ],
       activeModule: "home",
       hoverModule: "",
@@ -716,8 +719,13 @@ onlineChart: null,
         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')})`
+      }
+    },
+    handleHover(index) {
+      this.currentHoverIndex = index;
     },
     selectModule(m) {
       this.activeModule = m.key;

+ 16 - 9
src/views/Main.vue

@@ -29,8 +29,10 @@
           class="dock-item"
           :style="itemStyle(idx)"
           @click="go(item)"
+          @mouseenter="handleHover(idx)"
+          @mouseleave="currentHoverIndex = null"
         >
-          <div class="icon" :style="iconStyle(item)"></div>
+          <div class="icon" :style="iconStyle(idx, item)"></div>
           <div class="label">{{ item.label }}</div>
         </div>
       </div>
@@ -51,6 +53,7 @@ export default {
       baseW: 1920,
       baseH: 1080,
       scale: 1,
+      currentHoverIndex: null,
 
       // mac dock 效果:鼠标点位
       mouseX: null,
@@ -58,12 +61,12 @@ export default {
 
             // 6 个功能(route 先对齐到你当前路由:目前只有 /home 可落地,其它模块先通过 query 标记,避免 404)
       items: [
-        { key: "home", label: "首页", img: "main-home.png", route: { path: "/home" } },
-        { key: "watch", label: "状态监控", img: "main-watch.png", route: { path: "/main-watch", query: { panel: "watch" } } },
-        { key: "security", label: "特勤安保", img: "main-security.png", route: { path: "/main-security", query: { panel: "security" } } },
-        { key: "coor", label: "干线协调", img: "main-coor.png", route: { path: "/home", query: { panel: "coor" } } },
-        { key: "surve", label: "状态监控", img: "main-surve.png", route: { path: "/main-surve", query: { panel: "surve" } } },
-        { key: "setting", label: "系统设置", img: "main-setting.png", route: { path: "/home", query: { panel: "setting" } } },
+        { key: "home", label: "首页", img: "main-home", route: { path: "/home" } },
+        { key: "watch", label: "状态监控", img: "main-watch", route: { path: "/main-watch", query: { panel: "watch" } } },
+        { key: "security", label: "特勤安保", img: "main-security", route: { path: "/main-security", query: { panel: "security" } } },
+        { key: "coor", label: "干线协调", img: "main-coor", route: { path: "/home", query: { panel: "coor" } } },
+        { key: "surve", label: "状态监控", img: "main-surve", route: { path: "/main-surve", query: { panel: "surve" } } },
+        { key: "setting", label: "系统设置", img: "main-setting", route: { path: "/home", query: { panel: "setting" } } },
       ],
 
       // 亮点
@@ -130,12 +133,16 @@ export default {
         return "";
       }
     },
-    iconStyle(item) {
+    iconStyle(index, item) {
       return {
-        backgroundImage: `url(${this.assetUrl(item.img)})`,
+        backgroundImage: this.currentHoverIndex === index ? `url(${this.assetUrl(item.img + '-hover.png')})` : `url(${this.assetUrl(item.img + '.png')})`
       };
     },
 
+    handleHover(index) {
+      this.currentHoverIndex = index;
+    },
+
     // ---------- 导航 ----------
         go(item) {
       // 路由对齐:你的路由表里目前只有 /home(其它页面后续再补路由)