topList.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <!--排行榜-->
  3. <div class="topList">
  4. <mm-loading v-model="mmLoadShow" />
  5. <template v-if="!mmLoadShow">
  6. <div class="topList-head">云音乐特色榜</div>
  7. <div class="topList-content">
  8. <div v-for="(item, index) in list" :key="index" class="list-item" :title="item.name + item.updateFrequency">
  9. <!-- :to="{ path: `/music/details/${item.id}` }" -->
  10. <div class="topList-item" @click="$emit('changeList','detailsAll',item.id)">
  11. <div class="topList-img">
  12. <!-- v-lazy="`${item.coverImgUrl}?param=300y300`" -->
  13. <img :src="`${item.coverImgUrl}`" class="cover-img" />
  14. </div>
  15. <h3 class="name">{{ item.name }}</h3>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="topList-head">热门歌单</div>
  20. <div class="topList-content">
  21. <div v-for="(item, index) in hotList" :key="index" class="list-item" :title="item.name + item.updateFrequency">
  22. <!-- :to="{ path: `/music/details/${item.id}` }" -->
  23. <div class="topList-item" @click="$emit('changeList','detailsAll',item.id)">
  24. <div class="topList-img">
  25. <!-- v-lazy="`${item.picUrl}?param=300y300`" -->
  26. <img :src="`${item.picUrl}`" class="cover-img" />
  27. </div>
  28. <h3 class="name">{{ item.name }}</h3>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. </div>
  34. </template>
  35. <script>
  36. import { getToplistDetail, getPersonalized } from '@api/music.js'
  37. import MmLoading from '@base/mm-loading/mm-loading'
  38. import { loadMixin } from '@/utils/mixin'
  39. export default {
  40. name: 'TopList',
  41. components: {
  42. MmLoading,
  43. },
  44. mixins: [loadMixin],
  45. data() {
  46. return {
  47. list: [], // 云音乐特色榜
  48. hotList: [], // 热门歌单
  49. }
  50. },
  51. created() {
  52. Promise.all([getToplistDetail(), getPersonalized()])
  53. .then(([topList, hotList]) => {
  54. this.list = topList.list.filter((v) => v.ToplistType)
  55. this.hotList = hotList.result.slice()
  56. this._hideLoad()
  57. })
  58. .catch((e) => {
  59. console.log(e)
  60. })
  61. },
  62. }
  63. </script>
  64. <style lang="less" scoped>
  65. .topList {
  66. position: relative;
  67. width: 100%;
  68. height: calc(~'100% - 120px');
  69. overflow-x: hidden;
  70. overflow-y: auto;
  71. -webkit-overflow-scrolling: touch;
  72. &-head {
  73. width: 100%;
  74. height: 34px;
  75. line-height: 34px;
  76. font-size: @font_size_large;
  77. color: @text_color_active;
  78. }
  79. &-content {
  80. overflow: hidden;
  81. }
  82. .list-item {
  83. float: left;
  84. width: calc(~'100% / 7');
  85. .topList-item {
  86. width: 130px;
  87. text-align: center;
  88. cursor: pointer;
  89. margin: 0 auto 20px;
  90. &:hover {
  91. color: #fff;
  92. }
  93. .name {
  94. height: 30px;
  95. line-height: 30px;
  96. font-size: @font_size_medium;
  97. .no-wrap();
  98. }
  99. @media (max-width: 1100px) {
  100. width: 80%;
  101. }
  102. }
  103. @media (max-width: 1500px) {
  104. width: calc(~'100% / 6');
  105. }
  106. @media (max-width: 1400px), (max-width: 960px) {
  107. width: calc(~'100% / 5');
  108. }
  109. @media (max-width: 1280px), (max-width: 768px) {
  110. width: calc(~'100% / 4');
  111. }
  112. @media (max-width: 540px) {
  113. width: calc(~'100% / 3');
  114. }
  115. .topList-img {
  116. position: relative;
  117. padding-top: 100%;
  118. width: 100%;
  119. height: 0;
  120. .cover-img {
  121. position: absolute;
  122. top: 0;
  123. left: 0;
  124. }
  125. }
  126. }
  127. }
  128. </style>