Selaa lähdekoodia

fix: hoverimg 动画

Lee 4 päivää sitten
vanhempi
commit
2002bb2e24
1 muutettua tiedostoa jossa 11 lisäystä ja 3 poistoa
  1. 11 3
      app/pages/index/index.vue

+ 11 - 3
app/pages/index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 10:16:16
+ * @LastEditTime: 2026-01-20 10:29:56
  * @Description: 
 -->
 <template>
@@ -60,6 +60,7 @@
               : 'bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)] lt-sm:bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]',
           ]"
           @mouseenter="activeIndex = index"
+          @click="scrollToSolution(index)"
         >
           <!-- Hover State Content -->
           <div
@@ -132,7 +133,7 @@
               :class="[
                 index === activeIndex
                   ? 'opacity-100 scale-100 delay-200 duration-500'
-                  : 'opacity-0 scale-50 delay-0 duration-500',
+                  : 'opacity-0 scale-50 delay-0 duration-300',
               ]"
             />
           </div>
@@ -551,7 +552,14 @@
   }
 
   const scrollToSolution = (index: number) => {
+    // 桌面端点击不触发滚动
+    if (window.innerWidth >= 640) return
+
     if (!solutionListRef.value) return
+
+    // 立即更新状态,提升响应速度
+    activeIndex.value = index
+
     const width = solutionListRef.value.offsetWidth
     const cardWidth = width * 0.85
     const gap = 16
@@ -944,7 +952,7 @@
   }
 
   .solution-card-img {
-    @apply wh-280px absolute bottom--37px right-0 transition-all duration-1000 ease-in-out;
+    @apply wh-280px absolute bottom--37px right-0 transition-all duration-300 ease-in-out;
     @apply lt-sm:wh-264px lt-sm:bottom--26px;
   }