All files / src/pages Home.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81                                                                                                                                                                 
<template>
  <div class="home">
    <!--轮播图-->
    <swiper/>
    <!--热门歌单/歌手-->
    <div class="section" v-for="(item, index) in songsList" :key="index">
      <div class="section-head">{{item.name}}</div>
      <content-list :contentList="item.list"></content-list>
    </div>
  </div>
</template>
 
<script>
import Swiper from '../components/Swiper'
import ContentList from '../components/ContentList'
 
export default {
  name: 'home',
  components: {
    Swiper,
    ContentList
  },
  data () {
    return {
      songsList: [
        {name: '歌单', list: []},
        {name: '歌手', list: []}
      ]
    }
  },
  created () {
    // 获取歌单列表
    this.getSongList('songList')
    // 获取歌手列表
    this.getSinger('singer')
  },
  methods: {
    getSongList (path) {
      this.$api.songListAPI.getSongList()
        .then(res => {
          this.songsList[0].list = res.data.slice(0, 10)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getSinger () {
      this.$api.singerAPI.getAllSinger()
        .then(res => {
          this.songsList[1].list = res.data.slice(0, 10)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
 
<style scoped>
div {
  box-sizing: border-box;
}
 
.section {
  width: 100%;
  margin-bottom: 80px;
  padding: 0 120px 50px 120px;
  background-color: #ffffff;
}
 
.section-head {
  height: 100px;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  line-height: 100px;
  color: black;
}
</style>