diff --git a/src/music.js b/src/music.js index 785ed57..ef7cf7a 100644 --- a/src/music.js +++ b/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;