hongjli
2025-04-09 183c4125c41a2cebff957483a365d53986c863e5
注册页面优化
已修改1个文件
164 ■■■■■ 文件已修改
src/app/register/page.tsx 164 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
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>