新建注册页面

hongjli

2025-04-08 e113f64857a16d661c973f0c35f9604f5b4ec24a

新建注册页面

 src/app/globals.css

@@ -806,3 +806,41 @@
.animate-shine {
  animation: shine 1.5s ease-in-out;
}

/* é¡µé¢æ¸å…¥æ•ˆæžœä¼˜åŒ– */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageTransition {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* æ·»åŠ å…¨å±€è¿‡æ¸¡æ•ˆæžœ */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

/* ä¼˜åŒ–全局动画性能 */
.animate-fadeIn {
  animation: fadeIn 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ä½¿ç”¨GPU加速改善性能 */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  will-change: transform, opacity;
}

 src/app/login/page.tsx

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

  // ç¡®ä¿ç»„件挂载后再显示动画效果
  useEffect(() => {
    // ä½¿ç”¨ 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>

 src/app/register/page.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,350 @@
"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 RegisterPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [verifyCode, setVerifyCode] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [countdown, setCountdown] = useState(0);
  
  // å€’计时逻辑
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [countdown]);

  // ç¡®ä¿ç»„件挂载后再显示动画效果
  useEffect(() => {
    // ä½¿ç”¨ requestAnimationFrame ç¡®ä¿åœ¨ä¸‹ä¸€å¸§æ‰§è¡Œï¼Œæé«˜åŠ¨ç”»æµç•…度
    const animationFrame = requestAnimationFrame(() => {
      setMounted(true);
    });
    
    return () => cancelAnimationFrame(animationFrame);
  }, []);
  
  const sendVerifyCode = () => {
    if (countdown > 0 || !phone || phone.length !== 11) return;
    
    // æ¨¡æ‹Ÿå‘送验证码
    setCountdown(60);
    // è¿™é‡Œåº”该添加实际发送验证码的逻辑
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // è¡¨å•éªŒè¯
    if (!username || !password || !confirmPassword || !phone || !verifyCode) {
      alert("请填写所有必填字段");
      return;
    }
    
    if (password !== confirmPassword) {
      alert("两次输入的密码不一致");
      return;
    }
    
    setIsLoading(true);
    
    // æ¨¡æ‹Ÿæ³¨å†Œè¯·æ±‚
    setTimeout(() => {
      setIsLoading(false);
      // è¿™é‡Œåº”该添加实际注册逻辑
      alert("注册成功，即将跳转到登录页");
      // æ³¨å†ŒæˆåŠŸåŽè·³è½¬åˆ°ç™»å½•é¡µ
      window.location.href = "/login";
    }, 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
                  />
                  
                  {/* æ‚¬åœç‰¹æ•ˆå®¹å™¨ */}
                  <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>
                </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>
                  </h1>
                  
                  <p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">AI场景模拟平台 Â· æ™ºæ…§èµ‹èƒ½æœªæ¥</p>
                </div>
              </Link>
            </div>
            
            {/* åˆ†éš”线 */}
            <div className="w-full border-t border-[#6ADBFF]/20 my-3"></div>
          </div>
          
          {/* å·¦ä¾§ä¿¡æ¯å†…容 */}
          <div className="w-full flex-1 flex flex-col justify-center space-y-6">
            <div className="text-center">
              <h2 className="text-lg font-semibold text-[#6ADBFF] mb-2">已有账号?</h2>
              <Link href="/login" className="text-white hover:text-[#6ADBFF] transition-colors duration-300 px-6 py-2 border border-[#6ADBFF]/30 rounded-full inline-block relative group">
                <span className="relative z-10">立即登录</span>
                <div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 bg-gradient-to-r from-[#6ADBFF]/10 to-[#5E72EB]/10 transition-opacity duration-300"></div>
                <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
                <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
              </Link>
            </div>
            
            <div className="text-white/70 text-sm space-y-3">
              <div className="flex items-center">
                <div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
                <p>通过注册获取完整平台功能</p>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
                <p>享受AI智能分析与场景模拟</p>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
                <p>安全可靠的数据保障机制</p>
              </div>
            </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">
            <h2 className="text-xl font-semibold text-white mb-2">新用户注册</h2>
            <p className="text-[#6ADBFF]/80 text-sm">欢迎加入帷幄君成，请填写以下信息完成注册</p>
          </div>
          
          {/* æ³¨å†Œè¡¨å• */}
          <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>
            
            {/* å¯†ç  */}
            <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>
            
            {/* ç¡®è®¤å¯†ç  */}
            <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>
            
            {/* æ‰‹æœºå·ç  */}
            <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>
            
            {/* éªŒè¯ç  */}
            <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>
            
            {/* éšç§å£°æ˜Ž */}
            <div className="text-xs text-white/60 mt-4">
              æ³¨å†Œå³è¡¨ç¤ºæ‚¨åŒæ„å¸·å¹„君成的
              <span className="text-[#6ADBFF] cursor-pointer hover:underline mx-1">服务条款</span>
              å’Œ
              <span className="text-[#6ADBFF] cursor-pointer hover:underline ml-1">隐私政策</span>
            </div>
            
            {/* æ³¨å†ŒæŒ‰é’® */}
            <div className="mt-6">
              <button
                type="submit"
                disabled={isLoading}
                className="w-full relative overflow-hidden px-6 py-3 rounded-lg bg-gradient-to-r from-[#5E72EB] to-[#6ADBFF] text-white font-medium shadow-lg group"
              >
                <span className="relative z-10">
                  {isLoading ? (
                    <span className="flex items-center justify-center">
                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      æ³¨å†Œä¸­...
                    </span>
                  ) : (
                    '立即注册'
                  )}
                </span>
                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="h-full w-[1px] bg-white/20 transform rotate-[20deg] translate-x-[-30px] group-hover:translate-x-[350px] transition-all duration-1000"></div>
                </div>
              </button>
            </div>
          </form>
        </div>
      </motion.div>
    </div>
  );
} 

 src/components/layout/ClientLayoutContent.tsx

@@ -13,6 +13,7 @@
  const [hasError, setHasError] = useState(false);
  const pathname = usePathname();
  const isLoginPage = pathname === '/login';
  const isRegisterPage = pathname === '/register';
  const isHomePage = pathname === '/';
  const isAIScenePage = pathname.startsWith('/ai-scene');

@@ -58,13 +59,14 @@
    // å®¢æˆ·ç«¯æ¸²æŸ“后显示完整内容
    try {
      return (
        <div className="animate-fadeIn">
        <div className="animate-fadeIn" style={{ animationDuration: '300ms' }}>
          <div className="flex flex-col min-h-screen">
            {!isLoginPage && <Navbar />}
            <main className={`flex-1 ${isHomePage || isAIScenePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}>
            {!isLoginPage && !isRegisterPage && <Navbar />}
            <main className={`flex-1 ${isHomePage || isAIScenePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}
                  style={{ willChange: 'transform, opacity' }}>
              {children}
            </main>
            {!isLoginPage && (
            {!isLoginPage && !isRegisterPage && (
              <footer className="relative z-20 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] text-white py-10 overflow-hidden">
                {/* ç§‘技感动态背景元素 */}
                <div className="absolute inset-0 overflow-hidden pointer-events-none">