From df08f677bdb727f10d95d0a627bc888d47b7e691 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Tue, 24 Sep 2024 18:47:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5UI=EF=BC=8C=E6=AD=8C=E6=9B=B2=E5=90=8D?=
 =?UTF-8?q?=E5=AD=97=E3=80=81=E6=AD=8C=E6=89=8B=E7=AD=89=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E8=BF=87=E9=95=BF=E6=97=B6=E8=A2=AB=E6=88=AA=E6=96=AD=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=88#2049=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                                |  1 +
 src/renderer/components/layout/PlayDetail/index.vue | 11 ++++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 563f2c3b..da5e6e97 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -5,6 +5,7 @@
 ### 优化
 
 - 修正搜索歌曲提示框文案（#2050）
+- 优化播放详情页UI，歌曲名字、歌手等文字过长时被截断的问题（#2049）
 
 ### 修复
 
diff --git a/src/renderer/components/layout/PlayDetail/index.vue b/src/renderer/components/layout/PlayDetail/index.vue
index 4ca634f9..a6631c0b 100644
--- a/src/renderer/components/layout/PlayDetail/index.vue
+++ b/src/renderer/components/layout/PlayDetail/index.vue
@@ -11,7 +11,7 @@ transition(enter-active-class="animated slideInRight" leave-active-class="animat
         //- div(:class="$style.info")
         div(:class="$style.info")
           img(v-if="musicInfo.pic" :class="$style.img" :src="musicInfo.pic")
-          div.description(:class="$style.description")
+          div.description(:class="['scroll', $style.description]")
             p {{ $t('player__music_name') }}{{ musicInfo.name }}
             p {{ $t('player__music_singer') }}{{ musicInfo.singer }}
             p(v-if="musicInfo.album") {{ $t('player__music_album') }}{{ musicInfo.album }}
@@ -244,11 +244,11 @@ export default {
   flex-flow: column nowrap;
   justify-content: flex-start;
   max-width: 300px;
-
+  min-height: 0;
 }
 .img {
   max-width: 100%;
-  max-height: 100%;
+  max-height: 80%;
   min-width: 100%;
   box-shadow: 0 0 6px var(--color-primary-alpha-500);
   border-radius: 6px;
@@ -256,8 +256,9 @@ export default {
 }
 .description {
   max-width: 300px;
-  padding: 15px 0;
-  overflow: hidden;
+  margin-top: 15px;
+  padding-bottom: 15px;
+  min-height: 0;
   p {
     line-height: 1.5;
     font-size: 14px;