完美解决歌词渐隐显示

src/components/ArtistsSpan.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineProps, onUnmounted, onDeactivated } from "vue";
+import { ref, onUnmounted, onDeactivated, } from "vue";
 import { useRouter } from "vue-router";
 
 const props = defineProps({

src/views/common/SongDetail.vue

@@ -21,19 +21,18 @@ const currentLyricIdx = ref(-1);
 const lyList = ref('')
 
 //#region 唱机
-let interval = [];
+let interval = 0;
 watch(
   () => [store.state.settings.playing, store.state.showSongDetail],
   ([playing, showSongDetail]) => {
+    // console.log(playing, showSongDetail);
     if (playing && showSongDetail) {
-      interval.push(
-        setInterval(() => {
+      clearInterval(interval)
+      interval = setInterval(() => {
           coverAngle.value += 0.5;
         }, 40)
-      );
     } else {
-      interval.map((item) => clearInterval(item));
-      interval = [];
+      clearInterval(interval)
     }
   },
   { immediate: true }
@@ -68,7 +67,7 @@ const handleLyric = (ly) => {
 watch(
   ()=> [currentLyricIdx.value,store.state.showSongDetail],
   ([val, showSongDetail])=>{
-    console.log('changed lyric');
+    // console.log('changed lyric');
     if(val>0){
       // let elContent = document.getElementsByClassName('ly-content')[0]
       nextTick(()=>{
@@ -205,7 +204,7 @@ export default {};
   position: absolute;
   left: 0;
   top: 0;
-  right: 280px;
+  right: 296px;
   height: 40px;
   background-color: #f9f9f9;
   padding-left: 50px;
@@ -305,6 +304,21 @@ export default {};
         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, 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, 0) 
+        );
+
         //  background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));
 
         .ly-content {
@@ -316,7 +330,7 @@ export default {};
           // justify-items: center;
 
           .ly-line {
-            min-height: 32px;
+            min-height: 35px;
             display: flex;
             align-items: center;
           }