fix: newAlbum issue (#573) (#582)

src/views/newAlbum.vue

@@ -1,23 +1,14 @@
 <template>
   <div class="newAlbum">
     <h1>{{ $t("home.newAlbum") }}</h1>
-
     <div class="playlist-row">
       <div class="playlists">
-        <div class="item" v-for="album in albums" :key="album.id">
+        <CoverRow
-          <Cover
+          type="album"
-            :id="album.id"
+          :items="albums"
-            :type="'album'"
+          subText="artist"
-            :url="album.picUrl | resizeImage"
+          :show-play-button="true"
-            :hoverEffect="true"
-            :showBlackShadow="true"
         />
-
-          <div class="text">
-            <div class="name">{{ album.name }}</div>
-            <div class="info">{{ album.artist.name }}</div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -27,7 +18,7 @@
 import { newAlbums } from "@/api/album";
 import NProgress from "nprogress";
 
-import Cover from "@/components/Cover.vue";
+import CoverRow from "@/components/CoverRow.vue";
 
 export default {
   data() {
@@ -36,7 +27,7 @@ export default {
     };
   },
   components: {
-    Cover,
+    CoverRow,
   },
   created() {
     newAlbums({
@@ -52,55 +43,7 @@ export default {
 
 <style lang="scss" scoped>
 h1 {
-  span {
+  color: var(--color-text);
-    color: rgba(0, 0, 0, 0.58);
+  font-size: 56px;
-  }
-}
-
-.playlist-row {
-  margin-top: 36px;
-  &:first-child {
-    margin-top: 0;
-  }
-}
-.playlists {
-  display: flex;
-  flex-wrap: wrap;
-  margin: {
-    right: -12px;
-    left: -12px;
-  }
-  .index-playlist {
-    margin: 12px 12px 24px 12px;
-  }
-}
-
-.item {
-  margin: 12px 12px 24px 12px;
-  .text {
-    width: 208px;
-    margin-top: 8px;
-    .name {
-      font-size: 16px;
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
-      line-height: 20px;
-
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-    }
-    .info {
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.68);
-      line-height: 18px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-      // margin-top: 4px;
-    }
-  }
 }
 </style>