✨ feat: 优化歌单列表页面

src/views/list/index.vue

@@ -21,7 +21,8 @@ const isLoadingMore = ref(false);
 
 // 计算每个项目的动画延迟
 const getItemAnimationDelay = (index: number) => {
-  return setAnimationDelay(index, 30);
+  const currentPageIndex = index % TOTAL_ITEMS;
+  return setAnimationDelay(currentPageIndex, 30);
 };
 
 const recommendItem = ref<IRecommendItem | null>();
@@ -167,7 +168,7 @@ watch(
 
   &-list {
     @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
   &-item {
     @apply flex flex-col;
@@ -224,6 +225,7 @@ watch(
 
   .recommend-list {
     @apply px-4 gap-4;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
 }
 </style>

src/views/mv/index.vue

@@ -58,7 +58,7 @@ const initLoading = ref(false);
 const loadingMore = ref(false);
 const currentIndex = ref(0);
 const offset = ref(0);
-const limit = ref(28);
+const limit = ref(42);
 const hasMore = ref(true);
 
 const getItemAnimationDelay = (index: number) => {
@@ -163,7 +163,7 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
 
   &-content {
     @apply grid gap-4 pb-28 mt-2 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   }
 
   .mv-item {
@@ -223,6 +223,7 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
 
   .mv-list-content {
     @apply px-4;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
 }