diff --git a/public/test.html b/public/test.html
index bd4e731..5902ffb 100644
--- a/public/test.html
+++ b/public/test.html
@@ -60,7 +60,15 @@
     </style>
   </head>
   <body>
-    <div style="background-color: #eee">asdfladjflsdfsdlf</div>
+    <div style="background-color: #eee">
+      测试啊哈哈，安居客圣诞节疯狂大水井坊
+      <div>
+        啊啊啊啊啊啊啊
+        <div>
+          bbbbbbbbbbbbbb
+        </div>
+      </div>
+    </div>
     <div class="content">
       <div class="lyric-line">一句歌词，哈哈</div>
       <div class="lyric-line">一句歌词，哈歌词歌词哈</div>
diff --git a/src/App.vue b/src/App.vue
index ebdd05d..64ca028 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,16 +87,16 @@ onUnmounted(() => {
   pubsub.unsubscribe(token);
 });
 
-const c = (item) => {
-  return (
-    item.id == "playingList" ||
-    item.id == "top" ||
-    item.id == "footer"
-  );
-};
 
+const wpEl = ref('')
 const hideWins = (e) => {
-  if (showPlaying.value && e.path.findIndex(c) < 0) {
+  // console.log(e.clientX > 0,e, wpEl.value.clientWidth);
+  if (showPlaying.value 
+    && e.clientX > 0
+    && e.clientX < wpEl.value.clientWidth - 500
+    && e.clientY > 40
+    && e.clientY < wpEl.value.clientHeight - 64
+  ) {
     showPlaying.value = false;
   }
 };
@@ -107,7 +107,7 @@ const hideWins = (e) => {
     :theme-overrides="store.state.theme.themeOverrides"
   >
     <n-message-provider>
-      <div id="wp" @click="hideWins">
+      <div id="wp" ref="wpEl" @click="hideWins">
         <!-- <NThemeEditor/> -->
         <div id="top">
           <Nav></Nav>
diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue
index 685933f..f1024ac 100644
--- a/src/views/common/SongDetail.vue
+++ b/src/views/common/SongDetail.vue
@@ -72,7 +72,7 @@ watch(
       // let elContent = document.getElementsByClassName('ly-content')[0]
       nextTick(()=>{
         let el = document.getElementsByClassName('ly-key-lines')[val]
-        lyList.value.scrollTop = el.offsetTop - 100
+        lyList.value.scrollTop = el.offsetTop - 100 - 6 
       })
       
     }
@@ -200,6 +200,7 @@ export default {};
 </script>
 
 <style lang="less" scoped>
+@import "@/assets/css/common.less";
 #sdTitle {
   position: absolute;
   left: 0;
@@ -243,7 +244,7 @@ export default {};
       height: 50px;
     }
     .disk {
-      --back-color: #ddd;
+      --back-color: #eee;
       --width-num: 340;
       --padding-num: 10;
       --width: calc(var(--width-num) * 1px);
@@ -284,6 +285,7 @@ export default {};
         font-size: 24px;
         font-weight: 500;
         margin-top: 10px;
+        .text-el-line-normal();
       }
       .others {
         // display: flex;
@@ -291,31 +293,33 @@ export default {};
         color: #999;
         .album {
           flex: 1;
+          .text-el-line-normal();
         }
         .artists {
           flex: 1;
+          .text-el-line-normal();
         }
       }
 
       .ly {
         position: relative;
         margin-top: 15px;
-        height: 290px;
+        height: 288px;
         overflow-y: auto;
         scroll-behavior: smooth;
 
         -webkit-mask-image: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0) 0,
-          rgba(0, 0, 0, 1) 25px,
-          rgba(0, 0, 0, 1) 255px,
+          rgba(0, 0, 0, 1) 20px,
+          rgba(0, 0, 0, 1) 260px,
           rgba(0, 0, 0, 0) 
         );
         mask-image: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0) 0,
-          rgba(0, 0, 0, 1) 25px,
-          rgba(0, 0, 0, 1) 255px,
+          rgba(0, 0, 0, 1) 20px,
+          rgba(0, 0, 0, 1) 250px,
           rgba(0, 0, 0, 0) 
         );
 
diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue
index f302031..ec372b5 100644
--- a/src/views/common/SongInfo.vue
+++ b/src/views/common/SongInfo.vue
@@ -34,7 +34,7 @@ const songInfo = (id, im) => {
   getSongDetial(id)
     .then((res) => {
       showInfo.value = true;
-      console.log('SongInfo: 获取歌曲详细信息',res.data.songs[0]);
+      console.log("SongInfo: 获取歌曲详细信息", res.data.songs[0]);
       info.name = res.data.songs[0].name;
       info.artists = res.data.songs[0].ar;
       info.album = res.data.songs[0].al;
@@ -69,9 +69,8 @@ const songLyric = (id) => {
   getLyric(id)
     .then((res) => {
       if (res.data.code == 200)
-        pubsub.publish("zp.lyric", res.data.lrc.lyric );
-      else
-        pubsub.publish("zp.lyric", null);
+        pubsub.publish("zp.lyric", res.data.lrc.lyric);
+      else pubsub.publish("zp.lyric", null);
     })
     .catch((err) => {});
 };
@@ -128,12 +127,18 @@ const toggleSongDetail = () => {
     </div>
 
     <div class="song" v-show="showInfo">
-      <div class="w-song">
-        <div class="song-name" @click="toggleSongDetail">
+      <div class="w-song" @click="toggleSongDetail">
+        <div class="song-name" >
           {{ info.name }}
         </div>
         <div class="song-author">
-          <ArtistsSpan :artists="info.artists" />
+          <!-- <ArtistsSpan :artists="info.artists" /> -->
+          <template v-for="(ar, idx) of info.artists" key="idx">
+            <span
+              style="margin-right: 4px; cursor: pointer"
+              >{{ ar.name }}</span
+            >
+          </template>
         </div>
       </div>
 
