update

* improve songer detail page
* improve ranking page
* add new css
* fix toplist id error

src/assets/css/fakeqqmusic.css

@@ -7,6 +7,11 @@
   background-color: #31c27c;
   color: #fff;
 }
+.mod_btn_green:hover {
+  background-color: #2caf6f;
+  border-color: #2caf6f;
+  color: #fff;
+}
 .mod_btn,
 .mod_btn_green {
   border-radius: 2px;
@@ -1095,3 +1100,41 @@ img .playlist__pic {
   *width: 100%;
   margin: 20px 30px 4px;
 }
+
+/*
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * pop detail */
+.popup_data_detail {
+  position: absolute;
+  top: 364px;
+  right: 303px;
+  width: 580px;
+  background: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  z-index: 99;
+}
+.popup_data_detail__cont {
+  max-height: 400px;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 30px 5px 30px 10px;
+  overflow-y: auto;
+}
+.popup_data_detail__cont p,
+.popup_data_detail__tit {
+  margin: 0 24px 0 19px;
+}
+.popup_data_detail__tit {
+  line-height: 22px;
+  font-size: 20px;
+  font-weight: 400;
+  padding: 0 0 20px;
+}

src/views/musicLibrary/Ranking.vue

@@ -148,7 +148,13 @@
 
               <div class="songlist__rank">
                 <i :class="processRanking(song.rankingChange)"></i
-                >{{ song.rankingChange == -9999 ? "" : song.rankingChange }}
+                >{{
+                  song.rankingChange > 0
+                    ? song.rankingChange
+                    : song.rankingChange == -9999
+                    ? ""
+                    : song.rankingChange * -1
+                }}
               </div>
 
               <div class="songlist__songname">
@@ -224,7 +230,7 @@ export default {
       specialRankingtype: [
         { name: "古典榜", dataId: "71384707" },
         { name: "说唱榜", dataId: "99131959" },
-        { name: "电子榜", dataId: "187894795" },
+        { name: "电子榜", dataId: "1978921795" },
         { name: "ACG榜", dataId: "71385702" },
         { name: "乡村榜", dataId: "3112516681" },
         { name: "摇滚榜", dataId: "5059633707" },

src/views/musicLibrary/SongerDetail.vue

@@ -33,7 +33,9 @@
             {{ songer.desc }}
           </div>
 
-          <a href="javascript:;" class="js_desc">[更多]</a>
+          <a href="javascript:;" class="js_desc" @click="toggleShowMoreInfo"
+            >[更多]</a
+          >
         </div>
 
         <ul class="mod_data_statistic">
@@ -69,9 +71,6 @@
           <a class="mod_btn_green js_singer_radio" @click="playHotSongs">
             <i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
           </a>
-          <a href="javascript:;" class="mod_btn js_follow">
-            <i class="mod_btn__icon_more"> </i>关注 1.7万
-          </a>
         </div>
       </div>
     </div>
@@ -136,7 +135,7 @@
         </div>
       </div>
 
-      <div class="mod_part" v-if="albums">
+      <div class="mod_part" v-if="albums.length > 0">
         <div class="part__hd">
           <h2 class="part__tit">专辑</h2>
         </div>
@@ -158,15 +157,21 @@
                       :src="album.img"
                       :alt="album.name"
                     />
-                    <i class="mod_cover__icon_play js_play"></i>
+                    <i
+                      class="mod_cover__icon_play js_play"
+                      @click="playAlbum(album.id)"
+                    ></i>
                   </a>
                 </div>
                 <h4 class="playlist__title">
-                  <span class="playlist__title_txt"
-                    ><a :title="album.name" class="js_album">{{
-                      album.name
-                    }}</a></span
-                  >
+                  <span class="playlist__title_txt">
+                    <a
+                      class="js_album"
+                      :title="album.name"
+                      @click="gotoAlbumDetail(album.id)"
+                      >{{ album.name }}</a
+                    >
+                  </span>
                 </h4>
                 <div class="playlist__other">{{ album.publishTime }}</div>
                 <a
@@ -180,7 +185,7 @@
         </div>
       </div>
 
-      <div class="mod_part" v-if="mvs">
+      <div class="mod_part" v-if="mvs.length > 0">
         <div class="part__hd">
           <h2 class="part__tit">MV</h2>
 
@@ -217,7 +222,7 @@
         </div>
       </div>
 
-      <div class="mod_part" id="similar" style="" v-if="simiSongers">
+      <div class="mod_part" id="similar" style="" v-if="simiSongers.length > 0">
         <div class="part__hd">
           <h2 class="part__tit">相似歌手</h2>
         </div>
@@ -231,8 +236,9 @@
               <div class="singer_list__item_box">
                 <a
                   class="singer_list__cover js_singer"
-                  :title="songer.name"
                   hidefocus="true"
+                  :title="songer.name"
+                  @click="gotoSongerDetail({ id: songer.id })"
                 >
                   <img
                     class="singer_list__pic"
@@ -242,9 +248,12 @@
                   />
                 </a>
                 <h3 class="singer_list__title">
-                  <a class="js_singer" :title="songer.name">{{
-                    songer.name
-                  }}</a>
+                  <a
+                    class="js_singer"
+                    :title="songer.name"
+                    @click="gotoSongerDetail({ id: songer.id })"
+                    >{{ songer.name }}</a
+                  >
                 </h3>
               </div>
             </li>
@@ -252,6 +261,25 @@
         </div>
       </div>
     </div>
+
+    <div
+      class="popup_data_detail"
+      id="popup_data_detail"
+      data-aria="popup"
+      style="z-index: 2147483647"
+      :style="{ display: moreInfo ? '' : 'none' }"
+      v-if="songer.desc"
+    >
+      <div class="popup_data_detail__cont">
+        <h3 class="popup_data_detail__tit">歌手简介</h3>
+
+        <p v-for="(line, idx) in songer.desc.split('\n')" :key="idx">
+          {{ line }}
+        </p>
+        <p></p>
+      </div>
+      <i class="popup_data_detail__arrow"></i>
+    </div>
   </div>
 </template>
 
@@ -264,6 +292,7 @@ import {
   getSimiSongers,
   getSongerAlbums,
   getSongerMvs,
+  getAlbum,
 } from "api";
 import {
   createSonger,
@@ -278,19 +307,18 @@ import {
 export default {
   data() {
     return {
-      activeName: "first",
+      moreInfo: false,
       id: null,
       songer: {},
-      simiSongers: null,
+      simiSongers: [],
       hotSongs: [],
       songs: [],
-      albums: null,
-      mvs: null,
+      albums: [],
+      mvs: [],
     };
   },
   created() {
     this.id = this.$route.query.id;
-    this.accountId = this.$route.query.accountId;
     this.init();
   },
   methods: {
@@ -322,6 +350,7 @@ export default {
 
       // Get songer album
       const res4 = await getSongerAlbums({ id: this.id, limit: 5, offset: 0 });
+      console.log(res4);
       this.albums = res4.data.hotAlbums.map(
         ({ id, name, publishTime, artists, picUrl }) => {
           return createAlbum({
@@ -333,7 +362,6 @@ export default {
           });
         }
       );
-      console.log(this.albums);
 
       // Get songer mv
       const res5 = await getSongerMvs(this.id);
@@ -350,11 +378,40 @@ export default {
         }
       );
       this.mvs = mvs.length > 5 ? mvs.slice(0, 5) : mvs;
-      console.log(this.mvs);
     },
     playHotSongs() {
       playSonglist(this.hotSongs);
     },
+    toggleShowMoreInfo() {
+      this.moreInfo = !this.moreInfo;
+    },
+    playAlbum(id) {
+      getAlbum(id).then((res) => {
+        let songs = res.data.songs.map(
+          ({ id, name, ar, dt, al, mv, publishTime }) => {
+            return createSong({
+              id,
+              name,
+              artists: ar,
+              duration: dt,
+              albumName: al.name,
+              mvId: mv,
+              img: al.picUrl,
+            });
+          }
+        );
+        playSonglist(songs);
+      });
+    },
+    gotoAlbumDetail(id) {
+      this.$router.push({
+        path: "/musicLibrary/albumDetail",
+        query: { id: id },
+      });
+    },
+    gotoSongerDetail(query) {
+      this.$router.push({ path: "/musicLibrary/songerDetail", query: query });
+    },
   },
   components: {
     ModListMenu,
@@ -526,4 +583,9 @@ ul {
 .mod_mv {
   height: 183px;
 }
+
+.popup_data_detail {
+  top: 128px;
+  right: 85px;
+}
 </style>

src/views/musicLibrary/Songers.vue

@@ -29,9 +29,7 @@
             href="javascript:;"
             class="singer_list_txt__link js_singer"
             :title="item.name"
-            @click="
-              gotoSongerDetail({ id: item.id, accountId: item.accountId })
-            "
+            @click="gotoSongerDetail({ id: item.id })"
             >{{ item.name }}</a
           >
         </li>