feat: 新增github跳转

sl1673495 · Jul 31, 2019 · dfd16c0 · dfd16c0
1 parent f51842e
commit dfd16c0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 33 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
   <meta name="renderer" content="webkit" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_11qgo6xgqgek.css">
+  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_kun0k5ghypf.css">
   <title>vue-netease-muisc</title>
 </head>
 

diff --git a/src/base/icon.vue b/src/base/icon.vue
@@ -1,5 +1,6 @@
 <template>
   <i
+    @click="onClick"
     class="iconfont icon-component"
     :class="getIconCls()"
     :style="{fontSize: `${size}px`}"
@@ -8,7 +9,7 @@
 
 <script type="text/ecmascript-6">
 export default {
-  name: 'Icon',
+  name: "Icon",
   props: ["size", "type", "color"],
   methods: {
     getIconCls() {
@@ -17,6 +18,9 @@ export default {
         cls += ` icon-color-${this.color}`
       }
       return cls
+    },
+    onClick(e) {
+      this.$emit("click", e)
     }
   }
 }

diff --git a/src/base/volume.vue b/src/base/volume.vue
@@ -4,7 +4,7 @@
       :size="20"
       class="icon"
       :type="getIconType()"
-      @click.native="toggleSilence"
+      @click="toggleSilence"
     />
     <div class="progress-wrap">
       <ProgressBar
@@ -66,7 +66,6 @@ export default {
   display: flex;
   align-items: center;
   width: 150px;
-  padding: 0 16px;
 
   .icon {
     color: var(--font-color);

diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
@@ -43,7 +43,7 @@
         class="icon"
         type="prev"
         :size="24"
-        @click.native="prev"
+        @click="prev"
       />
       <div
         @click="togglePlaying"
@@ -59,11 +59,16 @@
         class="icon"
         type="next"
         :size="24"
-        @click.native="next"
+        @click="next"
       />
     </div>
 
     <div class="mode">
+      <Icon
+        class="icon"
+        type="github"
+        @click="goGitHub"
+      />
       <el-popover
         placement="top"
         width="160"
@@ -76,7 +81,7 @@
           class="icon"
           type="playlist"
           :size="18"
-          @click.native="togglePlaylistShow"
+          @click="togglePlaylistShow"
         />
       </el-popover>
       <!-- 音量 -->
@@ -161,6 +166,9 @@ export default {
     togglePlayerShow() {
       this.setPlayerShow(!this.isPlayerShow)
     },
+    goGitHub() {
+      window.open('https://github.com/sl1673495/vue-netease-music')
+    },
     ...mapMutations(["setCurrentTime", "setPlayingState", "setPlaylistShow", "setPlayerShow"]),
     ...mapActions(["startSong"])
   },
@@ -341,6 +349,10 @@ export default {
     align-items: center;
     justify-content: flex-end;
     flex: 6;
+
+    .icon {
+      margin-right: 16px;
+    }
   }
 
   .progress-bar-wrap {

diff --git a/src/layout/header.vue b/src/layout/header.vue
@@ -1,16 +1,6 @@
 <template>
   <div class="header">
     <div class="left">
-      <div
-        @click="onClickLogo"
-        class="logo-wrap"
-      >
-        <img
-          class="logo"
-          :src="logo"
-        />
-        <span>云音乐</span>
-      </div>
       <div
         @click="onClickDown"
         v-if="isPlayerShow"
@@ -87,22 +77,6 @@ export default {
     display: flex;
     align-items: center;
 
-    .logo-wrap {
-      display: flex;
-      align-items: center;
-      margin-right: 36px;
-      font-size: $font-size-title;
-      color: var(--font-color-white);
-      white-space: nowrap;
-      cursor: pointer;
-
-      .logo {
-        width: 30px;
-        height: 30px;
-        margin-right: 8px;
-      }
-    }
-
     .font-weight {
       white-space: nowrap;
     }