first commit

src/views/home.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="home">
+    <div class="index-row">
+      <div class="title">
+        by Apple Music
+      </div>
+      <CoverRow
+        :type="'playlist'"
+        :items="byAppleMusic"
+        :subText="'appleMusic'"
+        :imageSize="1024"
+      />
+    </div>
+
+    <div class="index-row">
+      <div class="title">
+        {{ recommendPlaylist.name }}
+        <router-link to="/explore?category=推荐歌单">SEE MORE</router-link>
+      </div>
+      <CoverRow
+        :type="'playlist'"
+        :items="recommendPlaylist.items"
+        :subText="'copywriter'"
+      />
+    </div>
+
+    <div class="index-row">
+      <div class="title">{{ recommendArtists.name }}</div>
+      <CoverRow type="artist" :items="recommendArtists.items" />
+    </div>
+
+    <div class="index-row">
+      <div class="title">
+        {{ newReleasesAlbum.name }}
+        <router-link to="/new-album">SEE MORE</router-link>
+      </div>
+      <CoverRow type="album" :items="newReleasesAlbum.items" subText="artist" />
+    </div>
+
+    <div class="index-row">
+      <div class="title">
+        {{ topList.name }}
+        <router-link to="/explore?category=排行榜">SEE MORE</router-link>
+      </div>
+      <CoverRow
+        :type="'chart'"
+        :items="topList.items"
+        :subText="'updateFrequency'"
+        :imageSize="1024"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { toplists, recommendPlaylist } from "@/api/playlist";
+import { toplistOfArtists } from "@/api/artist";
+import { byAppleMusic } from "@/utils/staticPlaylist";
+import { newAlbums } from "@/api/album";
+
+import CoverRow from "@/components/CoverRow.vue";
+
+export default {
+  name: "Home",
+  components: { CoverRow },
+  data() {
+    return {
+      recommendPlaylist: { name: "推荐歌单", items: [] },
+      newReleasesAlbum: { name: "新专速递", items: [] },
+      topList: {
+        name: "排行榜",
+        items: [],
+        ids: [19723756, 180106, 60198, 3812895, 60131],
+      },
+      recommendArtists: {
+        name: "推荐歌手",
+        items: [],
+        indexs: [],
+      },
+    };
+  },
+  computed: {
+    byAppleMusic() {
+      return byAppleMusic;
+    },
+  },
+  methods: {
+    loadData() {
+      recommendPlaylist({
+        limit: 10,
+      }).then((data) => {
+        this.recommendPlaylist.items = data.result;
+      });
+      newAlbums({
+        area: "EA",
+        limit: 10,
+      }).then((data) => {
+        this.newReleasesAlbum.items = data.albums;
+      });
+      toplistOfArtists(2).then((data) => {
+        let indexs = [];
+        while (indexs.length < 5) {
+          let tmp = ~~(Math.random() * 100);
+          if (!indexs.includes(tmp)) indexs.push(tmp);
+        }
+        this.recommendArtists.indexs = indexs;
+        this.recommendArtists.items = data.list.artists.filter((l, index) =>
+          indexs.includes(index)
+        );
+      });
+      toplists().then((data) => {
+        this.topList.items = data.list.filter((l) =>
+          this.topList.ids.includes(l.id)
+        );
+      });
+    },
+  },
+  activated() {
+    this.loadData();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.index-row {
+  margin-top: 54px;
+}
+.playlists {
+  display: flex;
+  flex-wrap: wrap;
+  margin: {
+    right: -12px;
+    left: -12px;
+  }
+  .index-playlist {
+    margin: 12px 12px 24px 12px;
+  }
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 20px;
+  font-size: 28px;
+  font-weight: 700;
+
+  a {
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.68);
+  }
+}
+
+.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>