From 92405300f139ed1a7632b6601505e8dcdbc3a6e9 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 16:01:16 +0800
Subject: [PATCH] 导航栏优化
---
src/components/layout/Navbar.tsx | 104 ++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 85 insertions(+), 19 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index b3cae67..6a9a5be 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -25,15 +25,65 @@
return (
<nav
- className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
+ className={`fixed top-0 left-0 w-full z-50 transition-all duration-700 ${
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>
+ {/* AI绉戞妧鎰熻儗鏅晥鏋滃眰 - 璋冩暣涓烘洿鏄庢樉浣嗕笉骞叉壈浜や簰 */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none">
+ {/* 绁炵粡缃戠粶杩炴帴灞� - 鎻愰珮瀵规瘮搴﹀拰鍙鎬� */}
+ <div className="absolute inset-0">
+ {/* 姘村钩杩炴帴 - 灏嗕綅缃洿楂樹互閬垮厤涓庤彍鍗曟枃瀛楀お闈犺繎 */}
+ <div className="absolute top-[25%] left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent animate-neural-pulse"></div>
+
+ {/* 鍨傜洿杩炴帴 - 浠呬繚鐣欏乏渚т絾澧炲己 */}
+ <div className="absolute top-0 bottom-0 left-[15%] w-[1.5px] bg-gradient-to-b from-transparent via-[#6ADBFF]/60 to-transparent animate-neural-pulse-delay-2"></div>
+ </div>
+
+ {/* 閲忓瓙娉㈠姩灞� - 澧炲己娉㈠舰鏁堟灉 */}
+ <div className="absolute inset-x-0 bottom-0 h-full flex items-end justify-center overflow-hidden">
+ <div className="w-[800px] h-[40px] relative">
+ <svg className="absolute inset-0 w-full h-full animate-quantum-wave" viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0,20 Q100,40 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient1)" strokeWidth="1.5" opacity="0.25" />
+ <path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1.5" opacity="0.25" />
+ <defs>
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0" />
+ <stop offset="50%" stopColor="#6ADBFF" stopOpacity="1" />
+ <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0" />
+ </linearGradient>
+ <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#FF6A88" stopOpacity="0" />
+ <stop offset="50%" stopColor="#FF6A88" stopOpacity="1" />
+ <stop offset="100%" stopColor="#FF6A88" stopOpacity="0" />
+ </linearGradient>
+ </defs>
+ </svg>
+ </div>
+ </div>
+
+ {/* 澧炲姞绁炵绉戞妧鎰熺殑鏁版嵁娴佹晥鏋� */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-85">
+ {/* 鏁版嵁鏍肩偣鑳屾櫙 */}
+ <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
+
+ {/* 鍨傜洿鏁版嵁娴佺嚎鏉� */}
+ <div className="absolute h-full w-[1px] left-[25%] bg-gradient-to-b from-transparent via-[#6ADBFF]/40 to-transparent animate-dataflowY"></div>
+ <div className="absolute h-full w-[1px] left-[75%] bg-gradient-to-b from-transparent via-[#FF6A88]/40 to-transparent animate-dataflowY" style={{ animationDelay: '2s' }}></div>
+
+ {/* 鎵弿绾挎晥鏋� */}
+ <div className="absolute top-0 left-0 w-full h-[150%] bg-gradient-to-b from-transparent via-[#6ADBFF]/10 to-transparent animate-scanline" style={{ animationDuration: '8s' }}></div>
+ </div>
+
+ {/* AI鏁版嵁鎵弿灞� - 澧炲己鍙搴� */}
+ <div className="absolute inset-0 pointer-events-none">
+ <div className="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/15 to-[#6ADBFF]/0 animate-data-scan"></div>
+ </div>
+
+ {/* 杈规瑁呴グ - 鎻愰珮浜害 */}
+ <div className="absolute top-0 left-0 w-full h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
@@ -73,49 +123,65 @@
</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 className="absolute left-[230px] top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+ <div className="relative w-8 h-8">
+ {/* 澶栧湀 - 鑴夊姩鏁堟灉锛岄檷浣庝笉閫忔槑搴� */}
+ <div className="absolute inset-0 rounded-full border-[1.5px] border-[#6ADBFF]/50 bg-[#1E2B63]/30 animate-tech-circle-pulse"></div>
+
+ {/* 鍐呭湀 - 鏃嬭浆娓愬彉鏁堟灉锛岄檷浣庝笉閫忔槑搴� */}
+ <div className="absolute inset-[3px] rounded-full border border-[#6ADBFF]/30 bg-[#131C41]/40 animate-tech-circle-rotate"></div>
+
+ {/* 涓績鐐� - 闂儊鏁堟灉锛岄檷浣庝寒搴� */}
+ <div className="absolute inset-0 flex items-center justify-center">
+ <div className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-tech-center-blink"></div>
</div>
+
+ {/* 鍏夋檿鏁堟灉锛屾洿鍔犲井濡� */}
+ <div className="absolute -inset-1 rounded-full bg-[#6ADBFF]/3 blur-sm animate-tech-glow-pulse"></div>
+ </div>
+ </div>
+
+ {/* 涓ぎ瑁呴グ鍏冪礌 - 绉婚櫎涓ぎ闂儊鐐� */}
+ <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none">
+ <div className="relative h-4 w-32">
<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">
+ {/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */}
+ <div className="hidden md:flex items-center space-x-8 relative z-20">
<Link
href="/platform"
- className="relative px-3 py-2 text-gray-100 text-sm font-medium"
+ className="relative px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('platform')}
onMouseLeave={() => setActiveMenu('')}
>
- <span className="relative z-10">鏁板瓧鍛樺伐骞冲彴</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>鏁板瓧鍛樺伐骞冲彴</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"
+ className="relative px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('chat')}
onMouseLeave={() => setActiveMenu('')}
>
- <span className="relative z-10">鑱婂ぉ瀹�</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'chat' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>鑱婂ぉ瀹�</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"
+ className="relative px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('training')}
onMouseLeave={() => setActiveMenu('')}
>
- <span className="relative z-10">璁粌鍦�</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'training' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>璁粌鍦�</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>
@@ -133,7 +199,7 @@
</div>
{/* 绉诲姩绔彍鍗曟寜閽� */}
- <div className="md:hidden">
+ <div className="md:hidden relative z-20">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
@@ -154,7 +220,7 @@
{/* 绉诲姩绔彍鍗� */}
<div
- className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
+ className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden relative z-20 ${
isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
}`}
>
--
Gitblit v1.9.3