From 846f92d2fe08ab9b8b14e8b949f00bb4529974d2 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 15:09:17 +0800
Subject: [PATCH] 导航栏优化
---
src/components/layout/Navbar.tsx | 214 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 170 insertions(+), 44 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index db6347c..b3cae67 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -2,77 +2,203 @@
import Link from 'next/link';
import Image from 'next/image';
-import { useState } from 'react';
+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 bg-[#2F3C7E] text-white z-50">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="flex items-center justify-between h-16">
- {/* Logo */}
- <div className="flex-shrink-0">
+ <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">
- <div className="w-8 h-8 bg-[#e1c7f1] rounded-lg flex items-center justify-center">
- <span className="text-[#2F3C7E] text-sm font-bold">甯�</span>
+ {/* 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>
- <span className="ml-2 text-xl font-bold">甯峰箘鍚涙垚</span>
</Link>
</div>
- {/* Desktop Menu */}
+ {/* 涓ぎ瑁呴グ鍏冪礌 */}
+ <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="hover:text-[#FBEAEB]">鏁板瓧鍛樺伐骞冲彴</Link>
- <Link href="/chat" className="hover:text-[#FBEAEB]">鑱婂ぉ瀹�</Link>
- <Link href="/training" className="hover:text-[#FBEAEB]">璁粌鍦�</Link>
+ <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>
- {/* Login Button */}
- <div className="hidden md:flex items-center">
- <button className="bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
- 鐧诲綍
- </button>
- </div>
-
- {/* Mobile Menu Button */}
+ {/* 绉诲姩绔彍鍗曟寜閽� */}
<div className="md:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
- className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-[#FBEAEB]"
+ className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
+ aria-label="Toggle navigation menu"
>
- <svg
- className="h-6 w-6"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- {isMenuOpen ? (
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
- ) : (
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
- )}
- </svg>
+ <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>
- {/* Mobile Menu */}
- {isMenuOpen && (
- <div className="md:hidden">
- <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
- <Link href="/platform" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">鏁板瓧鍛樺伐骞冲彴</Link>
- <Link href="/chat" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">鑱婂ぉ瀹�</Link>
- <Link href="/training" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">璁粌鍦�</Link>
- <button className="w-full mt-4 bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
+ {/* 绉诲姩绔彍鍗� */}
+ <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;
\ No newline at end of file
+export default Navbar;
+
+// 娣诲姞鍒癈SS鏂囦欢涓殑鍏ㄥ眬鏍峰紡
+// .hover:shadow-glow:hover {
+// box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
+// }
\ No newline at end of file
--
Gitblit v1.9.3