From fa98085dcf401e88f6a3e187a6f72b2d9985353a Mon Sep 17 00:00:00 2001
From: Map1en_ <maplenagisa@gmail.com>
Date: Mon, 26 Apr 2021 18:48:09 +0800
Subject: [PATCH] fix(lyrics): fix style (#606)
---
src/views/lyrics.vue | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index c51d494..376ec01 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -6,12 +6,12 @@
class="dynamic-background"
>
<div
- v-show="this.$store.state.showLyrics"
+ v-show="showLyrics"
class="top-right"
:style="{ backgroundImage: `url(${bgImageUrl})` }"
/>
<div
- v-show="this.$store.state.showLyrics"
+ v-show="showLyrics"
class="bottom-left"
:style="{ backgroundImage: `url(${bgImageUrl})` }"
/>
@@ -387,13 +387,17 @@ export default {
}
.dynamic-background {
- filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
+ filter: blur(50px) contrast(var(--contrast-dynamic-background))
brightness(var(--brightness-dynamic-background));
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
.top-right,
.bottom-left {
z-index: 0;
- width: 14vw;
- height: 14vw;
+ width: 140vw;
+ height: 140vw;
+ opacity: 0.6;
position: absolute;
background-size: cover;
animation: rotate 150s linear infinite;
@@ -415,10 +419,10 @@ export default {
@keyframes rotate {
0% {
- transform: rotate(0deg) scale(10);
+ transform: rotate(0deg);
}
100% {
- transform: rotate(360deg) scale(10);
+ transform: rotate(360deg);
}
}