From 69643be75a50d85d6882c3707553d12d2bcf8941 Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Fri, 29 Oct 2021 21:51:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E7=BE=8E=E8=A7=A3=E5=86=B3=E6=AD=8C?=
 =?UTF-8?q?=E8=AF=8D=E6=B8=90=E9=9A=90=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/test.html                | 83 +++++++++++++++++++++++++++++++++
 src/components/ArtistsSpan.vue  |  2 +-
 src/views/common/SongDetail.vue | 32 +++++++++----
 3 files changed, 107 insertions(+), 10 deletions(-)
 create mode 100644 public/test.html
diff --git a/public/test.html b/public/test.html
new file mode 100644
index 0000000..bd4e731
--- /dev/null
+++ b/public/test.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>测试网页</title>
+    <style>
+      body {
+        /* background-color: rgba(244, 244, 244, 1); */
+        background-color: rgba(233, 233, 233, 1);
+      }
+      .content {
+        margin: 2em;
+        height: 200px;
+        overflow-y: auto;
+        /* background-image: linear-gradient(
+          rgba(255, 255, 255, 0),
+          rgb(255, 255, 255, 1)
+        ); */
+        /* background-color: rgba(233, 233, 233, 1); */
+
+        /* -webkit-mask-image: -webkit-gradient(
+          linear,
+          left 90%,
+          left bottom,
+          from(rgba(0, 0, 0, 1)),
+          to(rgba(0, 0, 0, 0))
+        ); */
+
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0,
+          rgba(0, 0, 0, 1) 20%,
+          rgba(0, 0, 0, 1) 80%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1)
+        );
+
+        /* background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 0) 30%,
+          rgba(0, 0, 0, 0.4) 10%,
+          rgba(0, 0, 0, 0.6) 40%, 
+          rgba(0, 0, 0, 0) 70%,
+          rgba(0, 0, 0, 1) 100%
+        ); */
+      }
+      .lyric-line {
+        /* mix-blend-mode: overlay; */
+      }
+    </style>
+  </head>
+  <body>
+    <div style="background-color: #eee">asdfladjflsdfsdlf</div>
+    <div class="content">
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈歌词歌词哈</div>
+      <div class="lyric-line">一句歌歌词歌词词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈歌词歌词歌词哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌歌词词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
+      <div class="lyric-line">一句歌歌词歌词词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌歌词歌词词，哈哈</div>
+      <div class="lyric-line">一句歌词，哈歌词歌词歌词歌词哈</div>
+      <div class="lyric-line">一句歌词，哈哈</div>
+      <div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
+    </div>
+  </body>
+</html>
diff --git a/src/components/ArtistsSpan.vue b/src/components/ArtistsSpan.vue
index b970563..c3fd16b 100644
--- a/src/components/ArtistsSpan.vue
+++ b/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({
diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue
index 8524159..685933f 100644
--- a/src/views/common/SongDetail.vue
+++ b/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;
           }
