From 1e60fa9a952351bcfe3aa08d665bd89faa92d33b Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Mon, 9 Dec 2024 20:51:40 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E6=94=B6=E8=B5=B7=E6=AD=8C=E8=AF=8D=E7=9A=84=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/PlayBar.vue | 52 ++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 8d89f16..74c8158 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -11,13 +11,16 @@
     class="music-play-bar"
     :class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFullVisible ? 'play-bar-opcity' : '')"
   >
-    <n-image
-      :src="getImgUrl(playMusic?.picUrl, '300y300')"
-      class="play-bar-img"
-      lazy
-      preview-disabled
-      @click="setMusicFull"
-    />
+    <div class="play-bar-img-wrapper" @click="setMusicFull">
+      <n-image :src="getImgUrl(playMusic?.picUrl, '300y300')" class="play-bar-img" lazy preview-disabled />
+      <div class="hover-arrow">
+        <div class="hover-content">
+          <!-- <i class="ri-arrow-up-s-line text-3xl" :class="{ 'ri-arrow-down-s-line': musicFullVisible }"></i> -->
+          <i class="text-3xl" :class="musicFullVisible ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'"></i>
+          <span class="hover-text">{{ musicFullVisible ? '收起' : '展开' }}歌词</span>
+        </div>
+      </div>
+    </div>
     <div class="music-content">
       <div class="music-content-title">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
@@ -409,4 +412,39 @@ const scrollToPlayList = (val: boolean) => {
 :root {
   --primary-color: #18a058;
 }
+
+.play-bar-img-wrapper {
+  @apply relative cursor-pointer w-14 h-14;
+
+  .hover-arrow {
+    @apply absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 rounded-2xl;
+    background: rgba(0, 0, 0, 0.5);
+
+    .hover-content {
+      @apply flex flex-col items-center justify-center;
+
+      i {
+        @apply text-white mb-0.5;
+      }
+
+      .hover-text {
+        @apply text-white text-xs scale-90;
+      }
+    }
+  }
+
+  &:hover {
+    .hover-arrow {
+      @apply opacity-100;
+    }
+  }
+}
+
+.tooltip-content {
+  @apply text-sm py-1 px-2;
+}
+
+.play-bar-img {
+  @apply w-14 h-14 rounded-2xl;
+}
 </style>