motion-knowledge

app/components/product/knowledge/Hero.vue

@@ -38,44 +38,101 @@ const cardItems = ref([
 
   <img alt="" class="w-max" src="/img/product/knowledge/banner.png">
 
-  <!--  <UPageSection-->
-  <!--      :ui="{-->
-  <!--         container:'!py-0 !gap-0'-->
-  <!--      }">-->
-  <TitleDescription
-      description="为消费者、蜂产品生产企业或质量监管部门提供的一种蜂产品质量追溯手段，实现对蜂产品从养殖到销售全流程信息追溯，提高全产业链
-      透明度，极大提升产品品牌效应和宣传力度。已在北京、新疆、湖北、广东、浙江、四川等地推广应用。"
-      subtitle="SERVICE INTRODUCTION"
-      title="服务简介"
-  />
-  <!--  </UPageSection>-->
-  <view class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-6  px-4 md:py-16">
-    <UPageCTA
+
+  <!-- 标题描述 - 从左侧滑入 -->
+  <Motion
+      :in-view-options="{ once: true }"
+      :initial="{ opacity: 0, x: -50 }"
+      :transition="{ duration: 0.6, delay: 0.2 }"
+      :while-in-view="{ opacity: 1, x: 0 }"
+  >
+    <TitleDescription
+        description="为消费者、蜂产品生产企业或质量监管部门提供的一种蜂产品质量追溯手段，实现对蜂产品从养殖到销售全流程信息追溯，提高全产业链
+        透明度，极大提升产品品牌效应和宣传力度。已在北京、新疆、湖北、广东、浙江、四川等地推广应用。"
+        subtitle="SERVICE INTRODUCTION"
+        title="服务简介"
+    />
+  </Motion>
+
+  <!-- 卡片网格 - 交错动画 -->
+  <view class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-6 px-4 md:py-16">
+    <Motion
         v-for="(item, index) in cardItems"
         :key="index"
-        :description="item.description"
-        :title="item.title"
-        :ui="{
-                title: 'font-semibold text-lg text-primary',
-            }"
-        class="shadow-lg"
-        reverse
-
+        :in-view-options="{ once: true }"
+        :initial="{ 
+          opacity: 0, 
+          y: 50, 
+          scale: 0.8,
+          rotateY: -15
+        }"
+        :transition="{ 
+          duration: 0.6, 
+          delay: 0.1 * index,
+          ease: 'easeOut'
+        }"
+        :while-hover="{
+          scale: 1.05,
+          rotateY: 5,
+          transition: { duration: 0.3 }
+        }"
+        :while-in-view="{
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          rotateY: 0
+        }"
+        class="transform-gpu"
     >
-      <img
-          :src="item.image"
-          alt="Illustration"
-          class="w-full shadow-2xl rounded-2xl"
-
+      <UPageCTA
+          :description="item.description"
+          :title="item.title"
+          :ui="{
+                  title: 'font-semibold text-lg text-primary',
+              }"
+          class="shadow-lg hover:shadow-2xl transition-shadow duration-300 h-full"
+          reverse
       >
-    </UPageCTA>
-
+        <Motion
+            :initial="{ scale: 0.9, opacity: 0.7 }"
+            :transition="{ duration: 0.4, delay: 0.2 + 0.1 * index }"
+            :while-hover="{
+              scale: 1.1,
+              rotate: 2,
+              transition: { duration: 0.3 }
+            }"
+            :while-in-view="{ scale: 1, opacity: 1 }"
+        >
+          <img
+              :src="item.image"
+              alt="Illustration"
+              class="w-full shadow-2xl rounded-2xl"
+          >
+        </Motion>
+      </UPageCTA>
+    </Motion>
   </view>
 
-
-  <img alt="" class="pt-6" src="/img/product/knowledge/dingzhipng.png">
-
-
+  <!-- 底部图片 - 从下方滑入并带有弹性效果 -->
+  <Motion
+      :in-view-options="{ once: true }"
+      :initial="{ opacity: 0, y: 100, scale: 0.8 }"
+      :transition="{ 
+        duration: 0.8, 
+        delay: 0.3,
+        type: 'spring',
+        stiffness: 100,
+        damping: 15
+      }"
+      :while-hover="{
+        scale: 1.02,
+        transition: { duration: 0.3 }
+      }"
+      :while-in-view="{ opacity: 1, y: 0, scale: 1 }"
+      class="pt-6"
+  >
+    <img alt="" src="/img/product/knowledge/dingzhipng.png">
+  </Motion>
 </template>