From 04c6b546fda58d695033ca0c98d1f824ae9bb9b5 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 27 Oct 2025 10:21:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8A=A8=E6=95=88=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/landing/CaseFacts.vue          | 16 +++++--
 .../landing/D3_INTELLIGENT_APIARY.vue         | 16 +++++--
 app/components/landing/OUR_STRENGTHS.vue      | 48 +++++++++++++------
 .../landing/PRODUCT_INTRODUCTION.vue          | 44 ++++++++++-------
 4 files changed, 85 insertions(+), 39 deletions(-)

diff --git a/app/components/landing/CaseFacts.vue b/app/components/landing/CaseFacts.vue
index efa5091..2dcfa75 100644
--- a/app/components/landing/CaseFacts.vue
+++ b/app/components/landing/CaseFacts.vue
@@ -27,10 +27,18 @@ const cardItems = ref([
   <div
       :style="{ backgroundImage: `url('/img/index/3d_bg.png')` ,    }"
       class="bg-cover bg-no-repeat bg-center w-full mb-4">
-    <TitleSection
-        subtitle="CASE FACTS"
-        title="案例实况"
-    />
+
+    <Motion
+        :in-view-options="{ once: true }"
+        :initial="{ opacity: 0,scale:0 }"
+        :transition="{   duration: 0.6,delay: 0.1}"
+        :while-in-view="{ opacity: 1,scale:1 }"
+    >
+      <TitleSection
+          subtitle="CASE FACTS"
+          title="案例实况"
+      />
+    </Motion>
 
     <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 lg:px-40">
       <UPageCard
diff --git a/app/components/landing/D3_INTELLIGENT_APIARY.vue b/app/components/landing/D3_INTELLIGENT_APIARY.vue
index 423fdb4..dddbac0 100644
--- a/app/components/landing/D3_INTELLIGENT_APIARY.vue
+++ b/app/components/landing/D3_INTELLIGENT_APIARY.vue
@@ -6,10 +6,18 @@
   <div
       :style="{ backgroundImage: `url('/img/index/3d_bg.png')` ,    }"
       class="bg-cover bg-no-repeat bg-center w-full ">
-    <TitleSection
-        subtitle="3D INTELLIGENT APIARY"
-        title="3D智慧蜂场"
-    />
+
+    <Motion
+        :in-view-options="{ once: true }"
+        :initial="{ opacity: 0 ,transform: 'translateX(40px)'}"
+        :transition="{   duration: 0.6,delay: 0.1}"
+        :while-in-view="{ opacity: 1,transform: 'translateX(0px)' }"
+    >
+      <TitleSection
+          subtitle="3D INTELLIGENT APIARY"
+          title="3D智慧蜂场"
+      />
+    </Motion>
     <img alt="" class="w-full  lg:px-40 " src="/img/index/model2.b444287.gif">
   </div>
 
diff --git a/app/components/landing/OUR_STRENGTHS.vue b/app/components/landing/OUR_STRENGTHS.vue
index 1610152..08db7c1 100644
--- a/app/components/landing/OUR_STRENGTHS.vue
+++ b/app/components/landing/OUR_STRENGTHS.vue
@@ -10,26 +10,44 @@ const items = [
   <div
       :style="{ backgroundImage: `url('/img/index/strength_bg.png')` ,    }"
       class="bg-cover bg-no-repeat bg-center w-full ">
+    <Motion
+        :in-view-options="{ once: true }"
+        :initial="{ opacity: 0,scale:0 }"
+        :transition="{   duration: 0.6,delay: 0.1}"
+        :while-in-view="{ opacity: 1,scale:1 }"
+    >
+      <TitleSection
+          subtitle="OUR STRENGTHS"
+          title="我们的优势"
+      />
+    </Motion>
 
-
-    <TitleSection
-        subtitle="OUR STRENGTHS"
-        title="我们的优势"
-    />
     <view class="flex items-center flex-col lg:px-80 sm:flex-row">
-      <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
-        <UCarousel v-slot="{ item }" :items="items" arrows class="w-full max-w-xs mx-auto">
-          <nuxt-img :src="item" class="rounded-lg" height="320" width="320"/>
-        </UCarousel>
-      </div>
-      <div class="relative w-full max-w-6xl mx-auto aspect-video md:aspect-[16/9]">
+      <Motion
+          :in-view-options="{ once: true }"
+          :initial="{ opacity: 0,scale:0 }"
+          :transition="{   duration: 0.6,delay: 0.1}"
+          :while-in-view="{ opacity: 1,scale:1 }"
+      >
+        <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
+          <UCarousel v-slot="{ item }" :items="items" arrows class="w-full max-w-xs mx-auto">
+            <nuxt-img :src="item" class="rounded-lg" height="320" width="320"/>
+          </UCarousel>
+        </div>
+      </Motion>
+      <Motion
+          :in-view-options="{ once: true }"
+          :initial="{ opacity: 0,scale:0 }"
+          :transition="{   duration: 0.6,delay: 0.1}"
+          :while-in-view="{ opacity: 1,scale:1 }"
+      >
+        <div class="relative w-full max-w-6xl mx-auto aspect-video md:aspect-[16/9]">
 
-        <img class="rounded-lg" height="320" src='/img/index/advantage.png'>
+          <img alt="" class="rounded-lg" src='/img/index/advantage.png'>
 
-      </div>
+        </div>
+      </Motion>
     </view>
-
-
   </div>
 </template>
 
diff --git a/app/components/landing/PRODUCT_INTRODUCTION.vue b/app/components/landing/PRODUCT_INTRODUCTION.vue
index acbe1bb..93b6e7d 100644
--- a/app/components/landing/PRODUCT_INTRODUCTION.vue
+++ b/app/components/landing/PRODUCT_INTRODUCTION.vue
@@ -7,23 +7,35 @@
       :style="{ backgroundImage: `url('/img/index/strength_bg.png')` ,    }"
       class="bg-cover bg-no-repeat bg-center w-full ">
 
-
-    <TitleSection
-        subtitle="PRODUCT INTRODUCTION"
-        title="产品介绍"
-    />
-
-    <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
-      <video
-
-          class="w-full h-full object-cover rounded-lg shadow-lg"
-          controls
-          loop
-          muted
-          poster="/img/index/banner.png"
-          src="https://www.caasbee.com/image/cpjs.mp4"
+    <Motion
+        :in-view-options="{ once: true }"
+        :initial="{ opacity: 0,scale:0 }"
+        :transition="{   duration: 0.6,delay: 0.1}"
+        :while-in-view="{ opacity: 1,scale:1 }"
+    >
+      <TitleSection
+          subtitle="PRODUCT INTRODUCTION"
+          title="产品介绍"
       />
-    </div>
+    </Motion>
+    <Motion
+        :in-view-options="{ once: true }"
+        :initial="{ opacity: 0,scale:0 }"
+        :transition="{   duration: 0.6,delay: 0.1}"
+        :while-in-view="{ opacity: 1,scale:1 }"
+    >
+      <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
+        <video
+
+            class="w-full h-full object-cover rounded-lg shadow-lg"
+            controls
+            loop
+            muted
+            poster="/img/index/banner.png"
+            src="https://www.caasbee.com/image/cpjs.mp4"
+        />
+      </div>
+    </Motion>
 
 
   </div>