From a18dcf07d346f573043486b460e82ccd0b78dfff Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 14:36:25 +0800
Subject: [PATCH] 注册页面优化
---
src/app/register/page.tsx | 192 +++++++++++++++++++++++-------------------------
1 files changed, 92 insertions(+), 100 deletions(-)
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 9ea91e1..bb5dc90 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -15,6 +15,14 @@
const [mounted, setMounted] = useState(false);
const [countdown, setCountdown] = useState(0);
+ // 娣诲姞婊氬姩閿佸畾
+ useEffect(() => {
+ document.body.style.overflow = 'hidden';
+ return () => {
+ document.body.style.overflow = 'unset';
+ };
+ }, []);
+
// 鍊掕鏃堕�昏緫
useEffect(() => {
if (countdown > 0) {
@@ -23,9 +31,8 @@
}
}, [countdown]);
- // 纭繚缁勪欢鎸傝浇鍚庡啀鏄剧ず鍔ㄧ敾鏁堟灉
+ // 浼樺寲鍔ㄧ敾鎬ц兘
useEffect(() => {
- // 浣跨敤 requestAnimationFrame 纭繚鍦ㄤ笅涓�甯ф墽琛岋紝鎻愰珮鍔ㄧ敾娴佺晠搴�
const animationFrame = requestAnimationFrame(() => {
setMounted(true);
});
@@ -68,44 +75,43 @@
};
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 className="h-screen w-full flex items-center justify-center relative overflow-hidden fixed">
+ {/* 鑳屾櫙鏁堟灉 - 浼樺寲鎬ц兘 */}
+ <div className="fixed inset-0 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] z-0 will-change-transform"></div>
- {/* 绁炵粡缃戠粶绾挎潯鑳屾櫙 */}
- <div className="fixed inset-0 z-0 opacity-30">
- <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
- <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
- <div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
- <div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
+ {/* 绁炵粡缃戠粶绾挎潯鑳屾櫙 - 浼樺寲鎬ц兘 */}
+ <div className="fixed inset-0 z-0 opacity-30 will-change-transform">
+ <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
+ <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
+ <div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
+ <div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
- {/* 绁炵粡缃戠粶杩炴帴鐐� */}
- <div className="absolute top-[20%] left-[15%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse"></div>
- <div className="absolute top-[60%] left-[75%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse" style={{ animationDelay: '1.5s' }}></div>
+ {/* 绁炵粡缃戠粶杩炴帴鐐� - 浼樺寲鎬ц兘 */}
+ <div className="absolute top-[20%] left-[15%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse transform-gpu"></div>
+ <div className="absolute top-[60%] left-[75%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse transform-gpu" style={{ animationDelay: '1.5s' }}></div>
- {/* 杩炴帴绾� */}
- <div className="absolute top-[20%] left-[15%] w-[70%] h-[1px] bg-gradient-to-r from-[#6ADBFF]/80 to-transparent animate-pulse"></div>
+ {/* 杩炴帴绾� - 浼樺寲鎬ц兘 */}
+ <div className="absolute top-[20%] left-[15%] w-[70%] h-[1px] bg-gradient-to-r from-[#6ADBFF]/80 to-transparent animate-pulse transform-gpu"></div>
- {/* 鏁版嵁鐐硅儗鏅� */}
- <div className="absolute inset-0" style={{
+ {/* 鏁版嵁鐐硅儗鏅� - 浼樺寲鎬ц兘 */}
+ <div className="absolute inset-0 transform-gpu" style={{
backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)',
backgroundSize: '20px 20px'
}}></div>
- {/* 鎵弿绾� */}
- <div className="absolute inset-0">
- <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/5 to-transparent animate-scanline" style={{ animationDuration: '12s' }}></div>
+ {/* 鎵弿绾� - 浼樺寲鎬ц兘 */}
+ <div className="absolute inset-0 transform-gpu">
+ <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/5 to-transparent animate-scanline transform-gpu" style={{ animationDuration: '12s' }}></div>
</div>
</div>
- {/* 娉ㄥ唽鍗＄墖 */}
+ {/* 娉ㄥ唽鍗＄墖 - 浼樺寲鍔ㄧ敾鎬ц兘 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: mounted ? 1 : 0, y: mounted ? 0 : 20 }}
transition={{
- duration: 0.5,
- ease: [0.25, 0.1, 0.25, 1],
- staggerChildren: 0.1
+ duration: 0.5,
+ ease: [0.23, 1, 0.32, 1]
}}
className="relative z-10 w-full max-w-3xl flex rounded-2xl backdrop-blur-lg bg-[#1E2B63]/40 border border-[#6ADBFF]/20 shadow-xl overflow-hidden gpu-accelerated"
>
@@ -220,93 +226,79 @@
{/* 娉ㄥ唽琛ㄥ崟 */}
<form onSubmit={handleSubmit} className="space-y-4">
{/* 鐢ㄦ埛鍚� */}
- <div className="space-y-1">
- <label className="block text-xs text-[#6ADBFF]/80 mb-1">鐢ㄦ埛鍚�</label>
- <div className="relative group">
- <input
- type="text"
- value={username}
- onChange={(e) => setUsername(e.target.value)}
- className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
- required
- />
- <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
- </div>
+ <div className="relative group">
+ <input
+ type="text"
+ value={username}
+ onChange={(e) => setUsername(e.target.value)}
+ className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ required
+ />
+ <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
</div>
{/* 瀵嗙爜 */}
- <div className="space-y-1">
- <label className="block text-xs text-[#6ADBFF]/80 mb-1">瀵嗙爜</label>
- <div className="relative group">
- <input
- type="password"
- value={password}
- onChange={(e) => setPassword(e.target.value)}
- className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
- required
- />
- <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
- </div>
+ <div className="relative group">
+ <input
+ type="password"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ required
+ />
+ <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
</div>
{/* 纭瀵嗙爜 */}
- <div className="space-y-1">
- <label className="block text-xs text-[#6ADBFF]/80 mb-1">纭瀵嗙爜</label>
- <div className="relative group">
- <input
- type="password"
- value={confirmPassword}
- onChange={(e) => setConfirmPassword(e.target.value)}
- className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
- required
- />
- <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
- </div>
+ <div className="relative group">
+ <input
+ type="password"
+ value={confirmPassword}
+ onChange={(e) => setConfirmPassword(e.target.value)}
+ className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
+ placeholder="璇风‘璁ゅ瘑鐮�"
+ required
+ />
+ <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
</div>
{/* 鎵嬫満鍙风爜 */}
- <div className="space-y-1">
- <label className="block text-xs text-[#6ADBFF]/80 mb-1">鎵嬫満鍙风爜</label>
- <div className="relative group">
- <input
- type="tel"
- value={phone}
- onChange={(e) => setPhone(e.target.value)}
- className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
- pattern="[0-9]{11}"
- required
- />
- <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
- </div>
+ <div className="relative group">
+ <input
+ type="tel"
+ value={phone}
+ onChange={(e) => setPhone(e.target.value)}
+ className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
+ placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�"
+ pattern="[0-9]{11}"
+ required
+ />
+ <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
</div>
{/* 楠岃瘉鐮� */}
- <div className="space-y-1">
- <label className="block text-xs text-[#6ADBFF]/80 mb-1">楠岃瘉鐮�</label>
- <div className="flex space-x-2">
- <div className="relative group flex-1">
- <input
- type="text"
- value={verifyCode}
- onChange={(e) => setVerifyCode(e.target.value)}
- className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
- required
- />
- <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
- </div>
- <button
- type="button"
- onClick={sendVerifyCode}
- disabled={countdown > 0 || !phone || phone.length !== 11}
- className={`px-4 py-2 rounded-lg border text-sm transition-all duration-300 whitespace-nowrap ${
- countdown > 0 || !phone || phone.length !== 11
- ? 'border-[#6ADBFF]/20 text-[#6ADBFF]/40 bg-[#131C41]/20 cursor-not-allowed'
- : 'border-[#6ADBFF]/40 text-[#6ADBFF] bg-[#131C41]/40 hover:bg-[#131C41]/70 hover:border-[#6ADBFF]/60'
- }`}
- >
- {countdown > 0 ? `${countdown}绉掑悗閲嶈瘯` : '鑾峰彇楠岃瘉鐮�'}
- </button>
- </div>
+ <div className="relative group flex">
+ <input
+ type="text"
+ value={verifyCode}
+ onChange={(e) => setVerifyCode(e.target.value)}
+ className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ required
+ />
+ <button
+ type="button"
+ onClick={sendVerifyCode}
+ disabled={countdown > 0 || !phone || phone.length !== 11}
+ className={`ml-2 px-3 py-2 text-xs text-[#6ADBFF] bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md hover:bg-[#131C41] hover:border-[#6ADBFF]/60 transition-all duration-300 whitespace-nowrap ${
+ countdown > 0 || !phone || phone.length !== 11 ? 'opacity-50 cursor-not-allowed' : ''
+ }`}
+ >
+ {countdown > 0 ? `${countdown}绉掑悗閲嶈瘯` : '鑾峰彇楠岃瘉鐮�'}
+ </button>
+ <div className="absolute bottom-0 left-0 w-[calc(100%-4rem)] h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
</div>
{/* 闅愮澹版槑 */}
--
Gitblit v1.9.3