修改aos加载时间让他看上去更加丝滑，修改项目列表的卡片加载逻辑

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;
 }
 

src/layouts/MainLayout.vue

@@ -29,7 +29,7 @@ onMounted(() => {
   })
 
   AOS.init({
-    duration: 1200,
+    duration: 800,
     offset: 120,
     easing: 'ease-out-cubic',
     once: false

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

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

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

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

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

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

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">

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