From 90d9e9b91186261328b31c790effc5f20e321382 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 4 Mar 2021 13:20:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=AD=8C=E8=AF=8D=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=E8=AE=BE=E7=BD=AE=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer-lyric/components/core/Lyric.vue | 23 ++++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/renderer-lyric/components/core/Lyric.vue b/src/renderer-lyric/components/core/Lyric.vue
index 46bb65e7..98ff4eda 100644
--- a/src/renderer-lyric/components/core/Lyric.vue
+++ b/src/renderer-lyric/components/core/Lyric.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
+div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
   div(:class="$style.lyricSpace")
   div(:class="[$style.lyricText]" ref="dom_lyric_text")
   //- div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
@@ -355,15 +355,14 @@ export default {
           color: @color-theme;
         }
         .translation {
-          font-size: 1em;
           color: @color-theme;
         }
-        span {
+        // span {
           // color: @color-theme;
-          font-size: 1.2em;
-        }
+        // }
       }
 
+
       span {
         transition: @transition-theme !important;
         transition-property: font-size !important;
@@ -422,8 +421,18 @@ export default {
   }
 }
 .lrc-active-zoom {
-  .lrc-active;
-  font-size: 1.2em;
+  :global {
+    .lrc-content {
+      &.active {
+        .translation {
+          font-size: 1em;
+        }
+        span {
+          font-size: 1.2em;
+        }
+      }
+    }
+  }
 }
 .footer {
   flex: 0 0 100px;