From 4dde40ac60de519c893090e6faf39ccd0f7dc3c0 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 22 Dec 2023 09:50:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(MusicFull):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=AD=8C=E8=AF=8D=E8=83=8C=E6=99=AF=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/MusicFull.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue
index b0b3fe0..970bb3a 100644
--- a/src/layout/components/MusicFull.vue
+++ b/src/layout/components/MusicFull.vue
@@ -6,6 +6,7 @@
     :drawer-style="{ backgroundColor: 'transparent' }"
   >
     <div id="drawer-target">
+      <div class="drawer-back" :style="{backgroundImage:`url(${getImgUrl(playMusic?.picUrl, '300y300')})`}"></div>
       <div class="music-img">
         <n-image
           ref="PicImgRef"
@@ -107,6 +108,26 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.drawer-back{
+  @apply absolute bg-cover bg-center opacity-70;
+  filter: blur(80px) brightness(80%);
+  z-index: -1;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  animation: round 20s linear infinite;
+}
+
 #drawer-target {
   @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
   backdrop-filter: blur(20px);