feat: add footer

* ranking and new disc page add loading effect

src/App.vue

@@ -2,6 +2,7 @@
   <back-top />
   <nav-bar />
   <router-view />
+  <bottom-footer />
   <player />
 </template>
 
@@ -9,10 +10,11 @@
 import NavBar from "components/content/NavBar";
 import BackTop from "components/common/BackTop";
 import Player from "components/common/Player";
+import BottomFooter from "components/common/BottomFooter";
 
 export default {
   name: "#app",
-  components: { NavBar, BackTop, Player },
+  components: { NavBar, BackTop, BottomFooter, Player },
 };
 </script>
 

src/components/common/BottomFooter.vue

+<template>
+  <div class="footer" role="footer">
+    <div class="section_inner">
+      <div class="footer_info">
+        <div class="footer_platform">
+          <h3 class="footer_tit">链接</h3>
+          <ul class="footer_platform_list">
+            <li class="footer_platform_list__item">
+              <a
+                href="https://github.com/zlj-zz/yz-music"
+                target="_blank"
+                class="js_other_link"
+                >项目GitHub地址</a
+              >
+            </li>
+            <li class="footer_platform_list__item">
+              <a
+                href="http://blog.zacharyzlj.cn/"
+                target="_blank"
+                class="js_other_link"
+                >博客地址</a
+              >
+            </li>
+            <li class="footer_platform_list__item">
+              <a
+                href="https://blog.csdn.net/qq_38410494?spm=1011.2124.3001.5343"
+                target="_blank"
+                class="js_other_link"
+                >CSDN</a
+              >
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer_copyright">
+        <p>Copyright © 2020 - {{ date }}</p>
+        <p>本项目仅学习用途</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    date() {
+      return new Date().getFullYear();
+    },
+  },
+};
+</script>
+
+<style scoped>
+h3,
+li,
+p,
+ul {
+  margin: 0;
+  padding: 0;
+}
+.section_inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.footer {
+  color: #666;
+  background-color: #f2f2f2;
+  clear: both;
+}
+.footer_info {
+  overflow: hidden;
+  /*border-bottom: 1px solid #353535;*/
+  position: relative;
+}
+
+.footer_platform {
+  margin: 0 0 0 150px;
+}
+.footer_tit {
+  font-size: 18px;
+  font-weight: 400;
+  padding: 20px 0 10px;
+}
+.footer_platform_list {
+  margin-left: -25px;
+}
+.footer_platform_list__item {
+  float: left;
+  min-width: 100px;
+  margin: 0 5px 12px 0;
+  text-indent: 25px;
+}
+
+.footer_copyright {
+  text-align: center;
+  line-height: 28px;
+  /*padding: 24px 0;*/
+  padding-bottom: 24px;
+}
+.footer_copyright {
+  font-size: 12px;
+}
+.footer a {
+  color: #666;
+}
+</style>
+

src/views/musicLibrary/NewDisc.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <div class="mod_part_detail">
+    <div class="mod_part_detail" v-loading="loading">
       <div class="mod_playlist mod_playlist--all">
         <ul class="playlist__list" id="album_list">
           <li
@@ -85,6 +85,7 @@ import { createAlbum } from "common/utils";
 export default {
   data() {
     return {
+      loading: true,
       limit: 20,
       page: 0,
       selectArea: albumAreas.ALL.dataId,
@@ -117,6 +118,7 @@ export default {
         this.allAlbums = albums;
         this.allAlbumsLength = albums.length;
         this.page = 1;
+        this.loading = false;
       });
     },
     areaSelect(id) {

src/views/musicLibrary/Ranking.vue

@@ -117,7 +117,7 @@
         >
       </div>
 
-      <div class="mod_songlist">
+      <div class="mod_songlist" v-loading="loading">
         <ul class="songlist__header">
           <li class="songlist__edit sprite">
             <input type="checkbox" class="songlist__checkbox js_check_all" />
@@ -216,6 +216,7 @@ import { isDef, createSong, playSonglist } from "common/utils";
 export default {
   data() {
     return {
+      loading: true,
       topRankingtype: [
         { name: "飙升榜", dataId: "19723756" },
         { name: "新歌榜", dataId: "3779629" },
@@ -261,7 +262,7 @@ export default {
     },
     updatedTopList() {
       getPlaylistDetial(this.seletedType).then((res) => {
-        console.log(res);
+        //console.log(res);
         let trackIds = res.data.playlist.trackIds;
         let ids = trackIds.map(({ id }) => id);
         getSongDetail(ids).then((res) => {
@@ -284,8 +285,9 @@ export default {
             }
             songs.push(song);
           }
-          console.log(songs);
+          //console.log(songs);
           this.listDatas = songs;
+          this.loading = false;
         });
       });
     },