From 90b3b6329fec3205b845198ca6dc539dcde186c8 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 16 六月 2025 17:12:20 +0800
Subject: [PATCH] 页面调整优化
---
src/app/page.tsx | 88 +++++++++++++++++++++++++++++---------------
1 files changed, 58 insertions(+), 30 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6223957..735bd5f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,6 +12,9 @@
useEffect(() => {
setMounted(true);
setIsClient(true);
+
+ // 纭繚椤甸潰鍒锋柊鏃舵粴鍔ㄥ埌椤堕儴
+ window.scrollTo(0, 0);
}, []);
// 瀹氫箟鍔ㄧ敾鍙樹綋
@@ -62,7 +65,7 @@
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.6, ease: "easeOut" }}
+ transition={{ duration: 0.4, ease: "easeOut" }}
className="text-center mb-32 relative will-change-transform"
>
{/* 鑳屾櫙瑁呴グ鏁堟灉 */}
@@ -72,7 +75,7 @@
initial={{ scaleX: 0 }}
whileInView={{ scaleX: 1 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 1.2, delay: 0.3 }}
+ transition={{ duration: 0.8, delay: 0.2 }}
/>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
{[...Array(2)].map((_, i) => (
@@ -90,9 +93,9 @@
whileInView={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
viewport={{ once: false, margin: "-100px" }}
transition={{
- duration: 3,
+ duration: 2,
repeat: Infinity,
- delay: i * 0.8
+ delay: i * 0.6
}}
/>
))}
@@ -101,10 +104,10 @@
<motion.h1
className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
- initial={{ opacity: 0, filter: "blur(10px)" }}
- whileInView={{ opacity: 1, filter: "blur(0px)" }}
+ initial={{ opacity: 0, y: 20 }}
+ whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.8, delay: 0.2 }}
+ transition={{ duration: 0.4, ease: "easeOut" }}
>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] relative">
甯峰箘鍚涙垚
@@ -115,7 +118,7 @@
opacity: [0.6, 1, 0.6]
}}
transition={{
- duration: 2,
+ duration: 1.5,
repeat: Infinity,
ease: "easeInOut"
}}
@@ -129,7 +132,7 @@
initial={{ scaleX: 0 }}
whileInView={{ scaleX: 1 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
+ transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
style={{ originX: 0 }}
/>
</div>
@@ -139,7 +142,7 @@
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.6, delay: 0.7 }}
+ transition={{ duration: 0.4, delay: 0.4 }}
>
鏅鸿兘鍖栦緵搴旈摼绠＄悊锛�
<motion.span
@@ -147,7 +150,7 @@
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.4, delay: 1.1 }}
+ transition={{ duration: 0.3, delay: 0.6 }}
>
AI妯℃嫙APS鍦烘櫙
</motion.span>
@@ -159,7 +162,7 @@
initial={{ scale: 0 }}
whileInView={{ scale: 1 }}
viewport={{ once: false, margin: "-100px" }}
- transition={{ duration: 0.5, delay: 1.2 }}
+ transition={{ duration: 0.4, delay: 0.7 }}
>
<div className="w-full h-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF] to-[#6ADBFF]/0"></div>
</motion.div>
@@ -167,8 +170,18 @@
</motion.div>
{/* 浜や簰鎸夐挳缁� - 椤堕儴 */}
- <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-12 mb-28 mt-16">
- <Link href="/ai-scene">
+ <div className="flex flex-col sm:flex-row items-center justify-center gap-6 mb-20">
+ <a
+ href="/ai-scene"
+ className="no-flash-link"
+ onClick={(e) => {
+ e.preventDefault();
+ document.body.classList.add('page-transitioning');
+ setTimeout(() => {
+ window.location.href = '/ai-scene';
+ }, 100);
+ }}
+ >
<motion.div
custom={0}
initial="hidden"
@@ -176,7 +189,7 @@
viewport={{ once: false, margin: "-100px" }}
variants={buttonVariants}
whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
- className="group relative will-change-transform"
+ className="group relative will-change-transform cursor-pointer"
>
<div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
<div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
@@ -184,31 +197,46 @@
{/* 绮掑瓙鏁堟灉 */}
<div className="absolute inset-0 overflow-hidden rounded-lg">
- {[...Array(6)].map((_, i) => (
+ {[...Array(3)].map((_, i) => (
<motion.div
key={i}
- className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
- initial={{ x: "100%", y: "100%", opacity: 0 }}
+ className="absolute rounded-full border border-[#6ADBFF]/20"
+ style={{
+ left: "50%",
+ top: "50%",
+ width: "10px",
+ height: "10px",
+ }}
+ initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
animate={{
- x: ["100%", `${Math.random() * 100}%`, "0%"],
- y: ["100%", `${Math.random() * 100}%`, "0%"],
- opacity: [0, 1, 0]
+ scale: [0, 8],
+ opacity: [0.5, 0]
}}
transition={{
- duration: 2 + Math.random() * 3,
- repeat: Infinity,
- repeatType: "loop",
- ease: "easeInOut",
- delay: i * 0.2
+ duration: 2,
+ repeat: Infinity,
+ delay: i * 0.6
}}
/>
))}
</div>
</div>
</motion.div>
- </Link>
+ </a>
- <Link href="/chat">
+ <a
+ href="/chat"
+ className="no-flash-link"
+ onClick={(e) => {
+ e.preventDefault();
+ document.body.classList.add('page-transitioning');
+ const token = localStorage.getItem('token');
+ const targetUrl = token ? '/chat' : '/login';
+ setTimeout(() => {
+ window.location.href = targetUrl;
+ }, 100);
+ }}
+ >
<motion.div
custom={1}
initial="hidden"
@@ -216,7 +244,7 @@
viewport={{ once: false, margin: "-100px" }}
variants={buttonVariants}
whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
- className="group relative will-change-transform"
+ className="group relative will-change-transform cursor-pointer"
>
<div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#FF6A88] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
<div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
@@ -249,7 +277,7 @@
</div>
</div>
</motion.div>
- </Link>
+ </a>
</div>
{/* AI璧嬭兘APS浼樺娍鍏ㄦ櫙 - 鐙珛鍖哄潡 */}
--
Gitblit v1.9.3