From a18dcf07d346f573043486b460e82ccd0b78dfff Mon Sep 17 00:00:00 2001 From: hongjli <3117313295@qq.com> Date: 星期二, 08 四月 2025 14:36:25 +0800 Subject: [PATCH] 注册页面优化 --- src/components/layout/Navbar.tsx | 54 +++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 6a9a5be..55f961f 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -154,14 +154,14 @@ {/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */} <div className="hidden md:flex items-center space-x-8 relative z-20"> <Link - href="/platform" + href="/ai-scene" className="relative px-3 py-2 text-sm font-medium" - onMouseEnter={() => setActiveMenu('platform')} + onMouseEnter={() => setActiveMenu('ai-scene')} onMouseLeave={() => setActiveMenu('')} > - <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>鏁板瓧鍛樺伐骞冲彴</span> + <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'ai-scene' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>AI鍦烘櫙妯℃嫙</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> + transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span> </Link> <Link @@ -188,13 +188,28 @@ {/* 鐧诲綍鎸夐挳 */} <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> + <Link 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"> + <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">鐧诲綍</span> + + {/* 閲忓瓙鍏夌嚎鏁堟灉 */} + <div className="absolute inset-0 overflow-hidden"> + {/* 搴曞眰杈夊厜鏁堟灉 */} + <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div> + + {/* 閲忓瓙鎵弿绾� */} + <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div> + + {/* 閲忓瓙鏁版嵁娴� */} + <div className="absolute top-0 h-full w-full"> + <div className="absolute left-[20%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.1s'}}></div> + <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.2s'}}></div> + <div className="absolute left-[80%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.3s'}}></div> + </div> + + {/* 閲忓瓙杈圭紭鏁堟灉 */} + <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> + </div> + </Link> </div> </div> @@ -227,11 +242,11 @@ <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] border-t border-[#6ADBFF]/10"> <Link - href="/platform" + 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" > - 鏁板瓧鍛樺伐骞冲彴 + AI鍦烘櫙妯℃嫙 </Link> <Link @@ -251,10 +266,15 @@ </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> + <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"> + <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">鐧诲綍</span> + + {/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */} + <div className="absolute inset-0 overflow-hidden"> + <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div> + <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> + </div> + </Link> </div> </div> </div> -- Gitblit v1.9.3