From 983308482bbc5a9b34160a612ce46af74ce5ae9c Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期三, 09 四月 2025 16:42:59 +0800
Subject: [PATCH] 导航栏优化
---
src/components/layout/Navbar.tsx | 36 ++++++++++++++++++------------------
1 files changed, 18 insertions(+), 18 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 74a7afb..e1b9080 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -25,14 +25,14 @@
return (
<nav
- className={`fixed top-0 left-0 w-full z-50 transition-all duration-700 ${
+ className={`fixed top-0 z-50 transition-all duration-700 h-16 w-full lg:w-[1260px] ${
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'
}`}
style={{
- width: '1260px',
- height: '64px'
+ left: '50%',
+ transform: 'translateX(-50%)'
}}
>
{/* AI绉戞妧鎰熻儗鏅晥鏋滃眰 - 璋冩暣涓烘洿鏄庢樉浣嗕笉骞叉壈浜や簰 */}
@@ -90,8 +90,8 @@
<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">
- <div className="flex items-center justify-between">
+ <div className="w-full px-4 md:px-6 lg:px-8 h-full mx-auto relative">
+ <div className="flex items-center justify-between h-full">
{/* Logo鍖哄煙 */}
<div className="flex-shrink-0 relative z-10 group">
<a href="/" className="flex items-center">
@@ -128,7 +128,7 @@
</div>
{/* 绾㈡涓殑鍔ㄦ�佺鎶�鎰熷渾鍦� - 鏇存煍鍜岀殑棰滆壊 */}
- <div className="absolute left-[230px] top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+ <div className="absolute left-[120px] md:left-[180px] lg: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>
@@ -156,10 +156,10 @@
</div>
{/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */}
- <div className="hidden md:flex items-center space-x-8 relative z-20">
+ <div className="hidden md:flex items-center space-x-4 lg:space-x-8 relative z-20">
<a
href="/ai-scene"
- className="relative px-3 py-2 text-sm font-medium"
+ className="relative px-2 lg:px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('ai-scene')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -170,7 +170,7 @@
<Link
href="/chat"
- className="relative px-3 py-2 text-sm font-medium"
+ className="relative px-2 lg:px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('chat')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -181,7 +181,7 @@
<Link
href="/training"
- className="relative px-3 py-2 text-sm font-medium"
+ className="relative px-2 lg:px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('training')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -192,7 +192,7 @@
{/* 鐧诲綍鎸夐挳 */}
<div className="relative group">
- <a href="/login" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
+ <a href="/login" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
<span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">鐧诲綍</span>
{/* 閲忓瓙鍏夌嚎鏁堟灉 */}
@@ -216,7 +216,7 @@
{/* 娉ㄥ唽鎸夐挳 */}
<div className="relative group -ml-2">
- <a href="/register" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button">
+ <a href="/register" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button">
<span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300 quantum-pulse">娉ㄥ唽</span>
{/* 閲忓瓙鍏夌嚎鏁堟灉 */}
@@ -243,7 +243,7 @@
<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"
+ className="relative w-10 h-10 flex items-center justify-center focus:outline-none cursor-pointer"
aria-label="Toggle navigation menu"
>
<div className="relative">
@@ -270,7 +270,7 @@
<a
href="/ai-scene"
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"
+ hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
AI鍦烘櫙妯℃嫙
</a>
@@ -278,7 +278,7 @@
<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"
+ hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
鑱婂ぉ瀹�
</Link>
@@ -286,13 +286,13 @@
<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"
+ hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
璁粌鍦�
</Link>
<div className="flex space-x-2 px-4 py-3">
- <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group">
+ <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group cursor-pointer">
<span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">鐧诲綍</span>
{/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
@@ -302,7 +302,7 @@
</div>
</Link>
- <Link href="/register" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] text-white font-medium group">
+ <Link href="/register" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] text-white font-medium group cursor-pointer">
<span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300">娉ㄥ唽</span>
{/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
--
Gitblit v1.9.3