✨ feat: 优化移动端 歌词与歌单页面显示

src/layout/components/MusicFull.vue

@@ -258,8 +258,6 @@ defineExpose({
       background-color: transparent;
 
       span {
-        padding-right: 100px;
-        // display: inline-block;
         background-clip: text !important;
         -webkit-background-clip: text !important;
       }
@@ -286,12 +284,16 @@ defineExpose({
 
 .mobile {
   #drawer-target {
-    @apply flex-col p-4 pt-8;
+    @apply flex-col p-4 pt-8 justify-start;
     .music-img {
       display: none;
     }
     .music-lrc {
       height: calc(100vh - 260px) !important;
+      width: 100vw;
+    }
+    .music-lrc-text {
+      text-align: center;
     }
   }
 }

src/views/list/index.vue

@@ -5,7 +5,7 @@ import { getListByCat, getListDetail, getRecommendList } from '@/api/list';
 import MusicList from '@/components/MusicList.vue';
 import type { IRecommendItem } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
-import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { formatNumber, getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'List',
@@ -96,6 +96,10 @@ const handleScroll = (e: any) => {
 // 监听窗口大小变化，调整每行显示数量
 const updateItemsPerRow = () => {
   const width = window.innerWidth;
+  if (isMobile.value) {
+    ITEMS_PER_ROW.value = 2;
+    return;
+  }
   if (width > 1800) ITEMS_PER_ROW.value = 8;
   else if (width > 1200) ITEMS_PER_ROW.value = 8;
   else if (width > 768) ITEMS_PER_ROW.value = 6;
@@ -240,4 +244,10 @@ watch(
 .no-more {
   @apply text-center py-4 text-sm text-gray-500;
 }
+
+.mobile {
+  .recommend-list {
+    @apply px-4;
+  }
+}
 </style>