优化封面

src/css/app.scss

@@ -13,7 +13,23 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+
+  .album-cover {
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 394px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: blur(35px) opacity(0.8);
+    }
+  }
 
   // 标题栏样式
   .title-bar {
@@ -22,6 +38,7 @@
     align-items: center;
     z-index: 9;
     height: 26px;
+    background: rgba(32, 32, 32, 0.5);
 
     .btn-box {
       display: inline-flex;
@@ -64,6 +81,7 @@
     flex: 1;
     display: flex;
     justify-content: space-between;
+    background: rgba(32, 32, 32, 0.5);
 
     .aside {
       width: 180px;
@@ -219,7 +237,7 @@
   .play-bar {
     height: 66px;
     width: 100%;
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(24, 24, 24, 0.3);
     color: #fff;
 
     .stat-bar {

src/index.html

@@ -11,6 +11,10 @@
 
 <div class="app" anot="app">
 
+  <div class="album-cover">
+    <img :src="preview.cover || defaultCover">
+  </div>
+
   <div class="title-bar app-drag">
     <div class="btn-box app-nodrag focus">
       <a class="item quit"></a>
@@ -39,7 +43,7 @@
     <div class="song-box">
       <div class="preview">
         <div class="album">
-          <img :src="preview.cover || '/images/disk.png'">
+          <img :src="preview.cover || defaultCover">
         </div>
         <div class="info">
           <strong :text="preview.name"></strong>

src/js/app.js

@@ -18,6 +18,7 @@ var kb = new Keyboard()
 Anot({
   $id: 'app',
   state: {
+    defaultCover: '/images/disk.png',
     isplaying: true,
     playmode: 1,
     mute: false,