From 183c4125c41a2cebff957483a365d53986c863e5 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期三, 09 四月 2025 08:34:46 +0800
Subject: [PATCH] 注册页面优化
---
src/app/register/page.tsx | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 163 insertions(+), 1 deletions(-)
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 5eb8873..921499b 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -13,11 +13,27 @@
const [verifyCode, setVerifyCode] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [mounted, setMounted] = useState(false);
+ const [particles, setParticles] = useState<Array<{x: number, y: number}>>([]);
- // 纭繚缁勪欢鎸傝浇鍚庡啀鏄剧ず鍔ㄧ敾鏁堟灉
+ // 纭繚缁勪欢鎸傝浇鍚庡啀鏄剧ず鍔ㄧ敾鏁堟灉鍜岀敓鎴愮矑瀛�
useEffect(() => {
setMounted(true);
+ // 鐢熸垚鍥哄畾鐨勭矑瀛愪綅缃�
+ const newParticles = Array(15).fill(null).map(() => ({
+ x: Math.random() * 100,
+ y: Math.random() * 100
+ }));
+ setParticles(newParticles);
}, []);
+
+ // 濡傛灉缁勪欢鏈寕杞斤紝杩斿洖涓�涓姞杞界姸鎬佹垨鑰呯┖鐨勫崰浣嶇
+ if (!mounted) {
+ return (
+ <div className="h-screen w-full flex items-center justify-center relative overflow-hidden">
+ <div className="fixed inset-0 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] z-0"></div>
+ </div>
+ );
+ }
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -107,6 +123,152 @@
<p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">鏁板瓧鍛樺伐骞冲彴 路 鏅烘収璧嬭兘鏈潵</p>
</div>
</Link>
+
+ {/* 浼樺娍璇存槑 - 鏀惧湪Logo鍜屽叕鍙稿悕绉颁笅鏂癸紝娣诲姞绉戞妧鎰熸牱寮� */}
+ <div className="mt-6 p-4 rounded-lg bg-[#131C41]/40 border border-[#6ADBFF]/20 backdrop-blur-sm relative overflow-hidden">
+ <h3 className="text-sm font-medium text-[#6ADBFF] mb-3 flex items-center relative">
+ <span className="w-1.5 h-1.5 rounded-full bg-[#6ADBFF] mr-2 animate-pulse"></span>
+ <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88]">骞冲彴浼樺娍</span>
+ </h3>
+
+ <div className="space-y-2.5 text-[#6ADBFF]/90 text-sm relative">
+ <div className="flex items-start">
+ <span className="text-[#FF6A88] mr-2 mt-0.5">鉁�</span>
+ <p>鏅鸿兘鍔╂墜锛�<span className="text-white font-medium">24/7</span>鍏ㄥぉ鍊欐湇鍔�</p>
+ </div>
+ <div className="flex items-start">
+ <span className="text-[#FF6A88] mr-2 mt-0.5">鉁�</span>
+ <p>澶氬満鏅簲鐢紝<span className="text-white font-medium">鎻愬崌宸ヤ綔鏁堢巼</span></p>
+ </div>
+ <div className="flex items-start">
+ <span className="text-[#FF6A88] mr-2 mt-0.5">鉁�</span>
+ <p>瀹夊叏鍙潬锛�<span className="text-white font-medium">鏁版嵁鍔犲瘑淇濇姢</span></p>
+ </div>
+ <div className="flex items-start">
+ <span className="text-[#FF6A88] mr-2 mt-0.5">鉁�</span>
+ <p>鎸佺画瀛︿範杩涘寲锛�<span className="text-white font-medium">涓嶆柇浼樺寲浣撻獙</span></p>
+ </div>
+ </div>
+
+ <div className="mt-3 pt-2 border-t border-[#6ADBFF]/20 text-[#6ADBFF]/70 text-xs relative">
+ <p className="flex items-center">
+ <span className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 mr-1.5 animate-pulse"></span>
+ <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#6ADBFF]/80 via-[#FF6A88]/80 to-[#6ADBFF]/80">AI椹卞姩 路 鏅鸿兘浜や簰 路 鏁版嵁瀹夊叏</span>
+ </p>
+ </div>
+
+ {/* 鍘熷垱鍔ㄦ�佽儗鏅晥鏋� - 绉戞妧鎰熷拰绁炵鎰� */}
+ <div className="absolute inset-0 pointer-events-none overflow-hidden">
+ {/* 绮掑瓙鏁堟灉 */}
+ <div className="absolute inset-0">
+ {particles.map((particle, i) => (
+ <motion.div
+ key={i}
+ className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]/40"
+ initial={{
+ x: `${particle.x}%`,
+ y: `${particle.y}%`,
+ opacity: 0
+ }}
+ animate={{
+ x: `${particle.x}%`,
+ y: `${particle.y}%`,
+ opacity: [0, 0.8, 0],
+ scale: [0, 1, 0]
+ }}
+ transition={{
+ duration: 3,
+ repeat: Infinity,
+ repeatType: "reverse",
+ ease: "easeInOut",
+ delay: i * 0.2
+ }}
+ />
+ ))}
+ </div>
+
+ {/* 鑳介噺娉㈢汗鏁堟灉 */}
+ <motion.div
+ className="absolute top-1/2 left-1/2 w-24 h-24 rounded-full border border-[#6ADBFF]/30"
+ initial={{ scale: 0.5, opacity: 0 }}
+ animate={{
+ scale: [0.5, 1.2, 0.5],
+ opacity: [0, 0.3, 0]
+ }}
+ transition={{
+ duration: 4,
+ repeat: Infinity,
+ ease: "easeInOut"
+ }}
+ />
+
+ {/* 鏁版嵁娴佹晥鏋� */}
+ <div className="absolute inset-0">
+ {[...Array(3)].map((_, i) => (
+ <motion.div
+ key={i}
+ className="absolute h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"
+ style={{
+ top: `${30 + i * 30}%`,
+ left: 0,
+ right: 0
+ }}
+ initial={{ opacity: 0, scaleX: 0 }}
+ animate={{
+ opacity: [0, 0.5, 0],
+ scaleX: [0, 1, 0]
+ }}
+ transition={{
+ duration: 3,
+ repeat: Infinity,
+ repeatDelay: i * 1,
+ ease: "easeInOut"
+ }}
+ />
+ ))}
+ </div>
+
+ {/* 绁炵绗﹀彿鏁堟灉 */}
+ <div className="absolute inset-0">
+ {[...Array(5)].map((_, i) => (
+ <motion.div
+ key={i}
+ className="absolute text-[#6ADBFF]/20 text-xs font-mono"
+ style={{
+ top: `${Math.random() * 100}%`,
+ left: `${Math.random() * 100}%`,
+ }}
+ initial={{ opacity: 0 }}
+ animate={{
+ opacity: [0, 0.5, 0],
+ }}
+ transition={{
+ duration: 5 + Math.random() * 3,
+ repeat: Infinity,
+ repeatDelay: i * 2,
+ ease: "easeInOut"
+ }}
+ >
+ {['01', '10', 'AI', '鈭�', '鈿�'][i]}
+ </motion.div>
+ ))}
+ </div>
+
+ {/* 鑳介噺鍦烘晥鏋� */}
+ <motion.div
+ className="absolute inset-0 bg-gradient-radial from-[#6ADBFF]/5 to-transparent"
+ initial={{ opacity: 0 }}
+ animate={{
+ opacity: [0.1, 0.3, 0.1],
+ }}
+ transition={{
+ duration: 5,
+ repeat: Infinity,
+ ease: "easeInOut"
+ }}
+ />
+ </div>
+ </div>
</div>
</div>
--
Gitblit v1.9.3