From 65554afb2fdf900a08507c7bb08871189ed5d825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Tue, 24 Oct 2023 10:45:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E4=B9=90=E5=88=97=E8=A1=A8=E9=97=B4?=
 =?UTF-8?q?=E9=9A=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/music.js | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/music.js b/src/music.js
index 1d7f235..1415f32 100644
--- a/src/music.js
+++ b/src/music.js
@@ -25,33 +25,21 @@ export default class MusicList {
         this.ul = List({
             classList: ['music-list'],
             style: {
-                flex: 1,
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflowX: 'hidden', // 溢出时隐藏
-                overflowY: 'auto',   // 溢出时显示滚动条
-                listStyle: 'disc',   // 实心圆
-                padding: '0 1.1rem', // 列表左右留白
+                flex: 1,                  // 防止在flex中被挤压变形
+                textOverflow: 'ellipsis', // 文本溢出时省略号
+                whiteSpace: 'nowrap',     // 不换行
+                overflowX: 'hidden',      // 溢出时隐藏
+                overflowY: 'auto',        // 溢出时显示滚动条
+                listStyle: 'disc',        // 实心圆
+                padding: '0 1.1rem',      // 列表左右留白
+                gap: '.1rem',             // 列表项间隔
+                display: 'flex',          // 列表垂直排列
+                flexDirection: 'column',  // 列表垂直排列
             }
         })
         this.EventListeners = EventListeners
         this.list = []
         list.forEach(item => this.add(item)) // 列表逐一添加
-
-        //this.封面 = Img({
-        //    src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-        //    style: {
-        //        width: '6rem',
-        //        height: '6rem',
-        //        borderRadius: '1rem',
-        //        backgroundColor: '#eee',
-        //        border: 'none',
-        //    },
-        //    onerror: event => {
-        //        // img 标签错误时, 替换为1x1透明gif图片
-        //        event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-        //    }
-        //})
         this.封面 = createElement({
             style: {
                 width: '6rem',