备份

src/App.vue

@@ -54,6 +54,9 @@ export default {
         '/home/report',
         '/home/submit-report',
         '/home/music',
+        '/home/music-rank-list',
+
+
         '/message/share-to-friend',
         '/message/joined-group-chat',
         '/country-choose',

src/components/Posters.vue

@@ -2,9 +2,7 @@
   <div class="posters">
     <div class="poster-item" v-for="i in list">
 <!--       @click="$nav('/video-detail')"-->
-<!--      <img class="poster" :src="$imgPreview(i.video.cover.url_list[3])" alt="">-->
       <img class="poster"  v-lazy="$imgPreview(i.cover)" alt="">
-<!--      <img class="poster" :src="$imgPreview(i.cover)" alt="">-->
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
         <span>{{ $likeNum(i.digg_count) }}</span>

src/pages/home/Music.vue

@@ -10,7 +10,7 @@
       <div class="right">
 <!--        TODO　没有淡入淡出的特效-->
         <img class="star" v-if="isFixed" src="../../assets/img/icon/star-white.png" alt="">
-        <div class="logo" v-if="!isFixed">抖音音乐榜</div>
+        <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
         <img class="share" src="../../assets/img/icon/share-white.png" alt="">
       </div>
     </div>
@@ -49,7 +49,7 @@ export default {
   components: {Scroll, Posters, Loading},
   data() {
     return {
-      isFixed: true,
+      isFixed: false,
       loading: false,
       videos: [
         {

src/pages/home/MusicRankList.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="MusicRankList">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">抖音音乐榜</span>
+      </template>
+    </BaseHeader>
+    <div class="l-header">
+
+    </div>
+    <div class="content">
+      <Indicator
+          name="musicRankList"
+          tabStyleWidth="33%"
+          :tabTexts="['热歌榜','飙升樘','原创榜']"
+          v-model:active-index="contentIndex">
+      </Indicator>
+      <SlideRowList
+          name="musicRankList"
+          v-model:active-index="contentIndex">
+        <SlideItem>
+          <div class="list">
+            <div class="item">
+
+            </div>
+          </div>
+        </SlideItem>
+        <SlideItem></SlideItem>
+        <SlideItem></SlideItem>
+      </SlideRowList>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "MusicRankList",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      contentIndex: 0,
+      hotList: [
+        {
+          name: '阳光宅男',
+          cover: '',
+          author: '周杰伦',
+          duration: 60,
+          hot: 37441000,
+          is_collect: false
+        },
+        {
+          name: '阳光宅男',
+          cover: '',
+          author: '周杰伦',
+          duration: 60,
+          hot: 37441000,
+          is_collect: false
+        },
+        {
+          name: '阳光宅男',
+          cover: '',
+          author: '周杰伦',
+          duration: 60,
+          hot: 37441000,
+          is_collect: false
+        },
+      ]
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.MusicRankList {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import Attention from "../pages/home/Attention";
 import Message from "../pages/message/Message";
 import Me from "../pages/me/Me";
 import Music from "../pages/home/Music";
+import MusicRankList from "../pages/home/MusicRankList";
 import countryChoose from "../pages/login/countryChoose";
 import MyCard from "../pages/me/MyCard";
 import MyCollect from "../pages/me/MyCollect";
@@ -62,6 +63,7 @@ const routes = [
   {path: '/home/report', component: Report},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},
+  {path: '/home/music-rank-list', component: MusicRankList},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},