🦄 refactor: 适配 web移动端 改造

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>

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>

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>

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>