新建注册页面

hongjli

2025-04-08 e113f64857a16d661c973f0c35f9604f5b4ec24a

 src/app/login/page.tsx

@@ -16,7 +16,12 @@

  // 确保组件挂载后再显示动画效果
  useEffect(() => {
    setMounted(true);
    // 使用 requestAnimationFrame 确保在下一帧执行，提高动画流畅度
    const animationFrame = requestAnimationFrame(() => {
      setMounted(true);
    });
    
    return () => cancelAnimationFrame(animationFrame);
  }, []);
  
  const handleSubmit = (e: React.FormEvent) => {
@@ -65,8 +70,12 @@
      <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"
        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>
@@ -433,19 +442,13 @@
            </button>
          </div>
          
          {/* 注册链接 */}
          <div className="mt-4 text-center">
            <p className="text-xs text-white/70">
              还没有帐号? 
              <motion.a 
                href="#" 
                className="ml-1 text-[#6ADBFF] hover:text-[#6ADBFF] transition-colors duration-200 relative group"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
              >
          {/* 右侧登录表单底部 - 添加注册链接 */}
          <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">
                立即注册
                <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>
              </Link>
            </p>
          </div>
        </div>