|
@@ -29,8 +29,10 @@
|
|
|
class="dock-item"
|
|
class="dock-item"
|
|
|
:style="itemStyle(idx)"
|
|
:style="itemStyle(idx)"
|
|
|
@click="go(item)"
|
|
@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 class="label">{{ item.label }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -51,6 +53,7 @@ export default {
|
|
|
baseW: 1920,
|
|
baseW: 1920,
|
|
|
baseH: 1080,
|
|
baseH: 1080,
|
|
|
scale: 1,
|
|
scale: 1,
|
|
|
|
|
+ currentHoverIndex: null,
|
|
|
|
|
|
|
|
// mac dock 效果:鼠标点位
|
|
// mac dock 效果:鼠标点位
|
|
|
mouseX: null,
|
|
mouseX: null,
|
|
@@ -58,12 +61,12 @@ export default {
|
|
|
|
|
|
|
|
// 6 个功能(route 先对齐到你当前路由:目前只有 /home 可落地,其它模块先通过 query 标记,避免 404)
|
|
// 6 个功能(route 先对齐到你当前路由:目前只有 /home 可落地,其它模块先通过 query 标记,避免 404)
|
|
|
items: [
|
|
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 "";
|
|
return "";
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- iconStyle(item) {
|
|
|
|
|
|
|
+ iconStyle(index, item) {
|
|
|
return {
|
|
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) {
|
|
go(item) {
|
|
|
// 路由对齐:你的路由表里目前只有 /home(其它页面后续再补路由)
|
|
// 路由对齐:你的路由表里目前只有 /home(其它页面后续再补路由)
|