歌手链接

src/views/discover/Recommend.vue

@@ -44,7 +44,7 @@
           <div class="c2-list">
             <div class="play-btn">
               <img :src="song.album.blurPicUrl" />
-              <n-button 
+              <n-button
                 text
                 class="start-play-bg"
                 type="info"
@@ -59,20 +59,21 @@
                 type="primary"
               >
                 <n-icon>
-                  <Play @click="play(song.id)"/>
+                  <Play @click="play(song.id)" />
                 </n-icon>
               </n-button>
             </div>
             <div class="title">
               <span class="name">
                 {{ song.name }}
-                <span class="alias">{{
-                  songAlias(song.alias)
-                }}</span>
+                <span class="alias"><template
+                  v-for="(al, idx) in song.alias"
+                > {{al}}
+                </template></span>
+              </span>
+              <span class="artist">
+                <ArtistsSpan :artists="song.artists"/>
               </span>
-              <span class="artist">{{
-                songArtists(song.artists)
-              }}</span>
             </div>
             <span class="icon"></span>
           </div>
@@ -110,7 +111,7 @@
           <div class="mv-c2-list">
             <div class="play-mv">
               <div>
-                 <img :src="mv.picUrl" />
+                <img :src="mv.picUrl" />
               </div>
               <n-button
                 text
@@ -209,13 +210,14 @@ import {
   getTopSong,
   getPersonalizedMV,
 } from "@/network/discover";
-import pubsub from 'pubsub-js'
+import pubsub from "pubsub-js";
+import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
 const store = useStore();
 
-const play=(id)=>{
-  pubsub.publish('zp.play', {id, im: true})
-}
+const play = (id) => {
+  pubsub.publish("zp.play", { id, im: true });
+};
 
 //#region 初始载入数据
 //轮播图片
@@ -233,7 +235,7 @@ let topSongs = ref([]);
 getTopSong()
   .then((res) => {
     topSongs.value = res.data.data.filter((item, index) => {
-      return index < 10;
+      return index < 20;
     });
     // console.log(topSongs.value);
   })
@@ -310,32 +312,31 @@ getPersonalizedMV()
   border-radius: 6px;
 
   .play-mv {
-
     img {
       width: 100%;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
     }
-    button{
+    button {
       display: none;
     }
 
-    .start-play-bg{
+    .start-play-bg {
       font-size: 38px;
       position: absolute;
       right: 0px;
       bottom: 42px;
       color: rgba(255, 255, 255, 0.8);
     }
-    .start-play{
+    .start-play {
       font-size: 25px;
       position: absolute;
       right: 5px;
       bottom: 48px;
     }
 
-    &:hover{
-      button{
+    &:hover {
+      button {
         display: block;
       }
     }
@@ -365,25 +366,24 @@ getPersonalizedMV()
   border-radius: 4px;
   border: 1px solid #eee;
 
-
   img {
     width: 60px;
     border-radius: 4px;
   }
 
-  .start-play-bg{
+  .start-play-bg {
     font-size: 30px;
     position: absolute;
     left: 16px;
-    top: 17px;
+    top: 16px;
     color: rgba(255, 255, 255, 0.8);
   }
 
-  .start-play{
+  .start-play {
     font-size: 16px;
     position: absolute;
     left: 24px;
-    top: 24px;
+    top: 23px;
   }
 
   .title {