紧凑布局

src/music.js

@@ -8,7 +8,6 @@ export default class MusicList {
         this.audio = new Audio()
         this.audio.autoplay = true
         this.audio.controls = true
-        this.audio.style.margin = '1rem 2rem'
         this.audio.addEventListener('play', () => {
             this.event.onplay(this.playing)
         })
@@ -25,10 +24,14 @@ export default class MusicList {
         this.ul = List({
             classList: ['music-list'],
             style: {
-                // 文字溢出显示为省略号
-                overflow: 'hidden',
+                flex: 1,
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
+                overflowX: 'hidden', // 溢出时隐藏
+                overflowY: 'auto',   // 溢出时显示滚动条
+                maxHeight: '70vh',   // 最大高度
+                listStyle: 'disc',   // 实心圆
+                padding: '0 1.1rem', // 列表左右留白
             }
         })
         this.EventListeners = EventListeners
@@ -39,9 +42,11 @@ export default class MusicList {
         const element = createElement({
             style: {
                 position: 'fixed', top: '5rem', right: '1rem',
-                backgroundColor: '#eee', padding: '.5rem',
+                backgroundColor: '#fff', padding: '.5rem',
                 borderRadius: '1rem', cursor: 'pointer',
                 maxWidth: '20rem', maxHeight: '70vh',
+                overflow: 'hidden', boxShadow: '0 0 1rem #eee',
+                display: 'flex', flexDirection: 'column',
             },
             onclick: event => {
                 this.ul.classList.toggle('disable')
@@ -72,9 +77,9 @@ export default class MusicList {
         // 写入 css 样式到 head
         const style = document.createElement('style')
         style.innerText = `
-            ul.music-list {
-                max-height: 70vh;
-                overflow-y: auto;
+            ul.music-list > li {
+                padding: 0;
+                margin: 0;
             }
             ul.music-list > li > span {
                 cursor: pointer;