🐞 fix: 修复web移动端 页面空白问题 （#24）

closed #24

components.d.ts

@@ -37,7 +37,6 @@ declare module 'vue' {
     PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
     PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']
     PlaylistType: typeof import('./src/components/PlaylistType.vue')['default']
-    PlayVideo: typeof import('./src/components/common/PlayVideo.vue')['default']
     RecommendAlbum: typeof import('./src/components/RecommendAlbum.vue')['default']
     RecommendSinger: typeof import('./src/components/RecommendSinger.vue')['default']
     RecommendSonglist: typeof import('./src/components/RecommendSonglist.vue')['default']

src/App.vue

@@ -32,6 +32,10 @@ onMounted(() => {
       'setMenus',
       homeRouter.filter((item) => item.meta.isMobile),
     );
+    console.log(
+      'qqq ',
+      homeRouter.filter((item) => item.meta.isMobile),
+    );
   }
 });
 </script>

src/layout/AppLayout.vue

@@ -92,4 +92,13 @@ const route = useRoute();
 .main-page {
   @apply h-full;
 }
+
+.mobile {
+  .main-content {
+    height: calc(100vh - 146px);
+    overflow: auto;
+    display: block;
+    flex: none;
+  }
+}
 </style>

src/layout/components/AppMenu.vue

@@ -118,7 +118,7 @@ const isText = ref(false);
 
     &-item {
       &-link {
-        @apply my-4;
+        @apply my-4 w-auto;
       }
     }
   }

src/layout/components/MusicFull.vue

@@ -40,6 +40,11 @@
               <span :style="getLrcStyle(index)">{{ item.text }}</span>
               <div class="music-lrc-text-tr">{{ item.trText }}</div>
             </div>
+
+            <!-- 无歌词 -->
+            <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
+              <span>暂无歌词, 请欣赏</span>
+            </div>
           </div>
         </n-layout>
         <!-- 时间矫正 -->
@@ -291,7 +296,7 @@ defineExpose({
       }
     }
     .music-lrc-text {
-      text-align: center;
+      @apply text-xl text-center;
     }
   }
 }

src/layout/components/PlayBar.vue

@@ -64,13 +64,13 @@
           <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false" vertical></n-slider>
         </div>
       </div>
-      <n-tooltip trigger="hover" :z-index="9999999">
+      <n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont" :class="playModeIcon" @click="togglePlayMode"></i>
         </template>
         {{ playModeText }}
       </n-tooltip>
-      <n-tooltip trigger="hover" :z-index="9999999">
+      <n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont icon-likefill" :class="{ 'like-active': isFavorite }" @click="toggleFavorite"></i>
         </template>
@@ -128,7 +128,7 @@ import { useStore } from 'vuex';
 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, isElectron, isLyricWindowOpen, nowTime, openLyric, sound, textColors } from '@/hooks/MusicHook';
 import type { SongResult } from '@/type/music';
-import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
+import { getImgUrl, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 
 import MusicFull from './MusicFull.vue';