From 5a9b0f0f5d2aa7627ae67b09a1bd2b178324c177 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 27 Oct 2025 11:06:30 +0800
Subject: [PATCH] motion-about

---
 app/pages/about/index.vue | 82 +++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 0ca55cb..977382e 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type {TabsItem, TimelineItem} from '@nuxt/ui'
+import {Motion} from "motion-v"
 
 const items = [
   {
@@ -246,45 +247,58 @@ onMounted(() => {
         class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
       <UTabs :items="items" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
         <template #team="{ item }">
-
-          <view class="grid lg:grid-cols-[2fr_3fr] gap-4 items-center">
-            <img alt="" src="/img/about/teamPhoto.png">
-            <img alt="" src="/img/about/about.png">
-
-          </view>
-
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <view class="grid lg:grid-cols-[2fr_3fr] gap-4 items-center">
+              <img alt="" src="/img/about/teamPhoto.png">
+              <img alt="" src="/img/about/about.png">
+            </view>
+          </Motion>
         </template>
 
         <template #advantage="{ item }">
-
-          <div class="space-y-6 ">
-            <UPageCard
-                v-for="(card, index) in cards"
-                :key="index"
-                :description="card.description"
-
-                :title="card.title"
-                :ui="{
-        container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
-      }"
-                orientation="horizontal"
-                reverse
-                spotlight
-                spotlight-color="primary"
-            >
-
-              <UIcon :name="card.icon" class="size-20 m-auto text-primary"/>
-            </UPageCard>
-          </div>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <div class="space-y-6 ">
+              <UPageCard
+                  v-for="(card, index) in cards"
+                  :key="index"
+                  :description="card.description"
+                  :title="card.title"
+                  :ui="{
+          container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
+        }"
+                  orientation="horizontal"
+                  reverse
+                  spotlight
+                  spotlight-color="primary"
+              >
+                <UIcon :name="card.icon" class="size-20 m-auto text-primary"/>
+              </UPageCard>
+            </div>
+          </Motion>
         </template>
+        
         <template #record="{ item }">
-          <view/>
-          <UTimeline
-              v-model="active" :items="lineItems" :ui="{
-            date:'text-dimmed text-2xl',
-             title: 'font-medium text-highlighted text-3xl',
-        description: 'text-muted text-wrap text-xl'
-          }" class=" px-auto " size="3xl"/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <view/>
+            <UTimeline
+                v-model="active" :items="lineItems" :ui="{
+              date:'text-dimmed text-2xl',
+               title: 'font-medium text-highlighted text-3xl',
+          description: 'text-muted text-wrap text-xl'
+            }" class=" px-auto " size="3xl"/>
+          </Motion>
         </template>
       </UTabs>
     </upagesection>