工作流布局自适应

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),

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 {