From a04aee80b0345994e6b57d5bee7f41345a1a65f9 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Fri, 25 Apr 2025 08:14:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9aos=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=AE=A9=E4=BB=96=E7=9C=8B=E4=B8=8A=E5=8E=BB?=
 =?UTF-8?q?=E6=9B=B4=E5=8A=A0=E4=B8=9D=E6=BB=91=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8=E7=9A=84=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/AdminLayout.vue      |  3 ++-
 src/layouts/MainLayout.vue       |  2 +-
 src/views/admin/Dashboard.vue    |  2 +-
 src/views/admin/ProjectsCRUD.vue |  2 +-
 src/views/frontend/About.vue     |  2 +-
 src/views/frontend/Detail.vue    |  2 +-
 src/views/frontend/Home.vue      |  2 +-
 src/views/frontend/Personal.vue  |  2 +-
 src/views/frontend/Projects.vue  | 26 +++++++++++++++++++++++---
 src/views/frontend/Services.vue  |  2 +-
 10 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 7522c27..b697295 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -11,7 +11,7 @@ const collapsed = ref(false)
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
@@ -178,6 +178,7 @@ const navigateTo = (path) => {
 <style scoped>
 /* 自定义样式 */
 .admin-layout {
+  min-width: 100vh;
   min-height: 100vh;
 }
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4d9afed..21946af 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -29,7 +29,7 @@ onMounted(() => {
   })
 
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/admin/Dashboard.vue b/src/views/admin/Dashboard.vue
index 08537a2..18bc3c9 100644
--- a/src/views/admin/Dashboard.vue
+++ b/src/views/admin/Dashboard.vue
@@ -5,7 +5,7 @@ import 'aos/dist/aos.css'
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/admin/ProjectsCRUD.vue b/src/views/admin/ProjectsCRUD.vue
index 822b94d..60870e3 100644
--- a/src/views/admin/ProjectsCRUD.vue
+++ b/src/views/admin/ProjectsCRUD.vue
@@ -5,7 +5,7 @@ import 'aos/dist/aos.css'
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/frontend/About.vue b/src/views/frontend/About.vue
index 2049c26..573b988 100644
--- a/src/views/frontend/About.vue
+++ b/src/views/frontend/About.vue
@@ -6,7 +6,7 @@ import 'aos/dist/aos.css'
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/frontend/Detail.vue b/src/views/frontend/Detail.vue
index 08d7115..d2d3913 100644
--- a/src/views/frontend/Detail.vue
+++ b/src/views/frontend/Detail.vue
@@ -16,7 +16,7 @@ const modules = [Autoplay, Pagination, Navigation, EffectFade]
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/frontend/Home.vue b/src/views/frontend/Home.vue
index 867e9a3..5140994 100644
--- a/src/views/frontend/Home.vue
+++ b/src/views/frontend/Home.vue
@@ -13,7 +13,7 @@ const modules = [Autoplay, Pagination, Navigation, EffectFade]
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/frontend/Personal.vue b/src/views/frontend/Personal.vue
index af26590..2188cea 100644
--- a/src/views/frontend/Personal.vue
+++ b/src/views/frontend/Personal.vue
@@ -22,7 +22,7 @@ const userData = ref({
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
diff --git a/src/views/frontend/Projects.vue b/src/views/frontend/Projects.vue
index 5624d06..c8c5dee 100644
--- a/src/views/frontend/Projects.vue
+++ b/src/views/frontend/Projects.vue
@@ -5,7 +5,7 @@ import 'aos/dist/aos.css'
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false
@@ -71,6 +71,26 @@ const formatDate = (dateString) => {
 const formatPrice = (price) => {
   return '¥ ' + parseFloat(price).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 }
+
+const getAosEffect = (index) => {
+  const screenWidth = window.innerWidth;
+  let itemsPerRow;
+  if (screenWidth >= 1024) { // PC
+    itemsPerRow = 3;
+  } else if (screenWidth >= 768) { // 平板
+    itemsPerRow = 2;
+  } else { // 手机
+    itemsPerRow = 1;
+  }
+  const rowIndex = Math.floor(index / itemsPerRow);
+  const colIndex = index % itemsPerRow;
+  const aosEffects = [
+    ['fade-up', 'fade-down', 'fade-left'],
+    ['fade-right', 'zoom-in', 'zoom-out'],
+    ['flip-left', 'flip-right', 'slide-up']
+  ];
+  return aosEffects[rowIndex % aosEffects.length][colIndex % aosEffects[0].length];
+}
 </script>
 
 <template>
@@ -146,10 +166,10 @@ const formatPrice = (price) => {
       <!-- 项目卡片网格 -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         <div
-            v-for="project in filteredProjects"
+            v-for="(project, index) in filteredProjects"
             :key="project.id"
             class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
-            data-aos="fade-up"
+            :data-aos="getAosEffect(index)"
             @click="$router.push(`/project/${project.id}`)"
         >
           <div class="relative h-56 overflow-hidden">
diff --git a/src/views/frontend/Services.vue b/src/views/frontend/Services.vue
index 064b4c3..83f7194 100644
--- a/src/views/frontend/Services.vue
+++ b/src/views/frontend/Services.vue
@@ -5,7 +5,7 @@ import 'aos/dist/aos.css'
 
 onMounted(() => {
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: true