From ae20560a35fd171b1189d19bf96bbdde7b5f618a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=A5?= <chenchun@chenchundeMacBook-Air.local>
Date: Wed, 3 Jun 2026 19:26:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=92=8C=E5=8A=A8=E7=94=BB=E6=97=B6=E5=BA=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 问题修复:
- 移除所有新板块的初始 opacity: 0 样式
- 防止新板块初始隐藏导致黑屏问题
- 确保页面加载后内容立即可见
- 修复菜单延迟出现的问题

🎨 优化调整:
- 改用 CSS class 控制动画初始状态
- ScrollTrigger 动画在滚动到对应位置时才触发
- 不影响首屏 Hero 和 Intro 的加载动画
- 保持所有板块的入场动画效果

✅ 修复的组件:
- HomeServices
- HomeAchievements
- HomeTestimonials
- HomeTechStack
- HomeProcess
- HomeUpdates
- HomeCTA

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/home/HomeAchievements.vue |  1 -
 app/components/home/HomeCTA.vue          | 17 ++++++++++-------
 app/components/home/HomeProcess.vue      |  6 +++---
 app/components/home/HomeServices.vue     |  2 +-
 app/components/home/HomeTechStack.vue    |  2 +-
 app/components/home/HomeTestimonials.vue |  2 +-
 app/components/home/HomeUpdates.vue      |  2 +-
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/components/home/HomeAchievements.vue b/app/components/home/HomeAchievements.vue
index a7c553a..48dcb2f 100644
--- a/app/components/home/HomeAchievements.vue
+++ b/app/components/home/HomeAchievements.vue
@@ -11,7 +11,6 @@
           :key="achievement.id"
           :ref="el => setAchievementRef(el, index)"
           class="achievement-item flex flex-col md:flex-row items-start md:items-center gap-8"
-          style="opacity: 0;"
         >
           <!-- 数字 -->
           <div class="flex-shrink-0">
diff --git a/app/components/home/HomeCTA.vue b/app/components/home/HomeCTA.vue
index 6dc1d41..877cb05 100644
--- a/app/components/home/HomeCTA.vue
+++ b/app/components/home/HomeCTA.vue
@@ -19,8 +19,7 @@
             v-for="(char, i) in line1Chars"
             :key="`l1-${i}`"
             :ref="el => setCharRef(el, 'line1', i)"
-            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white"
-            style="opacity: 0; transform: translateY(100px) rotate(10deg);"
+            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white char-hidden"
             v-html="char === ' ' ? '&nbsp;' : char"
           ></span>
         </div>
@@ -29,20 +28,19 @@
             v-for="(char, i) in line2Chars"
             :key="`l2-${i}`"
             :ref="el => setCharRef(el, 'line2', i)"
-            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white"
-            style="opacity: 0; transform: translateY(100px) rotate(-10deg);"
+            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white char-hidden"
             v-html="char === ' ' ? '&nbsp;' : char"
           ></span>
         </div>
       </h2>
 
       <!-- 副标题 -->
-      <p ref="subtitleRef" class="text-xl md:text-3xl text-white/90 mb-12 md:mb-16 leading-relaxed max-w-3xl mx-auto" style="opacity: 0;">
+      <p ref="subtitleRef" class="text-xl md:text-3xl text-white/90 mb-12 md:mb-16 leading-relaxed max-w-3xl mx-auto" >
         {{ t('home.cta.subtitle') }}
       </p>
 
       <!-- 按钮组 -->
-      <div ref="buttonsRef" class="flex flex-col sm:flex-row gap-6 justify-center items-center" style="opacity: 0;">
+      <div ref="buttonsRef" class="flex flex-col sm:flex-row gap-6 justify-center items-center" >
         <NuxtLink
           to="/contact"
           class="cta-button group relative px-10 py-5 rounded-full bg-white text-black text-lg font-bold overflow-hidden shadow-2xl hover:shadow-white/50 transition-all duration-300"
@@ -66,7 +64,7 @@
       </div>
 
       <!-- 滚动提示 -->
-      <div ref="scrollHintRef" class="absolute bottom-12 left-1/2 -translate-x-1/2" style="opacity: 0;">
+      <div ref="scrollHintRef" class="absolute bottom-12 left-1/2 -translate-x-1/2" >
         <div class="flex flex-col items-center gap-2 animate-bounce">
           <span class="text-white/70 text-sm">{{ t('home.cta.scrollDown') }}</span>
           <Icon name="ph:caret-down" class="w-6 h-6 text-white/70" />
@@ -288,4 +286,9 @@ onMounted(async () => {
 .cta-button-secondary:hover {
   transform: translateY(-2px);
 }
+
+.char-hidden {
+  opacity: 0;
+  transform: translateY(100px) rotate(10deg);
+}
 </style>
diff --git a/app/components/home/HomeProcess.vue b/app/components/home/HomeProcess.vue
index fded0a2..277f793 100644
--- a/app/components/home/HomeProcess.vue
+++ b/app/components/home/HomeProcess.vue
@@ -2,7 +2,7 @@
   <section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
     <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
       <!-- 标题 -->
-      <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
+      <div ref="headerRef" class="text-center mb-16 md:mb-20">
         <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
           {{ t('home.process.title') }}
         </h2>
@@ -17,7 +17,7 @@
         <svg
           ref="lineRef"
           class="absolute top-1/2 left-0 w-full h-1 -translate-y-1/2 pointer-events-none z-0"
-          style="opacity: 0;"
+         
         >
           <path
             ref="linePathRef"
@@ -44,7 +44,7 @@
             :key="step.id"
             :ref="el => setStepRef(el, index)"
             class="process-step flex-shrink-0 w-[280px] md:w-[320px]"
-            style="opacity: 0;"
+           
           >
             <!-- 步骤编号节点 -->
             <div class="relative flex justify-center mb-8">
diff --git a/app/components/home/HomeServices.vue b/app/components/home/HomeServices.vue
index c4041bb..83dbce9 100644
--- a/app/components/home/HomeServices.vue
+++ b/app/components/home/HomeServices.vue
@@ -2,7 +2,7 @@
   <section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
     <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
       <!-- 标题区 -->
-      <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
+      <div ref="headerRef" class="text-center mb-16 md:mb-20" >
         <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
           {{ t('home.services.title') }}
         </h2>
diff --git a/app/components/home/HomeTechStack.vue b/app/components/home/HomeTechStack.vue
index d85d658..a4a34eb 100644
--- a/app/components/home/HomeTechStack.vue
+++ b/app/components/home/HomeTechStack.vue
@@ -31,7 +31,7 @@
         </div>
 
         <!-- 右侧：文本内容 -->
-        <div ref="contentRef" class="space-y-8" style="opacity: 0;">
+        <div ref="contentRef" class="space-y-8">
           <div>
             <h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
               {{ t('home.techStack.title') }}
diff --git a/app/components/home/HomeTestimonials.vue b/app/components/home/HomeTestimonials.vue
index 2f3db6d..20fef7e 100644
--- a/app/components/home/HomeTestimonials.vue
+++ b/app/components/home/HomeTestimonials.vue
@@ -2,7 +2,7 @@
   <section ref="rootRef" class="relative bg-gradient-to-b from-gray-50 to-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
     <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
       <!-- 标题 -->
-      <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
+      <div ref="headerRef" class="text-center mb-16 md:mb-20">
         <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
           {{ t('home.testimonials.title') }}
         </h2>
diff --git a/app/components/home/HomeUpdates.vue b/app/components/home/HomeUpdates.vue
index 96e236f..12d88e8 100644
--- a/app/components/home/HomeUpdates.vue
+++ b/app/components/home/HomeUpdates.vue
@@ -2,7 +2,7 @@
   <section ref="rootRef" class="relative bg-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
     <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
       <!-- 标题 -->
-      <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
+      <div ref="headerRef" class="text-center mb-16 md:mb-20">
         <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
           {{ t('home.updates.title') }}
         </h2>