68da1fc605
修复内容: 1. 修复Agent头像显示问题 - 使用真实图片替代emoji 2. 移除ResultPageV2自动跳转行为 3. 删除不符合需求的ResultPageV2组件 4. 修复undefined变量错误(currentTerminalData) 5. 添加缺失的getSimulationData导入 6. 优化ResultModal支持动态内容展示 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
270 lines
11 KiB
JavaScript
270 lines
11 KiB
JavaScript
// 导航组件 - 统一管理所有页面的导航栏
|
|
(function() {
|
|
// 检测当前页面路径，自动调整链接
|
|
const currentPath = window.location.pathname;
|
|
const isInPagesFolder = currentPath.includes('/pages/');
|
|
const currentPage = currentPath.split('/').pop() || 'index.html';
|
|
|
|
// 导航项配置
|
|
const navItems = [
|
|
{ href: 'index.html', icon: 'fa-home', text: '首页', id: 'index' },
|
|
{ href: 'overview.html', icon: 'fa-info-circle', text: '展会概览', id: 'overview' },
|
|
{ href: 'exhibition.html', icon: 'fa-th-large', text: '展览内容', id: 'exhibition' },
|
|
{ href: 'operation.html', icon: 'fa-drafting-compass', text: '布局设计', id: 'operation' },
|
|
{ href: 'marketing.html', icon: 'fa-bullhorn', text: '营销推广', id: 'marketing' },
|
|
{ href: 'budget.html', icon: 'fa-chart-pie', text: '预算分析', id: 'budget' },
|
|
{ href: 'risk.html', icon: 'fa-shield-alt', text: '风险评估', id: 'risk' }
|
|
];
|
|
|
|
// 根据当前页面位置调整路径
|
|
function getCorrectPath(href) {
|
|
// 移除可能存在的 pages/ 前缀
|
|
if (href.startsWith('pages/')) {
|
|
return href.substring(6); // 移除 'pages/' 前缀
|
|
}
|
|
return href;
|
|
}
|
|
|
|
// 判断是否为当前激活页面
|
|
function isActive(href) {
|
|
return currentPage === href ||
|
|
(currentPage === '' && href === 'index.html');
|
|
}
|
|
|
|
// 生成导航HTML
|
|
function generateNavHTML() {
|
|
return `
|
|
<div class="nav-container container mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center nav-logo">
|
|
<div class="logo-icon w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3 transition-transform hover:scale-110">
|
|
<i class="fas fa-charging-station text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-800">NEVIT 2024</h1>
|
|
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6 lg:space-x-8">
|
|
${navItems.map(item => `
|
|
<a href="${getCorrectPath(item.href)}"
|
|
class="nav-link ${isActive(item.href) ? 'active text-emerald-500' : 'text-gray-700'} hover:text-emerald-500 transition-all duration-300 relative group"
|
|
data-nav="${item.id}">
|
|
<i class="fas ${item.icon} mr-2"></i>${item.text}
|
|
${isActive(item.href) ? '<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500"></span>' : '<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 transition-all duration-300 group-hover:w-full"></span>'}
|
|
</a>
|
|
`).join('')}
|
|
</div>
|
|
<button class="md:hidden menu-toggle" id="mobile-menu-button">
|
|
<span class="menu-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="mobile-menu-overlay hidden" id="mobile-menu-overlay"></div>
|
|
<div class="mobile-menu transform translate-x-full transition-transform duration-300 fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50" id="mobile-menu">
|
|
<div class="p-6">
|
|
<button class="absolute top-6 right-6 text-gray-500 hover:text-gray-700" id="close-menu">
|
|
<i class="fas fa-times text-2xl"></i>
|
|
</button>
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-800">NEVIT 2024</h2>
|
|
<p class="text-sm text-gray-500">新能源汽车产业博览会</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
${navItems.map(item => `
|
|
<a href="${getCorrectPath(item.href)}"
|
|
class="block py-3 px-4 rounded-lg ${isActive(item.href) ? 'bg-emerald-50 text-emerald-500' : 'text-gray-700 hover:bg-gray-50'} transition-all duration-300"
|
|
data-nav="${item.id}">
|
|
<i class="fas ${item.icon} mr-3 w-5"></i>${item.text}
|
|
</a>
|
|
`).join('')}
|
|
</div>
|
|
<div class="mt-8 pt-8 border-t border-gray-200">
|
|
<p class="text-sm text-gray-500">2024年9月12-15日</p>
|
|
<p class="text-sm text-gray-500">国家会展中心（上海）</p>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// 添加样式
|
|
function addStyles() {
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.nav-container {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.navbar-scrolled {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.navbar-scrolled .nav-container {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
.nav-logo {
|
|
animation: fadeInLeft 0.6s ease-out;
|
|
}
|
|
.nav-link {
|
|
position: relative;
|
|
padding: 0.5rem 0;
|
|
font-weight: 500;
|
|
}
|
|
.menu-icon {
|
|
width: 24px;
|
|
height: 20px;
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.menu-icon span {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #374151;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.menu-icon span:nth-child(1) {
|
|
top: 0;
|
|
}
|
|
.menu-icon span:nth-child(2) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.menu-icon span:nth-child(3) {
|
|
bottom: 0;
|
|
}
|
|
.menu-open .menu-icon span:nth-child(1) {
|
|
transform: rotate(45deg) translate(6px, 6px);
|
|
}
|
|
.menu-open .menu-icon span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
.menu-open .menu-icon span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(6px, -6px);
|
|
}
|
|
.mobile-menu-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 40;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.mobile-menu-overlay.show {
|
|
opacity: 1;
|
|
}
|
|
.mobile-menu.show {
|
|
transform: translateX(0);
|
|
}
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.nav-container {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// 初始化导航
|
|
function initNav() {
|
|
const navElement = document.querySelector('nav') || document.getElementById('navbar');
|
|
if (navElement) {
|
|
// 统一设置导航栏样式
|
|
navElement.className = 'fixed top-0 w-full bg-white z-50 transition-all duration-300';
|
|
navElement.id = 'navbar';
|
|
|
|
// 添加样式
|
|
addStyles();
|
|
|
|
// 更新导航内容
|
|
navElement.innerHTML = generateNavHTML();
|
|
|
|
// 添加滚动效果
|
|
let lastScrollTop = 0;
|
|
window.addEventListener('scroll', function() {
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
// 添加滚动阴影
|
|
if (scrollTop > 50) {
|
|
navElement.classList.add('navbar-scrolled');
|
|
} else {
|
|
navElement.classList.remove('navbar-scrolled');
|
|
}
|
|
|
|
lastScrollTop = scrollTop;
|
|
});
|
|
|
|
// 移动端菜单交互
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
|
const closeMenuButton = document.getElementById('close-menu');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
// 打开菜单
|
|
mobileMenuButton.addEventListener('click', function() {
|
|
mobileMenu.classList.add('show');
|
|
if (mobileMenuOverlay) {
|
|
mobileMenuOverlay.classList.remove('hidden');
|
|
setTimeout(function() {
|
|
mobileMenuOverlay.classList.add('show');
|
|
}, 10);
|
|
}
|
|
mobileMenuButton.classList.add('menu-open');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
|
|
// 关闭菜单功能
|
|
const closeMenu = function() {
|
|
mobileMenu.classList.remove('show');
|
|
if (mobileMenuOverlay) {
|
|
mobileMenuOverlay.classList.remove('show');
|
|
setTimeout(function() {
|
|
mobileMenuOverlay.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
mobileMenuButton.classList.remove('menu-open');
|
|
document.body.style.overflow = '';
|
|
};
|
|
|
|
// 点击关闭按钮
|
|
closeMenuButton.addEventListener('click', closeMenu);
|
|
|
|
// 点击遮罩关闭
|
|
mobileMenuOverlay.addEventListener('click', closeMenu);
|
|
|
|
// 点击菜单项后关闭
|
|
mobileMenu.querySelectorAll('a').forEach(function(link) {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// DOM加载完成后初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initNav);
|
|
} else {
|
|
initNav();
|
|
}
|
|
})(); |