From f3b9b43d9c31dcff7df2081b2c6f0c403f8035eb Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 27 Oct 2025 11:10:57 +0800
Subject: [PATCH] motion-example

---
 app/pages/example/index.vue | 43 +++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/app/pages/example/index.vue b/app/pages/example/index.vue
index b6930d0..4a6c6d6 100644
--- a/app/pages/example/index.vue
+++ b/app/pages/example/index.vue
@@ -2,6 +2,7 @@
 
 import type {TabsItem} from "@nuxt/ui";
 import {getPartnersByType,} from '@/data/partners'
+import {Motion} from "motion-v"
 
 const governmentPartners = getPartnersByType('government')
 const universityPartners = getPartnersByType('university')
@@ -75,7 +76,7 @@ const tabsItems = [
     <UPageSection
         :style="{ backgroundImage: `url('/img/about/bg.png')` ,    }"
         :ui="{container:'lg:py-3'}"
-        class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
+        class="space-y-6 bg-fixed bg-no-repeat bg-center w-full mb-4 min-h-screen">
       <view class="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6 items-center">
         <!-- 每个单元格单独循环 -->
         <view v-for="item in items" :key="item.name" class="text-center">
@@ -101,23 +102,53 @@ const tabsItems = [
 
         <!-- 政府单位 -->
         <template #government="{ item }">
-          <ExamplePartnerGrid :partners="governmentPartners"/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="governmentPartners"/>
+          </Motion>
         </template>
         <!-- 科研机构 -->
         <template #research="{ item }">
-          <ExamplePartnerGrid :partners="universityPartners"/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="universityPartners"/>
+          </Motion>
         </template>
         <!-- 大型企业 -->
         <template #enterprise="{ item }">
-          <ExamplePartnerGrid :partners="enterprisePartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="enterprisePartners "/>
+          </Motion>
         </template>
         <!-- 综合试验点 -->
         <template #pilot="{ item }">
-          <ExamplePartnerGrid :partners="pilotPartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="pilotPartners "/>
+          </Motion>
         </template>
         <!-- 养蜂合作社 -->
         <template #cooperative="{ item }">
-          <ExamplePartnerGrid :partners="cooperativePartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="cooperativePartners "/>
+          </Motion>
         </template>
       </UTabs>
     </upagesection>