"use client";
|
|
import { useState, useEffect } from 'react';
|
import Image from 'next/image';
|
import { motion } from 'framer-motion';
|
import Link from 'next/link';
|
|
export default function LoginPage() {
|
const [email, setEmail] = useState('');
|
const [password, setPassword] = useState('');
|
const [phone, setPhone] = useState('');
|
const [verifyCode, setVerifyCode] = useState('');
|
const [isLoading, setIsLoading] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
const [loginMethod, setLoginMethod] = useState<'password' | 'sms'>('password');
|
|
// 确保组件挂载后再显示动画效果
|
useEffect(() => {
|
// 使用 requestAnimationFrame 确保在下一帧执行，提高动画流畅度
|
const animationFrame = requestAnimationFrame(() => {
|
setMounted(true);
|
});
|
|
return () => cancelAnimationFrame(animationFrame);
|
}, []);
|
|
const handleSubmit = (e: React.FormEvent) => {
|
e.preventDefault();
|
setIsLoading(true);
|
|
// 模拟登录请求
|
setTimeout(() => {
|
setIsLoading(false);
|
// 这里应该添加实际登录逻辑
|
}, 2000);
|
};
|
|
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="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="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-[70%] h-[1px] bg-gradient-to-r from-[#6ADBFF]/80 to-transparent animate-pulse"></div>
|
|
{/* 数据点背景 */}
|
<div className="absolute inset-0" 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>
|
</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
|
}}
|
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"
|
>
|
{/* 卡片内部装饰 */}
|
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
|
{/* 左侧Logo和公司名 - 水平排列 */}
|
<div className="w-2/5 bg-[#131C41]/60 p-8 flex flex-col items-center justify-between">
|
{/* Logo和公司名部分 - 缩短与二维码的距离 */}
|
<div className="w-full flex flex-col items-center justify-start">
|
<div className="mb-4 relative overflow-visible">
|
<Link href="/" className="group flex items-center relative">
|
<div className="relative w-16 h-16 transition-all duration-500 overflow-visible" style={{ isolation: 'isolate' }}>
|
{/* 基础背景圆 */}
|
<div className="absolute inset-0 rounded-full bg-[#131C41] z-10"></div>
|
|
{/* Logo背景光环 - 限制范围 */}
|
<div className="absolute inset-0 rounded-full border-2 border-[#6ADBFF]/70 animate-logo-pulse z-10"></div>
|
|
{/* 底层光晕效果 */}
|
<div className="absolute -inset-2 rounded-full bg-[#6ADBFF]/10 blur-lg animate-pulse z-0"></div>
|
|
{/* Logo - 最高层级 */}
|
<Image
|
src="/images/logo.jpg"
|
alt="帷幄君成Logo"
|
width={64}
|
height={64}
|
className="rounded-full object-cover relative z-30"
|
style={{ display: 'block', objectFit: 'cover', width: '100%', height: '100%' }}
|
priority
|
/>
|
|
{/* 悬停特效容器 - 在Logo下层 */}
|
<div className="absolute inset-0 rounded-full z-20 overflow-hidden pointer-events-none">
|
{/* 悬停时的扫描线 - 科技感 */}
|
<div className="absolute inset-0 rounded-full overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
<div className="absolute top-0 -left-[100%] right-0 h-[2px] group-hover:left-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out"></div>
|
<div className="absolute bottom-0 left-full right-0 h-[2px] group-hover:left-[-100%] w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out delay-200"></div>
|
</div>
|
|
{/* 悬停时的量子数据流效果 */}
|
<div className="absolute inset-0 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
<div className="w-[1px] h-0 group-hover:h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-300"></div>
|
<div className="h-[1px] w-0 group-hover:w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-400"></div>
|
</div>
|
</div>
|
|
{/* 悬停时出现在背景的扩散效果 - 限制在Logo */}
|
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-0">
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 group-hover:w-[120%] group-hover:h-[120%] rounded-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 transition-all duration-1000 blur-md"></div>
|
</div>
|
|
{/* 额外阴影效果增强视觉分离 */}
|
<div className="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-100 shadow-[0_0_15px_rgba(106,219,255,0.3)] transition-opacity duration-500 z-5"></div>
|
</div>
|
|
<div className="ml-4 relative z-0 transition-transform duration-500">
|
<h1 className="text-2xl font-bold text-white mb-1 relative inline-block group-hover:text-[#6ADBFF] transition-colors duration-500">
|
帷幄君成
|
<span className="absolute -bottom-1 left-0 w-full h-[2px] bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] group-hover:animate-pulse"></span>
|
|
{/* 悬停时的字体光效 */}
|
<span className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 blur-sm"></span>
|
</h1>
|
|
<p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">数字员工平台 · 智慧赋能未来</p>
|
|
{/* 悬停时出现的微粒子 - 均匀分布在周围 */}
|
<div className="absolute -right-2 top-1/2 w-1 h-1 rounded-full bg-[#6ADBFF] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-300 group-hover:animate-float"></div>
|
<div className="absolute right-0 bottom-0 w-[3px] h-[3px] rounded-full bg-[#FF6A88] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-500 group-hover:animate-float"></div>
|
<div className="absolute -left-1 top-0 w-[2px] h-[2px] rounded-full bg-[#6ADBFF] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-400 group-hover:animate-float"></div>
|
<div className="absolute left-1/2 -top-2 w-[1.5px] h-[1.5px] rounded-full bg-[#6ADBFF]/80 opacity-0 group-hover:opacity-100 transition-all duration-700 delay-200 group-hover:animate-float"></div>
|
<div className="absolute right-1/4 -bottom-1 w-[1px] h-[1px] rounded-full bg-[#FF6A88]/80 opacity-0 group-hover:opacity-100 transition-all duration-700 delay-350 group-hover:animate-float"></div>
|
</div>
|
</Link>
|
</div>
|
|
{/* 分隔线 - 减小上下边距 */}
|
<div className="w-full border-t border-[#6ADBFF]/20 my-3"></div>
|
</div>
|
|
{/* 二维码登录界面 - 移动上移，与Logo更加接近 */}
|
<div className="w-full" style={{ position: 'relative', isolation: 'isolate' }}>
|
<div className="relative" style={{ zIndex: 30 }}>
|
<p className="text-center text-[#6ADBFF]/90 text-xs mb-3">扫码登录</p>
|
<div className="border-4 border-[#6ADBFF]/30 rounded-md p-1 bg-white mx-auto" style={{ width: '140px', height: '140px', position: 'relative' }}>
|
<div className="bg-white h-full w-full relative flex items-center justify-center">
|
<div className="text-xs absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center text-center text-black/60">
|
这里将显示二维码<br/>请用APP扫描登录
|
</div>
|
{/* 扫描线动画 */}
|
<div className="absolute left-0 right-0 top-1/2 h-[2px] bg-[#6ADBFF]/70 rounded animate-scanline"></div>
|
</div>
|
</div>
|
<p className="text-xs text-white/70 text-center mt-3">
|
请使用帷幄君成APP<br/>扫描二维码登录
|
</p>
|
</div>
|
</div>
|
|
{/* 左侧装饰点 */}
|
<div className="absolute bottom-4 left-4">
|
<div className="relative w-2 h-2">
|
<div className="absolute inset-0 rounded-full bg-[#6ADBFF]/30 animate-pulse"></div>
|
<div className="absolute inset-[2px] rounded-full bg-[#6ADBFF]/50"></div>
|
</div>
|
</div>
|
</div>
|
|
{/* 右侧登录表单 */}
|
<div className="w-3/5 p-8">
|
<div className="mb-6">
|
<div className="flex space-x-1 overflow-hidden bg-[#131C41]/40 p-1 rounded-full w-fit">
|
<button
|
className={`text-xs px-5 py-1.5 rounded-full relative transition-all duration-300 ${
|
loginMethod === 'password'
|
? 'text-white'
|
: 'text-[#6ADBFF]/60 hover:text-[#6ADBFF]/80'
|
}`}
|
onClick={() => setLoginMethod('password')}
|
>
|
密码登录
|
{loginMethod === 'password' && (
|
<motion.div
|
layoutId="loginTab"
|
className="absolute inset-0 bg-gradient-to-r from-[#131C41] to-[#1E2B63] rounded-full border border-[#6ADBFF]/30 -z-10"
|
initial={false}
|
transition={{ type: "spring", duration: 0.5 }}
|
>
|
<div className="absolute inset-0 overflow-hidden rounded-full">
|
{/* 移除横线穿过效果，添加边缘流动的辉光效果 */}
|
<div className="absolute inset-0 bg-[#6ADBFF]/5"></div>
|
<div className="absolute -inset-0.5 rounded-full opacity-60 blur-sm bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/30 to-[#6ADBFF]/0 animate-pulse"></div>
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
|
</div>
|
</motion.div>
|
)}
|
</button>
|
<button
|
className={`text-xs px-5 py-1.5 rounded-full relative transition-all duration-300 ${
|
loginMethod === 'sms'
|
? 'text-white'
|
: 'text-[#6ADBFF]/60 hover:text-[#6ADBFF]/80'
|
}`}
|
onClick={() => setLoginMethod('sms')}
|
>
|
短信登录
|
{loginMethod === 'sms' && (
|
<motion.div
|
layoutId="loginTab"
|
className="absolute inset-0 bg-gradient-to-r from-[#131C41] to-[#1E2B63] rounded-full border border-[#6ADBFF]/30 -z-10"
|
initial={false}
|
transition={{ type: "spring", duration: 0.5 }}
|
>
|
<div className="absolute inset-0 overflow-hidden rounded-full">
|
{/* 移除横线穿过效果，添加边缘流动的辉光效果 */}
|
<div className="absolute inset-0 bg-[#6ADBFF]/5"></div>
|
<div className="absolute -inset-0.5 rounded-full opacity-60 blur-sm bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/30 to-[#6ADBFF]/0 animate-pulse"></div>
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
|
</div>
|
</motion.div>
|
)}
|
</button>
|
</div>
|
</div>
|
|
{/* 账号登录表单 */}
|
<form onSubmit={handleSubmit} className="space-y-4">
|
<div className="space-y-3">
|
{loginMethod === 'password' ? (
|
<>
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
exit={{ opacity: 0, x: 20 }}
|
transition={{ duration: 0.3 }}
|
>
|
<input
|
id="email"
|
name="email"
|
type="text"
|
autoComplete="email"
|
required
|
value={email}
|
onChange={(e) => setEmail(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="账号名/手机号/邮箱"
|
/>
|
|
{/* 输入聚焦效果 */}
|
<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>
|
</motion.div>
|
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
exit={{ opacity: 0, x: 20 }}
|
transition={{ duration: 0.3, delay: 0.1 }}
|
>
|
<input
|
id="password"
|
name="password"
|
type="password"
|
autoComplete="current-password"
|
required
|
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="密码"
|
/>
|
|
{/* 输入聚焦效果 */}
|
<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>
|
</motion.div>
|
</>
|
) : (
|
<>
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
exit={{ opacity: 0, x: -20 }}
|
transition={{ duration: 0.3 }}
|
>
|
<input
|
id="phone"
|
name="phone"
|
type="text"
|
required
|
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="手机号"
|
/>
|
|
{/* 输入聚焦效果 */}
|
<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>
|
</motion.div>
|
|
<motion.div
|
className="relative group flex"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
exit={{ opacity: 0, x: -20 }}
|
transition={{ duration: 0.3, delay: 0.1 }}
|
>
|
<input
|
id="verifyCode"
|
name="verifyCode"
|
type="text"
|
required
|
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="验证码"
|
/>
|
|
<button
|
type="button"
|
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"
|
>
|
获取验证码
|
</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>
|
</motion.div>
|
</>
|
)}
|
</div>
|
|
<div className="flex items-center justify-between text-xs">
|
<div className="flex items-center">
|
<div className="relative">
|
<input
|
id="remember-me"
|
name="remember-me"
|
type="checkbox"
|
className="h-3 w-3 bg-[#131C41] border-[#6ADBFF]/50 rounded focus:ring-[#6ADBFF]/30 transition-all duration-200 cursor-pointer"
|
/>
|
<div className="absolute inset-0 bg-[#6ADBFF]/10 rounded pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-200"></div>
|
</div>
|
<label htmlFor="remember-me" className="ml-2 block text-xs text-white/80 cursor-pointer select-none">
|
记住我
|
</label>
|
</div>
|
<div className="text-xs">
|
<a href="#" className="text-[#6ADBFF] hover:text-[#6ADBFF]/80 transition-colors duration-200">
|
忘记密码?
|
</a>
|
</div>
|
</div>
|
|
<div>
|
<button
|
type="submit"
|
disabled={isLoading}
|
className="relative w-full py-2 px-4 rounded-full overflow-hidden border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button"
|
>
|
{/* 登录按钮内部结构 */}
|
<div className="relative z-10 flex items-center justify-center quantum-pulse">
|
{isLoading ? (
|
<>
|
<div className="w-3 h-3 border-2 border-white/80 border-t-transparent rounded-full animate-spin"></div>
|
<span className="ml-2 text-xs text-white">登录中...</span>
|
</>
|
) : (
|
<span className="text-xs text-white group-hover:text-[#6ADBFF] transition-colors duration-300">登录</span>
|
)}
|
</div>
|
|
{/* 量子光线效果 */}
|
<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-[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"></div>
|
</div>
|
|
{/* 量子边缘效果 */}
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] 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>
|
</button>
|
</div>
|
</form>
|
|
{/* 分割线 */}
|
<div className="mt-6 relative">
|
<div className="absolute inset-0 flex items-center">
|
<div className="w-full border-t border-[#6ADBFF]/20"></div>
|
</div>
|
<div className="relative flex justify-center text-xs">
|
<span className="px-3 bg-[#1E2B63]/40 text-[#6ADBFF]/70">其他方式</span>
|
</div>
|
</div>
|
|
{/* 社交登录 - 简化 */}
|
<div className="mt-4 flex justify-center space-x-6">
|
<button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
|
<svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
|
</svg>
|
</button>
|
<button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
|
<svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.819-.26.819-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.332-1.756-1.332-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.418-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.468-2.38 1.235-3.22-.123-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23A11.51 11.51 0 0112 5.803c1.02.005 2.046.138 3.005.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.91 1.235 3.22 0 4.61-2.805 5.625-5.475 5.92.43.372.824 1.102.824 2.222 0 1.605-.015 2.896-.015 3.286 0 .32.217.694.825.577C20.565 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12z" />
|
</svg>
|
</button>
|
<button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
|
<svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
<path d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21C9.5 20.77 9.5 20.14 9.5 19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26C14.5 19.6 14.5 20.68 14.5 21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 6.48 17.52 2 12 2Z" />
|
</svg>
|
</button>
|
</div>
|
|
{/* 右侧登录表单底部 - 添加注册链接 */}
|
<div className="mt-6 text-center">
|
<p className="text-white/70 text-sm">
|
还没有账号？
|
<Link href="/register" className="text-[#6ADBFF] hover:text-[#FF6A88] ml-1 transition-colors duration-300">
|
立即注册
|
</Link>
|
</p>
|
</div>
|
</div>
|
</motion.div>
|
|
{/* 量子波动层 - 高度控制 */}
|
<div className="fixed inset-x-0 bottom-0 h-10 z-0 overflow-hidden">
|
<svg className="absolute w-full h-20 animate-quantum-wave" viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg">
|
<path d="M0,20 Q100,40 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient1)" strokeWidth="1" opacity="0.2" />
|
<path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1" opacity="0.2" />
|
<defs>
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stopColor="#6ADBFF" stopOpacity="0" />
|
<stop offset="50%" stopColor="#6ADBFF" stopOpacity="1" />
|
<stop offset="100%" stopColor="#6ADBFF" stopOpacity="0" />
|
</linearGradient>
|
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stopColor="#FF6A88" stopOpacity="0" />
|
<stop offset="50%" stopColor="#FF6A88" stopOpacity="1" />
|
<stop offset="100%" stopColor="#FF6A88" stopOpacity="0" />
|
</linearGradient>
|
</defs>
|
</svg>
|
</div>
|
</div>
|
);
|
}
|
