fix: 修正部分样式错误 #95

imsyy · Dec 6, 2023 · b65369a · b65369a
1 parent 0af0ac3
commit b65369a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git a/src/components/Global/Playlist.vue b/src/components/Global/Playlist.vue
@@ -1,15 +1,16 @@
 <!-- 全局播放列表 -->
 <template>
   <n-drawer
-    v-model:show="status.playListShow"
-    :class="status.showFullPlayer ? 'main-playlist player' : 'main-playlist'"
+    v-model:show="playListShow"
+    :class="showFullPlayer ? 'main-playlist full-player' : 'main-playlist'"
     :style="{
-      '--color': coverColor,
-      '--color-bg': coverColor + '14',
+      '--cover-main-color': `rgb(${coverTheme?.light?.shadeTwo})` || '#efefef',
+      '--cover-second-color': `rgba(${coverTheme?.light?.shadeTwo}, 0.14)` || '#efefef14',
     }"
+    :auto-focus="false"
     @after-enter="playlistOpen"
-    @after-leave="status.playListShow = false"
-    @mask-click="status.playListShow = false"
+    @after-leave="playListShow = false"
+    @mask-click="playListShow = false"
   >
     <n-drawer-content :native-scrollbar="false" closable>
       <template #header>
@@ -62,7 +63,8 @@ import SvgIcon from "@/components/Global/SvgIcon";
 
 const music = musicData();
 const status = siteStatus();
-const { coverColor, playSongData, playList, playIndex, playMode } = storeToRefs(music);
+const { playSongData, playList, playIndex, playMode } = storeToRefs(music);
+const { coverTheme, showFullPlayer, playListShow } = storeToRefs(status);
 
 // 抽屉开启
 const playlistOpen = () => {
@@ -95,7 +97,7 @@ const createSongs = (song, index) => {
       class: {
         songs: true,
         play: playSongData.value?.id === song?.id,
-        player: status.showFullPlayer,
+        player: showFullPlayer.value,
       },
       onClick: () => {
         playSong(song, index);
@@ -343,7 +345,7 @@ const removeSong = async (index) => {
   .n-scrollbar-content {
     padding: 16px !important;
   }
-  &.player {
+  &.full-player {
     background-color: transparent;
     box-shadow: none;
     .n-drawer-header {

diff --git a/src/components/Player/FullPlayer.vue b/src/components/Player/FullPlayer.vue
@@ -510,7 +510,7 @@ onUnmounted(() => {
         }
       }
       &.record {
-        margin-top: 60px;
+        margin-top: 20px;
         .desc {
           align-items: center;
         }
@@ -520,8 +520,8 @@ onUnmounted(() => {
   .right {
     width: 50%;
     .data {
-      padding: 0 24px;
-      margin-bottom: 40px;
+      padding: 0 80px 0 24px;
+      margin-bottom: 26px;
       .name {
         display: flex;
         flex-direction: column;

diff --git a/src/components/Player/Lyric.vue b/src/components/Player/Lyric.vue
@@ -474,7 +474,8 @@ onMounted(() => {
     }
   }
   &.record {
-    height: calc(80vh - 200px);
+    height: calc(100vh - 340px);
+    margin-bottom: 20px;
     .lrc-line {
       margin-bottom: -12px;
       transform: scale(0.76);

diff --git a/src/utils/Player.js b/src/utils/Player.js
@@ -676,14 +676,14 @@ const getColorMainColor = async (islocal, cover) => {
   const status = siteStatus();
   try {
     // 获取封面图像的URL
-    if (!cover) return (status.coverColor = {});
+    if (!cover) return (status.coverTheme = {});
     const colorUrl = islocal ? cover : cover.s;
     // 获取渐变色背景
     const gradientColor = await getCoverGradient(colorUrl);
     status.coverBackground = gradientColor;
   } catch (error) {
     console.error("封面颜色获取失败：", error);
-    status.coverColor = {};
+    status.coverTheme = {};
   }
 };