fix: solutions 动效优化

.gitignore

@@ -26,3 +26,4 @@ tsconfig.tsbuildinfo
 *.sw?
 .output
 .nuxt
+.trae

app/pages/index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-15 17:57:13
+ * @LastEditTime: 2026-01-16 10:47:11
  * @Description: 
 -->
 <template>
@@ -70,66 +70,128 @@
           ]"
           @mouseenter="activeIndex = index"
         >
-          <Transition
-            mode="out-in"
-            enter-active-class="transition-opacity duration-500 ease-in-out"
-            enter-from-class="opacity-0"
-            enter-to-class="opacity-100"
-            leave-active-class="transition-opacity duration-200 ease-in-out"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
+          <!-- Hover State Content -->
+          <div
+            class="h-full w-700px pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 translate-y-0 duration-500'
+                : 'opacity-0 translate-y-20px pointer-events-none duration-300',
+            ]"
           >
-            <div v-if="index === activeIndex" class="wh-full pt-40px px-48px">
-              <div class="font-s-22px text-#000000 pf-sc-semibold">
-                {{ solution.hoverTitle }}
-              </div>
-              <div
-                class="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular whitespace-nowrap"
-              >
-                {{ solution.hoverDesc }}
-              </div>
-              <div class="mt-24px flex flex-col gap-8px">
-                <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
-                  <div class="flex gap-8px items-center font-s-14px">
-                    <i class="i-custom-check-one wh-18px"></i>
-                    <span class="text-#091221 pf-sc-semibold">
-                      {{ item.title }}
-                    </span>
-                    <span class="text-#091221/70 pf-sc-regular">
-                      {{ item.itemDesc }}
-                    </span>
-                  </div>
+            <div
+              class="font-s-22px text-#000000 pf-sc-semibold transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-100 translate-y-0 delay-100 duration-500'
+                  : 'opacity-0 translate-y-20px delay-0 duration-200',
+              ]"
+            >
+              {{ solution.hoverTitle }}
+            </div>
+            <div
+              class="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular whitespace-nowrap transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-100 translate-y-0 delay-150 duration-500'
+                  : 'opacity-0 translate-y-20px delay-0 duration-200',
+              ]"
+            >
+              {{ solution.hoverDesc }}
+            </div>
+            <div
+              class="mt-24px flex flex-col gap-8px transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-100 translate-y-0 delay-200 duration-500'
+                  : 'opacity-0 translate-y-20px delay-0 duration-200',
+              ]"
+            >
+              <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
+                <div class="flex gap-8px items-center font-s-14px">
+                  <i class="i-custom-check-one wh-18px"></i>
+                  <span class="text-#091221 pf-sc-semibold">
+                    {{ item.title }}
+                  </span>
+                  <span class="text-#091221/70 pf-sc-regular">
+                    {{ item.itemDesc }}
+                  </span>
                 </div>
               </div>
-              <button
-                class="mt-56px h-48px! w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80"
-                @click="openConsultation"
-              >
-                <span class="font-s-16px">立即咨询</span>
-                <i class="i-custom-arrow-right wh-18px"></i>
-              </button>
-              <img
-                :src="solution.hoverImg"
-                alt=""
-                class="wh-280px position-absolute bottom--37px right-0"
-              />
             </div>
-            <div v-else class="wh-full pt-40px px-24px">
-              <div class="wh-40px ml-2px bg-white rounded-10px flex-center">
-                <img :src="solution.img" alt="" class="wh-35px" />
-              </div>
+            <button
+              class="mt-56px h-48px! w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-100 translate-y-0 delay-300 duration-500'
+                  : 'opacity-0 translate-y-20px delay-0 duration-200',
+              ]"
+              @click="openConsultation"
+            >
+              <span class="font-s-16px">立即咨询</span>
+              <i class="i-custom-arrow-right wh-18px"></i>
+            </button>
+            <img
+              :src="solution.hoverImg"
+              alt=""
+              class="wh-280px absolute bottom--37px right-0 transition-all ease-out"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-100 scale-100 delay-100 duration-700'
+                  : 'opacity-0 scale-50 delay-0 duration-300',
+              ]"
+            />
+          </div>
 
-              <div class="mt-18px font-s-18px text-#091221 pf-sc-semibold">
-                {{ solution.title }}
-              </div>
-              <div class="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px">
-                {{ solution.desc }}
-              </div>
-              <i
-                class="i-custom-circle-right-up wh-48px position-absolute bottom-24px left-24px"
-              ></i>
+          <!-- Normal State Content -->
+          <div
+            class="h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out"
+            :class="[
+              index === activeIndex
+                ? 'opacity-0 pointer-events-none duration-300'
+                : 'opacity-100 duration-500',
+            ]"
+          >
+            <div
+              class="wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out"
+              :class="[
+                index === activeIndex
+                  ? 'scale-150 opacity-0 delay-0 duration-300'
+                  : 'scale-100 opacity-100 delay-0 duration-500',
+              ]"
+            >
+              <img :src="solution.img" alt="" class="wh-35px" />
             </div>
-          </Transition>
+
+            <div
+              class="mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
+                  : 'opacity-100 translate-y-0 delay-100 duration-500',
+              ]"
+            >
+              {{ solution.title }}
+            </div>
+            <div
+              class="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
+                  : 'opacity-100 translate-y-0 delay-150 duration-500',
+              ]"
+            >
+              {{ solution.desc }}
+            </div>
+            <i
+              class="i-custom-circle-right-up wh-48px absolute bottom-24px left-24px transition-all"
+              :class="[
+                index === activeIndex
+                  ? 'opacity-0 scale-50 delay-0 duration-200'
+                  : 'opacity-100 scale-100 delay-100 duration-500',
+              ]"
+            ></i>
+          </div>
         </div>
       </div>
     </section>