diff --git a/components/common/EmptyStateAnimation.tsx b/components/common/EmptyStateAnimation.tsx index c621da7..a6d377c 100644 --- a/components/common/EmptyStateAnimation.tsx +++ b/components/common/EmptyStateAnimation.tsx @@ -54,7 +54,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl }, { y: 0, opacity: 1, - duration: 0.5, + duration: 0.3, ease: "power2.out" }) .fromTo(inputContainerRef.current, { @@ -63,7 +63,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl }, { scale: 1, opacity: 1, - duration: 0.3, + duration: 0.2, ease: "back.out(1.7)" }, "-=0.3"); @@ -74,7 +74,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl opacity: 1, x: -150, y: 0, - duration: 0.5, + duration: 0.3, ease: "power2.out" }, "+=0.5" @@ -84,7 +84,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl mainTl.to(mouseRef.current, { x: 0, y: 0, - duration: 0.3, + duration: 0.2, ease: "power2.inOut" }); @@ -106,25 +106,25 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl 0 0 0 1px rgba(59, 130, 246, 0.6) `, borderColor: 'rgba(79, 70, 229, 0.8)', - duration: 0.2, + duration: 0.1, ease: "back.out(1.7)" }, "+=0.2"); // 5. 显示按钮 mainTl.fromTo(buttonRef.current, { scale: 0, opacity: 0 }, - { scale: 1, opacity: 1, duration: 0.2, ease: "back.out(1.7)" }, + { scale: 1, opacity: 1, duration: 0.1, ease: "back.out(1.7)" }, "+=0.3" ); // 隐藏鼠标指针 mainTl.to(mouseRef.current, { opacity: 0, - duration: 0.2 + duration: 0.1 }, "+=0.2"); // 6. 打字动画 - const typingDuration = demoText.length * 0.03; + const typingDuration = demoText.length * 0.01; let currentChar = 0; mainTl.to({}, { @@ -143,7 +143,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl // 7. 隐藏光标 mainTl.to(cursorRef.current, { opacity: 0, - duration: 0.2 + duration: 0.1 }, "+=0.2"); // 重新显示鼠标指针并移动到按钮 @@ -151,7 +151,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl { opacity: 0, x: 0, y: 0 }, { opacity: 1, - duration: 0.2, + duration: 0.1, ease: "power2.out" }, "-=0.3" @@ -161,7 +161,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl mainTl.to(mouseRef.current, { x: 20, y: 10, - duration: 0.3, + duration: 0.1, ease: "power2.inOut" }, "+=0.5"); @@ -181,7 +181,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl 0 16px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.1) `, - duration: 0.2, + duration: 0.1, ease: "power2.out" }, "+=0.2"); @@ -213,7 +213,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl mainTl.to(containerRef.current, { opacity: 0, y: -50, - duration: 0.5, + duration: 0.3, ease: "power2.in", onComplete: () => { onComplete(); @@ -245,7 +245,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl ref={inputRef} className="relative w-[600px] h-[60px] bg-gradient-to-br from-white/12 to-white/4 backdrop-blur-md rounded-lg px-4 py-3 flex items-center transition-all duration-300" style={{ - background: 'rgba(233,231,231,0.9)', + background: 'rgba(233,231,231,0.7)', boxShadow: ` inset 0 2px 0 rgba(233,231,231,0.25), inset 0 -2px 0 rgba(0,0,0,0.15), diff --git a/components/pages/style/work-flow.css b/components/pages/style/work-flow.css index 282e5ba..51b343c 100644 --- a/components/pages/style/work-flow.css +++ b/components/pages/style/work-flow.css @@ -5,10 +5,103 @@ flex-direction: column; width: 100%; max-width: 1200px; - height: fit-content; + height: calc(100vh - 120px); + max-height: 800px; + min-height: 600px; display: flex; overflow: hidden; } + +/* 小屏幕适配 */ +@media (max-width: 768px) { + .container-H2sRZG { + padding-inline: 12px; + max-width: 100%; + height: calc(100vh - 80px); + min-height: 500px; + } + + .splashContainer-otuV_A { + gap: 12px; + } + + .media-Ocdu1O { + gap: 8px; + } + + .videoContainer-qteKNi { + min-height: 200px; + } + + .imageGrid-ymZV9z { + flex-shrink: 0; + height: 110px; + gap: 8px; + display: flex; + overflow-x: auto; + } + + .title-JtMejk { + font-size: 1.1rem; + line-height: 28px; + } + + .subtitle-had8uE { + font-size: 13px; + line-height: 18px; + } + + .info-UUGkPJ { + gap: 8px; + } +} + +/* 超小屏幕适配 (手机竖屏) */ +@media (max-width: 480px) { + .container-H2sRZG { + padding-inline: 8px; + height: calc(100vh - 60px); + min-height: 450px; + } + + .splashContainer-otuV_A { + gap: 8px; + } + + .videoContainer-qteKNi { + min-height: 160px; + } + + .title-JtMejk { + font-size: 1rem; + line-height: 24px; + } + + .subtitle-had8uE { + font-size: 12px; + line-height: 16px; + } + + .imageGrid-ymZV9z { + height: 90px; + gap: 6px; + } + + .info-UUGkPJ { + gap: 6px; + } +} +/* 默认小屏幕布局 */ +.splashContainer-otuV_A { + box-sizing: border-box; + flex-direction: column; + gap: 16px; + height: 100%; + display: flex; + min-height: 0; +} + +/* 大屏幕布局 */ @media (width >= 1024px) { .splashContainer-otuV_A { box-sizing: border-box; @@ -21,6 +114,7 @@ .content-vPGYx8 { box-sizing: border-box; position: relative; + flex-shrink: 0; } .info-UUGkPJ { box-sizing: border-box; @@ -53,15 +147,15 @@ flex-direction: column; gap: 12px; height: 100%; - display: flex -; + flex: 1; + display: flex; overflow: hidden; + min-height: 0; } .videoContainer-qteKNi { - /* flex: 3; */ + flex: 1; min-height: 0; - display: flex -; + display: flex; position: relative; } .heroVideo-FIzuK1 { @@ -112,15 +206,23 @@ bottom: 12px; right: 12px; } +.imageGrid-ymZV9z { + flex-shrink: 0; + height: 140px; + gap: 12px; + display: flex; + overflow-x: auto; +} + @media (height >= 880px) { .imageGrid-ymZV9z { flex: 1; - gap: 12px; + height: auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(25%, 1fr); - /* overflow-x: auto; */ + overflow-x: unset; } } .image-x5Y2Sg {