From 04bc4770b41ff8eb3ee3f0356e1539224bf91d82 Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Sun, 6 Jun 2021 01:57:43 +0800
Subject: [PATCH] fix: lyric page bugs

---
 src/views/lyrics.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index e27e28c..e0d0551 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -3,18 +3,16 @@
     <div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
       <div
         v-if="settings.lyricsBackground !== false"
-        :class="[
-          'lyrics-background',
-          { 'dynamic-background': settings.lyricsBackground === 'dynamic' },
-        ]"
+        class="lyrics-background"
+        :class="{
+          'dynamic-background': settings.lyricsBackground === 'dynamic',
+        }"
       >
         <div
-          v-show="showLyrics"
           class="top-right"
           :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
         <div
-          v-show="showLyrics"
           class="bottom-left"
           :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
@@ -367,6 +365,7 @@ export default {
   z-index: 200;
   background: var(--color-body-bg);
   display: flex;
+  clip: rect(auto, auto, auto, auto);
 }
 
 .lyrics-background {
@@ -660,6 +659,15 @@ export default {
   }
 }
 
+@media (max-aspect-ratio: 10/9) {
+  .left-side {
+    display: none;
+  }
+  .right-side .lyrics-container {
+    max-width: 100%;
+  }
+}
+
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.4s;