From d0d89668757fe78d04362a85746e1989574a04a9 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 7 Dec 2024 22:54:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=20=E6=AD=8C=E8=AF=8D=E4=B8=8E=E6=AD=8C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/MusicFull.vue |  8 +++++---
 src/views/list/index.vue            | 12 +++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue
index c15a201..7eeecc4 100644
--- a/src/layout/components/MusicFull.vue
+++ b/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;
     }
   }
 }
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index 70f80ae..9f74066 100644
--- a/src/views/list/index.vue
+++ b/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>