"use client";
|
|
import Link from 'next/link';
|
import Image from 'next/image';
|
import { useState, useEffect } from 'react';
|
|
const Navbar = () => {
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
const [activeMenu, setActiveMenu] = useState('');
|
|
// 监听滚动事件，为导航栏添加滚动效果
|
useEffect(() => {
|
const handleScroll = () => {
|
if (window.scrollY > 10) {
|
setScrolled(true);
|
} else {
|
setScrolled(false);
|
}
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
return () => window.removeEventListener('scroll', handleScroll);
|
}, []);
|
|
return (
|
<nav
|
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
|
scrolled
|
? 'bg-gradient-to-r from-[#1E2B63]/95 to-[#0A1033]/95 backdrop-blur-md shadow-lg py-2'
|
: 'bg-gradient-to-r from-[#1E2B63] to-[#0A1033] py-2'
|
}`}
|
>
|
<div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15">
|
<div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
|
<div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div>
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
<div className="flex items-center justify-between">
|
{/* Logo区域 */}
|
<div className="flex-shrink-0 relative z-10 group">
|
<Link href="/" className="flex items-center">
|
{/* Logo主体 */}
|
<div className="flex items-center">
|
<div className="relative w-11 h-11">
|
{/* 基础Logo背景 */}
|
<div className="absolute inset-0 rounded-full bg-gradient-to-tr from-[#1E2B63] to-[#131C41] shadow-inner"></div>
|
|
{/* 发光圆环 - 闪烁效果 */}
|
<div className="absolute inset-0 rounded-full border-[1.5px] border-[#88dbff] animate-logo-pulse"></div>
|
|
{/* Logo图片 */}
|
<Image
|
src="/images/logo.jpg"
|
alt="帷幄君成Logo"
|
width={44}
|
height={44}
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] h-[85%] rounded-full object-cover z-10"
|
priority
|
/>
|
</div>
|
|
{/* 公司名称 */}
|
<div className="ml-3 relative">
|
<h1 className="text-xl font-bold text-white tracking-wide relative">
|
帷幄君成
|
<span className="absolute -bottom-0.5 left-0 w-full h-[2px] bg-gradient-to-r
|
from-[#FF6A88] to-[#6ADBFF]"></span>
|
</h1>
|
</div>
|
</div>
|
</Link>
|
</div>
|
|
{/* 中央装饰元素 */}
|
<div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
|
<div className="relative h-4 w-32">
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
<span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span>
|
</div>
|
<div className="absolute top-1/2 left-0 right-0 h-[1px]">
|
<div className="h-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
|
</div>
|
</div>
|
</div>
|
|
{/* 导航菜单 */}
|
<div className="hidden md:flex items-center space-x-8">
|
<Link
|
href="/platform"
|
className="relative px-3 py-2 text-gray-100 text-sm font-medium"
|
onMouseEnter={() => setActiveMenu('platform')}
|
onMouseLeave={() => setActiveMenu('')}
|
>
|
<span className="relative z-10">数字员工平台</span>
|
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
|
transition-all duration-300 ${activeMenu === 'platform' ? 'w-full' : 'w-0'}`}></span>
|
</Link>
|
|
<Link
|
href="/chat"
|
className="relative px-3 py-2 text-gray-100 text-sm font-medium"
|
onMouseEnter={() => setActiveMenu('chat')}
|
onMouseLeave={() => setActiveMenu('')}
|
>
|
<span className="relative z-10">聊天室</span>
|
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
|
transition-all duration-300 ${activeMenu === 'chat' ? 'w-full' : 'w-0'}`}></span>
|
</Link>
|
|
<Link
|
href="/training"
|
className="relative px-3 py-2 text-gray-100 text-sm font-medium"
|
onMouseEnter={() => setActiveMenu('training')}
|
onMouseLeave={() => setActiveMenu('')}
|
>
|
<span className="relative z-10">训练场</span>
|
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
|
transition-all duration-300 ${activeMenu === 'training' ? 'w-full' : 'w-0'}`}></span>
|
</Link>
|
|
{/* 登录按钮 */}
|
<div className="relative group ml-6">
|
<button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2
|
rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)]
|
hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300">
|
<span className="relative z-10">登录</span>
|
<div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0
|
group-hover:opacity-100 transition-opacity duration-500"></div>
|
</button>
|
</div>
|
</div>
|
|
{/* 移动端菜单按钮 */}
|
<div className="md:hidden">
|
<button
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
|
aria-label="Toggle navigation menu"
|
>
|
<div className="relative">
|
<span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
|
transform ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
|
<span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
|
mt-1 ${isMenuOpen ? 'opacity-0' : ''}`}></span>
|
<span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
|
mt-1 transform ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
|
</div>
|
</button>
|
</div>
|
</div>
|
</div>
|
|
{/* 移动端菜单 */}
|
<div
|
className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
|
isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
|
}`}
|
>
|
<div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033]
|
border-t border-[#6ADBFF]/10">
|
<Link
|
href="/platform"
|
className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
|
hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
|
>
|
数字员工平台
|
</Link>
|
|
<Link
|
href="/chat"
|
className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
|
hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
|
>
|
聊天室
|
</Link>
|
|
<Link
|
href="/training"
|
className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
|
hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
|
>
|
训练场
|
</Link>
|
|
<div className="pt-3 pb-1">
|
<button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190]
|
text-white font-medium px-6 py-2 rounded-md">
|
登录
|
</button>
|
</div>
|
</div>
|
</div>
|
</nav>
|
);
|
};
|
|
export default Navbar;
|
|
// 添加到CSS文件中的全局样式
|
// .hover:shadow-glow:hover {
|
// box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
|
// }
|
