删除测试页面，slide增加刷新功能

src/components/BVideo.vue

@@ -97,6 +97,7 @@
         </div>
       </div>
       <div class="progress"
+           v-if="duration > 60"
            :class="progressClass"
            @touchmove="move"
            @touchend="end"
@@ -218,7 +219,7 @@ export default {
       this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
       this.duration = video.duration
       if (this.duration > 60) {
-      // if (this.duration > 6) {
+        // if (this.duration > 6) {
         this.step = this.width / Math.floor(this.duration)
         video.addEventListener('timeupdate', fun)
       }
@@ -271,9 +272,9 @@ export default {
         this.play()
         //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
         this.isSingleClick = true
-        setTimeout(()=>{
+        setTimeout(() => {
           this.isSingleClick = false
-        },300)
+        }, 300)
       }
       this.loading = false
     })

src/pages/slide/IndicatorHome.vue

@@ -52,7 +52,7 @@ export default {
     Loading,
   },
   props: {
-    modelValue: false,
+    loading: false,
     //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
     name: {
       type: String,
@@ -69,7 +69,6 @@ export default {
       lefts: [],
       indicatorSpace: 0,
       open: false,
-      loading: false,
       type: 1,
       moveY: 0
     }
@@ -128,13 +127,6 @@ export default {
       this.moveY = e
     })
     bus.on(this.name + '-end', this.end)
-    bus.on(this.name + '-loading', () => {
-      console.log('loading')
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 3000)
-    })
   },
   methods: {
     toggleType(type) {

src/pages/slide/Slide.vue

@@ -4,6 +4,7 @@
       <div class="slide-item">
         <IndicatorHome
             v-hide="isUp"
+            :loading="loading"
             name="main"
             v-model:index="baseIndex"
         />
@@ -54,8 +55,26 @@
         <p v-for="i in 100">2</p>
       </div>
     </SlideHorizontal>
+
     <Comment v-model="isUp"/>
 
+    <Share v-model="isSharing"
+           ref="share"
+           page-id="home-index"
+           @dislike="dislike"
+           :videoId="videos[videoIndex]?.id"
+           :canDownload="videos[videoIndex]?.canDownload"
+           @play-feedback="showPlayFeedback = true"
+           @showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)"
+           @shareToFriend="delayShowDialog(e => this.shareToFriend = true)"
+           @showDouyinCode="showDouyinCode = true"
+           @showShare2WeChatZone="shareType = 2"
+           @share2WeChat="shareType = 3"
+           @share2QQZone="shareType = 4"
+           @share2QQ="shareType = 5"
+           @share2Webo="shareType = 8"
+           @download="shareType = 9"
+    />
   </div>
 </template>
 
@@ -73,6 +92,22 @@ import SlideVerticalInfinite from "./SlideVerticalInfinite";
 import Comment from "../../components/Comment";
 import enums from "../../utils/enums";
 import bus from "../../utils/bus";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import SlideColumnList from "../../components/slide/SlideColumnList";
+import SlideRowList from "../../components/slide/SlideRowList";
+import Video1 from "../../components/Video";
+import Share from "../../components/Share";
+import Uploader from "../me/Uploader";
+import PlayFeedback from "../home/components/PlayFeedback";
+import Duoshan from "../home/components/Duoshan";
+import ShareTo from "../home/components/ShareTo";
+import DouyinCode from "../../components/DouyinCode";
+import FollowSetting from "../home/components/FollowSetting";
+import FollowSetting2 from "../home/components/FollowSetting2";
+import BlockDialog from "../message/components/BlockDialog";
+import Search from "../../components/Search";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
+import ShareToFriend from "../home/components/ShareToFriend";
 
 export default {
   name: "slide",
@@ -83,16 +118,32 @@ export default {
     BVideo,
     Footer,
     IndicatorHome,
-    Comment
+    FromBottomDialog,
+    SlideColumnList,
+    SlideRowList,
+    Video1,
+    Comment,
+    Share,
+    Uploader,
+    PlayFeedback,
+    Duoshan,
+    ShareTo,
+    DouyinCode,
+    FollowSetting,
+    FollowSetting2,
+    BlockDialog,
+    Search,
+    ConfirmDialog,
+    ShareToFriend
   },
   data() {
     return {
       baseIndex: 0,
-      videoIndex: 5,
+      videoIndex: 0,
       closeOne: true,
       videoPrefix: ['one', 'two', 'three'],
       loading: false,
-      videos: [
+      videos1: [
         {
           "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
           video: 'http://douyin.ttentau.top/0.mp4',
@@ -1431,6 +1482,7 @@ export default {
           }
         },
       ],
+      videos: [],
       totalSize: 52,
       pageSize: 10,
       pageNo: 0,
@@ -1487,15 +1539,30 @@ export default {
     }
   },
   created() {
+    this.getData()
     bus.on('singleClick', () => {
       new Dom(`.v-${this.videoPrefix[this.baseIndex]}-${this.videoIndex}-video`).trigger('singleClick')
     })
+    bus.on(this.videoPrefix[this.baseIndex] + '-loading', () => {
+      console.log('loading')
+      this.getData(true)
+    })
   },
   mounted() {
   },
   methods: {
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 400)
+    },
+    dislike() {
+      this.$refs.virtualList.dislike(this.videos[10])
+      this.videos[this.videoIndex] = this.videos[10]
+      this.$notice('操作成功，将减少此类视频的推荐')
+    },
     loadMore() {
-      return
+      // return
       if (!this.loading) {
         this.pageNo++
         this.getData()
@@ -1507,14 +1574,21 @@ export default {
     changeIndex() {
       this.closeOne = !this.closeOne
     },
-    async getData() {
+    async getData(refresh = false) {
+      if (this.loading) return
       this.loading = true
       let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
-      console.log(res)
+      // console.log(res)
       this.loading = false
       if (res.code === this.SUCCESS) {
         this.totalSize = res.data.total
+        if (refresh) {
+          this.videos = []
+        }
         this.videos = this.videos.concat(res.data.list)
+        if (refresh) {
+          this.$refs.virtualList.refresh(this.videos)
+        }
       } else {
         this.pageNo--
       }

src/pages/slide/SlideVerticalInfinite.vue

@@ -94,12 +94,23 @@ export default {
     this.insertContent()
   },
   methods: {
+    refresh(list) {
+      $(this.wrapper).empty()
+      list && this.insertContent(list)
+    },
+    dislike(item) {
+      let currentItem = $(this.wrapper).find(`.slide-item[data-index=${this.lIndex}]`)
+      let replaceItem = this.getInsEl(item, this.lIndex, true)
+      new Dom(replaceItem).css('top', currentItem.css('top'))
+      currentItem.replaceWith(replaceItem)
+    },
     checkChildren() {
       this.wrapper = this.$refs.wrapper
       this.wrapperWidth = this.$getCss(this.wrapper, 'width')
       this.wrapperHeight = this.$getCss(this.wrapper, 'height')
     },
-    insertContent() {
+    //默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新
+    insertContent(list = this.list) {
       let start = 0
       let that = this
 
@@ -107,14 +118,14 @@ export default {
         start = this.lIndex - (this.virtualTotal - 1) / 2
       }
       let end = start + 5
-      if (end >= this.list.length) {
+      if (end >= list.length) {
-        end = this.list.length
+        end = list.length
         start = end - 5
       }
       if (start < 0) start = 0
       // console.log('start', start)
       // console.log('end', end)
-      this.list.slice(start, end).map(
+      list.slice(start, end).map(
           (item, index) => {
             //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
             let el = this.getInsEl(item, start + index, start + index === this.lIndex)
@@ -124,9 +135,9 @@ export default {
       this.$setCss(this.wrapper, 'transform', `translate3d(0px,
              ${-this.lIndex * this.wrapperHeight}px,  0px)`)
 
-      if (this.lIndex > 2 && this.list.length > 5) {
+      if (this.lIndex > 2 && list.length > 5) {
         $(this.wrapper).find(".slide-item").each(function () {
-          if ((that.list.length - that.lIndex) > 2) {
+          if ((list.length - that.lIndex) > 2) {
             $(this).css('top', (that.lIndex - 2) * that.wrapperHeight)
           } else {
             $(this).css('top', start * that.wrapperHeight)
@@ -193,7 +204,7 @@ export default {
     touchEnd(e) {
       let isDown = this.moveY < 0
       if (this.lIndex === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) {
-        bus.emit(this.name + '-loading')
+        bus.emit(this.prefix + '-loading')
       }
       if ((this.lIndex === 0 && !isDown) || (this.lIndex === this.list.length - 1 && isDown)) this.next = false
 

src/pages/test/Test.vue

@@ -1,57 +1,21 @@
 <template>
-  <div class="Test">
+  <!--  <TestSlide></TestSlide>-->
-    <!--    <Uploader/>-->
+<!--  <SlideUser></SlideUser>-->
-    <TestVideo class="vue"/>
+  <SlideImgs></SlideImgs>
-  </div>
 </template>
 <script>
 
-import ConfirmDialog from "../../components/dialog/ConfirmDialog";
+
-import Search from "../../components/Search";
+import TestSlide from "./TestSlide";
-import Uploader from "../me/Uploader";
+import SlideUser from "../../components/slide/SlideUser";
-import TestVideo from "./TestVideo";
+import SlideImgs from "../../components/slide/SlideImgs";
 
 export default {
   name: "Test",
   components: {
-    Uploader,
+    TestSlide,
-    TestVideo
+    SlideUser,
-  },
+    SlideImgs
-  props: {},
-  data() {
-    return {
-      showFollowSetting: true,
-      switches1: true,
-    }
-  },
-  computed: {},
-  created() {
   },
-  methods: {}
 }
 </script>
-
-<style scoped lang="less">
-@import "../../assets/less/index";
-
-
-.Test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  font-size: 1.4rem;
-
-  .content {
-    padding-top: 6rem;
-
-    .private-chat {
-
-    }
-  }
-
-
-}
-</style>

src/pages/test/Test2.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="Test">
-    <Video1
-        :is-play="false"
-        :video="item"
-        :index="0"
-    />
-  </div>
-</template>
-<script>
-
-export default {
-  name: "Test",
-  props: {},
-  data() {
-    return {
-      comment: '12',
-      item: {
-        "id": "08a90c93-807b-4a7a-aad3-68f75d65a9c8",
-        video: 'http://douyin.ttentau.top/3.mp4',
-        "video_data_size": 12371092,
-        "duration": 139652,
-        "desc": "秋天来了，新疆的可可托海~",
-        "allow_download": 1,
-        "allow_duet": 0,
-        "allow_react": 0,
-        "allow_music": 1,
-        "allow_douplus": 1,
-        "allow_share": 1,
-        "digg_count": 167000,
-        "comment_count": 8152,
-        "download_count": 0,
-        "play_count": 0,
-        "share_count": 30000,
-        "forward_count": 0,
-        "collect_count": 2,
-        "sort": 74,
-        city: '阿勒泰',
-        address: '可可托海景区（5A）',
-        "musicId": "6e1325da-1af4-4d5e-8a33-3a4a69ff50a3",
-        "create_time": "1630392893",
-        "creator_id": "54884802577",
-        "status": 1,
-        "topics": [
-          {
-            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-            "name": "旅行大玩家",
-            "creator_id": "54884802577",
-            "create_time": "1630391758",
-            "status": 1
-          },
-          {
-            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-            "name": "旅行推荐官",
-            "creator_id": "54884802577",
-            "create_time": "1630391758",
-            "status": 1
-          },
-          {
-            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-            "name": "抖音旅行",
-            "creator_id": "54884802577",
-            "create_time": "1630391758",
-            "status": 1
-          },
-        ],
-        "music": {
-          "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
-          "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
-          "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
-          "title": "@旅行家 ~ 七哥创作的原声 - 旅行家 ~ 七哥",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        },
-        "author": {
-          school: {
-            name: '',
-            department: '',
-            joinTime: '',
-            education: '',
-            displayType: '',
-          },
-          "id": "3",
-          "unique_id_modify_time": "1630393144",
-          "unique_id": "travels520",
-          "favoriting_count": 54,
-          "avatar": new URL('../../assets/img/icon/avatar/11.png', import.meta.url).href,
-          "city": "",
-          "province": '',
-          "country": "",
-          "birthday": "",
-          "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-          "following_count": 15,
-          "follower_count": 302000,
-          "aweme_count": 4007000,
-          "nickname": "旅行家 ~ 七哥",
-          certification: '',
-          "phone": "",
-          "sex": "",
-          "last_login_time": "1630423555",
-          "create_time": "1630423555",
-          "status": 1,
-          "desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计",
-          "is_private": 0
-        }
-      },
-    }
-  },
-  computed: {},
-  created() {
-  },
-  methods: {
-    changeText(e) {
-      console.log(e)
-      console.log(this.$el.innerText)
-
-    },
-    get() {
-      console.log(this.$refs.input)
-
-    },
-    call() {
-      let span = document.createElement('span')
-      span.setAttribute('contenteditable', false)
-      span.classList.add('link')
-      span.innerText = Date.now() + ' '
-      this.$refs.input.append(span)
-    },
-    emoji() {
-      let span = document.createElement('img')
-      span.setAttribute('src', new URL('../assets/img/icon/message/emoji/4.webp'))
-      span.classList.add('emoji')
-      this.$refs.input.append(span)
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/less/index";
-
-.Test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  background: #fff;
-  overflow: auto;
-  font-size: 2rem;
-  @emoji-width: 4rem;
-
-  .emoji {
-    width: @emoji-width;
-    height: @emoji-width;
-  }
-
-  .content {
-    padding-top: 6rem;
-
-
-    .auto-input {
-      width: 100%;
-      overflow-y: scroll;
-      padding: 0 .5rem;
-      outline: none;
-    }
-
-    .auto-input::-webkit-scrollbar {
-      width: 0 !important
-    }
-
-    .auto-input:empty::before {
-      /*content: "留下你的精彩评论吧";*/
-      content: attr(placeholder);
-      color: #999999;
-    }
-
-    .auto-input:focus::before {
-      content: none;
-    }
-  }
-}
-</style>

src/pages/test/Test3.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="test" v-top-love>
-  </div>
-</template>
-<script>
-import Dom from "../../utils/dom";
-
-export default {
-  name: "Test",
-  props: {},
-  components: {},
-  directives: {
-    topLove: {
-      beforeMount(el, binding, vNode) {
-        let click = function (e) {
-          let id = 'a' + Date.now()
-          let elWidth = 80
-          let rotate = randomNum(0, 1)
-          let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}"
- id="${id}"
-  src="${new URL('../../assets/img/icon/loved.svg', import.meta.url).href}" alt="">`
-          let el = new Dom().create(template)
-          el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
-          new Dom().find('.test').append(el)
-
-          setTimeout(() => {
-            new Dom().find(`#${id}`).remove()
-          }, 1000)
-        }
-        let randomNum = function (minNum, maxNum) {
-          switch (arguments.length) {
-            case 1:
-              return parseInt(Math.random() * minNum + 1, 10);
-            case 2:
-              return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-            default:
-              return 0;
-          }
-        }
-        el.addEventListener('click', click)
-        // el.addEventListener('dblclick', click)
-      }
-    }
-  },
-  data() {
-    return {
-      showShareDialog: true,
-    }
-  },
-  methods: {
-    click(e) {
-      let id = 'a' + Date.now()
-      let elWidth = 80
-      let rotate = this.randomNum(0, 1)
-      let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg')}" alt="">`
-      let el = new Dom().create(template)
-      el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
-      new Dom().find('.test').append(el)
-
-      setTimeout(() => {
-        new Dom().find(`#${id}`).remove()
-      }, 1000)
-    },
-    randomNum(minNum, maxNum) {
-      switch (arguments.length) {
-        case 1:
-          return parseInt(Math.random() * minNum + 1, 10);
-        case 2:
-          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-        default:
-          return 0;
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import "../../assets/less/index";
-
-.test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  font-size: 1.4rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    position: absolute;
-    @width: 8rem;
-    width: @width;
-    height: @width;
-
-    &.left {
-      animation: loveLeft 1.1s linear;
-    }
-
-    &.right {
-      animation: loveRight 1.1s linear;
-    }
-
-    @scale: scale(1.2);
-    @rotate: 10deg;
-
-    @keyframes loveLeft {
-      0% {
-        opacity: 0;
-        transform: scale(2) rotate(0-@rotate);
-      }
-      10% {
-        opacity: 1;
-        transform: scale(1) rotate(0-@rotate);
-      }
-      15% {
-        opacity: 1;
-        transform: @scale rotate(0-@rotate);
-      }
-      40% {
-        opacity: 1;
-        transform: @scale rotate(0-@rotate);
-      }
-      100% {
-        transform: translateY(-12rem) scale(2) rotate(0-@rotate);
-        opacity: 0;
-      }
-    }
-    @keyframes loveRight {
-      0% {
-        opacity: 0;
-        transform: scale(2) rotate(0+@rotate);
-      }
-      10% {
-        opacity: 1;
-        transform: scale(1) rotate(0+@rotate);
-      }
-      15% {
-        opacity: 1;
-        transform: @scale rotate(0+@rotate);
-      }
-      40% {
-        opacity: 1;
-        transform: @scale rotate(0+@rotate);
-      }
-      100% {
-        transform: translateY(-12rem) scale(2) rotate(0+@rotate);
-        opacity: 0;
-      }
-    }
-  }
-
-}
-</style>

src/pages/test/Test5.vue

@@ -1,223 +0,0 @@
-<template>
-  <div class="Test">
-    <SlideRowList
-        style="height: calc(100% - 5rem);"
-        v-model:active-index="activeIndex"
-        indicatorType="home"
-    >
-      <SlideItem>
-        <SlideColumnList>
-          <SlideItem style="background: tan">
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-          </SlideItem>
-          <SlideItem style="background: red;">
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-          </SlideItem>
-          <SlideItem style="background: yellow">
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-          </SlideItem>
-        </SlideColumnList>
-      </SlideItem>
-      <SlideItem>
-        <SlideColumnList>
-          <SlideItem style="background: tan">
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-            <p>111111111111</p>
-          </SlideItem>
-          <SlideItem style="background: red;">
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-            <p>222222222222</p>
-          </SlideItem>
-          <SlideItem style="background: yellow">
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-            <p>3333333333333</p>
-          </SlideItem>
-        </SlideColumnList>
-      </SlideItem>
-    </SlideRowList>
-  </div>
-</template>
-<script>
-
-import BaseButton from "../../components/BaseButton";
-import BaseMarquee from "../../components/BaseMarquee";
-import Dom from "../../utils/dom";
-
-export default {
-  name: "Test4",
-  components: {BaseButton, BaseMarquee},
-  props: {
-    text: {
-      type: String,
-      default: '@喵嗷污说电影创作的原声'
-    }
-  },
-  data() {
-    return {
-      activeIndex: 0,
-      showIndicator: true,
-    }
-  },
-  methods: {
-    changeIndex() {
-
-    }
-  },
-  mounted() {
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/less/index";
-
-.Test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  font-size: 1.4rem;
-
-  .content1 {
-    padding-top: 6rem;
-
-  }
-
-
-}
-</style>

src/pages/test/TestKeepAlive.vue

@@ -1,51 +0,0 @@
-<template>
-  <div id="Test">
-    <ul>
-      <li v-for="item in list" @click="go">{{ item }} -- Test1</li>
-    </ul>
-    <button @click="$router.push('TestKeepAlivePage1')">go2</button>
-  </div>
-</template>
-<script>
-export default {
-  name: "Test",
-  components: {},
-  props: {
-    modelValue: false
-  },
-  data() {
-    return {
-      list: 0
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {
-    setTimeout(() => {
-      this.list = 50
-    }, 1000)
-  },
-  methods: {
-    go(){
-      // this.$router.push('TestKeepAlivePage1')
-      this.$router.push('/message/all')
-    }
-  }
-}
-</script>
-<style lang="less">
-#Test {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  color: white;
-  font-size: 1.6rem;
-  overflow: auto;
-
-  li {
-    padding: 1rem;
-  }
-}
-</style>

src/pages/test/TestKeepAlivePage1.vue

@@ -1,41 +0,0 @@
-<template>
-  <div id="Test2">
-    <ul>
-      <li v-for="item in list" >{{ item }} -- Test2</li>
-    </ul>
-    <button @click="$back()">返回</button>
-  </div>
-</template>
-<script>
-export default {
-  name: "Test2",
-  components: {},
-  props: {
-    modelValue: false
-  },
-  data() {
-    return {
-      list: 0
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {
-    setTimeout(()=>{
-      this.list = 50
-    },1000)
-  },
-  methods: {}
-}
-</script>
-
-<style lang="less">
-#Test2 {
-  color: white;
-  font-size: 1.6rem;
-
-  li {
-    padding: 1rem;
-  }
-}
-</style>

src/pages/test/TestOne.vue

@@ -1,48 +0,0 @@
-<template>
-  <div id="TestOne">
-<!--    <SlideUser/>-->
-    <SlideImgs/>
-  </div>
-</template>
-<script>
-import SlideUser from "../../components/slide/SlideUser";
-import SlideImgs from "../../components/slide/SlideImgs";
-
-export default {
-  name: "TestOne",
-  components: {
-    SlideUser,
-    SlideImgs
-  },
-  props: {
-    modelValue: false
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  created() {
-  },
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-@import "@/assets/less/index";
-
-#TestOne {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  color: white;
-  font-size: 1.4rem;
-
-  .content {
-    padding-top: 6rem;
-  }
-}
-</style>

src/pages/test/TestVideo.vue

@@ -1,88 +0,0 @@
-<template>
-  <div id="TestVideo">
-    <video :src="url" ref="video" controls autoplay muted></video>
-    <Loading v-if="loading"/>
-  </div>
-</template>
-<script>
-export default {
-  name: "TestVideo",
-  components: {},
-  props: {
-    modelValue: false
-  },
-  data() {
-    return {
-      loading: false,
-      url: 'http://ttentau.top/13.mp4?v=' + Date.now()
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {
-  },
-  mounted() {
-    let video = this.$refs.video
-    // video.addEventListener('progress', () => {
-    //   console.log('加载中')
-    // })
-    // console.log(video)
-
-    let eventTester = (e, t) => {
-      video.addEventListener(e, () => {
-        if (e === 'playing') this.loading = false
-        if (e === 'progress') this.loading = true
-        if (e === 'waiting') this.loading = true
-        console.log((new Date()).getTime(), e, t)
-      }, false);
-    }
-
-
-    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
-    eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
-    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
-    // eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
-    // eventTester("suspend", '延迟下载'); //延迟下载
-    eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
-    eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
-    eventTester("stalled", '网速失速'); //网速失速
-    eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
-    eventTester("pause", 'pause()触发'); //pause()触发
-    eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
-    eventTester("loadeddata"); //
-    eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
-    eventTester("playing", '开始回放'); //开始回放
-    eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
-    eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
-    eventTester("seeking", '寻找中'); //寻找中
-    eventTester("seeked", '寻找完毕'); //寻找完毕
-    // eventTester("timeupdate",'播放时间改变'); //播放时间改变
-    eventTester("ended", '播放结束'); //播放结束
-    eventTester("ratechange", '播放速率改变'); //播放速率改变
-    eventTester("durationchange", '资源长度改变'); //资源长度改变
-    eventTester("volumechange", '音量改变'); //音量改变
-
-  },
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-@import "@/assets/less/index";
-
-#TestVideo {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  overflow: auto;
-  color: white;
-  font-size: 1.4rem;
-
-  video {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/pages/test/TestVue3.vue

@@ -1,54 +0,0 @@
-<template>
-  <div id="Test6">
-    <p>第{{year}}年</p>
-  </div>
-
-
-</template>
-<script>
-import {ref} from "vue";
-
-export default {
-  name: "Test6",
-  components: {},
-  props: {
-    modelValue: false
-  },
-  setup() {
-    const year = ref(0)
-    setInterval(() => {
-      year.value++
-    }, 1000)
-    return {
-      year
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  created() {
-  },
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-@import "@/assets/less/index";
-
-#Test6 {
-  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/routes.js

@@ -1,12 +1,6 @@
 import Index2 from "../pages/home/Index2";
 import Test from "../pages/test/Test";
-import Test2 from "../pages/test/Test2";
-import Test3 from "../pages/test/Test3";
 import Test4 from "../pages/test/Test4";
-import Test5 from "../pages/test/Test5";
-import TestVue3 from "../pages/test/TestVue3";
-import TestKeepAlive from "../pages/test/TestKeepAlive";
-import TestKeepAlivePage1 from "../pages/test/TestKeepAlivePage1";
 import SubmitReport from "../pages/home/SubmitReport";
 import Music from "../pages/home/Music";
 import MusicRankList from "../pages/home/MusicRankList";
@@ -70,8 +64,6 @@ import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
 import Uploader from "../pages/me/Uploader";
-import TestSlide from "../pages/test/TestSlide";
-import TestOne from "../pages/test/TestOne";
 import Slide from "../pages/slide/Slide";
 
 const routes = [
@@ -81,15 +73,7 @@ const routes = [
   },
   {path: '/slide', component: Slide},
   {path: '/test', component: Test},
-  {path: '/test2', component: Test2},
-  {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
-  {path: '/test5', component: Test5},
-  {path: '/testone', component: TestOne},
-  {path: '/TestSlide', component: TestSlide},
-  {path: '/TestVue3', component: TestVue3},
-  {path: '/TestKeepAlive', component: TestKeepAlive},
-  {path: '/TestKeepAlivePage1', component: TestKeepAlivePage1},
   {path: '/home', component: Index2},
   {path: '/home/music', component: Music},
   {path: '/home/music-rank-list', component: MusicRankList},