LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

紧凑布局

This commit is contained in:
觉 2023-10-19 00:54:43 +08:00
parent 857f38a7ac
commit 5ebb20716d
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/music.js
View File

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