From 4e578e95c886056bf43f132bd685c2f3c363cd9f Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 21:52:32 +0800
Subject: [PATCH] 创建登录页面
---
src/app/layout.tsx | 64 ----
src/app/login/page.tsx | 475 +++++++++++++++++++++++++++++++++
src/app/globals.css | 170 +++++++++++-
src/components/layout/Navbar.tsx | 42 ++
src/components/layout/ClientLayoutContent.tsx | 76 +++++
5 files changed, 742 insertions(+), 85 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index fe46f64..c2ec329 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -535,66 +535,204 @@
animation: circle-pulse 4s ease-in-out infinite;
}
-/* 绾㈡涓鎶�鎰熷渾鍦堝姩鐢绘晥鏋� - 鏇存煍鍜岀殑鐗堟湰 */
+/* 鍏夋壂鎻忔晥鏋滃姩鐢� */
+@keyframes lightSweep {
+ 0% {
+ transform: translateX(-100%) skewX(-45deg);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.3;
+ }
+ 60% {
+ opacity: 0.3;
+ }
+ 100% {
+ transform: translateX(100%) skewX(-45deg);
+ opacity: 0;
+ }
+}
+
+/* 鎶�鏈渾鍦堟晥鏋滃姩鐢� */
@keyframes tech-circle-pulse {
- 0%, 100% {
+ 0% {
opacity: 0.3;
border-color: rgba(106, 219, 255, 0.2);
}
50% {
opacity: 0.6;
- border-color: rgba(106, 219, 255, 0.5);
+ border-color: rgba(106, 219, 255, 0.3);
+ }
+ 100% {
+ opacity: 0.3;
+ border-color: rgba(106, 219, 255, 0.2);
}
}
@keyframes tech-circle-rotate {
0% {
transform: rotate(0deg);
- background-color: rgba(19, 28, 65, 0.3);
+ background: rgba(19, 28, 65, 0.3);
}
50% {
- background-color: rgba(19, 28, 65, 0.5);
+ background: rgba(30, 43, 99, 0.3);
}
100% {
transform: rotate(360deg);
- background-color: rgba(19, 28, 65, 0.3);
+ background: rgba(19, 28, 65, 0.3);
}
}
@keyframes tech-center-blink {
- 0%, 100% {
- opacity: 0.1;
+ 0% {
+ opacity: 0.2;
transform: scale(0.8);
}
50% {
opacity: 0.5;
- transform: scale(1.1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0.2;
+ transform: scale(0.8);
}
}
@keyframes tech-glow-pulse {
- 0%, 100% {
+ 0% {
opacity: 0.05;
- box-shadow: 0 0 3px rgba(106, 219, 255, 0.05);
+ box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
}
50% {
opacity: 0.15;
- box-shadow: 0 0 8px rgba(106, 219, 255, 0.15);
+ box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.15);
+ }
+ 100% {
+ opacity: 0.05;
+ box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
}
}
.animate-tech-circle-pulse {
- animation: tech-circle-pulse 8s ease-in-out infinite;
+ animation: tech-circle-pulse 8s infinite ease-in-out;
}
.animate-tech-circle-rotate {
- animation: tech-circle-rotate 30s linear infinite;
+ animation: tech-circle-rotate 30s infinite linear;
}
.animate-tech-center-blink {
- animation: tech-center-blink 5s ease-in-out infinite;
+ animation: tech-center-blink 5s infinite ease-in-out;
}
.animate-tech-glow-pulse {
- animation: tech-glow-pulse 8s ease-in-out infinite;
+ animation: tech-glow-pulse 8s infinite ease-in-out;
+}
+
+/* 楂樹寒鍒掕繃鏁堟灉 - 鐢ㄤ簬鐧诲綍椤甸潰鎸夐挳 */
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+.animate-shimmer {
+ animation: shimmer 2s infinite;
+}
+
+/* 鐧诲綍椤甸潰鐗规畩鍔ㄧ敾 */
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.animate-float {
+ animation: float 6s ease-in-out infinite;
+}
+
+@keyframes tech-connect {
+ 0%, 100% {
+ opacity: 0.2;
+ transform: scaleX(0.7);
+ }
+ 50% {
+ opacity: 0.8;
+ transform: scaleX(1);
+ }
+}
+
+.animate-tech-connect {
+ animation: tech-connect 8s ease-in-out infinite;
+}
+
+/* 杈撳叆妗嗚仛鐒﹀姩鐢� */
+@keyframes focus-border {
+ 0% {
+ transform: scaleX(0);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+}
+
+.animate-focus-border {
+ animation: focus-border 0.3s ease-out forwards;
+}
+
+/* 閲忓瓙鍏夌嚎鏁堟灉鍔ㄧ敾 - 鐧诲綍鎸夐挳涓撶敤 */
+@keyframes quantum-scan {
+ 0% {
+ transform: translateX(-100%) skewX(-30deg);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+ 80% {
+ opacity: 0.5;
+ }
+ 100% {
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+
+@keyframes quantum-glow {
+ 0%, 100% {
+ box-shadow: 0 0 5px 2px rgba(106, 219, 255, 0.1);
+ }
+ 50% {
+ box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.3);
+ }
+}
+
+@keyframes quantum-pulse {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.02);
+ }
+}
+
+.quantum-button:hover .quantum-scan-line {
+ animation: quantum-scan 3s ease-in-out infinite;
+}
+
+.quantum-button:hover {
+ animation: quantum-glow 4s ease-in-out infinite;
+}
+
+.quantum-button:hover .quantum-pulse {
+ animation: quantum-pulse 2s ease-in-out infinite;
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0456c32..42b3ae8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,17 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
-import Navbar from "@/components/layout/Navbar";
-import Image from 'next/image';
+import ClientLayoutContent from '@/components/layout/ClientLayoutContent';
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "甯峰箘鍚涙垚 - 鏁板瓧鍛樺伐骞冲彴",
description: "鏅鸿兘鐗╂祦瑙ｅ喅鏂规",
+ icons: {
+ icon: '/logo.svg',
+ apple: '/logo.svg',
+ },
};
export default function RootLayout({
@@ -19,62 +22,7 @@
return (
<html lang="zh">
<body className={inter.className}>
- <Navbar />
- <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16">
- {children}
- </main>
- <footer className="bg-gradient-to-br from-[var(--ai-primary)] to-[var(--ai-dark)] text-white py-10">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="mb-8 flex justify-center flex-col items-center">
- <div className="relative w-16 h-16 mb-3">
- <Image
- src="/images/logo.jpg"
- alt="甯峰箘鍚涙垚Logo"
- width={64}
- height={64}
- className="object-contain"
- priority
- />
- </div>
- <div className="text-xl font-bold">甯峰箘鍚涙垚</div>
- <div className="text-sm text-gray-300 mt-1">鏅鸿兘鐗╂祦瑙ｅ喅鏂规</div>
- </div>
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">鍏充簬鎴戜滑</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍏徃浠嬬粛</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鑱旂郴鏂瑰紡</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍔犲叆鎴戜滑</li>
- </ul>
- </div>
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">浜у搧鏈嶅姟</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏁板瓧鍛樺伐</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏅鸿兘瀹㈡湇</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鐗╂祦瑙ｅ喅鏂规</li>
- </ul>
- </div>
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">甯姪涓績</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">浣跨敤鎸囧崡</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">甯歌闂</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鎶�鏈敮鎸�</li>
- </ul>
- </div>
- </div>
- <div className="mt-8 pt-8 border-t border-opacity-20 border-[#F5A800] text-center">
- <div className="flex items-center justify-center mb-4">
- <span className="inline-block w-2 h-2 bg-[#00A0E9] rounded-full mr-2 animate-pulse"></span>
- <span className="inline-block w-2 h-2 bg-[#5D54A4] rounded-full mx-2 animate-pulse delay-300"></span>
- <span className="inline-block w-2 h-2 bg-[#F5A800] rounded-full ml-2 animate-pulse delay-500"></span>
- </div>
- <p>漏 2024 甯峰箘鍚涙垚. All rights reserved.</p>
- </div>
- </div>
- </footer>
+ <ClientLayoutContent>{children}</ClientLayoutContent>
</body>
</html>
);
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..23b8f6f
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,475 @@
+"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(() => {
+ setMounted(true);
+ }, []);
+
+ 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.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
+ />
+
+ {/* 鎮仠鐗规晥瀹瑰櫒 - 鍦↙ogo涓嬪眰 */}
+ <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>
+
+ {/* 鎮仠鏃跺嚭鐜板湪鑳屾櫙鐨勬墿鏁ｆ晥鏋� - 闄愬埗鍦↙ogo */}
+ <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">
+ 璇蜂娇鐢ㄥ阜骞勫悰鎴怉PP<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: 0, x: -20 }}
+ 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: 0, x: -20 }}
+ 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-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 }}
+ >
+ 绔嬪嵆娉ㄥ唽
+ <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>
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/ClientLayoutContent.tsx b/src/components/layout/ClientLayoutContent.tsx
new file mode 100644
index 0000000..05ba845
--- /dev/null
+++ b/src/components/layout/ClientLayoutContent.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { usePathname } from 'next/navigation';
+import Navbar from './Navbar';
+import Image from 'next/image';
+
+export default function ClientLayoutContent({ children }: { children: React.ReactNode }) {
+ // 浣跨敤瀹㈡埛绔挬瀛愭鏌ヨ矾寰�
+ const pathname = usePathname();
+ const isLoginPage = pathname === '/login';
+
+ if (isLoginPage) {
+ return <>{children}</>;
+ }
+
+ return (
+ <>
+ <Navbar />
+ <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16">
+ {children}
+ </main>
+ <footer className="bg-gradient-to-br from-[var(--ai-primary)] to-[var(--ai-dark)] text-white py-10">
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+ <div className="mb-8 flex justify-center flex-col items-center">
+ <div className="relative w-16 h-16 mb-3">
+ <Image
+ src="/images/logo.jpg"
+ alt="甯峰箘鍚涙垚Logo"
+ width={64}
+ height={64}
+ className="object-contain"
+ priority
+ />
+ </div>
+ <div className="text-xl font-bold">甯峰箘鍚涙垚</div>
+ <div className="text-sm text-gray-300 mt-1">鏅鸿兘鐗╂祦瑙ｅ喅鏂规</div>
+ </div>
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+ <div>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">鍏充簬鎴戜滑</h3>
+ <ul className="space-y-2">
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍏徃浠嬬粛</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鑱旂郴鏂瑰紡</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍔犲叆鎴戜滑</li>
+ </ul>
+ </div>
+ <div>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">浜у搧鏈嶅姟</h3>
+ <ul className="space-y-2">
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏁板瓧鍛樺伐</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏅鸿兘瀹㈡湇</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鐗╂祦瑙ｅ喅鏂规</li>
+ </ul>
+ </div>
+ <div>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">甯姪涓績</h3>
+ <ul className="space-y-2">
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">浣跨敤鎸囧崡</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">甯歌闂</li>
+ <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鎶�鏈敮鎸�</li>
+ </ul>
+ </div>
+ </div>
+ <div className="mt-8 pt-8 border-t border-opacity-20 border-[#F5A800] text-center">
+ <div className="flex items-center justify-center mb-4">
+ <span className="inline-block w-2 h-2 bg-[#00A0E9] rounded-full mr-2 animate-pulse"></span>
+ <span className="inline-block w-2 h-2 bg-[#5D54A4] rounded-full mx-2 animate-pulse delay-300"></span>
+ <span className="inline-block w-2 h-2 bg-[#F5A800] rounded-full ml-2 animate-pulse delay-500"></span>
+ </div>
+ <p>漏 2024 甯峰箘鍚涙垚. All rights reserved.</p>
+ </div>
+ </div>
+ </footer>
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 6a9a5be..f8768cc 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -188,13 +188,28 @@
{/* 鐧诲綍鎸夐挳 */}
<div className="relative group ml-6">
- <button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2
- rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)]
- hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300">
- <span className="relative z-10">鐧诲綍</span>
- <div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0
- group-hover:opacity-100 transition-opacity duration-500"></div>
- </button>
+ <Link href="/login" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
+ <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">鐧诲綍</span>
+
+ {/* 閲忓瓙鍏夌嚎鏁堟灉 */}
+ <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-[20%] 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" style={{transitionDelay: '0.1s'}}></div>
+ <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" style={{transitionDelay: '0.2s'}}></div>
+ <div className="absolute left-[80%] 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" style={{transitionDelay: '0.3s'}}></div>
+ </div>
+
+ {/* 閲忓瓙杈圭紭鏁堟灉 */}
+ <div className="absolute bottom-0 left-0 right-0 h-[2px] 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>
+ </Link>
</div>
</div>
@@ -251,10 +266,15 @@
</Link>
<div className="pt-3 pb-1">
- <button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190]
- text-white font-medium px-6 py-2 rounded-md">
- 鐧诲綍
- </button>
+ <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group">
+ <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">鐧诲綍</span>
+
+ {/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
+ <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 bottom-0 left-0 right-0 h-[2px] 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>
+ </Link>
</div>
</div>
</div>
--
Gitblit v1.9.3