🎨 代码优化 💄 样式调整

xiaozhu188 · Sep 8, 2019 · 38c139c · 38c139c
1 parent 5cbdd6a
commit 38c139c
Show file tree

Hide file tree

Showing 24 changed files with 188 additions and 215 deletions.
diff --git a/src/index.ejs b/src/index.ejs
@@ -10,64 +10,6 @@
     </script>
     <% } %>
     <style>
-      .loading-global {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .ani_playing {
-        width: 30px;
-        height: 12px;
-        overflow: hidden;
-        transform-style: preserve-3d;
-        display: inline-flex;
-        justify-content: center;
-        align-items: flex-end;
-      }
-      .ani_playing .play {
-        animation: bounce ease-in-out infinite alternate forwards;
-      }
-      .ani_playing .play.line {
-        height: 12px;
-        width: 2px;
-        margin-right: 2px;
-        background: #c62f2f;
-        transform-origin: bottom;
-      }
-      .ani_playing .play.line:nth-of-type(1) {
-        height: 6px;
-        animation-duration: 0.4s;
-        -webkit-animation-duration: 0.4s;
-      }
-      .ani_playing .play.line:nth-of-type(2) {
-        height: 12px;
-        animation-duration: 0.6s;
-        -webkit-animation-duration: 0.6s;
-      }
-      .ani_playing .play.line:nth-of-type(3) {
-        height: 10px;
-        animation-duration: 0.7s;
-        -webkit-animation-duration: 0.7s;
-      }
-      .ani_playing .play.line:nth-of-type(4) {
-        height: 8px;
-        animation-duration: 0.5s;
-        -webkit-animation-duration: 0.5s;
-      }
-
-      @keyframes bounce {
-        0% {
-          transform: scaleY(1);
-        }
-        100% {
-          transform: scaleY(0.1);
-        }
-      }
       * {
         padding: 0;
         margin: 0;
@@ -81,14 +23,6 @@
           opacity: 0;
         }
       }
-      @keyframes enter {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
       .welcome {
         position: fixed;
         left: 0;
@@ -98,7 +32,6 @@
         bottom: 0;
         overflow: hidden;
         animation: fade .3s ease-in-out reverse;
-        /* display: none; */
       }
       .welcome .welcome-img {
         display: block;
@@ -121,14 +54,6 @@
   </head>
   <body>
     <div id="app">
-      <!-- <div class="loading-global">
-        <div class="ani_playing">
-          <div class="line play"></div>
-          <div class="line play"></div>
-          <div class="line play"></div>
-          <div class="line play"></div>
-        </div>
-      </div> -->
     </div>
     <div id="welcome" class="welcome">
       <img src="static/images/welcome.png" class="welcome-img" />

diff --git a/src/main/windows/trayWindow.js b/src/main/windows/trayWindow.js
@@ -7,7 +7,6 @@ const createTrayWindow = function (BrowserWindow, bounds) {
   const obj = {
     height: 350,
     width: 200,
-    thickFrame: false,
     x: bounds.x,
     y: bounds.y - 310,
     show: false,

diff --git a/src/renderer/components/BasicSider/MiniCard.vue b/src/renderer/components/BasicSider/MiniCard.vue
@@ -6,7 +6,7 @@
       v-show="Object.keys(current_song).length && !fullscreen"
     >
       <figure class="figure-wrapper">
-        <img v-lazy="current_song.avatar" :key="current_song.avatar" width="50" height="50" />
+        <img v-lazy="current_song.picture || current_song.avatar" :key="current_song.avatar" width="50" height="50" />
         <a-icon type="arrows-alt" class="fullscreen" />
       </figure>
       <section class="card-info">
@@ -83,7 +83,6 @@ export default {
   align-items: center;
   width: 100%;
   border-top: 1px solid #ddd;
-  border-right: 1px solid #ddd;
   background: #fff;
   cursor: pointer;
   transform-origin: left bottom;

diff --git a/src/renderer/components/BasicSider/index.vue b/src/renderer/components/BasicSider/index.vue
@@ -142,6 +142,7 @@ export default {
     }
   }
   /deep/ .ant-menu-submenu-title {
+    color: rgba(0, 0, 0, 0.45);
     padding-left: 16px!important;
   }
   /deep/ .ant-menu-inline {
@@ -204,7 +205,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: rgba(0, 0, 0, 0.45);
     .anticon-plus-circle {
       font-size: 15px;
       color: rgba(0,0,0,.5);

diff --git a/src/renderer/components/Common/musicView.vue b/src/renderer/components/Common/musicView.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <canvas id="canvas" v-show="!showWater"></canvas>
-    <canvas id="wrap" height="640" width="640" v-show="showWater"></canvas>
-    <div class="avatar-wrapper" v-show="showWater" @click="avatarClick">
+    <canvas id="canvas" v-show="!showGlow"></canvas>
+    <canvas id="wrap" height="640" width="640" v-show="showGlow"></canvas>
+    <div class="avatar-wrapper" v-show="showGlow" @click="avatarClick">
       <img
-        :src="`${current_song.avatar}?param=400y400`"
+        :src="`${current_song.avatar}`"
         class="avatar"
         :class="{'paused' : !playing}"
       />
@@ -24,7 +24,7 @@ export default {
       gradient: '',
       width: 0,
       height: 0,
-      showWater: false
+      showGlow: false
     }
   },
   props: {
@@ -43,10 +43,10 @@ export default {
         this.audioDom = document.getElementById(newVal)
       })
     },
-    showWater (newVal) {
+    showGlow (newVal) {
       if (newVal) {
         this.$nextTick(() => {
-          this.initWater()
+          this.initGlow()
           this.timer && cancelAnimationFrame(this.timer)
         })
       } else {
@@ -177,7 +177,7 @@ export default {
         _this.timer = requestAnimationFrame(draw)
       })()
     },
-    initWater () {
+    initGlow () {
       let { width, height } = this.wrap
       let cxt = this.wrap.getContext('2d')
       // 获取API
@@ -264,12 +264,12 @@ export default {
         _this.time2 = requestAnimationFrame(drawSpectrum)
       })()
     },
-    toggleWater () {
-      this.showWater = !this.showWater
+    toggleGlow () {
+      this.showGlow = !this.showGlow
     },
     avatarClick () {
       this.$emit('avatarClick')
-      this.toggleWater()
+      this.toggleGlow()
     }
   }
 }

diff --git a/src/renderer/components/Common/tabBar.vue b/src/renderer/components/Common/tabBar.vue
@@ -97,7 +97,7 @@ export default {
     a {
       display: inline-block;
       line-height: 32px;
-      margin: 0 30px;
+      margin: 0 20px;
       color: #333;
       text-decoration: none;
       &.router-link-exact-active,&.router-link-active {

diff --git a/src/renderer/components/Common/tags.vue b/src/renderer/components/Common/tags.vue
@@ -48,7 +48,6 @@
     dd {
       padding: 0 10px;
       cursor: pointer;
-      border-radius: 3px;
       &.current {
         background: @primary-color;
         color: #fff;

diff --git a/src/renderer/components/Common/track-list/index.vue b/src/renderer/components/Common/track-list/index.vue
@@ -95,9 +95,13 @@
                         :row="row"
                         :col="col"
                         v-else
-                      ></component>
+                      >
+                      </component>
                     </div>
                   </div>
+                  <div class="col-lyric" v-if="row.lyrics">
+                    <slot name="lyric" :row="row"></slot>
+                  </div>
                 </div>
                 <a-menu slot="overlay">
                   <a-menu-item key="0">
@@ -427,6 +431,9 @@ export default {
     flex: 0 0 40px !important;
     font-size: 13px;
   }
+  .col-lyric {
+    flex: 0 0 100%;
+  }
   .col-actions {
     flex: 0 0 60px !important;
   }
@@ -471,6 +478,7 @@ export default {
       }
       .song-item {
         display: flex;
+        flex-wrap: wrap;
         line-height: 32px;
         font-size: 14px;
         .col-item {

diff --git a/src/renderer/components/Login/index.vue b/src/renderer/components/Login/index.vue
@@ -111,7 +111,7 @@ export default {
 .login .ant-modal-content {
   min-height: 400px;
   background: #f8f8f8 url("./../../assets/images/loginBg.jpg") top
-    center/contain no-repeat;
+    center/contain no-repeat!important;
 }
 
 #login {

diff --git a/src/renderer/components/PlayBar/HistoryPlayTable.vue b/src/renderer/components/PlayBar/HistoryPlayTable.vue
@@ -21,5 +21,3 @@ export default {
   }
 }
 </script>
-
-<style scoped></style>
diff --git a/src/renderer/components/PlayBar/index.vue b/src/renderer/components/PlayBar/index.vue
@@ -559,7 +559,7 @@ export default {
       }
     }
     .ant-drawer-body {
-      padding: 65px 0 0;
+      padding: 60px 0 0;
     }
   }
 </style>

diff --git a/src/renderer/components/Player/index.vue b/src/renderer/components/Player/index.vue
@@ -6,27 +6,20 @@
         <div class="main-top">
           <div class="left">
             <div class="avatar-wrapper" ref="avatarWrapper" :class="[{'play' : isAddAnimation},{'pause' : !playing},{'has-freq' : showFreq}]">
-              <!-- <div class="freq" v-show="showFreq">
-                <water />
-              </div>  -->
               <img :src="current_song.avatar" class="song-avatar" />
             </div>
             <div class="actions" v-if="current_song">
               <a-button :disabled="!!current_song.folder" @click="_handleLikeSong">
-                  <song-heart 
-                    :isLiked="isLiked"
-                    style="marginRight:4px"
-                  />
+                  <song-heart :isLiked="isLiked" style="marginRight:4px"/>
                   <span>喜欢</span>
               </a-button>
               <collect-btn />
               <a-button icon="share-alt" :disabled="!!current_song.folder" @click="share">
                 分享
               </a-button>
-              <a-button :disabled="!!current_song.folder || downloadstatus.downloaded" :icon="downloadstatus.icon" @click.native="download(current_song)">
+              <a-button :disabled="!!current_song.folder || downloadstatus.downloaded" :icon="downloadstatus.icon" @click="download(current_song)">
                 {{downloadstatus.text}}
               </a-button>
-              <!-- :disabled="!!current_song.folder || downloadstatus.downloaded"  -->
             </div>
             <div :class="lineCls" v-if="!showFreq">
               <img src="./../../assets/images/track_line.png">
@@ -172,7 +165,7 @@ export default {
     Artists, Comment, ZIcon, SongHeart, CollectBtn, LyricList
   },
   computed: {
-    ...mapState('Download', ['downloaded']),
+    ...mapState('Download', ['downloaded', 'downloading', 'queue']),
     ...mapState('play', ['lyric']),
     ...mapGetters('play', [
       'fullscreen',
@@ -191,20 +184,12 @@ export default {
       return this.playing ? 'track-line' : 'track-line paused'
     },
     downloadstatus () {
-      return this.downloaded.findIndex(item => item.id === this.current_song.id) >= 0
+      return [...this.downloaded, ...this.queue].findIndex(item => item.id === this.current_song.id) >= 0
         ? {icon: 'check-circle', text: '已下载', downloaded: true}
         : {icon: 'download', text: '下载'}
     }
   },
   watch: {
-    current_lyric_line (newLine) {
-      if (this.fixLyric) return
-      const lines = this.$refs.lyrics.$refs.lyricLine
-      if (lines && lines[newLine]) {
-        let top = lines[newLine].offsetTop > 0 ? Number(lines[newLine].offsetTop - LYRIC_LINE_HEIGHT * 3) : 0
-        this.$refs.lyrics.scrollTo(top, 'smooth')
-      }
-    },
     fixLyric (newVal) {
       if (!newVal) { // 如果取消了固定歌词,自动滚到当前歌词行
         const lines = this.$refs.lyrics.$refs.lyricLine
@@ -229,6 +214,14 @@ export default {
     },
     fullscreen (newVal) {
       if (newVal) {
+        this.unWatcher_lyric = this.$watch('current_lyric_line', (newLine) => {
+          if (this.fixLyric) return
+          const lines = this.$refs.lyrics.$refs.lyricLine
+          if (lines && lines[newLine]) {
+            let top = lines[newLine].offsetTop > 0 ? Number(lines[newLine].offsetTop - LYRIC_LINE_HEIGHT * 3) : 0
+            this.$refs.lyrics.scrollTo(top, 'smooth')
+          }
+        })
         let img = new Image()
         img.src = this.current_song.avatar
         img.onload = () => {
@@ -252,6 +245,7 @@ export default {
         this._getSongUsers(this.current_song.id)
       } else {
         this.isAddAnimation = false
+        this.unWatcher_lyric && this.unWatcher_lyric()
       }
     }
   },
@@ -370,7 +364,7 @@ export default {
   right: 0;
   top: 50px;
   bottom: 50px;
-  z-index: 11;
+  z-index: 999;
   background: #fff;
   overflow-y: auto;
   overflow-x: hidden;
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,5 +21,3 @@ export default { @@
       }
     }
     </script>
-    <style scoped></style>