refactor: enhance UI compatibility

src/components/CoverRow.vue

@@ -2,23 +2,15 @@
   <div class="cover-row">
     <div
       class="item"
-      :class="{ artist: type === 'artist' }"
       v-for="item in items"
       :key="item.id"
-      :style="{ marginBottom: subText === 'none' ? '32px' : '24px' }"
+      :class="{ artist: type === 'artist' }"
     >
       <Cover
-        class="cover"
+        :imageUrl="item.img1v1Url || item.picUrl || item.coverImgUrl"
+        :type="type"
         :id="item.id"
-        :type="type === 'chart' ? 'playlist' : type"
-        :url="getUrl(item) | resizeImage(imageSize)"
-        :hoverEffect="true"
-        :showBlackShadow="true"
-        :showPlayButton="showPlayButton"
-        :radius="type === 'artist' ? 100 : 12"
-        :size="type === 'artist' ? 192 : 208"
       />
-
       <div class="text">
         <div class="info" v-if="showPlayCount">
           <span class="play-count"
@@ -27,22 +19,14 @@
             }}
           </span>
         </div>
-        <div class="name">
-          <span
-            class="explicit-symbol"
-            v-if="type === 'album' && item.mark === 1056768"
+        <div class="title">
+          <span class="explicit-symbol" v-if="isExplicit(item)"
             ><ExplicitSymbol
           /></span>
-          <span
-            class="lock-icon"
-            v-if="type === 'playlist' && item.privacy === 10"
-          >
+          <span class="lock-icon" v-if="isPrivacy(item)">
             <svg-icon icon-class="lock"
           /></span>
-          <router-link
-            :to="`/${type === 'chart' ? 'playlist' : type}/${item.id}`"
-            >{{ item.name }}</router-link
-          >
+          <router-link :to="getTitleLink(item)">{{ item.name }}</router-link>
         </div>
         <div class="info" v-if="type !== 'artist' && subText !== 'none'">
           <span v-html="getSubText(item)"></span>
@@ -53,8 +37,8 @@
 </template>
 
 <script>
-import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 import Cover from "@/components/Cover.vue";
+import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 
 export default {
   name: "CoverRow",
@@ -63,31 +47,12 @@ export default {
     ExplicitSymbol,
   },
   props: {
-    items: Array,
-    type: String,
-    subText: {
-      type: String,
-      default: "none",
-    },
-    imageSize: {
-      type: Number,
-      default: 512,
-    },
-    showPlayButton: {
-      type: Boolean,
-      default: false,
-    },
-    showPlayCount: {
-      type: Boolean,
-      default: false,
-    },
+    items: { type: Array, required: true },
+    type: { type: String, required: true },
+    subText: { type: String, default: "null" },
+    showPlayCount: { type: Boolean, default: false },
   },
   methods: {
-    getUrl(item) {
-      if (item.picUrl !== undefined) return item.picUrl;
-      if (item.coverImgUrl !== undefined) return item.coverImgUrl;
-      if (item.img1v1Url !== undefined) return item.img1v1Url;
-    },
     getSubText(item) {
       if (this.subText === "copywriter") return item.copywriter;
       if (this.subText === "description") return item.description;
@@ -114,34 +79,35 @@ export default {
       }
       if (this.subText === "appleMusic") return "by Apple Music";
     },
+    isPrivacy(item) {
+      return this.type === "playlist" && item.privacy === 10;
+    },
+    isExplicit(item) {
+      return this.type === "album" && item.mark === 1056768;
+    },
+    getTitleLink(item) {
+      let type = this.type === "chart" ? "playlist" : this.type;
+      return `/${type}/${item.id}`;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .cover-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: {
-    right: -12px;
-    left: -12px;
-  }
-  .index-playlist {
-    margin: 12px 12px 24px 12px;
-  }
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 44px 24px;
 }
 
 .item {
-  margin: 12px 12px 24px 12px;
   color: var(--color-text);
   .text {
-    width: 208px;
     margin-top: 8px;
-    .name {
+    .title {
       font-size: 16px;
       font-weight: 600;
       line-height: 20px;
-
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
@@ -155,7 +121,6 @@ export default {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
-      // margin-top: 4px;
     }
   }
 }
@@ -168,11 +133,17 @@ export default {
   .cover {
     display: flex;
   }
-  .name {
+  .title {
     margin-top: 4px;
   }
 }
 
+@media (max-width: 834px) {
+  .item .text .title {
+    font-size: 14px;
+  }
+}
+
 .explicit-symbol {
   opacity: 0.28;
   color: var(--color-text);