fix: 歌词页视觉效果缺陷 (#1649)

src/views/lyrics.vue

@@ -192,16 +192,18 @@
               @click="clickLyricLine(line.time)"
               @dblclick="clickLyricLine(line.time, true)"
             >
-              <span v-if="line.contents[0]">{{ line.contents[0] }}</span>
+              <div class="content">
-              <br />
+                <span v-if="line.contents[0]">{{ line.contents[0] }}</span>
-              <span
+                <br />
-                v-if="
+                <span
-                  line.contents[1] &&
+                  v-if="
-                  $store.state.settings.showLyricsTranslation
+                    line.contents[1] &&
-                "
+                    $store.state.settings.showLyricsTranslation
-                class="translation"
+                  "
-                >{{ line.contents[1] }}</span
+                  class="translation"
-              >
+                  >{{ line.contents[1] }}</span
+                >
+              </div>
             </div>
           </div>
         </transition>
@@ -697,20 +699,23 @@ export default {
       &:hover {
         background: var(--color-secondary-bg-for-transparent);
       }
-      &:active {
-        transform: scale(0.95);
-      }
 
-      span {
+      .content {
-        opacity: 0.28;
+        transform-origin: center left;
-        cursor: default;
+        transform: scale(0.95);
-        font-size: 0.9em;
         transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
 
-      span.translation {
+        span {
-        opacity: 0.2;
+          opacity: 0.28;
-        font-size: 0.825em;
+          cursor: default;
+          font-size: 1em;
+          transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        span.translation {
+          opacity: 0.2;
+          font-size: 0.925em;
+        }
       }
     }
 
@@ -722,18 +727,16 @@ export default {
       margin-top: 0.1em;
     }
 
-    .highlight {
+    .highlight div.content {
-      transform-origin: center left;
+      transform: scale(1);
-      transform: scale(1.05);
+      span {
-    }
+        opacity: 0.98;
-
+        display: inline-block;
-    .highlight span {
+      }
-      opacity: 0.98;
-      display: inline-block;
-    }
 
-    .highlight span.translation {
+      span.translation {
-      opacity: 0.65;
+        opacity: 0.65;
+      }
     }
   }