fix: history 动效优化

app/pages/index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-16 10:47:11
+ * @LastEditTime: 2026-01-16 11:58:37
  * @Description: 
 -->
 <template>
@@ -52,8 +52,10 @@
       :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
     >
       <div class="text-center mb-45px">
-        <div class="font-s-36px font-semibold text-#000000 mb-4px">物业管理正面临这些挑战</div>
-        <div class="font-s-16px text-#091221/70">
+        <div class="font-s-36px font-semibold text-#000000 mb-4px lh-60px">
+          物业管理正面临这些挑战
+        </div>
+        <div class="font-s-16px text-#091221/70 lh-30px">
           传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
         </div>
       </div>
@@ -263,10 +265,10 @@
       :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
     >
       <div class="text-center mb-60px">
-        <div class="font-s-36px font-semibold text-#000000 pf-sc-semibold mb-12px">
+        <div class="font-s-36px font-semibold text-#000000 pf-sc-semibold mb-4px lh-60px">
           知识产权和案例
         </div>
-        <div class="font-s-16px text-#091221/70 pf-sc-regular">
+        <div class="font-s-16px text-#091221/70 pf-sc-regular lh-30px">
           绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
         </div>
       </div>
@@ -361,7 +363,7 @@
         :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
       >
         <div
-          class="pf-sc-semibold font-semibold font-s-36px text-#000000 lh-60px text-center mb-12px"
+          class="pf-sc-semibold font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px"
         >
           发展历程
         </div>
@@ -372,47 +374,71 @@
         <!-- 上部内容区 -->
         <div class="w-full h-255px flex py-50px items-center">
           <!-- 左侧大年份 -->
-          <div v-if="currentYearData" class="relative pl-127px w-600px shrink-0">
-            <span
-              class="text-170px font-bold text-#0F67F8 pf-sc-bold select-none"
-              style="-webkit-text-stroke: 1px #2563eb; text-shadow: 0 0 20px rgba(37, 99, 235, 0.1)"
-            >
-              {{ currentYearData.year }}
-            </span>
+          <div class="relative pl-127px w-600px shrink-0 h-170px overflow-hidden">
+            <Transition name="year-flow">
+              <div
+                :key="currentYearData?.year"
+                class="absolute left-127px top-0 h-full flex items-center w-full"
+              >
+                <span
+                  class="text-170px font-bold text-#0F67F8 pf-sc-bold select-none leading-none"
+                  style="
+                    -webkit-text-stroke: 1px #2563eb;
+                    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
+                  "
+                >
+                  {{ currentYearData?.year }}
+                </span>
+              </div>
+            </Transition>
           </div>
 
           <!-- 右侧事件描述 -->
-          <div v-if="currentEventData" class="flex-1 h-full flex flex-col justify-start pt-14px">
-            <div class="flex justify-between items-center">
-              <span class="text-22px font-semibold lh-30.8px text-#091221 pf-sc-semibold flex-1">
-                {{ currentEventData.month }}
-              </span>
-              <!-- 右上方小切换 -->
-              <div v-if="(currentYearData?.events?.length ?? 0) > 1" class="flex gap-12px">
-                <i
-                  class="i-custom-arrow-circle-left wh-32px transition-all"
-                  :class="[
-                    currentEventIndex === 0
-                      ? 'opacity-30 cursor-not-allowed'
-                      : 'cursor-pointer hover:i-custom-arrow-circle-left-active',
-                  ]"
-                  @click="prevEvent"
-                ></i>
-                <i
-                  class="i-custom-arrow-circle-right wh-32px transition-all"
-                  :class="[
-                    currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
-                      ? 'opacity-30 cursor-not-allowed'
-                      : 'cursor-pointer hover:i-custom-arrow-circle-right-active',
-                  ]"
-                  @click="nextEvent"
-                ></i>
+          <div class="flex-1 h-full relative overflow-hidden">
+            <Transition name="content-flow">
+              <div
+                :key="currentYearData?.year + '-' + currentEventIndex"
+                class="absolute left-0 top-14px w-full flex flex-col pr-114px"
+              >
+                <div class="flex justify-between items-center w-full">
+                  <span
+                    class="text-22px font-semibold lh-30.8px text-#091221 pf-sc-semibold flex-1 content-stagger-1"
+                  >
+                    {{ currentEventData?.month }}
+                  </span>
+                  <!-- 右上方小切换 -->
+                  <div
+                    v-if="(currentYearData?.events?.length ?? 0) > 1"
+                    class="flex gap-12px content-stagger-1 relative z-10"
+                  >
+                    <i
+                      class="i-custom-arrow-circle-left wh-32px transition-all"
+                      :class="[
+                        currentEventIndex === 0
+                          ? 'opacity-30 cursor-not-allowed'
+                          : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
+                      ]"
+                      @click="prevEvent"
+                    ></i>
+                    <i
+                      class="i-custom-arrow-circle-right wh-32px transition-all"
+                      :class="[
+                        currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
+                          ? 'opacity-30 cursor-not-allowed'
+                          : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
+                      ]"
+                      @click="nextEvent"
+                    ></i>
+                  </div>
+                </div>
+                <div class="h-2px w-34px bg-#0F67F8 mt-11px content-stagger-2 origin-left"></div>
+                <div
+                  class="w-full text-20px lh-35px text-#091221/70 pf-sc-regular mt-26px content-stagger-3"
+                >
+                  {{ currentEventData?.content }}
+                </div>
               </div>
-            </div>
-            <div class="h-2px w-34px bg-#0F67F8 mt-11px"></div>
-            <div class="flex-1 text-20px lh-35px text-#091221/70 pf-sc-regular mt-26px pr-114px">
-              {{ currentEventData.content }}
-            </div>
+            </Transition>
           </div>
         </div>
 
@@ -762,6 +788,61 @@
     background-image: url('@/assets/images/history-bg.png');
   }
 
+  /* 发展历程动画 - 新版流式 */
+  .year-flow-enter-active,
+  .year-flow-leave-active {
+    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .year-flow-enter-from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+
+  .year-flow-leave-to {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.9);
+  }
+
+  .content-flow-enter-active,
+  .content-flow-leave-active {
+    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .content-flow-enter-from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  .content-flow-leave-to {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  /* 内容交错动画 */
+  .content-flow-enter-active .content-stagger-1 {
+    transition: all 0.4s ease-out 0.1s;
+  }
+  .content-flow-enter-active .content-stagger-2 {
+    transition: all 0.4s ease-out 0.2s;
+  }
+  .content-flow-enter-active .content-stagger-3 {
+    transition: all 0.4s ease-out 0.3s;
+  }
+
+  .content-flow-enter-from .content-stagger-1,
+  .content-flow-enter-from .content-stagger-2,
+  .content-flow-enter-from .content-stagger-3 {
+    opacity: 0;
+    transform: translateX(15px);
+  }
+
+  .content-flow-enter-from .content-stagger-2 {
+    transform: scaleX(0);
+  }
+
+  /* 时间轴圆点呼吸效果 */
+
   .cta {
     @apply w-full h-276px;
     background-size: cover;