Refactor music player UI

src/music.js

@@ -38,19 +38,50 @@ export default class MusicList {
         this.list = []
         list.forEach(item => this.add(item)) // 列表逐一添加
 
-        this.封面 = Img({
-            src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+        //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',
                 height: '6rem',
-                borderRadius: '1rem',
-                backgroundColor: '#eee',
                 border: 'none',
+                borderRadius: '1rem',
+                backgroundImage: "url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')",
+                backgroundSize: 'cover',
+                position: 'relative'
             },
-            onerror: event => {
-                // img 标签错误时, 替换为1x1透明gif图片
-                event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-            }
+            children: [
+                createElement({
+                    style: {
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: '1rem',
+                        backgroundColor: '#f8f8f8',
+                        color: '#f2f2f2',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        fontSize: '4rem',
+                        fontWeight: 'bold',
+                        textShadow: 'rgb(255, 255, 255) 0px 2px 2px',
+                        position: 'absolute',
+                        zIndex: -1,
+                    },
+                    textContent: '♫',
+                }),
+            ]
         })
         this.标题 = Span({
             style: {
@@ -58,7 +89,7 @@ export default class MusicList {
                 fontWeight: 'bold',
                 margin: '0 0 .5rem 0',
             },
-            textContent: '音乐名',
+            textContent: '',
         })
 
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
@@ -365,7 +396,7 @@ export default class MusicList {
             }
         } else {
             this.标题.textContent = item.name                        // 替换标题
-            this.封面.src = item.picture      // 替换封面图像
+            this.封面.style.backgroundImage = `url(${item.picture})` // 替换封面图像
             // 替换浏览器媒体信息(使系统通知栏显示歌曲信息)
             if ('mediaSession' in navigator) {
                 navigator.mediaSession.metadata = new MediaMetadata({