WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化导航栏鼠标悬浮菜单栏切换图片

Browse Source
This commit is contained in:
WindowBird 2025-10-10 10:39:08 +08:00
parent e071f22175
commit 93c25263f2
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/Navigation.vue
View File

@ -47,9 +47,7 @@
<a data-toggle="dropdown" role="button">行业解决方案 <span class="caret"/></a>
<div class="dropdown-menu">
<div class="pull-left col-xs-8 col-sm-6">
<!-- <img class="img-responsive" src="img/yuxiupdata/mune-7.png" alt="智慧餐饮" style="display: block;">
<img class="img-responsive" src="img/yuxiupdata/mune-8.png" alt="智慧公寓"> -->
<img alt="智能电动车" class="img-responsive" src="/img/yuxiupdata/mune-12.png">
<img alt="智能电动车" class="img-responsive" src="/img/yuxiupdata/mune-12.png" style="display: block;">
<img alt="智能换电柜" class="img-responsive" src="/img/yuxiupdata/mune-16.png">
</div>
<ul class="pull-right col-xs-4 col-sm-6">
@ -66,8 +64,7 @@
<a data-toggle="dropdown" role="button">软件应用开发<span class="caret"/></a>
<div class="dropdown-menu">
<div class="pull-left col-xs-8 col-sm-6">
<img alt="微信开发" class="img-responsive" src="/img/yuxiupdata/mune-9.png" style="display: block;">
<img alt="APP开发" class="img-responsive" src="/img/yuxiupdata/mune-10.png">
<img alt="APP开发" class="img-responsive" src="/img/yuxiupdata/mune-10.png" style="display: block;">
<img alt="小程序开发" class="img-responsive" src="/img/yuxiupdata/mune-11.png">
</div>
<ul class="pull-right col-xs-4 col-sm-6">
@ -85,9 +82,7 @@
<a data-toggle="dropdown" role="button">物联网解决方案 <span class="caret"/></a>
<div class="dropdown-menu">
<div class="pull-left col-xs-8 col-sm-6">
<img
alt="物联网应用定制" class="img-responsive" src="/img/yuxiupdata/mune-15.png"
style="display: block;">
<img alt="物联网应用定制" class="img-responsive" src="/img/yuxiupdata/mune-15.png" style="display: block;">
<img alt="物联网智能硬件" class="img-responsive" src="/img/yuxiupdata/mune-13.png">
<img alt="物联网IOT云平台" class="img-responsive" src="/img/yuxiupdata/mune-14.png">
</div>
@ -120,6 +115,11 @@ onMounted(() => {
// 加载JavaScript文件
loadJSFiles()
// 初始化导航菜单图片切换功能
nextTick(() => {
initNavigationHover()
})
})
const loadJSFiles = () => {
@ -127,7 +127,7 @@ const loadJSFiles = () => {
'/js/jquery-1.10.2.js',
'/js/bootstrap.min.js',
'/js/index.js',
'/js/gopcOm.js'
]
@ -143,6 +143,26 @@ const loadJSFiles = () => {
})
}
// 下拉菜单图片切换功能
const handleDropdownImageHover = (dropdownMenu: Element, index: number) => {
const images = dropdownMenu.querySelectorAll('.pull-left img')
images.forEach((img, i) => {
(img as HTMLElement).style.display = i === index ? 'block' : 'none'
})
}
// 初始化导航菜单图片切换
const initNavigationHover = () => {
// 为每个下拉菜单绑定事件
const dropdownMenus = document.querySelectorAll('.dropdown-menu')
dropdownMenus.forEach(dropdownMenu => {
const menuItems = dropdownMenu.querySelectorAll('ul li')
menuItems.forEach((item, index) => {
item.addEventListener('mouseenter', () => handleDropdownImageHover(dropdownMenu, index))
})
})
}
const loadCSSFiles = () => {
const cssFiles = [
'/css/bootstrap.min.css',

19
public/manifest.json
View File

@ -14,25 +14,6 @@
"productivity",
"technology"
],
"icons": [
{
"src": "/favicon.ico",
"sizes": "16x16 32x32",
"type": "image/x-icon"
},
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"screenshots": [
{
"src": "/screenshot-wide.png",