From c09707867b1fc700cc020ec2794b567acf342735 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Thu, 23 May 2024 17:12:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=20web=E7=A7=BB=E5=8A=A8=E7=AB=AF=20=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                          |   4 +-
 src/App.vue                         |  14 +++-
 src/components/MusicList.vue        |  17 ++++-
 src/components/PlaylistType.vue     |   6 ++
 src/components/RecommendSinger.vue  | 109 ++++++++++++++++------------
 src/layout/AppLayout.vue            |  27 +++++--
 src/layout/components/AppMenu.vue   |  21 ++++++
 src/layout/components/MusicFull.vue |  12 +++
 src/layout/components/PlayBar.vue   |  38 +++++++++-
 src/layout/components/SearchBar.vue |   6 ++
 src/store/index.ts                  |   2 +
 src/utils/index.ts                  |  16 ++++
 src/views/history/index.vue         |   2 +-
 src/views/home/index.vue            |  12 ++-
 src/views/list/index.vue            |  14 +++-
 src/views/login/index.vue           |   4 +-
 src/views/mv/index.vue              |   8 +-
 src/views/search/index.vue          |  22 +++++-
 src/views/user/index.vue            |  10 ++-
 19 files changed, 265 insertions(+), 79 deletions(-)
diff --git a/index.html b/index.html
index 4641787..a90cff0 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
 
 <head>
   <meta charset="UTF-8" />
@@ -15,7 +15,7 @@
       --animate-delay: 0.5s;
     }
   </style>
-  </head>
+</head>
 
 <body>
   <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 18855c3..06a029d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app" :class="isMobile ? 'mobile' : ''">
     <audio id="MusicAudio" ref="audioRef" :src="playMusicUrl" :autoplay="play"></audio>
     <n-config-provider :theme="darkTheme">
       <n-dialog-provider>
@@ -16,6 +16,8 @@ import { darkTheme } from 'naive-ui';
 
 import store from '@/store';
 
+import { isMobile } from './utils';
+
 const playMusicUrl = computed(() => store.state.playMusicUrl as string);
 // 是否播放
 const play = computed(() => store.state.play as boolean);
@@ -35,4 +37,14 @@ div {
 .app {
   user-select: none;
 }
+
+.mobile {
+  .text-base {
+    font-size: 14px !important;
+  }
+}
+
+.html:has(.mobile) {
+  font-size: 14px;
+}
 </style>
diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue
index a6493db..74a648e 100644
--- a/src/components/MusicList.vue
+++ b/src/components/MusicList.vue
@@ -1,8 +1,13 @@
 <template>
-  <n-drawer :show="show" height="70vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
+  <n-drawer
+    :show="show"
+    :height="isMobile ? '100vh' : '70vh'"
+    placement="bottom"
+    :drawer-style="{ backgroundColor: 'transparent' }"
+  >
     <div class="music-page">
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
-      <div class="music-title">{{ name }}</div>
+      <div class="music-title text-el">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
       <div class="music-list">
         <n-scrollbar>
@@ -25,7 +30,7 @@
 import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
+import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 import PlayBottom from './common/PlayBottom.vue';
 
@@ -78,4 +83,10 @@ const close = () => {
     height: calc(100% - 60px);
   }
 }
+
+.mobile {
+  .music-page {
+    @apply px-4;
+  }
+}
 </style>
diff --git a/src/components/PlaylistType.vue b/src/components/PlaylistType.vue
index 97059f7..8b76198 100644
--- a/src/components/PlaylistType.vue
+++ b/src/components/PlaylistType.vue
@@ -74,4 +74,10 @@ onMounted(() => {
     @apply block text-center;
   }
 }
+
+.mobile {
+  .play-list-type {
+    @apply mx-0 w-full;
+  }
+}
 </style>
diff --git a/src/components/RecommendSinger.vue b/src/components/RecommendSinger.vue
index 360dce3..b9a7d4b 100644
--- a/src/components/RecommendSinger.vue
+++ b/src/components/RecommendSinger.vue
@@ -1,58 +1,60 @@
 <template>
   <!-- 推荐歌手 -->
-  <div class="recommend-singer">
-    <div class="recommend-singer-list">
-      <div
-        class="recommend-singer-item relative"
-        :class="setAnimationClass('animate__backInRight')"
-        :style="setAnimationDelay(0, 100)"
-      >
+  <n-scrollbar :size="100" :x-scrollable="true">
+    <div class="recommend-singer">
+      <div class="recommend-singer-list">
         <div
-          :style="setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '300y300'))"
-          class="recommend-singer-item-bg"
-        ></div>
-        <div
-          class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-          @click="showMusic = true"
+          class="recommend-singer-item relative"
+          :class="setAnimationClass('animate__backInRight')"
+          :style="setAnimationDelay(0, 100)"
         >
-          <div class="font-bold text-xl">每日推荐列表</div>
+          <div
+            :style="setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '300y300'))"
+            class="recommend-singer-item-bg"
+          ></div>
+          <div
+            class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
+            @click="showMusic = true"
+          >
+            <div class="font-bold text-xl">每日推荐</div>
 
-          <div class="mt-2">
-            <p v-for="item in dayRecommendData?.dailySongs.slice(0, 8)" :key="item.id" class="text-el">
-              {{ item.name }}
-              <br />
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        v-for="(item, index) in hotSingerData?.artists.slice(0, 4)"
-        :key="item.id"
-        class="recommend-singer-item relative"
-        :class="setAnimationClass('animate__backInRight')"
-        :style="setAnimationDelay(index + 1, 100)"
-      >
-        <div :style="setBackgroundImg(getImgUrl(item.picUrl, '300y300'))" class="recommend-singer-item-bg"></div>
-        <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">{{ item.musicSize }}首</div>
-        <div class="recommend-singer-item-info z-10">
-          <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
-            <i class="iconfont icon-playfill text-xl"></i>
-          </div>
-          <div class="ml-4">
-            <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
-            <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
+            <div class="mt-2">
+              <p v-for="item in dayRecommendData?.dailySongs.slice(0, 5)" :key="item.id" class="text-el">
+                {{ item.name }}
+                <br />
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          v-for="(item, index) in hotSingerData?.artists.slice(0, 4)"
+          :key="item.id"
+          class="recommend-singer-item relative"
+          :class="setAnimationClass('animate__backInRight')"
+          :style="setAnimationDelay(index + 1, 100)"
+        >
+          <div :style="setBackgroundImg(getImgUrl(item.picUrl, '300y300'))" class="recommend-singer-item-bg"></div>
+          <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">{{ item.musicSize }}首</div>
+          <div class="recommend-singer-item-info z-10">
+            <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
+              <i class="iconfont icon-playfill text-xl"></i>
+            </div>
+            <div class="ml-4">
+              <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
+              <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
+            </div>
           </div>
         </div>
       </div>
+
+      <music-list
+        v-if="dayRecommendData?.dailySongs.length"
+        v-model:show="showMusic"
+        name="每日推荐列表"
+        :song-list="dayRecommendData?.dailySongs"
+      />
     </div>
-
-    <music-list
-      v-if="dayRecommendData?.dailySongs.length"
-      v-model:show="showMusic"
-      name="每日推荐列表"
-      :song-list="dayRecommendData?.dailySongs"
-    />
-  </div>
+  </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -110,7 +112,7 @@ const toSearchSinger = (keyword: string) => {
     height: 280px;
   }
   &-item {
-    @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between;
+    @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between overflow-hidden;
     &-bg {
       @apply bg-gray-900 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
       filter: brightness(60%);
@@ -123,4 +125,17 @@ const toSearchSinger = (keyword: string) => {
     }
   }
 }
+
+.mobile .recommend-singer {
+  &-list {
+    height: 180px;
+    @apply ml-4;
+  }
+  &-item {
+    @apply p-4 rounded-xl;
+    &-bg {
+      @apply rounded-xl;
+    }
+  }
+}
 </style>
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index cd4452b..68d447a 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -4,14 +4,18 @@
       <title-bar v-if="isElectron" />
       <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
         <!-- 侧边菜单栏 -->
-        <app-menu class="menu" :menus="menus" />
+        <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
           <div class="main-content bg-black" :native-scrollbar="false">
             <n-message-provider>
-              <router-view v-slot="{ Component }" class="main-page" :class="route.meta.noScroll ? 'pr-3' : ''">
+              <router-view
+                v-slot="{ Component }"
+                class="main-page"
+                :class="route.meta.noScroll && !isMobile ? 'pr-3' : ''"
+              >
                 <keep-alive :include="keepAliveInclude">
                   <component :is="Component" />
                 </keep-alive>
@@ -19,6 +23,7 @@
             </n-message-provider>
           </div>
           <play-bottom height="5rem" />
+          <app-menu v-if="isMobile" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
@@ -33,6 +38,7 @@ import { useStore } from 'vuex';
 
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import homeRouter from '@/router/home';
+import { isMobile } from '@/utils';
 
 const keepAliveInclude = computed(() =>
   homeRouter
@@ -135,18 +141,23 @@ const playMusicEvent = async () => {
   &-page {
     @apply flex flex-1 overflow-hidden;
   }
-  .menu {
-    width: 90px;
-  }
   .main {
-    @apply flex-1 box-border flex flex-col;
+    @apply flex-1 box-border flex flex-col overflow-hidden;
     height: 100%;
     &-content {
       @apply box-border flex-1 overflow-hidden;
     }
   }
-  :deep(.n-scrollbar-content) {
-    @apply pr-3;
+  // :deep(.n-scrollbar-content) {
+  //   @apply pr-3;
+  // }
+}
+
+.mobile {
+  .layout-main {
+    &-page {
+      @apply pt-4;
+    }
   }
 }
 </style>
diff --git a/src/layout/components/AppMenu.vue b/src/layout/components/AppMenu.vue
index cb95e63..49f13ed 100644
--- a/src/layout/components/AppMenu.vue
+++ b/src/layout/components/AppMenu.vue
@@ -82,4 +82,25 @@ const iconStyle = (index: number) => {
   transform: scale(1.05);
   transition: 0.2s ease-in-out;
 }
+
+.mobile {
+  .app-menu {
+    max-width: 100%;
+    width: 100vw;
+    position: relative;
+    z-index: 999999;
+    background-color: #000;
+    &-header {
+      display: none;
+    }
+    &-list {
+      @apply flex justify-between;
+    }
+    &-item {
+      &-link {
+        @apply my-4;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue
index d217846..a79b892 100644
--- a/src/layout/components/MusicFull.vue
+++ b/src/layout/components/MusicFull.vue
@@ -179,4 +179,16 @@ defineExpose({
     }
   }
 }
+
+.mobile {
+  #drawer-target {
+    @apply flex-col p-4 pt-8;
+    .music-img {
+      display: none;
+    }
+    .music-lrc {
+      height: calc(100vh - 260px) !important;
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index f68c163..10c507a 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -25,13 +25,13 @@
       </div>
     </div>
     <div class="music-buttons">
-      <div @click="handlePrev">
+      <div class="music-buttons-prev" @click="handlePrev">
         <i class="iconfont icon-prev"></i>
       </div>
       <div class="music-buttons-play" @click="playMusicEvent">
         <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
       </div>
-      <div @click="handleEnded">
+      <div class="music-buttons-next" @click="handleEnded">
         <i class="iconfont icon-next"></i>
       </div>
     </div>
@@ -59,7 +59,7 @@
         </template>
         解析播放
       </n-tooltip> -->
-      <n-tooltip trigger="hover" :z-index="9999999">
+      <n-tooltip class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont ri-netease-cloud-music-line" @click="openLyric"></i>
         </template>
@@ -305,4 +305,36 @@ const setMusicFull = () => {
     }
   }
 }
+
+.mobile {
+  .music-play-bar {
+    @apply px-4;
+    bottom: 70px;
+  }
+  .music-time {
+    display: none;
+  }
+  .ri-netease-cloud-music-line {
+    display: none;
+  }
+  .audio-volume {
+    display: none;
+  }
+  .audio-button {
+    @apply mx-0;
+  }
+  .music-buttons {
+    @apply m-0;
+    &-prev,
+    &-next {
+      display: none;
+    }
+    &-play {
+      @apply m-0;
+    }
+  }
+  .music-content {
+    flex: 1;
+  }
+}
 </style>
diff --git a/src/layout/components/SearchBar.vue b/src/layout/components/SearchBar.vue
index 5bcfcd3..0895c84 100644
--- a/src/layout/components/SearchBar.vue
+++ b/src/layout/components/SearchBar.vue
@@ -145,4 +145,10 @@ const selectItem = async (key: string) => {
 .search-box-input {
   @apply relative;
 }
+
+.mobile {
+  .search-box {
+    @apply pl-4;
+  }
+}
 </style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 92914f9..65f0934 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -17,6 +17,7 @@ interface State {
   playListIndex: number;
   setData: any;
   lyric: any;
+  isMobile: boolean;
 }
 
 const state: State = {
@@ -30,6 +31,7 @@ const state: State = {
   playListIndex: 0,
   setData: null,
   lyric: {},
+  isMobile: false,
 };
 
 const windowData = window as any;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 49a50ae..229f51a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,7 @@
+import { computed } from 'vue';
+
+import store from '@/store';
+
 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
   return `background-image:url(${url})`;
@@ -59,3 +63,15 @@ export const getImgUrl = computed(() => (url: string | undefined, size: string =
   const imgUrl = encodeURIComponent(`${url}?param=${size}`);
   return `${bdUrl}${imgUrl}`;
 });
+
+export const isMobile = computed(() => {
+  const flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+  );
+
+  store.state.isMobile = !!flag;
+
+  // 给html标签 添加mobile
+  if (flag) document.documentElement.classList.add('mobile');
+  return !!flag;
+});
diff --git a/src/views/history/index.vue b/src/views/history/index.vue
index 4945c78..45ad024 100644
--- a/src/views/history/index.vue
+++ b/src/views/history/index.vue
@@ -38,7 +38,7 @@ const { delMusic, musicList } = useMusicHistory();
 .history-page {
   @apply h-full w-full pt-2;
   .title {
-    @apply text-xl font-bold;
+    @apply pl-4 text-xl font-bold;
   }
 
   .history-list-content {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 42c1cd6..dd2cdad 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <n-scrollbar :size="100">
+  <n-scrollbar :size="100" :x-scrollable="false">
     <div class="main-page">
       <!-- 推荐歌手 -->
       <recommend-singer />
       <div class="main-content">
         <!-- 歌单分类列表 -->
-        <playlist-type />
+        <playlist-type v-if="!isMobile" />
         <!-- 本周最热音乐 -->
         <recommend-songlist />
         <!-- 推荐最新专辑 -->
@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import { isMobile } from '@/utils';
+
 const RecommendSinger = defineAsyncComponent(() => import('@/components/RecommendSinger.vue'));
 const PlaylistType = defineAsyncComponent(() => import('@/components/PlaylistType.vue'));
 const RecommendSonglist = defineAsyncComponent(() => import('@/components/RecommendSonglist.vue'));
@@ -27,9 +29,13 @@ defineOptions({
 
 <style lang="scss" scoped>
 .main-page {
-  @apply h-full w-full;
+  @apply h-full w-full overflow-hidden;
 }
 .main-content {
   @apply mt-6 flex mb-28;
 }
+
+.mobile .main-content {
+  @apply flex-col mx-4;
+}
 </style>
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index b74f2f5..19a2f61 100644
--- a/src/views/list/index.vue
+++ b/src/views/list/index.vue
@@ -14,9 +14,11 @@ defineOptions({
 const recommendList = ref();
 const showMusic = ref(false);
 
-const recommendItem = ref<IRecommendItem>();
-const listDetail = ref<IListDetail>();
+const recommendItem = ref<IRecommendItem | null>();
+const listDetail = ref<IListDetail | null>();
 const selectRecommendItem = async (item: IRecommendItem) => {
+  recommendItem.value = null;
+  listDetail.value = null;
   showMusic.value = true;
   const { data } = await getListDetail(item.id);
   recommendItem.value = item;
@@ -98,7 +100,7 @@ watch(
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full w-full;
+  @apply relative h-full w-full px-4;
 }
 
 .recommend {
@@ -149,4 +151,10 @@ watch(
     }
   }
 }
+
+.mobile {
+  .recommend-list {
+    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
+  }
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0036766..5f84464 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
 import { checkQr, createQr, getQrKey, getUserDetail, loginByCellphone } from '@/api/login';
-import { setAnimationClass } from '@/utils';
+import { isMobile, setAnimationClass } from '@/utils';
 
 defineOptions({
   name: 'Login',
@@ -71,7 +71,7 @@ const timerIsQr = (key: string) => {
 };
 
 // 是否扫码登陆
-const isQr = ref(true);
+const isQr = ref(!isMobile.value);
 const chooseQr = () => {
   isQr.value = !isQr.value;
 };
diff --git a/src/views/mv/index.vue b/src/views/mv/index.vue
index d5aa61e..c849635 100644
--- a/src/views/mv/index.vue
+++ b/src/views/mv/index.vue
@@ -87,7 +87,7 @@ const close = () => {
 
 <style scoped lang="scss">
 .mv-list {
-  @apply relative h-full w-full;
+  @apply relative h-full w-full px-4;
 
   &-title {
     @apply text-xl font-bold;
@@ -173,4 +173,10 @@ const close = () => {
     @apply top-0;
   }
 }
+
+.mobile {
+  .mv-list-content {
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  }
+}
 </style>
diff --git a/src/views/search/index.vue b/src/views/search/index.vue
index 2c264e3..190f0cb 100644
--- a/src/views/search/index.vue
+++ b/src/views/search/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="search-page">
-    <n-layout class="hot-search" :class="setAnimationClass('animate__fadeInDown')" :native-scrollbar="false">
+    <n-layout
+      v-if="isMobile ? !searchDetail : true"
+      class="hot-search"
+      :class="setAnimationClass('animate__fadeInDown')"
+      :native-scrollbar="false"
+    >
       <div class="title">热搜列表</div>
       <div class="hot-search-list">
         <template v-for="(item, index) in hotSearchData?.data" :key="index">
@@ -17,7 +22,12 @@
       </div>
     </n-layout>
     <!-- 搜索到的歌曲列表 -->
-    <n-layout class="search-list" :class="setAnimationClass('animate__fadeInUp')" :native-scrollbar="false">
+    <n-layout
+      v-if="isMobile ? searchDetail : true"
+      class="search-list"
+      :class="setAnimationClass('animate__fadeInUp')"
+      :native-scrollbar="false"
+    >
       <div class="title">{{ hotKeyword }}</div>
       <n-spin :show="searchDetailLoading">
         <div class="search-list-box">
@@ -59,7 +69,7 @@ import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
 import SongItem from '@/components/common/SongItem.vue';
 import type { IHotSearch } from '@/type/search';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
+import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'Search',
@@ -195,4 +205,10 @@ const handlePlay = () => {
 .title {
   @apply text-gray-200 text-xl font-bold my-2 mx-4;
 }
+
+.mobile {
+  .hot-search {
+    @apply mr-0 w-full;
+  }
+}
 </style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index fb725ba..843fcf4 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -10,7 +10,7 @@ import SongItem from '@/components/common/SongItem.vue';
 import MusicList from '@/components/MusicList.vue';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'User',
@@ -120,7 +120,7 @@ const handlePlay = () => {
         </div>
       </div>
     </div>
-    <div class="right" :class="setAnimationClass('animate__fadeInRight')">
+    <div v-if="!isMobile" class="right" :class="setAnimationClass('animate__fadeInRight')">
       <div class="title">听歌排行</div>
       <div class="record-list">
         <n-scrollbar>
@@ -217,4 +217,10 @@ const handlePlay = () => {
     }
   }
 }
+
+.mobile {
+  .user-page {
+    @apply px-4;
+  }
+}
 </style>
