diff --git a/src/App.vue b/src/App.vue
index 4bb45ca..689088f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,9 +4,9 @@
         <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
       </transition>
       <transition :name="transitionName">
-        <keep-alive>
+<!--        <keep-alive>-->
           <component :is="Component"/>
-        </keep-alive>
+<!--        </keep-alive>-->
       </transition>
     </router-view>
 
diff --git a/src/api/videos.js b/src/api/videos.js
index 38518b0..6f8bdc5 100644
--- a/src/api/videos.js
+++ b/src/api/videos.js
@@ -17,4 +17,7 @@ export default {
   collect(params, data) {
     return request({url: '/me/collect', method: 'get', params, data})
   },
+  recommended(params, data) {
+    return request({url: '/video/recommended', method: 'get', params, data})
+  },
 }
\ No newline at end of file
diff --git a/src/assets/scss/utils.less b/src/assets/scss/utils.less
index 692d2db..e208b3a 100644
--- a/src/assets/scss/utils.less
+++ b/src/assets/scss/utils.less
@@ -53,6 +53,14 @@ margin
 */
 
 
+.m(5);
+.m(@n, @i: 1) when (@i =< @n) {
+  .m@{i}r {
+    margin: (1rem * @i) !important;
+  }
+  .m(@n, (@i + 1));
+}
+
 .ml(5);
 .ml(@n, @i: 1) when (@i =< @n) {
   .ml@{i}r {
@@ -64,7 +72,7 @@ margin
 .mr(5);
 .mr(@n, @i: 1) when (@i =< @n) {
   .mr@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-right: (1rem * @i) !important;
   }
   .mr(@n, (@i + 1));
 }
@@ -72,7 +80,7 @@ margin
 .mt(5);
 .mt(@n, @i: 1) when (@i =< @n) {
   .mt@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-top: (1rem * @i) !important;
   }
   .mt(@n, (@i + 1));
 }
@@ -80,7 +88,7 @@ margin
 .mb(5);
 .mb(@n, @i: 1) when (@i =< @n) {
   .mb@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-bottom: (1rem * @i) !important;
   }
   .mb(@n, (@i + 1));
 }
@@ -91,10 +99,18 @@ padding
 */
 
 
+.p(5);
+.p(@n, @i: 1) when (@i =< @n) {
+  .p@{i}r {
+    padding: (1rem * @i) !important;
+  }
+  .p(@n, (@i + 1));
+}
+
 .pb(5);
 .pb(@n, @i: 1) when (@i =< @n) {
   .pb@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-bottom: (1rem * @i) !important;
   }
   .pb(@n, (@i + 1));
 }
@@ -102,7 +118,7 @@ padding
 .pt(5);
 .pt(@n, @i: 1) when (@i =< @n) {
   .pt@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-top: (1rem * @i) !important;
   }
   .pt(@n, (@i + 1));
 }
@@ -110,7 +126,7 @@ padding
 .pl(5);
 .pl(@n, @i: 1) when (@i =< @n) {
   .pl@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-left: (1rem * @i) !important;
   }
   .pl(@n, (@i + 1));
 }
@@ -118,7 +134,7 @@ padding
 .pr(5);
 .pr(@n, @i: 1) when (@i =< @n) {
   .pr@{i}r {
-    margin-left: (1rem * @i) !important;
+    padding-right: (1rem * @i) !important;
   }
   .pr(@n, (@i + 1));
 }
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index 119c72d..5d2b62c 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list">
-      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+    <div class="poster-item" v-for="i in list" @click="$nav('/video-detail')">
+      <img class="poster" :src="$imgPreview(i.posterUrl)" alt="">
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
         <span>{{ $likeNum(i.likeNum) }}</span>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index bd1bc41..c274a25 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -78,7 +78,7 @@ export default {
     flex: 1;
     position: relative;
     height: 3.6rem;
-    background: rgb(59, 59, 71);
+    background: @second-btn-color-tran;
     border-radius: 2px;
     display: flex;
     align-items: center;
diff --git a/src/components/Video.vue b/src/components/Video.vue
index ae72827..8c0c546 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -5,13 +5,12 @@
 <!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-    <video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
+    <video :src="video.videoUrl"  ref="video" muted :autoplay="!disabled" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
     <div class="float-container" v-if="true" @click.stop="togglePlayVideo">
       <transition name="pause">
-        <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
-        >
+        <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying">
       </transition>
       <div class="float">
         <div :style="{opacity:isMove?0:1}" class="normal">
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
index 598a3a5..89b40ec 100644
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@@ -64,24 +64,33 @@ export default {
     watchList: {
       handler(newVal, oldVal) {
         if (!this.virtual) return
-        // console.log(this.currentSlideItemIndex)
-        let endLength = newVal.length
-        if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
-          endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
-        }
-        let that = this
-        newVal.slice(oldVal.length, endLength).map((item, index) => {
-          this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
-          this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
-          // $("#base-slide-list .base-slide-item:first").remove()
-          $(".base-slide-item").each(function () {
-            $(this).css('top',
-                ((endLength - oldVal.length) > 1 ?
-                    (that.currentSlideItemIndex - 2) :
-                    (that.currentSlideItemIndex - 3)) *
-                that.wrapperHeight)
+        if (oldVal.length === 0) {
+          this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
+            this.slideList.appendChild(this.getInsEl(item, index))
           })
-        })
+        } else {
+          // console.log(this.currentSlideItemIndex)
+          let endLength = newVal.length
+          if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
+            endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
+          }
+          let that = this
+          // newVal.slice(oldVal.length, endLength).map((item, index) => {
+          //   this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
+          //   let appIns = this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index'))
+          //   if (appIns) {
+          //     appIns.unmount()
+          //   }
+          //   // $("#base-slide-list .base-slide-item:first").remove()
+          //   $(".base-slide-item").each(function () {
+          //     $(this).css('top',
+          //         ((endLength - oldVal.length) > 1 ?
+          //             (that.currentSlideItemIndex - 2) :
+          //             (that.currentSlideItemIndex - 3)) *
+          //         that.wrapperHeight)
+          //   })
+          // })
+        }
       },
       deep: true
     }
@@ -185,13 +194,11 @@ export default {
         if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
         if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
         if (gapTime < 150) {
-
           if (this.isDrawDown) {
             this.currentSlideItemIndex += 1
           } else {
             this.currentSlideItemIndex -= 1
           }
-
           // console.log(this.slideItems.length)
           let that = this
           if (this.virtual) {
@@ -204,7 +211,7 @@ export default {
                   && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
                   && this.currentSlideItemIndex <= this.list.length - 3
               ) {
-                let videos = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
+                let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
                 // console.log(videos)
                 if (res.length === 0) {
                   this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
diff --git a/src/main.js b/src/main.js
index c31cb6a..20e2531 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import mixin from "./utils/mixin";
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
+// app.config.compilerOptions.isCustomElement = tag => tag.startsWith('video1')
 app.provide('mitt', mitt())
 
 app.mixin(mixin)
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 2246599..4900aa9 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -278,8 +278,6 @@ export default {
       }
       this.items.push(temp)
     }
-    // this.$console(this.items)
-
     setTimeout(() => {
       this.refs.scroller = this.$refs["scroller"]
       this.refs.wrapper = this.$refs["wrapper"]
@@ -288,9 +286,7 @@ export default {
   },
   methods: {
     scrollToTop(e) {
-      let current = e.currentTarget;
-      console.log(current.getBoundingClientRect())
-      console.log(current.offsetTop)
+      let current = e.currentTarget
       this.refs.scroller.scrollTop = current.offsetTop - this.headerHeight - 30
     },
     start(e) {
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index d944165..2aae8f8 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -172,124 +172,15 @@ import Share from "../../components/Share";
 import SlideColumnList from "../../components/slide/SlideColumnList";
 import SlideRowList from "../../components/slide/SlideRowList";
 import Me from '../me/Me'
+
 export default {
   name: "HomeIndex",
-  components: {SlideColumnList, SlideRowList, Video1, Comment, Share,Me},
+  components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
   data() {
     return {
-      videos1: [
-        {
-          // videoUrl: mp40,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp41,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/1.mp4',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp42,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/2.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp43,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/3.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp44,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/4.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp45,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/5.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp46,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/6.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp47,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/7.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp48,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/8.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp49,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/9.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-        {
-          // videoUrl: mp410,
-          videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/10.mp4',
-          videoPoster: src1Bg,
-          isLoved: false,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
-      ],
-      videos: [
+      webVideos: [],
+      videos: [],
+      localVideos: [
         {
           videoUrl: mp40,
           // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
@@ -406,6 +297,10 @@ export default {
       videoActiveIndex: 0,
       baseActiveIndex: 0,
       activeIndex: 1,
+      totalSize: 52,
+      pageSize: 10,
+      pageNo: 1,
+      loading: false,
       render: (item, itemIndex) => {
         return (
             <div className="base-slide-item video-slide-item" data-index={itemIndex}>
@@ -424,7 +319,7 @@ export default {
   },
   watch: {
     videoActiveIndex(newVal) {
-      // console.log(newVal)
+      console.log(newVal)
       $(".video-slide-item").each(function () {
         let video = $(this).find('video')
         if ($(this).data('index') === newVal) {
@@ -436,142 +331,39 @@ export default {
           }, 100)
         }
       })
-      // if (newVal >= this.videos.length - 3) {
-      if (false) {
-        [
-          {
-            videoUrl: mp40,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp41,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp42,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp43,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp44,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-        ].map(v => {
-          this.videos.push(v)
-        })
-
+      if (newVal >= this.videos.length - 3 && newVal < this.totalSize) {
+        if (this.loading) return
+        this.pageNo++
+        this.getData()
       }
     }
   },
   created() {
-    if (process.env.NODE_ENV !== 'development') {
-      this.videos = this.$clone(this.videos1)
-    }
+    this.getData()
   },
   mounted() {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
   methods: {
+    async getData() {
+      this.loading = true
+      let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
+      this.loading = false
+      if (res.code === this.SUCCESS_CODE) {
+        this.totalSize = res.data.count
+        this.videos = this.videos.concat(res.data.list)
+        // this.videos = this.$clone(this.localVideos)
+      } else {
+        this.pageNo--
+      }
+    },
     t(e) {
       console.log(e)
     },
     end() {
       console.log('end')
-      setTimeout(() => {
-        [
-          {
-            videoUrl: mp40,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          // {
-          //   videoUrl: mp41,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: true,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp42,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp43,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-          // {
-          //   videoUrl: mp44,
-          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          //   videoPoster: src1Bg,
-          //   isLoved: false,
-          //   loves: 1234,
-          //   comments: 666,
-          //   shared: 999,
-          //   duration: 99
-          // },
-        ].map(v => {
-          this.videos.push(v)
-        })
-        this.$refs.slideList.checkChildren()
-
-        console.log('ok')
-      }, 1000)
     }
-
   }
 }
 </script>
diff --git a/src/pages/home/Test.vue b/src/pages/home/Test.vue
deleted file mode 100644
index 367f46b..0000000
--- a/src/pages/home/Test.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="Test">
-    <SlideRowList>
-      <SlideItem style="min-width: 20vw;"> </SlideItem>
-      <SlideItem style="min-width: 20vw;"> </SlideItem>
-      <SlideItem style="min-width: 25vw;">分段拍</SlideItem>
-      <SlideItem style="min-width: 20vw;">快拍</SlideItem>
-      <SlideItem style="min-width: 20vw;">影集</SlideItem>
-      <SlideItem style="min-width: 20vw;">开直播</SlideItem>
-    </SlideRowList>
-  </div>
-</template>
-<script>
-export default {
-  name: "Test",
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/scss/index";
-
-.Test {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  color: white;
-  font-size: 2rem;
-}
-</style>
diff --git a/src/pages/home/testt.vue b/src/pages/home/testt.vue
deleted file mode 100644
index 1567da2..0000000
--- a/src/pages/home/testt.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template lang="html">
-  <div class="yo-scroll"
-       :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
-       @touchstart="touchStart($event)"
-       @touchmove="touchMove($event)"
-       @touchend="touchEnd($event)"
-       @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
-    <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
-      <header class="pull-refresh">
-        <slot name="pull-refresh">
-          <span class="down-tip">下拉更新</span>
-          <span class="up-tip">松开更新</span>
-          <span class="refresh-tip">更新中</span>
-        </slot>
-      </header>
-      <slot></slot>
-      <footer class="load-more">
-        <slot name="load-more">
-          <span>加载中……</span>
-        </slot>
-      </footer>
-    </section>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    offset: {
-      type: Number,
-      default: 40
-    },
-    enableInfinite: {
-      type: Boolean,
-      default: true
-    },
-    enableRefresh: {
-      type: Boolean,
-      default: true
-    },
-    onRefresh: {
-      type: Function,
-      default: undefined,
-      required: false
-    },
-    onInfinite: {
-      type: Function,
-      default: undefined,
-      require: false
-    }
-  },
-  data() {
-    return {
-      top: 0,
-      state: 0,
-      startY: 0,
-      touching: false,
-      infiniteLoading: false
-    }
-  },
-  methods: {
-    touchStart(e) {
-      this.startY = e.targetTouches[0].pageY
-      this.startScroll = this.$el.scrollTop || 0
-      this.touching = true
-    },
-    touchMove(e) {
-      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
-        return
-      }
-      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
-      if (diff > 0) e.preventDefault()
-      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
-
-      if (this.state === 2) { // in refreshing
-        return
-      }
-      if (this.top >= this.offset) {
-        this.state = 1
-      } else {
-        this.state = 0
-      }
-    },
-    touchEnd(e) {
-      if (!this.enableRefresh) return
-      this.touching = false
-      if (this.state === 2) { // in refreshing
-        this.state = 2
-        this.top = this.offset
-        return
-      }
-      if (this.top >= this.offset) { // do refresh
-        this.refresh()
-      } else { // cancel refresh
-        this.state = 0
-        this.top = 0
-      }
-    },
-    refresh() {
-      this.state = 2
-      this.top = this.offset
-      this.onRefresh(this.refreshDone)
-    },
-    refreshDone() {
-      this.state = 0
-      this.top = 0
-    },
-
-    infinite() {
-      this.infiniteLoading = true
-      this.onInfinite(this.infiniteDone)
-    },
-
-    infiniteDone() {
-      this.infiniteLoading = false
-    },
-
-    onScroll(e) {
-      if (!this.enableInfinite || this.infiniteLoading) {
-        return
-      }
-      let outerHeight = this.$el.clientHeight
-      let innerHeight = this.$el.querySelector('.inner').clientHeight
-      let scrollTop = this.$el.scrollTop
-      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
-      let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
-      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
-      if (bottom < infiniteHeight) this.infinite()
-    }
-  }
-}
-</script>
-<style>
-.yo-scroll {
-  position: absolute;
-  top: 2.5rem;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  background-color: #ddd
-}
-
-.yo-scroll .inner {
-  position: absolute;
-  top: -2rem;
-  width: 100%;
-  transition-duration: 300ms;
-}
-
-.yo-scroll .pull-refresh {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.yo-scroll.touch .inner {
-  transition-duration: 0ms;
-}
-
-.yo-scroll.down .down-tip {
-  display: block;
-}
-
-.yo-scroll.up .up-tip {
-  display: block;
-}
-
-.yo-scroll.refresh .refresh-tip {
-  display: block;
-}
-
-.yo-scroll .down-tip,
-.yo-scroll .refresh-tip,
-.yo-scroll .up-tip {
-  display: none;
-}
-
-.yo-scroll .load-more {
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index f9d56a6..e78040f 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -1,99 +1,213 @@
 <template>
   <div class="Me">
-    <SlideRowList style="width: 100vw;"
-                  @first="first"
-                  @end="end"
-                  v-model:active-index="baseActiveIndex"
-    >
-      <SlideItem style="overflow:auto;" :style="contentStyle" @scroll="scroll" @click="click">
-        <div ref="desc" class="desc">
-          <header ref="header">
-            <div class="left" style="opacity: 0;">
-              <img src="../../assets/img/icon/next.svg" alt="">
-              <span>切换账号</span>
-            </div>
-            <div class="right">
-              <img src="../../assets/img/icon/me/finger-right.png" alt="">
-              <img src="../../assets/img/icon/me/menu.png" alt="" @click.stop="baseActiveIndex = 1">
+    <SlideRowList style="width: 100vw;" v-model:active-index="baseActiveIndex">
+      <SlideItem>
+        <div ref="float" class="float" :class="floatFixed?'fixed':''">
+          <div class="left" style="opacity: 0;">
+            <img src="../../assets/img/icon/next.svg" alt="">
+            <span>切换账号</span>
+          </div>
+          <transition name="fade">
+            <div class="center" v-if="floatShowName">
+              <p class="name f22 mt1r mb1r">ttentau</p>
             </div>
-          </header>
-          <div class="detail">
-            <div class="head">
-              <img src="../../assets/img/icon/head-image.jpeg" class="head-image">
-              <div class="other-buttons" v-if="false">
-                <div class="attention">
-                  关注
+          </transition>
+          <div class="right">
+            <img :style="floatFixed?'opacity: 0;':''" src="../../assets/img/icon/me/finger-right.png" alt="">
+            <img src="../../assets/img/icon/me/menu.png" alt="" @click.stop="baseActiveIndex = 1">
+          </div>
+        </div>
+        <div class="scroll"
+             ref="scroll"
+             @touchstart="touchStart($event)"
+             @touchmove="touchMove($event)"
+             @touchend="touchEnd($event)">
+          <div ref="desc" class="desc">
+            <header ref="header"></header>
+            <div class="detail">
+              <div class="head">
+                <img src="../../assets/img/icon/head-image.jpeg" class="head-image">
+                <div class="other-buttons" v-if="false">
+                  <div class="attention">
+                    关注
+                  </div>
+                  <div class="more-attention">
+                    -
+                  </div>
                 </div>
-                <div class="more-attention">
-                  -
+                <div class="my-buttons ">
+                  <div class="collect" @click="$nav('/edit-userinfo')">
+                    <span class="mr1r">编辑资料</span>
+                    <!--                    <span class="f10p" style="color: darkgray">85%</span>-->
+                  </div>
+                  <div class="add-friend" @click="$nav('/find-acquaintance')">
+                    <img src="../../assets/img/icon/add-white.png" alt="">
+                    <span class="mr5p">熟人</span>
+                  </div>
                 </div>
               </div>
-              <div class="my-buttons ">
-                <div class="collect" @click="$nav('/edit-userinfo')">
-                  <span class="mr1r">编辑资料</span>
-                  <span class="f10p" style="color: darkgray">85%</span>
+              <div class="description">
+                <p class="name f22 mt1r mb1r">ttentau</p>
+                <div class="number mb1r">
+                  <span class="mr1r">私密账号</span>
+                  <span>抖音号：605128307</span>
+                  <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
                 </div>
-                <div class="add-friend" @click="$nav('/find-acquaintance')">
-                  <img src="../../assets/img/icon/add-white.png" alt="">
-                  <span class="mr5p">熟人</span>
+                <div class="signature" @click="$nav('/edit-userinfo-item',{type:3})">
+                  <template v-if="!userinfo.desc">
+                    <template v-if="false">
+                      <!--                      有个版本是这样子的，应该是灰度测试-->
+                      <span>点击添加介绍，让大家认识你...</span>
+                      <img src="../../assets/img/icon/me/write-gray.png" alt="">
+                    </template>
+                    <span>你还没有填写个人简介，点击添加...</span>
+                  </template>
+                  <span v-else class="text">{{ userinfo.desc }}</span>
+                </div>
+                <div class="more">
+                  <div class="age item" v-if="userinfo.birthday">
+                    <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
+                    <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
+                    <span>{{ filterAge(userinfo.birthday) }}岁</span>
+                  </div>
+                  <div class="item" v-if="userinfo.location">
+                    {{ userinfo.location }}
+                  </div>
+                  <div class="item" v-if="userinfo.school.name">
+                    {{ userinfo.school.name }}
+                  </div>
+                </div>
+                <div class="heat">
+                  <div class="text"><span class="num">8</span>获赞</div>
+                  <div class="text"><span class="num">8</span>关注</div>
+                  <div class="text"><span class="num">8</span>粉丝</div>
                 </div>
               </div>
-            </div>
-            <div class="description">
-              <p class="name f22 mt1r mb1r">ttentau</p>
-              <div class="number mb1r">
-                <span class="mr1r">私密账号</span>
-                <span>抖音号：605128307</span>
-                <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
-              </div>
-              <div class="signature f12 mb1r">
-                <span>填写个性签名更容易获得别人关注哦</span>
-              </div>
-              <div class="heat">
-                <div class="text"><span class="num">8</span>获赞</div>
-                <div class="text"><span class="num">8</span>关注</div>
-                <div class="text"><span class="num">8</span>粉丝</div>
+              <div class="other">
+                <div class="item">
+                  <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
+                  <div class="right">
+                    <div class="top">抖音商城</div>
+                    <div class="bottom">发现超值好物</div>
+                  </div>
+                </div>
+                <div class="item">
+                  <img src="../../assets/img/icon/me/music-white.png" alt="">
+                  <div class="right">
+                    <div class="top">我的音乐</div>
+                    <div class="bottom">已收藏20首</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div ref="content" style="margin-bottom: 60px;">
           <Indicator
+              :class="indicatorFixed?'fffffffff':''"
               name="videoList"
-              :fixed="indicatorFixed"
-              tabStyleWidth="33%"
-              :tabTexts="['作品','私密','喜欢']"
+              tabStyleWidth="25%"
+              :tabTexts="['作品','私密','喜欢','收藏']"
               v-model:active-index="contentIndex">
           </Indicator>
           <SlideRowList
+              ref="videoSlideRowList"
               name="videoList"
-              @end="end"
-              :indicator-fixed="indicatorFixed"
+              :style="videoSlideRowListStyle"
               v-model:active-index="contentIndex">
-            <SlideItem>
-              <div ref="tab-content1">
-                <Posters></Posters>
-                <div class="no-more">暂时没有更多了</div>
+            <SlideItem class="SlideItem"
+                       @touchmove="move"
+                       @scroll="scroll"
+                       :style="isScroll?'overflow: auto;':''">
+              <Posters v-if="videos.my.total !== -1" :list="videos.my.list"></Posters>
+              <Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
+              <no-more v-else/>
+            </SlideItem>
+            <SlideItem class="SlideItem"
+                       @touchmove="'move'"
+                       :style="isScroll?'overflow: auto;':''">
+              <div class="notice">
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
+                <span>只有你能看到设为私密的作品和日常</span>
               </div>
+              <Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
+              <Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
+              <no-more v-else/>
             </SlideItem>
-            <SlideItem>
-              <div ref="tab-content2">
-                <Posters :list="15"></Posters>
-                <div class="no-more">暂时没有更多了</div>
+            <SlideItem class="SlideItem"
+                       @touchmove="move"
+                       :style="isScroll?'overflow: auto;':''">
+              <div class="notice">
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
+                <span>只有你能看到自己的喜欢列表</span>
               </div>
+              <Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
+              <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
+              <no-more v-else/>
             </SlideItem>
-            <SlideItem>
-              <div ref="tab-content3">
-                <Posters :list="5"></Posters>
-                <div class="no-more">暂时没有更多了</div>
+            <SlideItem class="SlideItem"
+                       @touchmove="move"
+                       :style="isScroll?'overflow: auto;':''">
+              <div class="notice">
+                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
+                <span>只有你能看到自己的收藏列表</span>
               </div>
+              <div class="collect" ref="collect">
+                <div class="video" v-if=" videos.collect.video.list.length">
+                  <div class="top">
+                    <div class="left">
+                      <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
+                      <span>视频</span>
+                    </div>
+                    <div class="right">
+                      <span>全部</span>
+                      <back direction="right"></back>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="item"
+                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                      <div class="num">
+                        <img class="love" src="../../assets/img/icon/love.svg" alt="">
+                        <span>{{ $likeNum(i.likeNum) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="audio" v-if=" videos.collect.video.list.length">
+                  <div class="top">
+                    <div class="left">
+                      <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
+                      <span>音乐</span>
+                    </div>
+                    <div class="right">
+                      <span>全部</span>
+                      <back direction="right"></back>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="item"
+                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
+              <no-more v-else/>
             </SlideItem>
           </SlideRowList>
         </div>
         <Footer v-bind:init-tab="5"/>
+        <transition name="fade">
+          <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
+        </transition>
       </SlideItem>
       <SlideItem style="min-width: 70vw; overflow:auto;">
-        <transition name="fade">
+        <transition name="fade1">
           <div class="ul" v-if="!isMoreFunction">
             <div class="li" @click="$nav('/my-card')">
               <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="">
@@ -199,6 +313,8 @@
 import Posters from '../../components/Posters'
 import Footer from "../../components/Footer";
 import Indicator from '../../components/Indicator'
+import {nextTick} from 'vue'
+import {mapState} from "vuex";
 
 export default {
   name: "Me",
@@ -207,38 +323,89 @@ export default {
     return {
       contentIndex: 0,
       baseActiveIndex: 0,
-      desc: null,
       tabContents: [],
-      indicatorHeight: 42,
       indicatorFixed: false,
+      floatFixed: false,
+      floatShowName: false,
+      isScroll: false,
+      isMoreFunction: false,
       refs: {
         header: null,
         headerHeight: 0,
+        descHeight: 0,
+        videoSlideHeight: 0,
+        maxSlideHeight: 0
+      },
+      videoItemHeight: 0,
+      startLocationY: 0,
+      fixedLocationY: 0,
+      moveYDistance: 0,
+      startTime: 0,
+      floatHeight: 46,
+      videos: {
+        my: {
+          list: [],
+          total: -1,
+          pageNo: 0
+        },
+        private: {
+          list: [],
+          total: -1
+        },
+        like: {
+          list: [],
+          total: -1
+        },
+        collect: {
+          video: {
+            list: [],
+            total: -1,
+          },
+          audio: {
+            list: [],
+            total: -1,
+          }
+        },
+      },
+      pageSize: 15,
+      initSlideHeight: 0,
+      loadings: {
+        loading0: false,
+        loading1: false,
+        loading2: false,
+        loading3: false,
       },
-      isMoreFunction: false,
     }
   },
-  watch: {
-    contentIndex(newVal, oldVal) {
-      this.changeIndex(newVal, oldVal)
-    },
-  },
   computed: {
     bodyHeight() {
       return this.$store.state.bodyHeight
     },
-    contentStyle() {
-      return {
-        opacity: this.baseActiveIndex === 1 ? 0.5 : 1
-      }
-    }
+    bodyWidth() {
+      return this.$store.state.bodyWidth
+    },
+    videoSlideRowListStyle() {
+      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
+    },
+    ...mapState({
+      userinfo: 'userinfo',
+    })
+  },
+  watch: {
+    contentIndex(newVal, oldVal) {
+      this.changeIndex(newVal, oldVal)
+    },
   },
   mounted() {
     setTimeout(() => {
       this.refs.header = this.$refs.header
       this.refs.headerHeight = this.$refs.header.offsetHeight
+      this.refs.descHeight = this.$refs.desc.offsetHeight
+      this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
+      this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight - 50
       this.changeIndex(0, null)
     })
+    this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
   },
   methods: {
     click(e) {
@@ -248,54 +415,342 @@ export default {
         this.$stopPropagation(e)
       }
     },
-    scroll() {
-      let top = this.tabContents[this.contentIndex].getBoundingClientRect().top
-      this.indicatorFixed = top < this.indicatorHeight;
-    },
-    changeIndex(newVal, oldVal) {
-      let desc = this.$refs.desc
-      // console.log(desc.clientHeight)
-      let content = this.$refs['content']
-      if (!this.tabContents.length) {
-        this.tabContents = [this.$refs['tab-content1'], this.$refs['tab-content2'], this.$refs['tab-content3']]
+    async getScrollAreaHeight(index = this.contentIndex) {
+      let scrollAreaHeight = 0
+      if (index === 3) {
+        await nextTick(async () => {
+          scrollAreaHeight = this.$refs.collect.clientHeight + 60 + 40
+        })
+      } else {
+        scrollAreaHeight = Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) * this.videoItemHeight
+        switch (index) {
+          case 0:
+            scrollAreaHeight += 60
+            break
+          case 1:
+            scrollAreaHeight += 60 + 40
+            break
+          case 2:
+            scrollAreaHeight += 60 + 40
+            break
+        }
       }
+      // console.log('scrollAreaHeight',scrollAreaHeight)
+      return scrollAreaHeight
+    },
+    async changeIndex(newVal, oldVal) {
       // debugger
-      let moveDistance = 0
+      if (this.loadings['loading' + newVal]) return
+      let videoOb = this.videos[Object.keys(this.videos)[newVal]]
+      if (newVal === 3) {
+        if (videoOb.video.total === -1) {
+          this.loadings['loading' + newVal] = true
+          let res = await this.$api.videos.collect({pageNo: this.videos.collect.pageNo, pageSize: this.pageSize,})
+          this.loadings['loading' + newVal] = false
+          if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
+        }
+      } else {
+        if (videoOb.total === -1) {
+          this.loadings['loading' + newVal] = true
+          let res
+          switch (newVal) {
+            case 0:
+              res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
+              break
+            case 1:
+              res = await this.$api.videos.private({pageNo: this.videos.private.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
+              break
+            case 2:
+              res = await this.$api.videos.like({pageNo: this.videos.like.pageNo, pageSize: this.pageSize,})
+              if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
+              break
+          }
+          this.loadings['loading' + newVal] = false
+        }
+      }
+      let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
+
       if (oldVal !== null) {
-        moveDistance = this.bodyHeight - this.tabContents[oldVal].getBoundingClientRect().top
+        let transformY = this.getTransform(this.$refs.scroll)
+        // console.log('transformY', transformY)
+        let screenSlideHeight = this.initSlideHeight + Math.abs(transformY)
+        // console.log('screenSlideHeight', screenSlideHeight)
+        // console.log('scrollAreaHeight', scrollAreaHeight)
+// debugger
+        if (this.indicatorFixed) {
+          this.refs.videoSlideHeight = scrollAreaHeight > screenSlideHeight ? scrollAreaHeight : screenSlideHeight
+
+          if (scrollAreaHeight > this.refs.maxSlideHeight) {
+            this.refs.videoSlideHeight = this.refs.maxSlideHeight
+          }
+        } else {
+          this.refs.videoSlideHeight = scrollAreaHeight
+          if (scrollAreaHeight > this.refs.maxSlideHeight) {
+            this.refs.videoSlideHeight = this.refs.maxSlideHeight
+          }
+        }
       } else {
-        moveDistance = 0
+        if (scrollAreaHeight < this.refs.maxSlideHeight) {
+          this.refs.videoSlideHeight = scrollAreaHeight
+        } else {
+          this.refs.videoSlideHeight = this.refs.maxSlideHeight
+        }
       }
-      // console.log('moveDistance', moveDistance)
-      if (moveDistance > this.tabContents[newVal].clientHeight) {
-        if (moveDistance + this.indicatorHeight > this.bodyHeight) {
-          content.style.height = this.bodyHeight + 'px'
+    },
+    async loadMoreData() {
+      if (this.loadings['loading' + this.contentIndex]) return
+      let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
+      if (videoOb.total > videoOb.list.length) {
+        videoOb.pageNo++
+        this.loadings['loading' + this.contentIndex] = true
+        let res
+        switch (this.contentIndex) {
+          case 0:
+            res = await this.$api.videos.my({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 1:
+            res = await this.$api.videos.private({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 2:
+            res = await this.$api.videos.like({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+          case 3:
+            res = await this.$api.videos.collect({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
+            break
+        }
+        this.loadings['loading' + this.contentIndex] = false
+        if (res.code === this.SUCCESS_CODE) {
+          videoOb.list = videoOb.list.concat(res.data.list)
+        }
+      }
+    },
+    touchStart(e) {
+      this.$refs.scroll.style.transition = 'none'
+      this.fixedLocationY = this.startLocationY = e.touches[0].pageY
+      this.startTime = Date.now()
+    },
+    move(e) {
+      (!this.isScroll) && e.preventDefault();
+    },
+    async scroll() {
+      if (this.indicatorFixed) {
+        let scrollAreaHeight = await this.getScrollAreaHeight()
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        if (scrollAreaHeight - this.refs.videoSlideHeight < SlideItem.scrollTop + 60) {
+          this.loadMoreData()
+        }
+      }
+    },
+    async touchMove(e) {
+      let canTransformY = this.refs.descHeight - this.floatHeight
+      let touchMoveDistance = e.touches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
+      // console.log('move-pageMoveDistance', pageMoveDistance)
+      // console.log('move-touchMoveDistance', touchMoveDistance)
+
+      //页面已经滚动到头了，往下划动，要把header图放大
+      if (pageMoveDistance > 0) {
+        this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+        if (pageMoveDistance < 400) {
+          this.refs.header.style.transition = 'all 0s'
+          this.refs.header.style.height = this.refs.headerHeight + (pageMoveDistance / 2) + 'px'
         } else {
-          content.style.height = moveDistance + this.indicatorHeight + 'px'
+          this.startLocationY = e.touches[0].pageY
+          this.moveYDistance = 400
         }
       } else {
-        if (this.bodyHeight - desc.clientHeight > this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight) {
-          content.style.height = this.bodyHeight - desc.clientHeight + this.indicatorHeight + 'px'
+        let scrollAreaHeight = await this.getScrollAreaHeight()
+        //往下划动
+        if (touchMoveDistance > 0) {
+          //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
+          if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(touchMoveDistance) > 20) {
+            this.$refs.scroll.style.transition = 'all .2s'
+            this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+            this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+            this.moveYDistance = 0
+            this.startLocationY = e.touches[0].pageY
+            this.changeIndex(this.contentIndex, this.contentIndex)
+            let SlideItems = document.querySelectorAll('.SlideItem')
+            SlideItems.forEach(SlideItem => {
+              SlideItem.style.overflow = 'auto'
+              SlideItem.scrollTop = 0
+            })
+            SlideItems.forEach(SlideItem => {
+              SlideItem.style.overflow = 'hidden'
+            })
+            return;
+          }
+        }
+        if (this.indicatorFixed) {
+          let SlideItems = document.querySelectorAll('.SlideItem')
+          let SlideItem = SlideItems[this.contentIndex]
+          if (!this.isScroll) {
+            SlideItem.style.overflow = 'auto'
+            SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
+          }
+
+          if (scrollAreaHeight - this.refs.videoSlideHeight < SlideItem.scrollTop + 60) {
+            this.loadMoreData()
+          }
+
+          if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
+            this.isScroll = this.indicatorFixed = false
+            SlideItem.style.overflow = 'hidden'
+            this.startLocationY = e.touches[0].pageY
+            this.moveYDistance = -this.refs.descHeight + this.floatHeight
+          }
         } else {
-          return content.style.height = this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight + 'px'
-          // if (this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight > this.bodyHeight) {
-          //   content.style.height = this.bodyHeight + 'px'
-          // } else {
-          //   content.style.height = this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight + 'px'
-          // }
+          if (this.initSlideHeight > this.refs.videoSlideHeight) return
+          if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
+            let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+            // console.log('canTransformY', canTransformY)
+            // console.log('endTransformY', endTransformY)
+            let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+            this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
+            this.floatFixed = Math.abs(moveTransformY) > 100
+            this.floatShowName = Math.abs(moveTransformY) > 150
+          } else {
+            this.indicatorFixed = Math.abs(pageMoveDistance) > canTransformY
+            this.floatFixed = Math.abs(pageMoveDistance) > 100
+            this.floatShowName = Math.abs(pageMoveDistance) > 150
+            this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -canTransformY : pageMoveDistance}px,0)`
+          }
+          if (this.indicatorFixed) {
+            this.fixedLocationY = e.touches[0].pageY
+          }
         }
       }
+
     },
-    first(e) {
-      if (this.baseActiveIndex !== 0) return
-      if (this.refs.header.getBoundingClientRect().top !== 0) return
-      this.refs.header.style.transition = 'all 0s'
-      this.refs.header.style.height = this.refs.headerHeight + (e / 3) + 'px'
+    touchEnd(e) {
+      let canTransformY = this.refs.descHeight - this.floatHeight
+      let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
+      // console.log('end-pageMoveDistance', pageMoveDistance)
+
+      let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+      if (this.indicatorFixed) {
+        this.moveYDistance = -canTransformY
+        this.isScroll = true
+      } else {
+        // debugger
+        if (pageMoveDistance > 0) {
+          this.refs.header.style.transition = 'all .3s'
+          this.refs.header.style.height = this.refs.headerHeight + 'px'
+          this.moveYDistance = 0
+          this.floatShowName = this.floatFixed = this.isScroll = false
+        } else {
+
+          if (this.initSlideHeight > this.refs.videoSlideHeight) {
+            return this.moveYDistance = 0
+          }
+          let endTime = Date.now()
+          let gapTime = endTime - this.startTime
+          //距离太小
+          if (Math.abs(touchMoveDistance) < 20) gapTime = 1000
+          //超过header的1/3
+          if (Math.abs(touchMoveDistance) > (this.refs.descHeight / 2)) gapTime = 50
+          // console.log('时间', gapTime)
+          if (gapTime < 150) {
+            //往上划
+            if (touchMoveDistance > 0) {
+              //时间短，滑动距离长，则应该快速滚动到顶部
+              gapTime = endTime - this.startTime
+              if (gapTime < 100 && Math.abs(touchMoveDistance) > 100) {
+                //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
+                this.$refs.scroll.style.transition = 'none'
+                let transformY = this.getTransform(this.$refs.scroll)
+                //当前的transformY
+                // console.log('transformY', transformY)
+                let timer
+                cancelAnimationFrame(timer);
+                let fn = () => {
+                  //说明没到顶
+                  if (transformY < 0) {
+                    transformY = transformY + 40
+                    this.$refs.scroll.style.transform = `translate3d(0,${transformY > 0 ? 0 : transformY}px,0)`
+                    timer = requestAnimationFrame(fn);
+                  } else {
+                    //transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
+                    if (transformY !== 0) {
+                      if (this.$getCss(this.refs.header, 'height') < 400) {
+                        this.refs.header.style.transition = 'none'
+                        this.refs.header.style.height = this.$getCss(this.refs.header, 'height') + 10 + 'px'
+                        timer = requestAnimationFrame(fn);
+                      } else {
+                        this.refs.header.style.transition = 'all .6s'
+                        this.refs.header.style.height = this.refs.headerHeight + 'px'
+                        this.moveYDistance = 0
+                        cancelAnimationFrame(timer);
+                      }
+                    } else {
+                      //快速动画结束
+                      this.moveYDistance = 0
+                      cancelAnimationFrame(timer);
+                    }
+                  }
+                }
+                timer = requestAnimationFrame(fn);
+              } else {
+                //正常回弹动画
+                this.$refs.scroll.style.transition = 'all .3s'
+                this.$refs.scroll.style.transform = `translate3d(0,${touchMoveDistance > 0 ? 0 : -this.refs.descHeight}px,0)`
+                this.moveYDistance = touchMoveDistance > 0 ? 0 : -this.refs.descHeight
+              }
+              this.moveYDistance = 0
+              this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+              let SlideItems = document.querySelectorAll('.SlideItem')
+              SlideItems.forEach(SlideItem => {
+                SlideItem.style.overflow = 'auto'
+                SlideItem.scrollTop = 0
+              })
+              SlideItems.forEach(SlideItem => {
+                SlideItem.style.overflow = 'hidden'
+              })
+            } else {
+              //往下划
+              this.$refs.scroll.style.transition = 'all .3s'
+              if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
+                this.$refs.scroll.style.transform = `translate3d(0,${-endTransformY}px,0)`
+                // this.floatShowName = this.floatFixed = true
+                this.floatFixed = Math.abs(endTransformY) > 100
+                this.floatShowName = Math.abs(endTransformY) > 150
+                this.moveYDistance = -endTransformY
+              } else {
+                this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)`
+                this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
+                this.moveYDistance = -this.refs.descHeight + this.floatHeight
+                this.moveYDistance = pageMoveDistance
+              }
+            }
+          } else {
+            if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
+              let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              this.moveYDistance = -endTransformY
+            } else {
+              this.moveYDistance = pageMoveDistance
+            }
+          }
+        }
+      }
+      this.changeIndex(this.contentIndex, this.contentIndex)
+    },
+    getTransform(el) {
+      let transform = el.style.transform
+      if (!transform) return 0
+      // console.log('transform',transform)
+      let transformY = transform.substring(transform.indexOf('0px') + 5, transform.lastIndexOf('0px') - 4)
+      // console.log('transformY',transformY)
+      //当前的transformY
+      transformY = parseInt(transformY)
+      return transformY
     },
-    end() {
-      if (this.baseActiveIndex !== 0) return
-      this.refs.header.style.transition = 'all .3s'
-      this.refs.header.style.height = this.refs.headerHeight + 'px'
+    filterAge(age) {
+      let date = new Date(age)
+      return new Date().getFullYear() - date.getFullYear()
     }
   }
 }
@@ -304,13 +759,13 @@ export default {
 <style scoped lang="less">
 @import "../../assets/scss/index";
 
-.fade-enter-active,
-.fade-leave-active {
+.fade1-enter-active,
+.fade1-leave-active {
   transition: all 0.3s ease;
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.fade1-enter-from,
+.fade1-leave-to {
   transform: translateY(10px);
   opacity: 0;
 }
@@ -319,59 +774,226 @@ export default {
   background: @main-bg;
   height: 100%;
   width: 100%;
+  font-size: 1.4rem;
 
-  .no-more {
-    font-size: 1.4rem;
-    padding: 10px;
-    color: gray;
-    text-align: center;
+  .mask{
+    background: #0000004f;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 3;
   }
 
-  .desc {
-    header {
-      color: white;
-      height: 150px;
-      /* background-image: url('./imgs/header2.jpg'); */
-      background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBAQEBAPEBAPEBAPDw8QDw8NEA8OFRIWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGBAQGC0dHR0tLS0rKy0tLS0tLS0tKy0tKy0tLSstLS0tLS0tLSstLSstLS0tKy0tLS0tLS0tLisrN//AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAwECBAUGB//EAD8QAAIBAgMFAwgIBQQDAAAAAAABAgMRBBIhBSIxQXFRYbEGEyMyUnKBkRWCkqGissHRFEJic/AkNIPhBzNT/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAeEQEBAQEAAwEBAQEAAAAAAAAAARECEiExA0FRE//aAAwDAQACEQMRAD8A+QgUTJTPS4mRLpi4stF6hDETAiIRBpiAEwZcZoRaJBKCLZSbF7BYuMaXYmxewWGGqWCxewWGGqWCxewWLhpeULDLENEw1SwWLWCxcNVsRYvYLDCUmtw+KKIvivV+KFxZnPbpL6MiWRCLNEXQRYsyAaVUiLY+pwM5YiAuQyAJuRcLlbhUhci4XC6oSicpKQZ1aBaBMUTBA1aJKIXEtYJqSWWsSkBVEl7EqBUq1LVdBmQStHc1wSauiudLyhlG5QyBCspGUdlBxKEuJGUdlCw0JyhlHZSHEBOQMg3KGUaaVlIyjsoZSrrHjI7j6ozUuBt2gtx9UYsOtPiY/rpz8PQ1R0KIeloRdLaIsXZE0DSprQzM2NGSSAoVLMqwIuQwIYUXJKkgMsCQqnV5PQci/UsMii0EQuBaIASisi1MIYTEESVTXG5akgo9haUdTLNLqcS+HlZ5eT4dSMjJnTv15dTSVqsFiaEsyT58H3MvYmsYXYiw2xGUaFWJyjFEtlGhOULFq1WEFeUkra6vUXQxdOfqzTfZez+Q1fGpcSLDspVxGslWJsXyhlKMW0l6N9V4mTBRvCXU3bUXon1j4mbZmsJe+l80Zv124+DsHx4CZLUfHgFLCQMOQENGOotWa2ZqvEsCWVZeRRgVZDJZDIqCxUsBFWndd5WjWtoy1SskZJO5Or7a5mxqqYrkhKryXMWkaKWFb4k+tZOYIYmb7zVh693Z6FqdJRWiBwTeqLljFsrVEmxlmpQV4u65pk0MdGTs9GXUxtpaM15TPT7TZSa5kqYWo2LZUOdircRrOF0t2XdLxNeQy1JRtx8R1LHU7b0rNaPRkTDMhGQj+Po+3+GX7EfSFH2/wy/YSmL5BONq+bpzn7K073yXzL/SFH2/wy/Y5flBioTpqMJN72Z6NXtwWvW/wLq887XnKk3JuUndvVt6kLu0JUS2Uy9T0mx8eqscsn6RfiXb1Oi4HjqLcWpR0ad0ej2ftZSj6XRrhJJtS/Zl15++P7G3IWVMX9JUfaf2ZfsStqUPaf2ZF1jxZdtQtRl1j4mPYsbwqe8vA17Yx1GdGUYSbk3FpZZLg0YtiYmEIzUna8lbRvSxNdOZ6NxMd5Pt1LR4DayUoprquguJZTqZVJcyvIu+YJaFQpmesjQJrrgaRnZRjGLZKKshkshkaQAABmSbGKhpcfTgkTU4Mni35+8jGnZnQw87o5w/CVLO3aTmr3zsdFC6k0tWRUqZTn1qrkzVrnzzp1fGSlotEZgL0aTm7Ixuu2SR2djScou/J6HVpLVGbA0FCKj8+psjErl9afNK3AmFBNapE0noaaS0XQxp4sUaEXmVlo9DNGjFVFmimtbpq66nUow1n736CcRR313psSr4q7TwNNUZSjCKe7ZpJfzI2fRtL/5w+yhGIlfD1Ivllt0zLQ7nmzNuL4PPbMwNN003CLeaau4pv12Y9qbNUvPxhBXjShKMUv5lK+nysd/Y9L0X16n52cbau3aWHxFRZXUlkhBqO6oyWur+KLOicV4+dKUcratmV13o04LBTqXUY3srt8ku/wCRXae1ZVnpCNOKbkoxu9Xxd3+lg2ZtepQcrKMlOOWSd1p1XM1vp0x0sJsqTnDNBqOV53xSunZnV2Zs+ClVi4qSjJZc0U2k9UK2b5UULU6c4ThpGLm8rgn2vuO5g6XpcR1p/kMb/p1dmY52KwUFUoJQglKUk1lWu7zHbSwFNUarVOCahJpqKunY142l6XDe/P8AIx21afoK39ufgPJznLi7XwdNYPMoRUstLeUUnq1zOf5N4eMo1M0U7NWuk+R3NtQ/0P1KXjE5fkxHdqdY+BfL034rYimk2krLs7jG1ZnSx3r/AFf1MNZczXLPc9FNFUWZRM6OSkuIqqtB0xcuBRkYtjJFGhUUZDJZDI0gAABca/aXdVNMzAZ118YCYOzTIII0dXq5mKACEmLU4OTSXM7+BwkYR7XzZz9nxitb6s7FE1I527TqSNajw6mWmbIcupnpeYuka8Ot1dEZ5LRmrC+quhz6rfPK+FhrP3l4FcRG1SHfGQ7CetU95eAYmN6kfck/Azvt08WHH07Rku23iejhaSTXB6o4WN1g308TpbGq3i4PjB6dH/jHXzUz2jY8PRfXqfnZ8s2vUzYivLtq1PzM+r7GXovr1PzM+R4t3qVH2zm/xMcfSzISFiQbOuMIPp3kxeUMz1bpYa7/AOJHzKJ9M8ipZqF37FJfZi1+hj9PUb5mtuOh6XDe/P8AIxu1o+grf25+BOPXpcN78/yMvtf/AG9b+3PwOW/GvFyttL/Q/Uo+MTk+TS3avWPgzsba/wBh/wAdHxicbybe7V6x8Gal9VM9jaL9LFdsPBmPF1LIbtSfp6futCq0FLR/sduXPpgnWfaZcVO8ePYbJ4SN/wCb7TOTU0bXY2jblPqt33hd95vw+HjKKbvdmGejfUYsqLsLmmjSTV2S6SGU8oyEj5QRGUYeRFwv3jnFEZBhsZwADLoAABaAAAQSpNcDTR2hOPO/UygNLHYobZ9qPxR0qe2KXtHlQH0kx7XD7TpVbxg9UuDOng57q6HzvDVnCSkuXgeupY1uEWnZWRjrhudSfXbwlXeqe8vAtOr6aC7YT/Q4NLGSUpNPmr356D6eNvUhJ6WjJeBjrix0575vpvxTeSSt/lzds+MoVU2t2ScXquPFGHEYhODtpdLxNNPGK6u8ut9dOBm243Pzm/W7Y0l5r69T87PmHlBh/NYqvDkqkmvdlvL7mj3+ycbBU7OUU89Tn/W7Hg/KWrnxdeX9dl0jFL9C/nvlWP0mcxzCQA9EcEJHv/8Ax5iHKlVi/wCSUEujTa/U8Cei8kce6fnYq6vlndd11b7zH6TeW+Ll9vc7RqJVMO3olOd2+W4ym08XTlQrKM4t+bnpfXh2HDxmIzunecm3J+s1aO6cjF7QhZxi81002lov35nDn89+u3XWfx2fKPGSjhqMFly1IRzX47qi1Y8/gNpTpKWXLaTjmvxduzUVjsZGcaaV80cyafDlaxmpVNGdZxkyuXXe3Y6GNxsalWnKN+CTXY2+BqkcBys0+yzO83odJ8c+rpVU4Vdb0urO7M4eIW8+pq/HKfXQwfqRObUW8+rOlhfUj/nM51Ti+rLfhPrXhvUXVkyJwq3PiwkajFKYtjJFGKRUAAisoABzx3AABAAAFAAAMAAAIA62y8XaOV624dDklqU3Fpoalehoyu5Plx+4XtKcmopLK7Pu00Of/FTXqvja/LWxWWIctea+/Ral9E116G0Jxp5Zauzte1uOnA1YjalKbvaXvZtPkcDf0v0/6LQnFJ3S1vq1omZ8Z9b/AOnUmNrxjV0pOLzNp2g1b4tO5x8bNyqTk9czzXso3vrwXA01dHa1+dhdWhfV3i3rZ9nBeBc/xnWUB6w3f9wyGHS7+prE8mZU2+CGYCvKnUTjo2nDX+pWv87P4GtIHYXnUneD+Lq2blKelrXlLR63aM/nNVpxWut9DU5X42fVJlZUou2jVuFtVqZ8V8pWWWl+9E0eY6thssb6t31srpLryE0OfwCol6y72vE9A+BwJ+tHqvE70ufd+xZGaozi4ji+p2Wzj4j1mVmN2G9SJzanF9WdPDLcj0OZV4vqW/Gefrfg/wD1/FkSJwT3PiyJGozSpi2XkUYpFQADNVlAAMO4AAAAABoAAB6AAAUBBIGRenroalTS4a9eFzCdfZdWm0lNJtN8UiVrmbcLw9PW8svCyyqMfnZal6OCbd3kte/q3fRX5HSn5qzSjHh7KJn5t8N3otPkSV1v55Pq1KMV3P72c/ajvO6vokte4ViMRFpyvJyUrK1rWMv8U+d+7Vm+Y499WzDCbmZ1u4iVZm9c8apSKqRn86DqsaY1Z+o1SXFX63MCqsmNZr9gY35m3w7npxXO4z6PXGLv1VjFHEvklfqdLBYxNapJrs1uY79e46flJuVzpQ31f2l4nUq1471mmy1TEwSu1f4I51bFO+7ouzLFGebb/F/Tmc/KvGo9bmGvLeYxzd+JmqPVnSuMjr4V7kehzKvrPqx+HqLKrmao9X1F+JzPbZhpbnxZMpGalLd+JLNSs2ezJMo2LZFxqzle4XF3Ai+JQBYmxzdUATYiwAAWCwAAWCwAAWAugAAIoAAA00MZJaPVD8RWzJW4czn2G0arXQG1E0VTGOzFyNM4GQAWGqAABosmFypITF6cuI+lO1zOmTGYXGmVUTJlc5VzBV7ipE5irCYZFi5PUkgEi8XoWzC0wuXU8V2yLlAGr4r3C5QBpgAAMNgAAAAAAAAAAAAAAAAAAAAAAAAACYAAAoAAAAAAAAAJgAACgAAAAAAAAAAAAJgAABj/2Q==');
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
+  .scroll {
+
+    .notice {
+      font-size: 1.2rem;
+      height: 4rem;
+      color: @second-text-color;
       display: flex;
-      justify-content: space-between;
-      /*background: url("../../assets/img/icon/top-bg.jpg");*/
-      padding: 20px;
-      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
 
-      .left {
-        font-size: 1.2rem;
-        height: 26px;
-        display: flex;
-        padding-right: 13px;
-        padding-left: 5px;
-        align-items: center;
-        border-radius: 20px;
-        background: rgba(82, 80, 80, 0.5);
+      img {
+        height: 1.2rem;
+        margin-right: .5rem;
+      }
+    }
 
-        img {
-          padding: .6rem;
-          width: 1.8rem;
+    .collect {
+      padding: .7rem;
+
+      .video {
+        background: @active-main-bg;
+        border-radius: .5rem;
+        padding: 1rem;
+        margin-bottom: .7rem;
+
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+
+          .left {
+            display: flex;
+            align-items: center;
+            color: gainsboro;
+
+            img {
+              height: 2rem;
+              margin-right: .5rem;
+            }
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            color: @second-text-color;
+          }
+        }
+
+        .list {
+          display: grid;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+
+          .item {
+            height: calc(33.33vw * 1.3);
+            padding: .2rem;
+            overflow: hidden;
+            position: relative;
+
+            .poster {
+              border-radius: .4rem;
+              width: 100%;
+              height: 100%;
+              display: block;
+            }
+
+            .num {
+              color: white;
+              position: absolute;
+              bottom: .5rem;
+              left: .5rem;
+              display: flex;
+              align-items: center;
+              font-size: 1.4rem;
+
+              .love {
+                width: 1.4rem;
+                height: 1.4rem;
+                margin-right: .5rem;
+              }
+            }
+          }
         }
       }
 
-      .right {
-        img {
-          margin-left: 2rem;
-          border-radius: 50%;
-          background: rgba(82, 80, 80, 0.5);
-          padding: .6rem;
-          width: 1.8rem;
+      .audio {
+        background: @active-main-bg;
+        border-radius: .5rem;
+        padding: 1rem;
+
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+
+          .left {
+            display: flex;
+            align-items: center;
+            color: gainsboro;
+
+            img {
+              height: 1.5rem;
+              margin-right: .5rem;
+            }
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            color: @second-text-color;
+          }
         }
+
+        .list {
+          display: grid;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+
+          .item {
+            padding: .2rem;
+            overflow: hidden;
+            position: relative;
+
+            .poster {
+              border-radius: .4rem;
+              width: 100%;
+              height: calc((100vw - 3.4rem) / 3);
+              display: block;
+            }
+
+            .title {
+              margin-top: .5rem;
+              color: @second-text-color;
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .float {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 4.6rem;
+    padding: 0 1.5rem;
+    background: transparent;
+    transition: all .2s;
+
+    .center {
+      color: white;
+    }
+
+    &.fixed {
+      background: @main-bg;
+
+      img {
+        background: @main-bg !important;
       }
     }
 
+    .left {
+      font-size: 1.2rem;
+      height: 2.6rem;
+      display: flex;
+      padding-right: 1.3rem;
+      padding-left: .5rem;
+      align-items: center;
+      border-radius: 2rem;
+      background: rgba(82, 80, 80, 0.5);
+
+      img {
+        padding: .6rem;
+        width: 1.8rem;
+      }
+    }
+
+    .right {
+      img {
+        margin-left: 2rem;
+        border-radius: 50%;
+        background: rgba(82, 80, 80, 0.5);
+        padding: .6rem;
+        width: 1.8rem;
+      }
+    }
+  }
+
+  .desc {
+    header {
+      color: white;
+      height: 12rem;
+      background-image: url('../../assets/img/header-bg.png');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      box-sizing: border-box;
+    }
+
     .detail {
       background: @main-bg;
-      padding: 0 20px;
+      padding: 0 2rem;
 
       .head {
         width: 100%;
@@ -379,32 +1001,41 @@ export default {
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
-        transform: translateY(-20px);
+        transform: translateY(-2rem);
 
         .head-image {
           background: black;
-          padding: 2px;
+          padding: .3rem;
           border-radius: 50%;
           width: 80px;
           height: 80px;
         }
 
         .my-buttons {
+          margin-left: 1rem;
+          flex: 1;
+          display: flex;
+
           div {
             font-size: 1.2rem;
             display: flex;
             align-items: center;
             justify-content: center;
             float: left;
-            border-radius: 2px;
+            border-radius: .2rem;
             background: @second-btn-color;
-            margin-left: 5px;
-            padding: 0 10px;
-            height: 30px;
+            margin-left: .5rem;
+            padding: 0 1rem;
+            height: 3rem;
             color: white;
 
+            &:nth-child(0) {
+              flex: 2;
+            }
+
             &:nth-child(1) {
-              padding: 0 25px;
+              flex: 1;
+              padding: 0 2.5rem;
             }
 
             img {
@@ -419,7 +1050,41 @@ export default {
       .description {
         font-size: 1.2rem;
         color: white;
-        transform: translateY(-20px);
+        transform: translateY(-2rem);
+
+        .signature {
+          //color: @second-text-color;
+          color: white;
+          font-size: 1.3rem;
+          display: flex;
+          align-items: center;
+          margin-bottom: .5rem;
+
+          img {
+            height: 1.2rem;
+            margin-left: .6rem;
+          }
+        }
+
+        .more {
+          color: @second-text-color;
+          display: flex;
+
+          .item {
+            padding: .2rem .5rem;
+            border-radius: .2rem;
+            background: @second-btn-color-tran;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            margin-right: .5rem;
+
+            img {
+              height: 1rem;
+              margin-right: .2rem;
+            }
+          }
+        }
 
         .number {
           color: @second-text-color;
@@ -429,27 +1094,61 @@ export default {
           align-items: center;
 
           img {
-            width: 18px;
-            margin-left: 5px;
+            width: 1.6rem;
+            margin-left: .5rem;
           }
-
         }
 
         .heat {
+          margin-top: 1rem;
           color: darkgray;
           display: flex;
           align-items: center;
 
           .num {
             color: white;
-            font-size: 1.8rem;
+            font-size: 1.4rem;
             font-weight: bold;
-            margin-right: 3px;
+            margin-right: .3rem;
           }
 
           .text {
-            font-size: 1.4rem;
-            margin-right: 10px;
+            font-size: 1.2rem;
+            margin-right: 1rem;
+          }
+        }
+      }
+
+      .other {
+        display: flex;
+        margin-bottom: 1rem;
+
+        .item {
+          margin-right: 2.5rem;
+          display: flex;
+
+          img {
+            margin-right: .8rem;
+            border-radius: .4rem;
+            background: @second-btn-color-tran;
+            padding: .8rem;
+            height: 2.2rem;
+          }
+
+          .right {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .top {
+              color: white;
+              font-size: 1.4rem;
+            }
+
+            .bottom {
+              color: @second-text-color;
+              font-size: 1.2rem;
+            }
           }
         }
       }
diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue
deleted file mode 100644
index ca85ab1..0000000
--- a/src/pages/me/Me2.vue
+++ /dev/null
@@ -1,1267 +0,0 @@
-<template>
-  <div class="Me">
-    <SlideRowList style="width: 100vw;" v-model:active-index="baseActiveIndex">
-      <SlideItem>
-        <div ref="float" class="float" :class="floatFixed?'fixed':''">
-          <div class="left" style="opacity: 0;">
-            <img src="../../assets/img/icon/next.svg" alt="">
-            <span>切换账号</span>
-          </div>
-          <transition name="fade">
-            <div class="center" v-if="floatShowName">
-              <p class="name f22 mt1r mb1r">ttentau</p>
-            </div>
-          </transition>
-          <div class="right">
-            <img :style="floatFixed?'opacity: 0;':''" src="../../assets/img/icon/me/finger-right.png" alt="">
-            <img src="../../assets/img/icon/me/menu.png" alt="" @click.stop="baseActiveIndex = 1">
-          </div>
-        </div>
-        <div class="scroll"
-             ref="scroll"
-             @touchstart="touchStart($event)"
-             @touchmove="touchMove($event)"
-             @touchend="touchEnd($event)">
-          <div ref="desc" class="desc">
-            <header ref="header"></header>
-            <div class="detail">
-              <div class="head">
-                <img src="../../assets/img/icon/head-image.jpeg" class="head-image">
-                <div class="other-buttons" v-if="false">
-                  <div class="attention">
-                    关注
-                  </div>
-                  <div class="more-attention">
-                    -
-                  </div>
-                </div>
-                <div class="my-buttons ">
-                  <div class="collect" @click="$nav('/edit-userinfo')">
-                    <span class="mr1r">编辑资料</span>
-<!--                    <span class="f10p" style="color: darkgray">85%</span>-->
-                  </div>
-                  <div class="add-friend" @click="$nav('/find-acquaintance')">
-                    <img src="../../assets/img/icon/add-white.png" alt="">
-                    <span class="mr5p">熟人</span>
-                  </div>
-                </div>
-              </div>
-              <div class="description">
-                <p class="name f22 mt1r mb1r">ttentau</p>
-                <div class="number mb1r">
-                  <span class="mr1r">私密账号</span>
-                  <span>抖音号：605128307</span>
-                  <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
-                </div>
-                <div class="signature" @click="$nav('/edit-userinfo-item',{type:3})">
-                  <template v-if="!userinfo.desc">
-                    <template v-if="false">
-                      <!--                      有个版本是这样子的，应该是灰度测试-->
-                      <span>点击添加介绍，让大家认识你...</span>
-                      <img src="../../assets/img/icon/me/write-gray.png" alt="">
-                    </template>
-                    <span>你还没有填写个人简介，点击添加...</span>
-                  </template>
-                  <span v-else class="text">{{ userinfo.desc }}</span>
-                </div>
-                <div class="more">
-                  <div class="age item" v-if="userinfo.birthday">
-                    <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
-                    <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
-                    <span>{{ filterAge(userinfo.birthday) }}岁</span>
-                  </div>
-                  <div class="item" v-if="userinfo.location">
-                    {{ userinfo.location }}
-                  </div>
-                  <div class="item" v-if="userinfo.school.name">
-                    {{ userinfo.school.name }}
-                  </div>
-                </div>
-                <div class="heat">
-                  <div class="text"><span class="num">8</span>获赞</div>
-                  <div class="text"><span class="num">8</span>关注</div>
-                  <div class="text"><span class="num">8</span>粉丝</div>
-                </div>
-              </div>
-              <div class="other">
-                <div class="item">
-                  <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
-                  <div class="right">
-                    <div class="top">抖音商城</div>
-                    <div class="bottom">发现超值好物</div>
-                  </div>
-                </div>
-                <div class="item">
-                  <img src="../../assets/img/icon/me/music-white.png" alt="">
-                  <div class="right">
-                    <div class="top">我的音乐</div>
-                    <div class="bottom">已收藏20首</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <Indicator
-              :class="indicatorFixed?'fffffffff':''"
-              name="videoList"
-              tabStyleWidth="25%"
-              :tabTexts="['作品','私密','喜欢','收藏']"
-              v-model:active-index="contentIndex">
-          </Indicator>
-          <SlideRowList
-              ref="videoSlideRowList"
-              name="videoList"
-              :style="videoSlideRowListStyle"
-              v-model:active-index="contentIndex">
-            <SlideItem class="SlideItem"
-                       @touchmove="move"
-                       @scroll="scroll"
-                       :style="isScroll?'overflow: auto;':''">
-              <Posters v-if="videos.my.total !== -1" :list="videos.my.list"></Posters>
-              <Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-            <SlideItem class="SlideItem"
-                       @touchmove="'move'"
-                       :style="isScroll?'overflow: auto;':''">
-              <div class="notice">
-                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-                <span>只有你能看到设为私密的作品和日常</span>
-              </div>
-              <Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
-              <Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-            <SlideItem class="SlideItem"
-                       @touchmove="move"
-                       :style="isScroll?'overflow: auto;':''">
-              <div class="notice">
-                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-                <span>只有你能看到自己的喜欢列表</span>
-              </div>
-              <Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
-              <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-            <SlideItem class="SlideItem"
-                       @touchmove="move"
-                       :style="isScroll?'overflow: auto;':''">
-              <div class="notice">
-                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-                <span>只有你能看到自己的收藏列表</span>
-              </div>
-              <div class="collect" ref="collect">
-                <div class="video" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
-                      <span>视频</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="num">
-                        <img class="love" src="../../assets/img/icon/love.svg" alt="">
-                        <span>{{ $likeNum(i.likeNum) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="audio" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
-                      <span>音乐</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
-                      </div>
-                    </div>
-                  </div>
-
-                </div>
-              </div>
-              <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-          </SlideRowList>
-        </div>
-        <Footer v-bind:init-tab="5"/>
-        <transition name="fade">
-          <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
-        </transition>
-      </SlideItem>
-      <SlideItem style="min-width: 70vw; overflow:auto;">
-        <transition name="fade1">
-          <div class="ul" v-if="!isMoreFunction">
-            <div class="li" @click="$nav('/my-card')">
-              <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="">
-              <span>我的订单</span>
-            </div>
-            <div class="li" @click="$nav('MyCard')">
-              <img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="">
-              <span>钱包</span>
-            </div>
-            <div class="line"></div>
-
-            <div class="li" @click="$nav('/me/right-menu/look-history')">
-              <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
-              <span>观看历史</span>
-            </div>
-            <div class="li" @click="$nav('/my-card')">
-              <img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="">
-              <span>我的二维码</span>
-            </div>
-            <div class="li" @click="$nav('')">
-              <img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="">
-              <span>创作者服务中心</span>
-            </div>
-
-            <div class="line"></div>
-
-            <div class="li" @click="$nav('MyCard')">
-              <img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="">
-              <span>小程序</span>
-            </div>
-            <div class="li" @click="$nav('MyCard')">
-              <img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="">
-              <span>抖音公益</span>
-            </div>
-            <div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
-              <img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="">
-              <span>未成年保护工具</span>
-            </div>
-            <div class="li" @click="$nav('MyCard')">
-              <img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="">
-              <span>我的客服</span>
-            </div>
-            <div class="li" @click="$nav('/me/right-menu/setting')">
-              <img src="../../assets/img/icon/newicon/left_menu/setting-one.png" alt="">
-              <span>设置</span>
-            </div>
-          </div>
-          <div v-else class="more-function">
-            <div class="title">生活服务</div>
-            <div class="functions">
-              <div class="function">
-                <img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="">
-                <span>卡券</span>
-              </div>
-              <div class="function">
-                <img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="">
-                <span>免流量</span>
-              </div>
-              <div class="function" @click="$nav('MyCollect')">
-                <img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="">
-                <span>视频彩铃</span>
-              </div>
-            </div>
-            <div class="title">拓展功能</div>
-            <div class="functions">
-              <div class="function" @click="$nav('MyCard')">
-                <img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="">
-                <span>我的动态</span>
-              </div>
-              <div class="function">
-                <img src="../../assets/img/icon/newicon/left_menu/download.png" alt="">
-                <span>我的缓存</span>
-              </div>
-              <div class="function" @click="$nav('MyCard')">
-                <img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="">
-                <span>上热门</span>
-              </div>
-              <div class="function" @click="$nav('MyCollect')">
-                <img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="">
-                <span>小店随心推</span>
-              </div>
-              <div class="function" @click="$nav('MyCollect')">
-                <img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="">
-                <span>投教园地</span>
-              </div>
-            </div>
-          </div>
-        </transition>
-        <div class="button-ctn">
-          <div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
-            <img src="../../assets/img/icon/newicon/left_menu/more.png" alt="">
-            <span>更多功能</span>
-          </div>
-          <div class="button" v-if="isMoreFunction" @click="isMoreFunction = false">
-            <span>返回</span>
-          </div>
-        </div>
-      </SlideItem>
-    </SlideRowList>
-  </div>
-</template>
-<script>
-import Posters from '../../components/Posters'
-import Footer from "../../components/Footer";
-import Indicator from '../../components/Indicator'
-import {nextTick} from 'vue'
-import {mapState} from "vuex";
-
-export default {
-  name: "Me",
-  components: {Posters, Footer, Indicator},
-  data() {
-    return {
-      contentIndex: 0,
-      baseActiveIndex: 0,
-      tabContents: [],
-      indicatorFixed: false,
-      floatFixed: false,
-      floatShowName: false,
-      isScroll: false,
-      isMoreFunction: false,
-      refs: {
-        header: null,
-        headerHeight: 0,
-        descHeight: 0,
-        videoSlideHeight: 0,
-        maxSlideHeight: 0
-      },
-      videoItemHeight: 0,
-      startLocationY: 0,
-      fixedLocationY: 0,
-      moveYDistance: 0,
-      startTime: 0,
-      floatHeight: 46,
-      videos: {
-        my: {
-          list: [],
-          total: -1,
-          pageNo: 0
-        },
-        private: {
-          list: [],
-          total: -1
-        },
-        like: {
-          list: [],
-          total: -1
-        },
-        collect: {
-          video: {
-            list: [],
-            total: -1,
-          },
-          audio: {
-            list: [],
-            total: -1,
-          }
-        },
-      },
-      pageSize: 15,
-      initSlideHeight: 0,
-      loadings: {
-        loading0: false,
-        loading1: false,
-        loading2: false,
-        loading3: false,
-      },
-    }
-  },
-  computed: {
-    bodyHeight() {
-      return this.$store.state.bodyHeight
-    },
-    bodyWidth() {
-      return this.$store.state.bodyWidth
-    },
-    videoSlideRowListStyle() {
-      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
-    },
-    ...mapState({
-      userinfo: 'userinfo',
-    })
-  },
-  watch: {
-    contentIndex(newVal, oldVal) {
-      this.changeIndex(newVal, oldVal)
-    },
-  },
-  mounted() {
-    setTimeout(() => {
-      this.refs.header = this.$refs.header
-      this.refs.headerHeight = this.$refs.header.offsetHeight
-      this.refs.descHeight = this.$refs.desc.offsetHeight
-      this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
-      this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight - 50
-      this.changeIndex(0, null)
-    })
-    this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
-  },
-  methods: {
-    click(e) {
-      if (this.baseActiveIndex === 0) return
-      if (this.baseActiveIndex === 1) {
-        this.baseActiveIndex = 0
-        this.$stopPropagation(e)
-      }
-    },
-    async getScrollAreaHeight(index = this.contentIndex) {
-      let scrollAreaHeight = 0
-      if (index === 3) {
-        await nextTick(async () => {
-          scrollAreaHeight = this.$refs.collect.clientHeight + 60 + 40
-        })
-      } else {
-        scrollAreaHeight = Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) * this.videoItemHeight
-        switch (index) {
-          case 0:
-            scrollAreaHeight += 60
-            break
-          case 1:
-            scrollAreaHeight += 60 + 40
-            break
-          case 2:
-            scrollAreaHeight += 60 + 40
-            break
-        }
-      }
-      // console.log('scrollAreaHeight',scrollAreaHeight)
-      return scrollAreaHeight
-    },
-    async changeIndex(newVal, oldVal) {
-      if (this.loadings['loading' + newVal]) return
-      let videoOb = this.videos[Object.keys(this.videos)[newVal]]
-      if (newVal === 3) {
-        if (videoOb.video.total === -1) {
-          this.loadings['loading' + newVal] = true
-          let res = await this.$api.videos.collect({pageNo: this.videos.collect.pageNo, pageSize: this.pageSize,})
-          this.loadings['loading' + newVal] = false
-          if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
-        }
-      } else {
-        if (videoOb.total === -1) {
-          this.loadings['loading' + newVal] = true
-          let res
-          switch (newVal) {
-            case 0:
-              res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
-              break
-            case 1:
-              res = await this.$api.videos.private({pageNo: this.videos.private.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
-              break
-            case 2:
-              res = await this.$api.videos.like({pageNo: this.videos.like.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
-              break
-          }
-          this.loadings['loading' + newVal] = false
-        }
-      }
-      let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
-
-      if (oldVal !== null) {
-        let transformY = this.getTransform(this.$refs.scroll)
-        // console.log('transformY', transformY)
-        let screenSlideHeight = this.initSlideHeight + Math.abs(transformY)
-        // console.log('screenSlideHeight', screenSlideHeight)
-        // console.log('scrollAreaHeight', scrollAreaHeight)
-// debugger
-        if (this.indicatorFixed) {
-          this.refs.videoSlideHeight = scrollAreaHeight > screenSlideHeight ? scrollAreaHeight : screenSlideHeight
-
-          if (scrollAreaHeight > this.refs.maxSlideHeight) {
-            this.refs.videoSlideHeight = this.refs.maxSlideHeight
-          }
-        } else {
-          this.refs.videoSlideHeight = scrollAreaHeight
-          if (scrollAreaHeight > this.refs.maxSlideHeight) {
-            this.refs.videoSlideHeight = this.refs.maxSlideHeight
-          }
-        }
-      } else {
-        if (scrollAreaHeight < this.refs.maxSlideHeight) {
-          this.refs.videoSlideHeight = scrollAreaHeight
-        } else {
-          this.refs.videoSlideHeight = this.refs.maxSlideHeight
-        }
-      }
-    },
-    async loadMoreData() {
-      if (this.loadings['loading' + this.contentIndex]) return
-      let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
-      if (videoOb.total > videoOb.list.length) {
-        videoOb.pageNo++
-        this.loadings['loading' + this.contentIndex] = true
-        let res
-        switch (this.contentIndex) {
-          case 0:
-            res = await this.$api.videos.my({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
-            break
-          case 1:
-            res = await this.$api.videos.private({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
-            break
-          case 2:
-            res = await this.$api.videos.like({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
-            break
-          case 3:
-            res = await this.$api.videos.collect({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
-            break
-        }
-        this.loadings['loading' + this.contentIndex] = false
-        if (res.code === this.SUCCESS_CODE) {
-          videoOb.list = videoOb.list.concat(res.data.list)
-        }
-      }
-    },
-    touchStart(e) {
-      this.$refs.scroll.style.transition = 'none'
-      this.fixedLocationY = this.startLocationY = e.touches[0].pageY
-      this.startTime = Date.now()
-    },
-    move(e) {
-      (!this.isScroll) && e.preventDefault();
-    },
-    async scroll() {
-      if (this.indicatorFixed) {
-        let scrollAreaHeight = await this.getScrollAreaHeight()
-        let SlideItems = document.querySelectorAll('.SlideItem')
-        let SlideItem = SlideItems[this.contentIndex]
-        if (scrollAreaHeight - this.refs.videoSlideHeight < SlideItem.scrollTop + 60) {
-          this.loadMoreData()
-        }
-      }
-    },
-    async touchMove(e) {
-      let canTransformY = this.refs.descHeight - this.floatHeight
-      let touchMoveDistance = e.touches[0].pageY - this.startLocationY
-      let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
-      // console.log('move-pageMoveDistance', pageMoveDistance)
-      // console.log('move-touchMoveDistance', touchMoveDistance)
-
-      //页面已经滚动到头了，往下划动，要把header图放大
-      if (pageMoveDistance > 0) {
-        this.$refs.scroll.style.transform = `translate3d(0,0,0)`
-        if (pageMoveDistance < 400) {
-          this.refs.header.style.transition = 'all 0s'
-          this.refs.header.style.height = this.refs.headerHeight + (pageMoveDistance / 2) + 'px'
-        } else {
-          this.startLocationY = e.touches[0].pageY
-          this.moveYDistance = 400
-        }
-      } else {
-        let scrollAreaHeight = await this.getScrollAreaHeight()
-        //往下划动
-        if (touchMoveDistance > 0) {
-          //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
-          if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(touchMoveDistance) > 20) {
-            this.$refs.scroll.style.transition = 'all .2s'
-            this.$refs.scroll.style.transform = `translate3d(0,0,0)`
-            this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
-            this.moveYDistance = 0
-            this.startLocationY = e.touches[0].pageY
-            this.changeIndex(this.contentIndex, this.contentIndex)
-            let SlideItems = document.querySelectorAll('.SlideItem')
-            SlideItems.forEach(SlideItem => {
-              SlideItem.style.overflow = 'auto'
-              SlideItem.scrollTop = 0
-            })
-            SlideItems.forEach(SlideItem => {
-              SlideItem.style.overflow = 'hidden'
-            })
-            return;
-          }
-        }
-        if (this.indicatorFixed) {
-          let SlideItems = document.querySelectorAll('.SlideItem')
-          let SlideItem = SlideItems[this.contentIndex]
-          if (!this.isScroll) {
-            SlideItem.style.overflow = 'auto'
-            SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
-          }
-
-          if (scrollAreaHeight - this.refs.videoSlideHeight < SlideItem.scrollTop + 60) {
-            this.loadMoreData()
-          }
-
-          if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
-            this.isScroll = this.indicatorFixed = false
-            SlideItem.style.overflow = 'hidden'
-            this.startLocationY = e.touches[0].pageY
-            this.moveYDistance = -this.refs.descHeight + this.floatHeight
-          }
-        } else {
-          if (this.initSlideHeight > this.refs.videoSlideHeight) return
-          if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
-            let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
-            // console.log('canTransformY', canTransformY)
-            // console.log('endTransformY', endTransformY)
-            let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
-            this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
-            this.floatFixed = Math.abs(moveTransformY) > 100
-            this.floatShowName = Math.abs(moveTransformY) > 150
-          } else {
-            this.indicatorFixed = Math.abs(pageMoveDistance) > canTransformY
-            this.floatFixed = Math.abs(pageMoveDistance) > 100
-            this.floatShowName = Math.abs(pageMoveDistance) > 150
-            this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -canTransformY : pageMoveDistance}px,0)`
-          }
-          if (this.indicatorFixed) {
-            this.fixedLocationY = e.touches[0].pageY
-          }
-        }
-      }
-
-    },
-    touchEnd(e) {
-      let canTransformY = this.refs.descHeight - this.floatHeight
-      let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
-      let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
-      // console.log('end-pageMoveDistance', pageMoveDistance)
-
-      let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
-      if (this.indicatorFixed) {
-        this.moveYDistance = -canTransformY
-        this.isScroll = true
-      } else {
-        // debugger
-        if (pageMoveDistance > 0) {
-          this.refs.header.style.transition = 'all .3s'
-          this.refs.header.style.height = this.refs.headerHeight + 'px'
-          this.moveYDistance = 0
-          this.floatShowName = this.floatFixed = this.isScroll = false
-        } else {
-
-          if (this.initSlideHeight > this.refs.videoSlideHeight) {
-            return this.moveYDistance = 0
-          }
-          let endTime = Date.now()
-          let gapTime = endTime - this.startTime
-          //距离太小
-          if (Math.abs(touchMoveDistance) < 20) gapTime = 1000
-          //超过header的1/3
-          if (Math.abs(touchMoveDistance) > (this.refs.descHeight / 2)) gapTime = 50
-          // console.log('时间', gapTime)
-          if (gapTime < 150) {
-            //往上划
-            if (touchMoveDistance > 0) {
-              //时间短，滑动距离长，则应该快速滚动到顶部
-              gapTime = endTime - this.startTime
-              if (gapTime < 100 && Math.abs(touchMoveDistance) > 100) {
-                //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
-                this.$refs.scroll.style.transition = 'none'
-                let transformY = this.getTransform(this.$refs.scroll)
-                //当前的transformY
-                // console.log('transformY', transformY)
-                let timer
-                cancelAnimationFrame(timer);
-                let fn = () => {
-                  //说明没到顶
-                  if (transformY < 0) {
-                    transformY = transformY + 40
-                    this.$refs.scroll.style.transform = `translate3d(0,${transformY > 0 ? 0 : transformY}px,0)`
-                    timer = requestAnimationFrame(fn);
-                  } else {
-                    //transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
-                    if (transformY !== 0) {
-                      if (this.$getCss(this.refs.header, 'height') < 400) {
-                        this.refs.header.style.transition = 'none'
-                        this.refs.header.style.height = this.$getCss(this.refs.header, 'height') + 10 + 'px'
-                        timer = requestAnimationFrame(fn);
-                      } else {
-                        this.refs.header.style.transition = 'all .6s'
-                        this.refs.header.style.height = this.refs.headerHeight + 'px'
-                        this.moveYDistance = 0
-                        cancelAnimationFrame(timer);
-                      }
-                    } else {
-                      //快速动画结束
-                      this.moveYDistance = 0
-                      cancelAnimationFrame(timer);
-                    }
-                  }
-                }
-                timer = requestAnimationFrame(fn);
-              } else {
-                //正常回弹动画
-                this.$refs.scroll.style.transition = 'all .3s'
-                this.$refs.scroll.style.transform = `translate3d(0,${touchMoveDistance > 0 ? 0 : -this.refs.descHeight}px,0)`
-                this.moveYDistance = touchMoveDistance > 0 ? 0 : -this.refs.descHeight
-              }
-              this.moveYDistance = 0
-              this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
-              let SlideItems = document.querySelectorAll('.SlideItem')
-              SlideItems.forEach(SlideItem => {
-                SlideItem.style.overflow = 'auto'
-                SlideItem.scrollTop = 0
-              })
-              SlideItems.forEach(SlideItem => {
-                SlideItem.style.overflow = 'hidden'
-              })
-            } else {
-              //往下划
-              this.$refs.scroll.style.transition = 'all .3s'
-              if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
-                this.$refs.scroll.style.transform = `translate3d(0,${-endTransformY}px,0)`
-                // this.floatShowName = this.floatFixed = true
-                this.floatFixed = Math.abs(endTransformY) > 100
-                this.floatShowName = Math.abs(endTransformY) > 150
-                this.moveYDistance = -endTransformY
-              } else {
-                this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)`
-                this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
-                this.moveYDistance = -this.refs.descHeight + this.floatHeight
-                this.moveYDistance = pageMoveDistance
-              }
-            }
-          } else {
-            if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
-              let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
-              this.moveYDistance = -endTransformY
-            } else {
-              this.moveYDistance = pageMoveDistance
-            }
-          }
-        }
-      }
-      this.changeIndex(this.contentIndex, this.contentIndex)
-    },
-    getTransform(el) {
-      let transform = el.style.transform
-      if (!transform) return 0
-      // console.log('transform',transform)
-      let transformY = transform.substring(transform.indexOf('0px') + 5, transform.lastIndexOf('0px') - 4)
-      // console.log('transformY',transformY)
-      //当前的transformY
-      transformY = parseInt(transformY)
-      return transformY
-    },
-    filterAge(age) {
-      let date = new Date(age)
-      return new Date().getFullYear() - date.getFullYear()
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/scss/index";
-
-.fade1-enter-active,
-.fade1-leave-active {
-  transition: all 0.3s ease;
-}
-
-.fade1-enter-from,
-.fade1-leave-to {
-  transform: translateY(10px);
-  opacity: 0;
-}
-
-.Me {
-  background: @main-bg;
-  height: 100%;
-  width: 100%;
-  font-size: 1.4rem;
-
-  .mask{
-    background: #0000004f;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 3;
-  }
-
-  .scroll {
-
-    .notice {
-      font-size: 1.2rem;
-      height: 4rem;
-      color: @second-text-color;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      img {
-        height: 1.2rem;
-        margin-right: .5rem;
-      }
-    }
-
-    .collect {
-      padding: .7rem;
-
-      .video {
-        background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
-        margin-bottom: .7rem;
-
-        .top {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 1rem;
-
-          .left {
-            display: flex;
-            align-items: center;
-            color: gainsboro;
-
-            img {
-              height: 2rem;
-              margin-right: .5rem;
-            }
-          }
-
-          .right {
-            display: flex;
-            align-items: center;
-            color: @second-text-color;
-          }
-        }
-
-        .list {
-          display: grid;
-          grid-template-columns: 33.33% 33.33% 33.33%;
-
-          .item {
-            height: calc(33.33vw * 1.3);
-            padding: .2rem;
-            overflow: hidden;
-            position: relative;
-
-            .poster {
-              border-radius: .4rem;
-              width: 100%;
-              height: 100%;
-              display: block;
-            }
-
-            .num {
-              color: white;
-              position: absolute;
-              bottom: .5rem;
-              left: .5rem;
-              display: flex;
-              align-items: center;
-              font-size: 1.4rem;
-
-              .love {
-                width: 1.4rem;
-                height: 1.4rem;
-                margin-right: .5rem;
-              }
-            }
-          }
-        }
-      }
-
-      .audio {
-        background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
-
-        .top {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 1rem;
-
-          .left {
-            display: flex;
-            align-items: center;
-            color: gainsboro;
-
-            img {
-              height: 1.5rem;
-              margin-right: .5rem;
-            }
-          }
-
-          .right {
-            display: flex;
-            align-items: center;
-            color: @second-text-color;
-          }
-        }
-
-        .list {
-          display: grid;
-          grid-template-columns: 33.33% 33.33% 33.33%;
-
-          .item {
-            padding: .2rem;
-            overflow: hidden;
-            position: relative;
-
-            .poster {
-              border-radius: .4rem;
-              width: 100%;
-              height: calc((100vw - 3.4rem) / 3);
-              display: block;
-            }
-
-            .title {
-              margin-top: .5rem;
-              color: @second-text-color;
-            }
-          }
-        }
-      }
-    }
-
-  }
-
-  .float {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 4.6rem;
-    padding: 0 1.5rem;
-    background: transparent;
-    transition: all .2s;
-
-    .center {
-      color: white;
-    }
-
-    &.fixed {
-      background: @main-bg;
-
-      img {
-        background: @main-bg !important;
-      }
-    }
-
-    .left {
-      font-size: 1.2rem;
-      height: 2.6rem;
-      display: flex;
-      padding-right: 1.3rem;
-      padding-left: .5rem;
-      align-items: center;
-      border-radius: 2rem;
-      background: rgba(82, 80, 80, 0.5);
-
-      img {
-        padding: .6rem;
-        width: 1.8rem;
-      }
-    }
-
-    .right {
-      img {
-        margin-left: 2rem;
-        border-radius: 50%;
-        background: rgba(82, 80, 80, 0.5);
-        padding: .6rem;
-        width: 1.8rem;
-      }
-    }
-  }
-
-  .desc {
-    header {
-      color: white;
-      height: 12rem;
-      background-image: url('../../assets/img/header-bg.png');
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      box-sizing: border-box;
-    }
-
-    .detail {
-      background: @main-bg;
-      padding: 0 2rem;
-
-      .head {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-        transform: translateY(-2rem);
-
-        .head-image {
-          background: black;
-          padding: .3rem;
-          border-radius: 50%;
-          width: 80px;
-          height: 80px;
-        }
-
-        .my-buttons {
-          margin-left: 1rem;
-          flex: 1;
-          display: flex;
-
-          div {
-            font-size: 1.2rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            float: left;
-            border-radius: .2rem;
-            background: @second-btn-color;
-            margin-left: .5rem;
-            padding: 0 1rem;
-            height: 3rem;
-            color: white;
-
-            &:nth-child(0) {
-              flex: 2;
-            }
-
-            &:nth-child(1) {
-              flex: 1;
-              padding: 0 2.5rem;
-            }
-
-            img {
-              padding: 0 .6rem;
-              height: 1.2rem;
-            }
-          }
-
-        }
-      }
-
-      .description {
-        font-size: 1.2rem;
-        color: white;
-        transform: translateY(-2rem);
-
-        .signature {
-          //color: @second-text-color;
-          color: white;
-          font-size: 1.3rem;
-          display: flex;
-          align-items: center;
-          margin-bottom: .5rem;
-
-          img {
-            height: 1.2rem;
-            margin-left: .6rem;
-          }
-        }
-
-        .more {
-          color: @second-text-color;
-          display: flex;
-
-          .item {
-            padding: .2rem .5rem;
-            border-radius: .2rem;
-            background: @second-btn-color-tran;
-            font-size: 1rem;
-            display: flex;
-            align-items: center;
-            margin-right: .5rem;
-
-            img {
-              height: 1rem;
-              margin-right: .2rem;
-            }
-          }
-        }
-
-        .number {
-          color: @second-text-color;
-          padding-bottom: 2rem;
-          border-bottom: 1px solid @line-color;
-          display: flex;
-          align-items: center;
-
-          img {
-            width: 1.6rem;
-            margin-left: .5rem;
-          }
-        }
-
-        .heat {
-          margin-top: 1rem;
-          color: darkgray;
-          display: flex;
-          align-items: center;
-
-          .num {
-            color: white;
-            font-size: 1.4rem;
-            font-weight: bold;
-            margin-right: .3rem;
-          }
-
-          .text {
-            font-size: 1.2rem;
-            margin-right: 1rem;
-          }
-        }
-      }
-
-      .other {
-        display: flex;
-        margin-bottom: 1rem;
-
-        .item {
-          margin-right: 2.5rem;
-          display: flex;
-
-          img {
-            margin-right: .8rem;
-            border-radius: .4rem;
-            background: @second-btn-color-tran;
-            padding: .8rem;
-            height: 2.2rem;
-          }
-
-          .right {
-            display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-
-            .top {
-              color: white;
-              font-size: 1.4rem;
-            }
-
-            .bottom {
-              color: @second-text-color;
-              font-size: 1.2rem;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .ul {
-    font-size: 1.4rem;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    color: white;
-    background: @main-bg;
-
-    .line {
-      height: 1px;
-      background: #cccccc;
-      opacity: .1;
-      margin: 5px 20px;
-    }
-
-    .li {
-      box-sizing: border-box;
-      background: @main-bg;
-      width: 100%;
-      padding: 1rem 2rem;
-      list-style: none;
-      display: flex;
-      align-items: center;
-      line-height: 4rem;
-
-      &:nth-last-child(1) {
-        margin-bottom: 90px;
-      }
-
-      &:active {
-        background: #454b65;
-      }
-
-      img {
-        height: 20px;
-        width: 20px;
-        margin-right: 15px;
-      }
-    }
-  }
-
-  .more-function {
-    box-sizing: border-box;
-    font-size: 1.2rem;
-    width: 100%;
-    position: absolute;
-    background: @main-bg;
-
-    .title {
-      padding: 2rem 0 1rem 2rem;
-      color: gray;
-    }
-
-    .functions {
-      display: grid;
-      grid-template-columns: 33.33% 33.33%  33.33%;
-
-      color: white;
-
-      .function {
-        margin: 15px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        img {
-          border-radius: 50%;
-          background: @second-btn-color-tran;
-          padding: .6rem;
-          height: 1.6rem;
-          margin-bottom: 15px;
-        }
-      }
-    }
-  }
-
-  .button-ctn {
-    font-size: 1.4rem;
-    z-index: 99999;
-    width: 70vw;
-    position: absolute;
-    bottom: 0;
-    background: @main-bg;
-
-    .button {
-      box-sizing: border-box;
-      width: calc(100% - 4rem);
-      background: @second-btn-color;
-      margin: 2rem;
-      height: 4.5rem;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-
-      img {
-        height: 25px;
-        width: 25px;
-        margin-right: 15px;
-      }
-    }
-  }
-
-}
-</style>
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
index a493008..0a347ab 100644
--- a/src/pages/me/VideoDetail.vue
+++ b/src/pages/me/VideoDetail.vue
@@ -2,12 +2,12 @@
   <div id="video-detail">
     <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
       <SlideItem>
-        <div class="search-ctn">
-          <img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
+        <div class="search-wrapper">
+          <back class="back" @click="$back"/>
           <Search></Search>
         </div>
         <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
-          <SlideItem :style="itemTop" v-for="(item,index)  of videos">
+          <SlideItem :style="itemTop" v-for="(item,index)  of videos2">
             <Video1
                 :disabled="videoActiveIndex !== addCount + index"
                 v-model:video="videos[index]"
@@ -103,7 +103,6 @@
         </div>
       </div>
     </from-bottom-dialog>
-
     <from-bottom-dialog
         v-model="dialog.permissionDialog"
         height="40vh"
@@ -139,9 +138,7 @@
             <img src="../../assets/img/icon/head-image.jpeg" alt="">
           </div>
         </div>
-        <div class="space">
-
-        </div>
+        <div class="space"></div>
         <div class="setting pb4r">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
           <div class="right">
@@ -340,6 +337,7 @@ export default {
           duration: 99
         },
       ],
+      videos2: [],
       addCount: 0,
       total: 10,
       baseActiveIndex: 0,
@@ -358,15 +356,26 @@ export default {
       return {top: this.addCount * 812 + 'px'}
     },
   },
-  mounted() {
+  created() {
     // this.height = document.body.clientHeight
     // this.width = document.body.clientWidth
-  },
-  created() {
-    if (process.env.NODE_ENV !== 'development') {
-      this.videos = this.$clone(this.videos1)
+    for (let i = 0; i < 53; i++) {
+      this.videos2.push(
+          {
+            // videoUrl: mp40,
+            videoUrl: `http://douyin.ttentau.top/${i}.mp4`,
+            videoPoster: src1Bg,
+            isLoved: true,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          })
     }
-  },
+    // if (process.env.NODE_ENV !== 'development') {
+    //   this.videos = this.$clone(this.videos1)
+    // }
+  }
 }
 </script>
 
@@ -383,24 +392,23 @@ export default {
   height: 100%;
   width: 100%;
 
-  .search-ctn {
+  .search-wrapper {
     z-index: 9;
     position: fixed;
-    top: 10px;
-    left: 20px;
-    right: 20px;
+    top: 1rem;
+    left: 1.5rem;
+    right: 1.5rem;
     display: flex;
     align-items: center;
 
     .back {
-      width: 20px;
-      height: 20px;
-      margin-right: 20px;
+      width: 2rem;
+      height: 2rem;
+      margin-right: 1rem;
     }
 
-    .search {
+    .search-ctn {
       width: 100%;
-      background: rgba(50, 50, 50, .8);
     }
   }
 
@@ -460,7 +468,6 @@ export default {
 
   }
 
-
   .share-dialog {
     .collection {
       background: white;
@@ -527,7 +534,7 @@ export default {
 
   .permission-dialog {
     .space {
-      height: 10px;
+      height: 1rem;
       background: whitesmoke;
     }
 
@@ -543,12 +550,12 @@ export default {
 
       img {
         border-radius: 50%;
-        width: 30px;
-        height: 30px;
+        width: 3rem;
+        height: 3rem;
       }
 
       .right {
-        margin: 0 5px 0 15px;
+        margin: 0 .5rem 0 1.5rem;
         font-size: 1.4rem;
         width: 100%;
         display: flex;
@@ -558,9 +565,9 @@ export default {
         .share-btn {
           font-size: 1.4rem;
           color: white;
-          padding: 5px 20px;
+          padding: .5rem 2rem;
           background: @primary-btn-color;
-          border-radius: 2px;
+          border-radius: .2rem;
         }
       }
     }
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index 093f122..ba0d0d3 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -115,7 +115,7 @@
       </div>
       <div class="joined-chat-wrapper" v-show="showJoinedChat">
         <div class="nav">
-          <back @click="showJoinedChat = false" mode="white" scale="1.8"></back>
+          <back @click="showJoinedChat = false" mode="light" scale="1.8"></back>
           <span>已加入的群聊</span>
           <span>&nbsp;</span>
         </div>
@@ -229,7 +229,8 @@ export default {
       }
     }
   },
-  mounted() {
+  created() {
+    console.log(22)
   },
   methods: {
   }
diff --git a/src/router/index.js b/src/router/index.js
index 5439db8..c0625cf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,6 @@ import DeclareSchool from "../pages/me/userinfo/DeclareSchool";
 import ChooseDepartment from "../pages/me/userinfo/ChooseDepartment";
 import DisplayType from "../pages/me/userinfo/DisplayType";
 import Publish from "../pages/home/Publish";
-import Test from "../pages/home/Test";
 import ChooseLocation from "../pages/me/userinfo/ChooseLocation";
 import ChooseProvince from "../pages/me/userinfo/ChooseProvince";
 import ChooseCity from "../pages/me/userinfo/ChooseCity";
@@ -35,7 +34,6 @@ import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";
 import MinorProtectionDetailSetting from "../pages/me/rightMenu/MinorProtection/DetailSetting";
 import TriggerTime from "../pages/me/rightMenu/MinorProtection/TriggerTime";
 import Setting from "../pages/me/rightMenu/Setting";
-import Me2 from "../pages/me/Me2";
 import Login from "../pages/login/Login";
 import OtherLogin from "../pages/login/OtherLogin";
 import PasswordLogin from "../pages/login/PasswordLogin";
@@ -50,10 +48,8 @@ const routes = [
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
-  {path: '/test', component: Test},
   {path: '/message', component: Message},
-  // {path: '/me', component: Me},
-  {path: '/me', component: Me2},
+  {path: '/me', component: Me},
   {path: '/edit-userinfo', component: EditUserInfo},
   {path: '/edit-userinfo-item', component: EditUserInfoItem},
   {path: '/music', component: Music},
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 376c37a..d04c01e 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -198,6 +198,7 @@ export default {
     }
   },
   $duration(v) {
+    if (!v) return
     let m = Math.floor(v / 60)
     // let s = v % 60
     let s = Math.round(v % 60)