✨ feat: 优化页面效果

src/components/MusicList.vue

@@ -1,7 +1,7 @@
 <template>
   <n-drawer
     :show="show"
-    :height="isMobile ? '100vh' : '70vh'"
+    :height="isMobile ? '100vh' : '80vh'"
     placement="bottom"
     block-scroll
     mask-closable
@@ -28,6 +28,7 @@
               class="cover-img"
               preview-disabled
               :class="setAnimationClass('animate__fadeIn')"
+              object-fit="cover"
             />
           </div>
           <div class="music-detail">
@@ -52,7 +53,7 @@
                   v-for="(item, index) in displayedSongs"
                   :key="item.id"
                   class="double-item"
-                  :class="setAnimationClass('animate__bounceInDown')"
+                  :class="setAnimationClass('animate__bounceInUp')"
                   :style="getItemAnimationDelay(index)"
                 >
                   <song-item :item="formatDetail(item)" @play="handlePlay" />
@@ -220,7 +221,7 @@ watch(
   }
 
   &-info {
-    @apply w-[400px] flex-shrink-0 pr-8 flex flex-col;
+    @apply w-[25%] flex-shrink-0 pr-8 flex flex-col;
 
     .music-cover {
       @apply w-full aspect-square rounded-lg overflow-hidden mb-4;

src/views/list/index.vue

@@ -168,7 +168,7 @@ watch(
 
   &-list {
     @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   &-item {
     @apply flex flex-col;

src/views/mv/index.vue

@@ -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(220px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   }
 
   .mv-item {