refactor: enhance UI compatibility

src/App.vue

@@ -108,11 +108,11 @@ body {
 
 html {
   overflow-y: overlay;
-  min-width: 1000px;
+  min-width: 768px;
 }
 
 main {
-  margin-top: 96px;
+  margin-top: 84px;
   margin-bottom: 96px;
   padding: {
     right: 10vw;
@@ -120,6 +120,12 @@ main {
   }
 }
 
+@media (max-width: 1336px) {
+  main {
+    padding: 0 5vw;
+  }
+}
+
 select,
 button {
   font-family: inherit;

src/background.js

@@ -89,6 +89,8 @@ class Background {
     this.window = new BrowserWindow({
       width: this.store.get("window.width") | 1440,
       height: this.store.get("window.height") | 840,
+      minWidth: 768,
+      minHeight: 608,
       titleBarStyle: "hiddenInset",
       webPreferences: {
         webSecurity: false,

src/components/Cover.vue

@@ -1,35 +1,30 @@
 <template>
-  <div style="position: relative">
-    <div
-      class="cover"
-      @mouseover="focus = true"
-      @mouseleave="focus = false"
-      :style="coverStyle"
-      :class="{
-        'hover-float': hoverEffect,
-        'hover-play-button': showPlayButton,
-      }"
-      @click="clickToPlay ? play() : goTo()"
-    >
-      <button
-        class="play-button"
-        v-if="showPlayButton"
-        :style="playButtonStyle"
-        @click.stop="playButtonClicked"
-      >
-        <svg-icon icon-class="play" />
-      </button>
+  <div
+    class="cover"
+    @mouseover="focus = true"
+    @mouseleave="focus = false"
+    :class="{ 'cover-hover': coverHover }"
+    @click="clickCoverToPlay ? play() : goTo()"
+  >
+    <div class="cover-container">
+      <div class="shade">
+        <button
+          v-show="focus"
+          class="play-button"
+          @click.stop="play()"
+          :style="playButtonStyles"
+          ><svg-icon icon-class="play" />
+        </button>
+      </div>
+      <img :src="imageUrl" :style="imageStyles" />
+      <transition name="fade" v-if="coverHover || alwaysShowShadow">
+        <div
+          class="shadow"
+          v-show="focus || alwaysShowShadow"
+          :style="shadowStyles"
+        ></div>
+      </transition>
     </div>
-
-    <transition name="fade" v-if="hoverEffect">
-      <img class="shadow" v-show="focus" :src="url" :style="shadowStyle"
-    /></transition>
-    <img
-      class="shadow"
-      v-if="alwaysShowShadow"
-      :src="url"
-      :style="shadowStyle"
-    />
   </div>
 </template>
 
@@ -37,83 +32,54 @@
 import { playAlbumByID, playPlaylistByID, playArtistByID } from "@/utils/play";
 
 export default {
-  name: "Cover",
   props: {
-    id: Number,
-    type: String,
-    url: String,
-    hoverEffect: Boolean,
-    showPlayButton: Boolean,
-    alwaysShowShadow: Boolean,
-    showBlackShadow: Boolean,
-    clickToPlay: Boolean,
-    size: {
-      type: Number,
-      default: 208,
-    },
-    shadowMargin: {
-      type: Number,
-      default: 12,
-    },
-    radius: {
-      type: Number,
-      default: 12,
-    },
-    playButtonSize: {
-      type: Number,
-      default: 48,
-    },
+    id: { type: Number, required: true },
+    type: { type: String, required: true },
+    imageUrl: { type: String, required: true },
+    fixedSize: { type: Number, default: 0 },
+    playButtonSize: { type: Number, default: 22 },
+    coverHover: { type: Boolean, default: true },
+    alwaysShowPlayButton: { type: Boolean, default: true },
+    alwaysShowShadow: { type: Boolean, default: false },
+    clickCoverToPlay: { type: Boolean, default: false },
+    shadowMargin: { type: Number, default: 12 },
+    radius: { type: Number, default: 12 },
   },
   data() {
     return {
       focus: false,
-      shadowStyle: {},
-      playButtonStyle: {},
-    };
-  },
-  created() {
-    this.shadowStyle = {
-      height: `${this.size}px`,
-      width: `${~~(this.size * 0.96)}px`,
-      top: `${this.shadowMargin}px`,
-      right: `${~~(this.size * 0.02)}px`,
-      borderRadius: `${this.radius}px`,
-    };
-    this.playButtonStyle = {
-      height: `${this.playButtonSize}px`,
-      width: `${this.playButtonSize}px`,
     };
   },
   computed: {
-    coverStyle() {
-      return {
-        backgroundImage: `url('${this.url}')`,
-        boxShadow: this.showBlackShadow
-          ? "0 12px 16px -8px rgba(0, 0, 0, 0.2)"
-          : "",
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        borderRadius: `${this.radius}px`,
-        cursor: this.clickToPlay ? "default" : "pointer",
-      };
+    imageStyles() {
+      let styles = {};
+      if (this.fixedSize !== 0) {
+        styles.width = this.fixedSize + "px";
+      }
+      if (this.type === "artist") styles.borderRadius = "50%";
+      return styles;
+    },
+    playButtonStyles() {
+      let styles = {};
+      styles.width = this.playButtonSize + "%";
+      styles.height = this.playButtonSize + "%";
+      return styles;
+    },
+    shadowStyles() {
+      let styles = {};
+      styles.backgroundImage = `url(${this.imageUrl})`;
+      if (this.type === "artist") styles.borderRadius = "50%";
+      return styles;
     },
   },
   methods: {
     play() {
-      if (this.type === "album") {
-        playAlbumByID(this.id);
-      } else if (this.type === "playlist") {
-        playPlaylistByID(this.id);
-      }
-    },
-    playButtonClicked() {
-      if (this.type === "album") {
-        playAlbumByID(this.id);
-      } else if (this.type === "playlist") {
-        playPlaylistByID(this.id);
-      } else if (this.type === "artist") {
-        playArtistByID(this.id);
-      }
+      const playActions = {
+        album: playAlbumByID,
+        playlist: playPlaylistByID,
+        artist: playArtistByID,
+      };
+      playActions[this.type](this.id);
     },
     goTo() {
       this.$router.push({ name: this.type, params: { id: this.id } });
@@ -125,72 +91,70 @@ export default {
 <style lang="scss" scoped>
 .cover {
   position: relative;
-  padding: 0;
-  background-size: cover;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transition: transform 0.3s;
 }
-
-.hover-float {
-  &:hover {
-    transform: scale(1.02);
-    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
-  }
+.cover-container {
+  position: relative;
+}
+img {
+  border-radius: 0.75em;
+  width: 100%;
+  user-select: none;
 }
 
-.hover-play-button {
+.cover-hover {
   &:hover {
-    .play-button {
-      opacity: 1;
-      transform: unset;
-    }
-  }
-  .play-button {
-    &:hover {
-      transform: scale(1.06);
-    }
-    &:active {
-      transform: scale(0.94);
-    }
+    cursor: pointer;
+    transform: scale(1.02);
   }
 }
 
-.shadow {
+.shade {
   position: absolute;
-  filter: blur(16px) opacity(0.6);
-  z-index: -1;
-  height: 208px;
-  transform: scale(0.98);
-}
-[data-theme="dark"] {
-  .shadow {
-    filter: blur(16px) brightness(68%);
-    transform: scale(0.96);
-  }
+  top: 0;
+  height: calc(100% - 3px);
+  width: 100%;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
 .play-button {
-  opacity: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  // right: 72px;
-  // top: 72px;
-  border: none;
+  color: white;
   backdrop-filter: blur(12px) brightness(96%);
   background: transparent;
-  color: white;
+  height: 22%;
+  width: 22%;
   border-radius: 50%;
   cursor: default;
   transition: 0.2s;
   .svg-icon {
-    height: 50%;
+    height: 44%;
     margin: {
-      left: 3px;
+      left: 4px;
     }
   }
+  &:hover {
+    transform: scale(1.06);
+  }
+  &:active {
+    transform: scale(0.94);
+  }
+}
+
+.shadow {
+  position: absolute;
+  top: 12px;
+  height: 100%;
+  width: 100%;
+  filter: blur(16px) opacity(0.6);
+  transform: scale(0.92, 0.96);
+  z-index: -1;
+  background-size: cover;
+  border-radius: 0.75em;
 }
 
 .fade-enter-active,

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);

src/components/MvRow.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="mv-row">
     <div class="mv" v-for="mv in mvs" :key="getID(mv)">
-      <div class="cover-container">
-        <img
-          class="cover"
-          :src="getUrl(mv)"
-          @mouseover="hoverVideoID = getID(mv)"
-          @mouseleave="hoverVideoID = 0"
-          @click="goToMv(getID(mv))"
-        />
+      <div
+        class="cover"
+        @mouseover="hoverVideoID = getID(mv)"
+        @mouseleave="hoverVideoID = 0"
+        @click="goToMv(getID(mv))"
+      >
+        <img :src="getUrl(mv)" />
         <transition name="fade">
-          <img
+          <div
             class="shadow"
             v-show="hoverVideoID === getID(mv)"
-            :src="getUrl(mv)"
-          />
+            :style="{ background: 'url(' + getUrl(mv) + ')' }"
+          ></div>
         </transition>
       </div>
       <div class="info">
@@ -87,14 +86,12 @@ export default {
 
 <style lang="scss" scoped>
 .mv-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -12px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 36px 24px;
 }
 
 .mv {
-  margin: 12px 12px 24px 12px;
-  width: 204px;
   color: var(--color-text);
 
   .title {
@@ -116,31 +113,30 @@ export default {
   }
 }
 
-.cover-container {
+.cover {
   position: relative;
-  .cover {
-    position: relative;
-    padding: 0;
-    background-size: cover;
-    transition: 0.3s;
-    width: 200px;
-    border-radius: 10px;
+  transition: transform 0.3s;
+  &:hover {
     cursor: pointer;
-    &:hover {
-      transform: scale(1.02);
-      box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
-    }
+    transform: scale(1.02);
   }
+}
+img {
+  border-radius: 0.75em;
+  width: 100%;
+  user-select: none;
+}
 
-  .shadow {
-    position: absolute;
-    filter: blur(16px) opacity(0.6);
-    z-index: -1;
-    width: 200px;
-    top: 6px;
-    left: 0;
-    border-radius: 10px;
-  }
+.shadow {
+  position: absolute;
+  top: 6px;
+  height: 100%;
+  width: 100%;
+  filter: blur(16px) opacity(0.4);
+  transform: scale(0.9, 0.9);
+  z-index: -1;
+  background-size: cover;
+  border-radius: 0.75em;
 }
 
 .fade-enter-active,

src/components/Navbar.vue

@@ -105,13 +105,17 @@ nav {
   }
   backdrop-filter: saturate(180%) blur(20px);
 
-  // background: var(--color-body-bg);
-  // background-color: rgba(255, 255, 255, 0.86);
   background-color: var(--color-navbar-bg);
   z-index: 100;
   -webkit-app-region: drag;
 }
 
+@media (max-width: 1336px) {
+  nav {
+    padding: 0 5vw;
+  }
+}
+
 .navigation-buttons {
   flex: 1;
   display: flex;
@@ -124,6 +128,12 @@ nav {
     -webkit-app-region: no-drag;
   }
 }
+@media (max-width: 970px) {
+  .navigation-buttons {
+    flex: unset;
+  }
+}
+
 .navigation-links {
   flex: 1;
   display: flex;

src/components/Player.vue

@@ -335,6 +335,12 @@ export default {
   }
 }
 
+@media (max-width: 1336px) {
+  .controls {
+    padding: 0 5vw;
+  }
+}
+
 .playing {
   flex: 1;
   display: flex;

src/components/TrackList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="track-list" :style="listStyles">
+  <div class="track-list">
     <ContextMenu ref="menu">
       <div class="item-info">
         <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@@ -26,13 +26,15 @@
       >
       <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
     </ContextMenu>
-    <TrackListItem
-      v-for="track in tracks"
-      :track="track"
-      :key="track.id"
-      @dblclick.native="playThisList(track.id)"
-      @click.right.native="openMenu($event, track)"
-    />
+    <div :style="listStyles">
+      <TrackListItem
+        v-for="track in tracks"
+        :track="track"
+        :key="track.id"
+        @dblclick.native="playThisList(track.id)"
+        @click.right.native="openMenu($event, track)"
+      />
+    </div>
   </div>
 </template>
 
@@ -61,10 +63,6 @@ export default {
     tracks: Array,
     type: String,
     id: Number,
-    itemWidth: {
-      type: Number,
-      default: -1,
-    },
     dbclickTrackFunc: {
       type: String,
       default: "default",
@@ -85,6 +83,10 @@ export default {
         return []; // 'removeTrackFromPlaylist'
       },
     },
+    columnNumber: {
+      type: Number,
+      default: 4,
+    },
   },
   data() {
     return {
@@ -98,8 +100,13 @@ export default {
     };
   },
   created() {
-    if (this.type === "tracklist")
-      this.listStyles = { display: "flex", flexWrap: "wrap" };
+    if (this.type === "tracklist") {
+      this.listStyles = {
+        display: "grid",
+        gap: "4px",
+        gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
+      };
+    }
   },
   computed: {
     ...mapState(["liked"]),

src/components/TrackListItem.vue

@@ -152,10 +152,6 @@ export default {
       this.$parent.likeASong(this.track.id);
     },
   },
-  created() {
-    if (this.$parent.itemWidth !== -1)
-      this.trackStyle = { width: this.$parent.itemWidth + "px" };
-  },
 };
 </script>
 
@@ -323,7 +319,6 @@ button {
 }
 
 .track.tracklist {
-  width: 256px;
   img {
     height: 36px;
     width: 36px;

src/views/album.vue

@@ -2,13 +2,15 @@
   <div class="album" v-show="show">
     <div class="playlist-info">
       <Cover
-        :url="album.picUrl | resizeImage(1024)"
+        :imageUrl="album.picUrl | resizeImage(1024)"
         :showPlayButton="true"
         :alwaysShowShadow="true"
-        :clickToPlay="true"
-        :size="288"
-        :type="'album'"
+        :clickCoverToPlay="true"
+        :fixedSize="288"
+        type="album"
         :id="album.id"
+        :coverHover="false"
+        :playButtonSize="18"
         @click.right.native="openMenu"
       />
       <div class="info">
@@ -97,7 +99,6 @@
           type="album"
           :items="filteredMoreAlbums"
           subText="albumType+releaseYear"
-          :showPlayButton="true"
         />
       </div>
     </div>
@@ -361,7 +362,7 @@ export default {
     font-weight: 600;
     opacity: 0.88;
     color: var(--color-text);
-    margin-bottom: 8px;
+    margin-bottom: 20px;
   }
 }
 </style>

src/views/artist.vue

@@ -36,16 +36,11 @@
       <div class="release">
         <div class="container">
           <Cover
-            :url="latestRelease.picUrl | resizeImage"
-            :showPlayButton="true"
-            :showBlackShadow="true"
-            :type="`album`"
+            :imageUrl="latestRelease.picUrl | resizeImage"
+            type="album"
             :id="latestRelease.id"
-            :hoverEffect="true"
-            :size="128"
-            :playButtonSize="36"
-            :shadowMargin="8"
-            :radius="8"
+            :fixedSize="128"
+            :playButtonSize="30"
           />
           <div class="info">
             <div class="name">

src/views/library.vue

@@ -33,9 +33,9 @@
         <TrackList
           :tracks="likedSongs"
           :type="'tracklist'"
-          :itemWidth="220"
           :id="likedSongsPlaylist.id"
           dbclickTrackFunc="playPlaylistByID"
+          :columnNumber="3"
         />
       </div>
     </div>
@@ -245,7 +245,7 @@ export default {
     getLikedSongs(getLyric = true) {
       getPlaylistDetail(this.data.likedSongPlaylistID, true).then((data) => {
         this.likedSongsPlaylist = data.playlist;
-        let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id);
+        let TrackIDs = data.playlist.trackIds.slice(0, 12).map((t) => t.id);
         this.likedSongIDs = TrackIDs;
         getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
           this.likedSongs = data.songs;
@@ -323,7 +323,6 @@ h1 {
     flex: 7;
     margin-top: 8px;
     margin-left: 36px;
-    height: 216px;
     overflow: hidden;
   }
 }
@@ -332,8 +331,6 @@ h1 {
   flex: 3;
   margin-top: 8px;
   cursor: pointer;
-  height: 216px;
-  width: 300px;
   border-radius: 16px;
   padding: 18px 24px;
   display: flex;
@@ -442,7 +439,7 @@ h1 {
 button.add-playlist {
   color: var(--color-text);
   border-radius: 8px;
-  padding: 0 12px;
+  padding: 0 14px;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/playlist.vue

@@ -5,11 +5,15 @@
       v-if="specialPlaylistInfo === undefined && !isLikeSongsPage"
     >
       <Cover
-        :url="playlist.coverImgUrl | resizeImage(1024)"
+        :imageUrl="playlist.coverImgUrl | resizeImage(1024)"
         :showPlayButton="true"
         :alwaysShowShadow="true"
-        :clickToPlay="true"
-        :size="288"
+        :clickCoverToPlay="true"
+        :fixedSize="288"
+        type="playlist"
+        :id="playlist.id"
+        :coverHover="false"
+        :playButtonSize="18"
         @click.right.native="openMenu"
       />
       <div class="info">
@@ -288,6 +292,7 @@ export default {
     return {
       show: false,
       playlist: {
+        id: 0,
         coverImgUrl: "",
         creator: {
           userId: "",

src/views/search.vue

@@ -14,16 +14,11 @@
               :key="artist.id"
             >
               <Cover
-                :url="artist.img1v1Url | resizeImage"
-                :showBlackShadow="true"
-                :hoverEffect="true"
-                :showPlayButton="true"
-                :type="`artist`"
+                :imageUrl="artist.img1v1Url | resizeImage"
+                type="artist"
                 :id="artist.id"
-                :size="128"
-                :playButtonSize="36"
-                :shadowMargin="8"
-                :radius="100"
+                :fixedSize="128"
+                :playButtonSize="30"
               />
               <div class="name">
                 <router-link :to="`/artist/${artist.id}`">{{
@@ -43,16 +38,11 @@
             >
               <div>
                 <Cover
-                  :url="album.picUrl | resizeImage"
-                  :showBlackShadow="true"
-                  :hoverEffect="true"
-                  :showPlayButton="true"
-                  :type="`album`"
+                  :imageUrl="album.picUrl | resizeImage"
+                  type="album"
                   :id="album.id"
-                  :size="128"
-                  :playButtonSize="36"
-                  :shadowMargin="8"
-                  :radius="8"
+                  :fixedSize="128"
+                  :playButtonSize="30"
                 />
               </div>
               <div class="name">
@@ -72,12 +62,12 @@
 
       <div class="tracks" v-if="result.hasOwnProperty('song')">
         <div class="section-title">{{ $t("search.song") }}</div>
-        <TrackList :tracks="tracks" :type="'tracklist'" />
+        <TrackList :tracks="tracks" type="tracklist" />
       </div>
 
       <div class="mvs" v-if="mvs !== null && mvs.length > 0">
         <div class="section-title">{{ $t("search.mv") }}</div>
-        <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
+        <MvRow :mvs="mvs.slice(0, 5)" />
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
@@ -90,16 +80,11 @@
           >
             <div>
               <Cover
-                :url="playlist.coverImgUrl | resizeImage"
-                :showBlackShadow="true"
-                :hoverEffect="true"
-                :showPlayButton="true"
-                :type="`playlist`"
+                :imageUrl="playlist.coverImgUrl | resizeImage"
+                type="playlist"
                 :id="playlist.id"
-                :size="128"
-                :playButtonSize="36"
-                :shadowMargin="8"
-                :radius="8"
+                :fixedSize="128"
+                :playButtonSize="30"
               />
             </div>
             <div class="name">
@@ -209,6 +194,7 @@ h1 {
 
 .row {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .artists,
@@ -271,11 +257,4 @@ h1 {
   margin-top: 24px;
   font-size: 24px;
 }
-
-.mvs {
-  .mv-row {
-    margin-top: -12px;
-    margin-bottom: -24px;
-  }
-}
 </style>