feat: apply new layout for some special playlists

src/assets/icons/heart-solid.svg

@@ -1 +1,2 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M15,26c-0.21,0-0.42-0.066-0.597-0.198C13.938,25.456,3,17.243,3,11c0-3.859,3.141-7,7-7c2.358,0,4.062,1.272,5,2.212 C15.938,5.272,17.642,4,20,4c3.859,0,7,3.14,7,7c0,6.243-10.938,14.456-11.403,14.803C15.42,25.934,15.21,26,15,26z" fill="currentColor"/></svg>

src/assets/icons/heart.svg

@@ -1 +1,2 @@
-<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"></path></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M 9.5449219 3 C 5.3895807 3 2 6.3895806 2 10.544922 C 2 14.283156 4.9005496 18.084723 7.6601562 21.119141 C 10.419763 24.153558 13.171875 26.369141 13.171875 26.369141 A 1.0001 1.0001 0 0 0 13.197266 26.388672 C 13.517448 26.630481 13.956962 26.684854 14.369141 26.785156 A 1.0001 1.0001 0 0 0 15 27 A 1.0001 1.0001 0 0 0 15.630859 26.785156 C 16.043038 26.684854 16.482552 26.630481 16.802734 26.388672 A 1.0001 1.0001 0 0 0 16.828125 26.369141 C 16.828125 26.369141 19.580237 24.153558 22.339844 21.119141 C 25.099451 18.084722 28 14.283156 28 10.544922 C 28 6.3895806 24.610419 3 20.455078 3 C 17.450232 3 15.833405 4.5910542 15 5.5664062 C 14.166595 4.5910543 12.549768 3 9.5449219 3 z M 9.5449219 5 C 12.372924 5 14.069642 7.4290597 14.126953 7.5117188 A 1.0001 1.0001 0 0 0 14.910156 8.0078125 A 1.0001 1.0001 0 0 0 15.003906 8.0117188 A 1.0001 1.0001 0 0 0 15.019531 8.0117188 A 1.0001 1.0001 0 0 0 15.042969 8.0097656 A 1.0001 1.0001 0 0 0 15.119141 8.0039062 A 1.0001 1.0001 0 0 0 15.871094 7.5136719 C 15.925786 7.4347249 17.624838 5 20.455078 5 C 23.529737 5 26 7.4702629 26 10.544922 C 26 13.147688 23.499768 16.870104 20.859375 19.773438 C 18.227966 22.666891 15.607768 24.780451 15.589844 24.794922 C 15.414236 24.925626 15.219097 25 15 25 C 14.780903 25 14.585764 24.925626 14.410156 24.794922 C 14.392232 24.780451 11.772034 22.66689 9.140625 19.773438 C 6.5002316 16.870105 4 13.147688 4 10.544922 C 4 7.4702629 6.470263 5 9.5449219 5 z" fill="currentColor"/></svg>

src/components/ButtonTwoTone.vue

@@ -29,6 +29,14 @@ export default {
       type: String,
       default: "blue",
     },
+    backgroundColor: {
+      type: String,
+      default: "",
+    },
+    textColor: {
+      type: String,
+      default: "",
+    },
     shape: {
       type: String,
       default: "square",
@@ -36,12 +44,16 @@ export default {
   },
   computed: {
     buttonStyle() {
-      return {
+      let styles = {
         borderRadius: this.shape === "round" ? "50%" : "8px",
         padding: `8px ${this.horizontalPadding}px`,
         // height: "38px",
         width: this.shape === "round" ? "38px" : "auto",
       };
+      if (this.backgroundColor !== "")
+        styles.backgroundColor = this.backgroundColor;
+      if (this.textColor !== "") styles.color = this.textColor;
+      return styles;
     },
   },
 };
@@ -74,7 +86,8 @@ button {
 }
 button.grey {
   background-color: var(--color-secondary-bg);
-  color: var(--color-secondary);
+  color: var(--color-text);
+  opacity: 0.78;
 }
 button.transparent {
   background-color: transparent;

src/views/playlist.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-show="show">
-    <div class="playlist-info" v-if="!isLikeSongsPage">
+    <div
+      class="playlist-info"
+      v-if="specialPlaylistInfo === undefined && !isLikeSongsPage"
+    >
       <Cover
         :url="playlist.coverImgUrl | resizeImage(1024)"
         :showPlayButton="true"
@@ -50,10 +53,11 @@
           </ButtonTwoTone>
           <ButtonTwoTone
             v-if="accountLogin && playlist.creator.userId !== data.user.userId"
-            shape="round"
             :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
             :iconButton="true"
             :horizontalPadding="0"
+            color="grey"
+            :textColor="playlist.subscribed ? '#335eea' : ''"
             @click.native="likePlaylist"
           >
           </ButtonTwoTone>
@@ -61,7 +65,38 @@
       </div>
     </div>
 
-    <div class="user-info" v-else>
+    <div class="special-playlist" v-if="specialPlaylistInfo !== undefined">
+      <div class="title" :class="specialPlaylistInfo.gradient">
+        <!-- <img :src="playlist.coverImgUrl | resizeImage" /> -->
+        {{ specialPlaylistInfo.name }}
+      </div>
+      <div class="subtitle"
+        >{{ playlist.englishTitle }} · {{ playlist.updateFrequency }}
+      </div>
+
+      <div class="buttons" v-if="accountLogin">
+        <ButtonTwoTone
+          class="play-button"
+          @click.native="playPlaylistByID()"
+          iconClass="play"
+          color="grey"
+        >
+          {{ $t("play") }}
+        </ButtonTwoTone>
+        <ButtonTwoTone
+          v-if="accountLogin && playlist.creator.userId !== data.user.userId"
+          :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
+          :iconButton="true"
+          :horizontalPadding="0"
+          color="grey"
+          :textColor="playlist.subscribed ? '#335eea' : ''"
+          @click.native="likePlaylist"
+        >
+        </ButtonTwoTone>
+      </div>
+    </div>
+
+    <div class="user-info" v-if="isLikeSongsPage">
       <h1>
         <img class="avatar" :src="data.user.avatarUrl | resizeImage" />{{
           data.user.nickname
@@ -100,6 +135,93 @@ import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
 import Cover from "@/components/Cover.vue";
 
+const specialPlaylist = {
+  2829816518: {
+    name: "欧美私人订制",
+    gradient: "gradient-pink-purple-blue",
+  },
+  2890490211: {
+    name: "助眠鸟鸣声",
+    gradient: "gradient-green",
+  },
+  5089855855: {
+    name: "夜的胡思乱想",
+    gradient: "gradient-moonstone-blue",
+  },
+  2888212971: {
+    name: "全球百大DJ",
+    gradient: "gradient-orange-red",
+  },
+  2829733864: {
+    name: "睡眠伴侣",
+    gradient: "gradient-midnight-blue",
+  },
+  2829844572: {
+    name: "洗澡时听的歌",
+    gradient: "gradient-yellow",
+  },
+  2920647537: {
+    name: "还是会想你",
+    gradient: "gradient-dark-blue-midnight-blue",
+  },
+  2890501416: {
+    name: "助眠白噪声",
+    gradient: "gradient-sky-blue",
+  },
+  5217150082: {
+    name: "摇滚唱片行",
+    gradient: "gradient-yellow-red",
+  },
+  2829961453: {
+    name: "古风音乐大赏",
+    gradient: "gradient-fog",
+  },
+  4923261701: {
+    name: "Trance",
+    gradient: "gradient-light-red-light-blue ",
+  },
+  5212729721: {
+    name: "欧美点唱机",
+    gradient: "gradient-indigo-pink-yellow",
+  },
+  3103434282: {
+    name: "甜蜜少女心",
+    gradient: "gradient-pink",
+  },
+  2829896389: {
+    name: "日系私人订制",
+    gradient: "gradient-yellow-pink",
+  },
+  2829779628: {
+    name: "运动随身听",
+    gradient: "gradient-orange-red",
+  },
+  2860654884: {
+    name: "独立女声精选",
+    gradient: "gradient-sharp-blue",
+  },
+  898150: {
+    name: "浪漫婚礼专用",
+    gradient: "gradient-pink",
+  },
+  2638104052: {
+    name: "牛奶泡泡浴",
+    gradient: "gradient-fog",
+  },
+  5317236517: {
+    name: "后朋克精选",
+    gradient: "gradient-pink-purple-blue",
+  },
+  2821115454: {
+    name: "一周原创发现",
+    gradient: "gradient-blue-purple",
+  },
+  3136952023: {
+    name: "私人雷达",
+    gradient: "gradient-radar",
+  },
+};
+
 export default {
   name: "Playlist",
   components: {
@@ -141,6 +263,9 @@ export default {
     accountLogin() {
       return isAccountLoggedIn();
     },
+    specialPlaylistInfo() {
+      return specialPlaylist[this.playlist.id];
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
@@ -221,7 +346,6 @@ export default {
 <style lang="scss" scoped>
 .playlist-info {
   display: flex;
-  width: 78vw;
   margin-bottom: 72px;
   .info {
     display: flex;
@@ -316,6 +440,193 @@ export default {
   }
 }
 
+.special-playlist {
+  margin-top: 192px;
+  margin-bottom: 128px;
+  border-radius: 1.25em;
+  text-align: center;
+
+  @keyframes letterSpacing4 {
+    from {
+      letter-spacing: 0px;
+    }
+
+    to {
+      letter-spacing: 4px;
+    }
+  }
+
+  @keyframes letterSpacing1 {
+    from {
+      letter-spacing: 0px;
+    }
+
+    to {
+      letter-spacing: 1px;
+    }
+  }
+
+  .title {
+    font-size: 84px;
+    line-height: 1.05;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    letter-spacing: 4px;
+    animation-duration: 0.8s;
+    animation-name: letterSpacing4;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    // background-image: linear-gradient(
+    //   225deg,
+    //   var(--color-primary),
+    //   var(--color-primary)
+    // );
+
+    img {
+      height: 78px;
+      border-radius: 0.125em;
+      margin-right: 24px;
+    }
+  }
+  .subtitle {
+    font-size: 18px;
+    letter-spacing: 1px;
+    margin: 28px 0 54px 0;
+    animation-duration: 0.8s;
+    animation-name: letterSpacing1;
+    text-transform: uppercase;
+    color: var(--color-text);
+  }
+  .buttons {
+    margin-top: 32px;
+    display: flex;
+    justify-content: center;
+    button {
+      margin-right: 16px;
+    }
+  }
+}
+
+.gradient-test {
+  background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%);
+}
+
+[data-theme="dark"] {
+  .gradient-radar {
+    background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%);
+  }
+}
+
+.gradient-radar {
+  background-image: linear-gradient(to left, #0ba360 0%, #3cba92 100%);
+}
+
+.gradient-blue-purple {
+  background-image: linear-gradient(
+    45deg,
+    #89c4f5 0%,
+    #6284ff 42%,
+    #ff0000 100%
+  );
+}
+
+.gradient-sharp-blue {
+  background-image: linear-gradient(45deg, #00c6fb 0%, #005bea 100%);
+}
+
+.gradient-yellow-pink {
+  background-image: linear-gradient(45deg, #f6d365 0%, #fda085 100%);
+}
+
+.gradient-pink {
+  background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
+}
+
+.gradient-indigo-pink-yellow {
+  background-image: linear-gradient(
+    43deg,
+    #4158d0 0%,
+    #c850c0 46%,
+    #ffcc70 100%
+  );
+}
+
+.gradient-light-red-light-blue {
+  background-image: linear-gradient(
+    225deg,
+    hsl(190, 30%, 50%) 0%,
+    #081abb 38%,
+    #ec3841 58%,
+    hsl(13, 99%, 49%) 100%
+  );
+}
+
+.gradient-fog {
+  background: linear-gradient(-180deg, #bcc5ce 0%, #929ead 98%),
+    radial-gradient(
+      at top left,
+      rgba(255, 255, 255, 0.3) 0%,
+      rgba(0, 0, 0, 0.3) 100%
+    );
+  background-blend-mode: screen;
+}
+
+.gradient-red {
+  background-image: linear-gradient(213deg, #ff0844 0%, #ffb199 100%);
+}
+
+.gradient-sky-blue {
+  background-image: linear-gradient(147deg, #48c6ef 0%, #6f86d6 100%);
+}
+
+.gradient-dark-blue-midnight-blue {
+  background-image: linear-gradient(213deg, #09203f 0%, #537895 100%);
+}
+
+.gradient-yellow-red {
+  background: linear-gradient(147deg, #fec867 0%, #f72c61 100%);
+}
+
+.gradient-yellow {
+  background: linear-gradient(147deg, #fceb02 0%, #fec401 100%);
+}
+
+.gradient-midnight-blue {
+  background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
+}
+
+.gradient-orange-red {
+  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
+}
+
+.gradient-moonstone-blue {
+  background-image: linear-gradient(
+    147deg,
+    hsl(200, 34%, 8%) 0%,
+    hsl(204, 35%, 38%) 50%,
+    hsl(200, 34%, 18%) 100%
+  );
+}
+
+.gradient-pink-purple-blue {
+  background-image: linear-gradient(
+    to right,
+    #ff3cac 0%,
+    #784ba0 50%,
+    #2b86c5 100%
+  ) !important;
+}
+
+.gradient-green {
+  background-image: linear-gradient(
+    90deg,
+    #c6f6d5,
+    #68d391,
+    #38b2ac
+  ) !important;
+}
+
 .user-info {
   h1 {
     font-size: 42px;