"use client";
|
|
import { useState, useEffect } from 'react';
|
import Image from 'next/image';
|
import { motion } from 'framer-motion';
|
import Link from 'next/link';
|
import { useRouter } from 'next/navigation';
|
import { useUser } from '@/context/UserContext';
|
import ApiService from '@/utils/api';
|
|
// 定义User接口
|
interface User {
|
id: number;
|
username: string;
|
email: string;
|
// 其他用户属性...
|
}
|
|
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');
|
const [error, setError] = useState('');
|
const router = useRouter();
|
const { setUser } = useUser();
|
|
// 确保组件挂载后再显示动画效果
|
useEffect(() => {
|
setMounted(true);
|
}, []);
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
e.preventDefault();
|
setIsLoading(true);
|
setError(''); // 清除之前的错误信息
|
|
try {
|
const response = await ApiService.post<string>('/users/login', {
|
accountName: email,
|
password,
|
});
|
|
if (response.code === 200) {
|
// 获取token
|
const token = response.data;
|
// 使用ApiService的方法设置token
|
ApiService.setToken(token);
|
|
// 使用新token获取用户信息
|
try {
|
const userData = await ApiService.get<User>('/users/info', token);
|
|
if (userData.code === 200) {
|
// 保存用户信息到全局状态
|
setUser(userData.data);
|
router.push('/'); // 登录成功后跳转到首页
|
} else {
|
setError('获取用户信息失败');
|
}
|
} catch (error) {
|
setError('获取用户信息失败');
|
}
|
} else {
|
setError(response.message || '登录失败，请检查账号密码');
|
}
|
} catch (err) {
|
setError('网络错误，请稍后重试');
|
} finally {
|
setIsLoading(false);
|
}
|
};
|
|
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.8, ease: "easeOut" }}
|
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"
|
>
|
{/* 卡片内部装饰 */}
|
<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">
|
{error && (
|
<motion.div
|
initial={{ opacity: 0, y: -10 }}
|
animate={{ opacity: 1, y: 0 }}
|
className="relative overflow-hidden backdrop-blur-sm bg-[#FF6A88]/5 border border-[#FF6A88]/20 rounded-lg p-3"
|
>
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88]/50 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/50 to-transparent"></div>
|
|
<div className="flex items-center space-x-2">
|
<svg className="w-4 h-4 text-[#FF6A88]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
</svg>
|
<span className="text-xs text-[#FF6A88]">{error}</span>
|
</div>
|
|
{/* 动态扫描线 */}
|
<div className="absolute top-0 -left-full w-[200%] h-full bg-gradient-to-r from-transparent via-[#FF6A88]/10 to-transparent animate-error-scan"></div>
|
</motion.div>
|
)}
|
|
<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-4 text-center">
|
<p className="text-xs text-white/70">
|
还没有帐号?
|
<motion.a
|
href="/register"
|
className="ml-1 text-[#6ADBFF] hover:text-[#6ADBFF] transition-colors duration-200 relative group"
|
whileHover={{ scale: 1.03 }}
|
whileTap={{ scale: 0.97 }}
|
>
|
立即注册
|
<span className="absolute -bottom-0.5 left-0 w-0 h-[1px] bg-[#6ADBFF] group-hover:w-full transition-all duration-300 ease-out"></span>
|
</motion.a>
|
</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>
|
);
|
}
|
