fix: fade in up

app/pages/index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-15 16:12:33
+ * @LastEditTime: 2026-01-15 16:42:05
  * @Description: 
 -->
 <template>
@@ -133,7 +133,12 @@
         </div>
       </div>
     </section>
-    <section id="ability" class="ability">
+    <section
+      id="ability"
+      ref="abilityRef"
+      class="ability transition-all duration-1000 ease-out"
+      :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+    >
       <div class="font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px">
         一体化智慧解决方案
       </div>
@@ -246,7 +251,12 @@
         </div>
       </div>
     </section>
-    <section id="partnership" class="partnership py-60px overflow-hidden">
+    <section
+      id="partnership"
+      ref="partnershipRef"
+      class="partnership py-60px overflow-hidden transition-all duration-1000 ease-out"
+      :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+    >
       <div class="flex-center gap-32px mb-40px">
         <div class="h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)]"></div>
         <div class="text-center font-s-18px lh-21px text-#9CA0A7 pf-sc-regular whitespace-nowrap">
@@ -318,7 +328,7 @@
                 {{ currentEventData.month }}
               </span>
               <!-- 右上方小切换 -->
-              <div v-if="currentYearData?.events?.length > 1" class="flex gap-12px">
+              <div v-if="(currentYearData?.events?.length ?? 0) > 1" class="flex gap-12px">
                 <i
                   class="i-custom-arrow-circle-left wh-32px transition-all"
                   :class="[
@@ -331,7 +341,7 @@
                 <i
                   class="i-custom-arrow-circle-right wh-32px transition-all"
                   :class="[
-                    currentEventIndex === currentYearData.events.length - 1
+                    currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
                       ? 'opacity-30 cursor-not-allowed'
                       : 'cursor-pointer hover:i-custom-arrow-circle-right-active',
                   ]"
@@ -451,9 +461,13 @@
 
   const activeIndex = ref(0)
   const solutionRef = ref<HTMLElement | null>(null)
+  const abilityRef = ref<HTMLElement | null>(null)
+  const partnershipRef = ref<HTMLElement | null>(null)
   const casesRef = ref<HTMLElement | null>(null)
   const timelineRef = ref<HTMLElement | null>(null)
   const isSolutionVisible = ref(false)
+  const isAbilityVisible = ref(false)
+  const isPartnershipVisible = ref(false)
   const isCasesVisible = ref(false)
   const isTimelineVisible = ref(false)
 
@@ -529,6 +543,12 @@
             if (entry.target === solutionRef.value) {
               isSolutionVisible.value = true
             }
+            if (entry.target === abilityRef.value) {
+              isAbilityVisible.value = true
+            }
+            if (entry.target === partnershipRef.value) {
+              isPartnershipVisible.value = true
+            }
             if (entry.target === casesRef.value) {
               isCasesVisible.value = true
             }
@@ -545,6 +565,12 @@
     if (solutionRef.value) {
       observer.observe(solutionRef.value)
     }
+    if (abilityRef.value) {
+      observer.observe(abilityRef.value)
+    }
+    if (partnershipRef.value) {
+      observer.observe(partnershipRef.value)
+    }
     if (casesRef.value) {
       observer.observe(casesRef.value)
     }