修改播放列表的css

src/renderer/App.vue

@@ -5,15 +5,10 @@
       <layout-toolbar id="toolbar" />
       <div class="middle">
         <layout-view id="view" ref="viewRef" />
-        <PlayListWindow
+        <PlayListWindow id="playlist" v-if="isShowPlaylist" @close="closePlaylist" />
-          v-if="isShowPlaylist"
-          :style="playlistStyle"
-          @close="closePlaylist"
-        />
       </div>
       <layout-play-bar id="player" />
     </div>
-
     <layout-icons />
     <layout-change-log-modal />
     <layout-update-modal />
@@ -31,31 +26,15 @@ import PlayListWindow from '@renderer/components/common/PlayListWindow.vue'
 import { isShowPlaylist } from '@renderer/store/player/state'
 import { setShowPlaylist } from '@renderer/store/player/action'
 
-const viewRef = ref(null)
-
-const playlistStyle = computed(() => {
-  const el = viewRef.value?.$el || viewRef.value
-  if (!el) return {}
-  const rect = el.getBoundingClientRect()
-  return {
-    position: 'absolute',
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    height: `${rect.height}px`,
-    width: `${rect.width}px`,
-    zIndex: 1000,
-  }
-})
-
 const closePlaylist = () => {
   setShowPlaylist(false)
 }
 
 useApp()
 
-onMounted(async () => {
+onMounted(() => {
   document.getElementById('root').style.display = 'block'
-  await nextTick()
+  nextTick()
 })
 </script>
 
@@ -63,11 +42,13 @@ onMounted(async () => {
 @import './assets/styles/index.less';
 @import './assets/styles/layout.less';
 
+
 html, body {
   height: 100%;
   box-sizing: border-box;
   user-select: none;
 }
+
 #root {
   height: 100%;
   position: relative;
@@ -112,18 +93,15 @@ html, body {
   flex: auto;
   min-height: 0;
 }
-
+#playlist {
-.playlist-window {
+  position: absolute;
-  position: relative;
   top: 0;
-  left: 0;
+  right: 0;
-  width: 100%;
+  width: 320px;
   height: 100%;
-  border-left: 1px solid var(--color-border);
-  background-color: var(--color-main-background);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  border-radius: @radius-border;
-  overflow: hidden;
   z-index: 1000;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
 }
+
 </style>

src/renderer/components/common/PlayListWindow.vue

@@ -32,18 +32,6 @@ const emitClose = () => {
 </script>
 
 <style scoped>
-.playlist-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
 
 .playlist-window {
   background-color: #222;