初步完善歌词

src/renderer/components/core/PlayerDetail.vue

@@ -29,7 +29,8 @@
       div(:class="$style.right")
         div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
           div(:class="$style.lyricSpace")
-          p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
+          div(:class="[$style.lyricText]" ref="dom_lyric_text")
+          //- p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
           div(:class="$style.lyricSpace")
 
       material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
@@ -158,11 +159,14 @@ export default {
       handler(n, o) {
         this.isSetedLines = true
         if (o) {
+          this.$refs.dom_lyric_text.textContent = ''
+          this.setLyric(n)
+
           this._lyricLines = n
           if (n.length) {
             this.lyricLines = n
             this.$nextTick(() => {
-              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
               this.handleScrollLrc()
             })
           } else {
@@ -174,7 +178,7 @@ export default {
               if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
               this.lyricLines = this._lyricLines
               this.$nextTick(() => {
-                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
                 this.handleScrollLrc()
               })
             }, 50)
@@ -182,7 +186,7 @@ export default {
         } else {
           this.lyricLines = n
           this.$nextTick(() => {
-            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
             this.handleScrollLrc()
           })
         }
@@ -235,6 +239,8 @@ export default {
     document.addEventListener('mousemove', this.handleMouseMsMove)
     document.addEventListener('mouseup', this.handleMouseMsUp)
     window.addEventListener('resize', this.handleResize)
+    console.log('object', this.$refs.dom_lyric_text)
+    this.setLyric(this.lyricLines)
   },
   beforeDestroy() {
     this.clearLyricScrollTimeout()
@@ -250,6 +256,13 @@ export default {
     ...mapMutations('player', [
       'visiblePlayerDetail',
     ]),
+    setLyric(lines) {
+      const dom_lines = document.createDocumentFragment()
+      for (const line of lines) {
+        dom_lines.appendChild(line.dom_line)
+      }
+      this.$refs.dom_lyric_text.appendChild(dom_lines)
+    },
     handleResize() {
       this.setProgressWidth()
     },
@@ -540,6 +553,7 @@ export default {
 
   &:before {
     position: absolute;
+    z-index: 1;
     top: 0;
     left: 0;
     content: ' ';
@@ -568,13 +582,39 @@ export default {
   &.draging {
     cursor: grabbing;
   }
-  p {
-    padding: 8px 0;
-    line-height: 1.2;
-    overflow-wrap: break-word;
-    transition: @transition-theme !important;
-    transition-property: color, font-size;
+  :global {
+    .lrc-content {
+      line-height: 1.2;
+      padding: 8px 0;
+      overflow-wrap: break-word;
+
+      &.active {
+        span {
+          // color: @color-theme;
+          font-size: 1.2em;
+        }
+      }
+
+      span {
+        transition: @transition-theme !important;
+        transition-property: font-size;
+        font-size: 1em;
+        background-repeat: no-repeat;
+        background-color: rgba(77, 77, 77, 0.9);
+        background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        background-size: 0 100%;
+      }
+    }
   }
+  // p {
+  //   padding: 8px 0;
+  //   line-height: 1.2;
+  //   overflow-wrap: break-word;
+  //   transition: @transition-theme !important;
+  //   transition-property: color, font-size;
+  // }
 }
 .lyric-space {
   height: 70%;
@@ -736,6 +776,7 @@ each(@themes, {
     .container {
       border-left-color: ~'@{color-@{value}-theme}';
       background-color: ~'@{color-@{value}-theme_2-background_1}';
+      // color: ~'@{color-@{value}-theme_2-font}';
     }
     .right {
       &:before {
@@ -769,9 +810,17 @@ each(@themes, {
       box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
       // border-color: ~'@{color-@{value}-theme-hover}';
     }
-    .lrc-active {
-      color: ~'@{color-@{value}-theme}';
+    :global {
+      .lrc-content {
+        span {
+          // background-color: ~'@{color-@{value}-theme_2-font}';
+          background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
+        }
+      }
     }
+    // .lrc-active {
+    //   color: ~'@{color-@{value}-theme}';
+    // }
     .footerLeftControlBtns {
       color: ~'@{color-@{value}-theme_2-font}';
     }