fix: 统一web_result项目导航栏组件化

详细说明:
- 创建共享的导航组件nav-component.js
- 动态检测页面位置自动调整路径
- 修复index.html和所有子页面导航链接不一致问题
- 统一Logo样式和响应式设计
- 添加移动端菜单支持
This commit is contained in:
Yep_Q
2025-09-09 20:34:34 +08:00
parent 3e7d0f39f8
commit e665ee15ea
8 changed files with 154 additions and 261 deletions

View File

@@ -225,37 +225,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-lg z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<h1 class="text-2xl font-bold gradient-text">NEVIT 2024</h1>
<span class="ml-3 text-sm text-gray-500">新能源汽车产业博览会</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link active text-emerald-500">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Hero Section with Parallax -->
@@ -1117,5 +1087,6 @@
counterObserver.observe(el);
});
</script>
<script src="../js/nav-component.js"></script>
</body>
</html>

View File

@@ -114,45 +114,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-charging-station text-white"></i>
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Page Header -->
@@ -831,5 +793,6 @@
}
});
</script>
<script src="../js/nav-component.js"></script>
</body>
</html>

View File

@@ -117,45 +117,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-charging-station text-white"></i>
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Page Header -->
@@ -813,5 +775,6 @@
</div>
</div>
</footer>
<script src="../js/nav-component.js"></script>
</body>
</html>

View File

@@ -146,45 +146,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-charging-station text-white"></i>
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-600 font-medium">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Page Header with Background Image -->
@@ -1413,5 +1375,6 @@
observer.observe(el);
});
</script>
<script src="../js/nav-component.js"></script>
</body>
</html>

View File

@@ -84,45 +84,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-charging-station text-white"></i>
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Page Header -->
@@ -519,5 +481,6 @@
</div>
</div>
</footer>
<script src="../js/nav-component.js"></script>
</body>
</html>

View File

@@ -217,39 +217,7 @@
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full glass-morphism shadow-lg z-50 transition-all duration-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<h1 class="text-2xl font-bold bg-gradient-to-r from-emerald-500 to-blue-500 bg-clip-text text-transparent">
NEVIT 2024
</h1>
<span class="ml-3 text-sm text-gray-500">新能源汽车产业博览会</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-home mr-2"></i>首页
</a>
<a href="overview.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-info-circle mr-2"></i>展会概览
</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-th-large mr-2"></i>展览内容
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-bullhorn mr-2"></i>营销推广
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-cogs mr-2"></i>运营服务
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
<i class="fas fa-chart-pie mr-2"></i>预算分析
</a>
<a href="risk.html" class="nav-link active text-emerald-500">
<i class="fas fa-shield-alt mr-2"></i>风险评估
</a>
</div>
</div>
</div>
<!-- Content will be dynamically generated by nav-component.js -->
</nav>
<!-- Hero Section with Matrix Effect -->
@@ -1072,5 +1040,6 @@
progressObserver.observe(bar);
});
</script>
<script src="../js/nav-component.js"></script>
</body>
</html>