From d69b7bc932e114e3c7a8b45242bb6c8b4ae6dbcb Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 5 Sep 2021 14:31:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96me=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Posters.vue                    |  14 +-
 src/components/Video.vue                      |   3 +-
 src/components/home/home3.vue                 |   6 +-
 src/components/slide/SlideColumnList.vue      |   2 +-
 .../slide/SlideColumnVirtualList.vue          |   2 +-
 src/components/slide/SlideList.vue            |   6 +-
 src/config/index.js                           |   2 +-
 src/pages/home/Index 布局完成.vue             |   6 +-
 src/pages/me/Me.less                          | 495 +++++++++
 src/pages/me/Me.vue                           | 974 ++++-------------
 src/pages/me/Me1.vue                          | 536 ++++++++++
 src/pages/me/Me2.vue                          | 986 ++++++++++++++++++
 src/pages/me/Me3.vue                          |  80 +-
 src/utils/global-methods.js                   |   3 +
 14 files changed, 2306 insertions(+), 809 deletions(-)
 create mode 100644 src/pages/me/Me.less
 create mode 100644 src/pages/me/Me1.vue
 create mode 100644 src/pages/me/Me2.vue

diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index 5d2b62c..42f0f83 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list" @click="$nav('/video-detail')">
-      <img class="poster" :src="$imgPreview(i.posterUrl)" alt="">
+    <div class="poster-item" v-for="i in list">
+<!--       @click="$nav('/video-detail')"-->
+<!--      <img class="poster" :src="$imgPreview(i.video.cover.url_list[3])" alt="">-->
+      <img class="poster" :src="$imgPreview(i.cover)" alt="">
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
-        <span>{{ $likeNum(i.likeNum) }}</span>
+        <span>{{ $likeNum(i.digg_count) }}</span>
       </div>
       <div v-else class="date">
-        <div class="day">{{ getDay(i.createTime) }}</div>
-        <div class="month">{{ getMonth(i.createTime) }}</div>
+        <div class="day">{{ getDay(i.create_time) }}</div>
+        <div class="month">{{ getMonth(i.create_time) }}</div>
       </div>
     </div>
   </div>
@@ -77,7 +79,7 @@ export default {
 
 .poster-item {
   height: calc(33.33vw * 1.2);
-  border: 1px solid black;
+  border: .5px solid black;
   overflow: hidden;
   position: relative;
 
diff --git a/src/components/Video.vue b/src/components/Video.vue
index c5ffeaf..2988089 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -8,7 +8,8 @@
 <!--    <video :src="video.videoUrl" poster="../assets/img/icon/components/video/loading.gif" ref="video" muted :autoplay="play" loop>-->
 <!--    poster="../assets/img/poster/1.jpg"-->
 
-    <video :src="video.videoUrl"
+    <video :src="video.video"
+           :poster="video.origin_cover"
            ref="video"
            muted
            preload
diff --git a/src/components/home/home3.vue b/src/components/home/home3.vue
index 1cf1765..c6d73fa 100644
--- a/src/components/home/home3.vue
+++ b/src/components/home/home3.vue
@@ -166,7 +166,7 @@ export default {
         }
 
         // console.log('x------------', moveXDistance)
-        // console.log('y------------', moveYDistance)
+        // console.log('y------------', lastMoveYDistance)
         // console.log('角度------------', angle)
 
         if (angle < 0.6) {
@@ -273,10 +273,10 @@ export default {
       if (this.isCanDownWiping) {
         if (this.isDrawDown) {
           this.contentListTop = -this.currentIndex * this.height + this.moveYDistance + this.judgeValue + 'px'
-          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue})
+          // contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance + judgeValue})
         } else {
           this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px'
-          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
+          // contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance - judgeValue})
         }
       }
     },
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
index 382cba4..18be4e5 100644
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@@ -195,7 +195,7 @@ export default {
       //todo 太卡了，后面考虑用原生js来写
       // this.$attrs['onMove'] && this.$emit('move', {
       //   x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
-      //   y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
+      //   y: {distance: this.lastMoveYDistance, isDrawDown: this.isDrawDown},
       // })
 
       if (this.isCanDownWiping) {
diff --git a/src/components/slide/SlideColumnVirtualList.vue b/src/components/slide/SlideColumnVirtualList.vue
index ede6fa2..b878324 100644
--- a/src/components/slide/SlideColumnVirtualList.vue
+++ b/src/components/slide/SlideColumnVirtualList.vue
@@ -180,7 +180,7 @@ export default {
       //todo 太卡了，后面考虑用原生js来写
       // this.$attrs['onMove'] && this.$emit('move', {
       //   x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
-      //   y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
+      //   y: {distance: this.lastMoveYDistance, isDrawDown: this.isDrawDown},
       // })
 
       if (this.isCanDownWiping) {
diff --git a/src/components/slide/SlideList.vue b/src/components/slide/SlideList.vue
index 74fc0f6..a3bba43 100644
--- a/src/components/slide/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -247,7 +247,7 @@ export default {
       //todo 太卡了，后面考虑用原生js来写
       // this.$attrs['onMove'] && this.$emit('move', {
       //   x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
-      //   y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
+      //   y: {distance: this.lastMoveYDistance, isDrawDown: this.isDrawDown},
       // })
 
 
@@ -273,7 +273,7 @@ export default {
           } else {
             if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
           }
-          // this.$attrs.moveYDistance && this.$emit('moveYDistance', this.moveYDistance)
+          // this.$attrs.lastMoveYDistance && this.$emit('lastMoveYDistance', this.lastMoveYDistance)
           this.$stopPropagation(e)
           this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
         }
@@ -333,7 +333,7 @@ export default {
         } else {
           if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
         }
-        // console.log('column-end', this.moveYDistance)
+        // console.log('column-end', this.lastMoveYDistance)
 
         // this.$stopPropagation(e)
         if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
diff --git a/src/config/index.js b/src/config/index.js
index a0ebf11..0d803db 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,5 +1,5 @@
 export default {
-  baseUrl: 'http://192.168.0.105//index.php/v1',
+  baseUrl: 'http://192.168.0.105/index.php/v1',
   filePreview:'http://192.168.0.105/static/uploads/',
   // baseUrl: 'http://192.168.10.164//index.php/v1',
   // filePreview:'http://192.168.10.164/static/uploads/'
diff --git a/src/pages/home/Index 布局完成.vue b/src/pages/home/Index 布局完成.vue
index fbae2c0..836bf88 100644
--- a/src/pages/home/Index 布局完成.vue	
+++ b/src/pages/home/Index 布局完成.vue	
@@ -356,7 +356,7 @@ export default {
         }
 
         // console.log('x------------', moveXDistance)
-        // console.log('y------------', moveYDistance)
+        // console.log('y------------', lastMoveYDistance)
         // console.log('角度------------', angle)
 
         if (angle < 0.6) {
@@ -463,10 +463,10 @@ export default {
       if (this.isCanDownWiping) {
         if (this.isDrawDown) {
           this.contentListTop = -this.currentIndex * this.height + this.moveYDistance + this.judgeValue + 'px'
-          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue})
+          // contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance + judgeValue})
         } else {
           this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px'
-          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
+          // contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance - judgeValue})
         }
       }
     },
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
new file mode 100644
index 0000000..31999c9
--- /dev/null
+++ b/src/pages/me/Me.less
@@ -0,0 +1,495 @@
+
+@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;
+
+  .preview-img {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .resource {
+      width: 100vw;
+      max-height: 100vw;
+    }
+
+    .download {
+      position: absolute;
+      bottom: 2rem;
+      right: 2rem;
+      padding: .3rem;
+      background: @second-btn-color-tran;
+      width: 2rem;
+    }
+  }
+
+  .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-image: url('data:image/jpeg;base64,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');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      box-sizing: border-box;
+    }
+
+    .detail {
+      background: @main-bg;
+      padding: 0 2rem .5rem 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: 2px;
+          border-radius: 50%;
+          width: 8rem;
+          height: 8rem;
+        }
+
+        .heat {
+          margin-top: 1rem;
+          width: calc(100% - 12rem);
+          color: @second-text-color;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .num {
+            margin-top: .5rem;
+            color: white;
+            font-size: 1.6rem;
+            font-weight: bold;
+            margin-right: 3px;
+          }
+
+          .text {
+            font-size: 1.2rem;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+
+          }
+        }
+
+      }
+
+      .description {
+        font-size: 1.2rem;
+        color: white;
+        transform: translateY(-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;
+          }
+        }
+
+      }
+
+      .signature {
+        color: @second-text-color;
+        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;
+          }
+        }
+      }
+
+      .my-buttons {
+        display: flex;
+        justify-content: space-between;
+
+        div {
+          width: 49%;
+          font-size: 1.2rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: .2rem;
+          background: @second-btn-color;
+          height: 3rem;
+          color: white;
+        }
+
+      }
+    }
+  }
+
+
+  .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;
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 9cf4e6d..6951389 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -86,7 +86,6 @@
             </div>
           </div>
           <Indicator
-              :class="indicatorFixed?'fffffffff':''"
               name="videoList"
               tabStyleWidth="25%"
               :tabTexts="['作品','私密','喜欢','收藏']"
@@ -98,16 +97,15 @@
               :style="videoSlideRowListStyle"
               v-model:active-index="contentIndex">
             <SlideItem class="SlideItem"
-                       @touchmove="move"
                        @scroll="scroll"
-                       :style="isScroll?'overflow: auto;':''">
+                       :style="SlideItemStyle">
               <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;':''">
+                       @scroll="scroll"
+                       :style="SlideItemStyle">
               <div class="notice">
                 <img src="../../assets/img/icon/me/lock-gray.png" alt="">
                 <span>只有你能看到设为私密的作品和日常</span>
@@ -117,8 +115,8 @@
               <no-more v-else/>
             </SlideItem>
             <SlideItem class="SlideItem"
-                       @touchmove="move"
-                       :style="isScroll?'overflow: auto;':''">
+                       @scroll="scroll"
+                       :style="SlideItemStyle">
               <div class="notice">
                 <img src="../../assets/img/icon/me/lock-gray.png" alt="">
                 <span>只有你能看到自己的喜欢列表</span>
@@ -128,8 +126,8 @@
               <no-more v-else/>
             </SlideItem>
             <SlideItem class="SlideItem"
-                       @touchmove="move"
-                       :style="isScroll?'overflow: auto;':''">
+                       @scroll="scroll"
+                       :style="SlideItemStyle">
               <div class="notice">
                 <img src="../../assets/img/icon/me/lock-gray.png" alt="">
                 <span>只有你能看到自己的收藏列表</span>
@@ -190,106 +188,6 @@
           <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>
     <transition name="fade">
       <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
@@ -330,7 +228,8 @@ export default {
       videoItemHeight: 0,
       startLocationY: 0,
       fixedLocationY: 0,
-      moveYDistance: 0,
+      lastMoveYDistance: 0,
+      canTransformY: 0,
       startTime: 0,
       floatHeight: 46,
       videos: {
@@ -366,6 +265,9 @@ export default {
         loading2: false,
         loading3: false,
       },
+      tempScroll: false,
+      acceleration: 1.2,
+      sprint: 15,
     }
   },
   computed: {
@@ -378,6 +280,10 @@ export default {
     videoSlideRowListStyle() {
       return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
     },
+    SlideItemStyle() {
+      if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
+      return {overflow: 'hidden'}
+    },
     ...mapState({
       userinfo: 'userinfo',
     })
@@ -394,6 +300,7 @@ export default {
       this.refs.descHeight = this.$refs.desc.offsetHeight
       this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
       this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight - 50
+      this.canTransformY = this.refs.descHeight - this.floatHeight
       this.changeIndex(0, null)
     })
     this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
@@ -426,7 +333,6 @@ export default {
             break
         }
       }
-      // console.log('scrollAreaHeight',scrollAreaHeight)
       return scrollAreaHeight
     },
     async changeIndex(newVal, oldVal) {
@@ -465,21 +371,14 @@ export default {
 
       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
-          }
+        if (this.isScroll) {
+          this.refs.videoSlideHeight = this.refs.maxSlideHeight
         } else {
-          this.refs.videoSlideHeight = scrollAreaHeight
-          if (scrollAreaHeight > this.refs.maxSlideHeight) {
+          if (scrollAreaHeight > screenSlideHeight) {
             this.refs.videoSlideHeight = this.refs.maxSlideHeight
+          } else {
+            this.refs.videoSlideHeight = screenSlideHeight
           }
         }
       } else {
@@ -492,6 +391,7 @@ export default {
     },
     async loadMoreData() {
       if (this.loadings['loading' + this.contentIndex]) return
+      console.log('到底了')
       let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
       if (videoOb.total > videoOb.list.length) {
         videoOb.pageNo++
@@ -523,211 +423,226 @@ export default {
       this.startTime = Date.now()
     },
     move(e) {
-      (!this.isScroll) && e.preventDefault();
+      // (!this.isScroll) && e.preventDefault();
     },
     async scroll() {
-      if (this.indicatorFixed) {
-        let scrollAreaHeight = await this.getScrollAreaHeight()
+      if (this.isScroll) {
         let SlideItems = document.querySelectorAll('.SlideItem')
         let SlideItem = SlideItems[this.contentIndex]
-        if (scrollAreaHeight - this.refs.videoSlideHeight < SlideItem.scrollTop + 60) {
+        if (SlideItem.scrollHeight - SlideItem.clientHeight < 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
+      let moveDistance = e.touches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
       // console.log('move-pageMoveDistance', pageMoveDistance)
-      // console.log('move-touchMoveDistance', touchMoveDistance)
+      // console.log('move-moveDistance', moveDistance)
+      //手指往上划，是负
 
-      //页面已经滚动到头了，往下划动，要把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 {
+      if (this.isScroll) {
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        if (SlideItem.scrollTop === 0) {
+          this.tempScroll = this.isScroll = false
           this.startLocationY = e.touches[0].pageY
-          this.moveYDistance = 400
+          this.lastMoveYDistance = -this.canTransformY
         }
       } 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'
+        //手指往下划，页面向上动
+        if (moveDistance > 0) {
+          if (pageMoveDistance > 0) {
             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
+            if (pageMoveDistance < 400) {
+              this.refs.header.style.transition = 'all 0s'
+              this.refs.header.style.height = this.refs.headerHeight + (pageMoveDistance / 2) + 'px'
+            }
           } else {
-            this.indicatorFixed = Math.abs(pageMoveDistance) > canTransformY
+            let scrollAreaHeight = await this.getScrollAreaHeight()
+            //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
+            if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(moveDistance) > 20) {
+              this.$refs.scroll.style.transition = 'all .2s'
+              this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+              let SlideItems = document.querySelectorAll('.SlideItem')
+              SlideItems.forEach(SlideItem => {
+                SlideItem.scrollTop = 0
+              })
+              this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+              this.lastMoveYDistance = 0
+              this.startLocationY = e.touches[0].pageY
+              this.changeIndex(this.contentIndex, this.contentIndex)
+              return;
+            }
+            if (Math.abs(pageMoveDistance) < this.canTransformY) {
+              let SlideItems = document.querySelectorAll('.SlideItem')
+              SlideItems.forEach(SlideItem => {
+                SlideItem.scrollTop = 0
+              })
+              this.tempScroll = false
+            }
             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)`
+            this.$refs.scroll.style.transform = `translate3d(0,${pageMoveDistance}px,0)`
           }
-          if (this.indicatorFixed) {
-            this.fixedLocationY = e.touches[0].pageY
+        } else {
+          //手指往上划，页面向下动
+          if (Math.abs(pageMoveDistance) < this.canTransformY) {
+
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
+
+              this.startLocationY = e.touches[0].pageY
+              this.lastMoveYDistance = moveTransformY
+
+              this.floatFixed = Math.abs(moveTransformY) > 100
+              this.floatShowName = Math.abs(moveTransformY) > 150
+            } else {
+              this.floatFixed = Math.abs(pageMoveDistance) > 100
+              this.floatShowName = Math.abs(pageMoveDistance) > 150
+              this.$refs.scroll.style.transform = `translate3d(0,${pageMoveDistance}px,0)`
+            }
+          } else {
+            this.refs.header.style.height = this.refs.headerHeight + 'px'
+            this.$refs.scroll.style.transform = `translate3d(0,${-this.canTransformY}px,0)`
+            let SlideItems = document.querySelectorAll('.SlideItem')
+            let SlideItem = SlideItems[this.contentIndex]
+
+            if (!this.isScroll) {
+              this.tempScroll = true
+              SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
+            }
+            if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
+              this.loadMoreData()
+            }
           }
         }
       }
-
     },
-    touchEnd(e) {
-      let canTransformY = this.refs.descHeight - this.floatHeight
-      let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
-      let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
+    async touchEnd(e) {
+      let moveDistance = e.changedTouches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
+
       // console.log('end-pageMoveDistance', pageMoveDistance)
+      console.log('end-moveDistance', moveDistance)
 
-      let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
-      if (this.indicatorFixed) {
-        this.moveYDistance = -canTransformY
-        this.isScroll = true
+      if (this.isScroll) {
+        this.tempScroll = false
+        this.lastMoveYDistance = -this.canTransformY
       } 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 {
+        let endTime = Date.now()
+        let gapTime = endTime - this.startTime
 
-          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);
-                      }
+        console.log('end-gapTime', gapTime)
+        let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+
+
+        //手指往下划，页面向上动
+        if (moveDistance >= 0) {
+          if (pageMoveDistance > 0) {
+            this.refs.header.style.transition = 'all .3s'
+            this.refs.header.style.height = this.refs.headerHeight + 'px'
+            this.lastMoveYDistance = 0
+            this.floatShowName = this.floatFixed = this.isScroll = this.tempScroll = false
+          } else {
+            //猛的划一下
+            if ((Math.abs(moveDistance) > 100) && gapTime > 100 && gapTime < 150) {
+              this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
+
+              //用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.moveYDistance = 0
+                      this.refs.header.style.transition = 'all .6s'
+                      this.refs.header.style.height = this.refs.headerHeight + 'px'
+                      this.lastMoveYDistance = 0
                       cancelAnimationFrame(timer);
                     }
+                  } else {
+                    //快速动画结束
+                    this.lastMoveYDistance = 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
+              timer = requestAnimationFrame(fn);
+
+            } else if ((Math.abs(moveDistance) > 100) && gapTime > 150 && gapTime < 300) {
+              //   //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
+              this.$refs.scroll.style.transition = 'all .3s'
+              this.$refs.scroll.style.transform = `translate3d(0,0,0)`
+              this.lastMoveYDistance = 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'
-              })
+              this.tempScroll = this.isScroll = false
             } 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
-              }
+              this.lastMoveYDistance = pageMoveDistance
+            }
+          }
+        } else {
+          if ((Math.abs(moveDistance) > 100) && gapTime < 250) {
+            //往下划
+            this.$refs.scroll.style.transition = 'all .3s'
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              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.lastMoveYDistance = -endTransformY
+            } else {
+              this.$refs.scroll.style.transform = `translate3d(0,${-this.canTransformY}px,0)`
+              this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
+              this.tempScroll = false
+              this.lastMoveYDistance = -this.canTransformY
             }
           } else {
-            if (this.refs.maxSlideHeight > this.refs.videoSlideHeight) {
-              let endTransformY = Math.abs(canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
-              this.moveYDistance = -endTransformY
+            //手指往上划，页面向下动
+            if (Math.abs(pageMoveDistance) < this.canTransformY) {
+              if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+                this.lastMoveYDistance = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              } else {
+                let endDistance = pageMoveDistance
+                if (Math.abs(moveDistance) > 20) {
+                  if (moveDistance > 0) {
+                    endDistance += this.sprint
+                  } else {
+                    endDistance -= this.sprint
+                  }
+                }
+                this.lastMoveYDistance = endDistance
+                this.$refs.scroll.style.transition = 'all .3s'
+                this.$refs.scroll.style.transform = `translate3d(0,${endDistance}px,0)`
+              }
             } else {
-              this.moveYDistance = pageMoveDistance
+              this.isScroll = true
+              this.tempScroll = false
+              this.lastMoveYDistance = -this.canTransformY
             }
           }
         }
       }
-      this.changeIndex(this.contentIndex, this.contentIndex)
     },
     getTransform(el) {
       let transform = el.style.transform
@@ -748,498 +663,5 @@ export default {
 </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;
-
-  .preview-img {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    background: black;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .resource {
-      width: 100vw;
-      max-height: 100vw;
-    }
-
-    .download {
-      position: absolute;
-      bottom: 2rem;
-      right: 2rem;
-      padding: .3rem;
-      background: @second-btn-color-tran;
-      width: 2rem;
-    }
-  }
-
-  .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-image: url('data:image/jpeg;base64,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');
-      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: 2px;
-          border-radius: 50%;
-          width: 8rem;
-          height: 8rem;
-        }
-
-        .heat {
-          margin-top: 1rem;
-          width: calc(100% - 12rem);
-          color: @second-text-color;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          .num {
-            margin-top: .5rem;
-            color: white;
-            font-size: 1.6rem;
-            font-weight: bold;
-            margin-right: 3px;
-          }
-
-          .text {
-            font-size: 1.2rem;
-            margin-right: 10px;
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-
-          }
-        }
-
-      }
-
-      .description {
-        font-size: 1.2rem;
-        color: white;
-        transform: translateY(-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;
-          }
-        }
-
-      }
-
-      .signature {
-        color: @second-text-color;
-        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;
-          }
-        }
-      }
-
-      .my-buttons {
-        display: flex;
-        justify-content: space-between;
-
-        div {
-          width: 49%;
-          font-size: 1.2rem;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: .2rem;
-          background: @second-btn-color;
-          height: 3rem;
-          color: white;
-        }
-
-      }
-    }
-  }
-
-
-  .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;
-      }
-    }
-  }
-
-}
+@import "Me";
 </style>
diff --git a/src/pages/me/Me1.vue b/src/pages/me/Me1.vue
new file mode 100644
index 0000000..563d6e4
--- /dev/null
+++ b/src/pages/me/Me1.vue
@@ -0,0 +1,536 @@
+<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 @click="$nav('/me/request-update')"
+                 :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" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
+            <div class="detail">
+              <div class="head">
+                <img src="../../assets/img/icon/avatar/2.png" class="head-image"
+                     @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
+                <div class="heat">
+                  <div class="text">
+                    <span>获赞</span>
+                    <span class="num">18</span>
+                  </div>
+                  <div class="text">
+                    <span>粉丝</span>
+                    <span class="num">62</span>
+                  </div>
+                  <div class="text">
+                    <span>关注</span>
+                    <span class="num">8</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 f12" @click="$nav('/edit-userinfo-item',{type:3})">
+                  <template v-if="!userinfo.desc">
+                    <span>点击添加介绍，让大家认识你...</span>
+                    <img src="../../assets/img/icon/me/write-gray.png" alt="">
+                  </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>
+              <div class="my-buttons">
+                <div @click="$nav('/edit-userinfo')">
+                  <span class="mr1r">编辑资料</span>
+                </div>
+                <div class="add-friend" @click="$nav('/find-acquaintance')">
+                  <span class="mr5p">添加朋友</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Indicator
+              name="videoList"
+              tabStyleWidth="50%"
+              :tabTexts="['作品','私密']"
+              v-model:active-index="contentIndex">
+          </Indicator>
+          <SlideRowList
+              ref="videoSlideRowList"
+              name="videoList"
+              :style="videoSlideRowListStyle"
+              v-model:active-index="contentIndex">
+            <SlideItem class="SlideItem"
+                       @scroll="scroll"
+                       :style="SlideItemStyle">
+              <div class="posterWrapper">
+                <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/>
+              </div>
+            </SlideItem>
+            <SlideItem class="SlideItem"
+                       @scroll="scroll"
+                       :style="SlideItemStyle">
+              <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>
+          </SlideRowList>
+        </div>
+        <Footer v-bind:init-tab="5"/>
+        <transition name="fade">
+          <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
+        </transition>
+      </SlideItem>
+    </SlideRowList>
+    <transition name="fade">
+      <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
+        <img class="resource" :src="previewImg" alt="">
+        <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
+      </div>
+    </transition>
+  </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 {
+      previewImg: '',
+      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,
+      lastMoveYDistance: 0,
+      canTransformY: 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,
+      },
+      tempScroll: false,
+      acceleration: 1.2,
+      sprint: 15,
+    }
+  },
+  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)'}
+    },
+    SlideItemStyle() {
+      if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
+      return {overflow: 'hidden'}
+    },
+    ...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.canTransformY = this.refs.descHeight - this.floatHeight
+      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) {
+      // debugger
+      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) 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) 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) 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) 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)
+        let screenSlideHeight = this.initSlideHeight + Math.abs(transformY)
+        if (this.isScroll) {
+          this.refs.videoSlideHeight = this.refs.maxSlideHeight
+        } else {
+          if (scrollAreaHeight > screenSlideHeight) {
+            this.refs.videoSlideHeight = this.refs.maxSlideHeight
+          } else {
+            this.refs.videoSlideHeight = screenSlideHeight
+          }
+        }
+      } 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
+      console.log('到底了')
+      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) {
+          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.isScroll) {
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        // console.log('scrollHeight', SlideItem.scrollHeight)
+        // console.log('clientHeight', SlideItem.clientHeight)
+        // console.log('scrollTop', SlideItem.scrollTop)
+        if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
+          this.loadMoreData()
+        }
+      }
+    },
+    async touchMove(e) {
+      let moveDistance = e.touches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
+      // console.log('move-pageMoveDistance', pageMoveDistance)
+      // console.log('move-moveDistance', moveDistance)
+      //手指往上划，是负
+
+
+      if (this.isScroll) {
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        if (SlideItem.scrollTop === 0) {
+          this.tempScroll = this.isScroll = false
+          this.startLocationY = e.touches[0].pageY
+          this.lastMoveYDistance = -this.canTransformY + 10
+        }
+      } else {
+        //手指往下划，页面向上动
+        if (moveDistance > 0) {
+          let scrollAreaHeight = await this.getScrollAreaHeight()
+          //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
+          if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(moveDistance) > 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.lastMoveYDistance = 0
+            this.startLocationY = e.touches[0].pageY
+            this.changeIndex(this.contentIndex, this.contentIndex)
+            return;
+          }
+
+          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.lastMoveYDistance = 400
+            }
+          } else {
+            this.floatFixed = Math.abs(pageMoveDistance) > 100
+            this.floatShowName = Math.abs(pageMoveDistance) > 150
+            this.$refs.scroll.style.transform = `translate3d(0,${pageMoveDistance}px,0)`
+          }
+        } else {
+          //手指往上划，页面向下动
+          if (Math.abs(pageMoveDistance) < this.canTransformY) {
+            this.tempScroll = false
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
+
+              this.startLocationY = e.touches[0].pageY
+              this.lastMoveYDistance = moveTransformY
+
+              this.floatFixed = Math.abs(moveTransformY) > 100
+              this.floatShowName = Math.abs(moveTransformY) > 150
+            } else {
+              this.floatFixed = Math.abs(pageMoveDistance) > 100
+              this.floatShowName = Math.abs(pageMoveDistance) > 150
+              this.$refs.scroll.style.transform = `translate3d(0,${pageMoveDistance}px,0)`
+            }
+          } else {
+            this.refs.header.style.height = this.refs.headerHeight + 'px'
+            this.$refs.scroll.style.transform = `translate3d(0,${-this.canTransformY}px,0)`
+            let SlideItems = document.querySelectorAll('.SlideItem')
+            let SlideItem = SlideItems[this.contentIndex]
+
+            if (!this.isScroll) {
+              this.tempScroll = true
+              SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
+            }
+            if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
+              this.loadMoreData()
+            }
+          }
+        }
+      }
+    },
+    touchEnd(e) {
+      let moveDistance = e.changedTouches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
+
+      // console.log('move-pageMoveDistance', pageMoveDistance)
+      // console.log('move-moveDistance', moveDistance)
+
+      if (this.isScroll) {
+        this.tempScroll = false
+        this.lastMoveYDistance = -this.canTransformY
+      } else {
+        if (pageMoveDistance > 0) {
+          this.refs.header.style.transition = 'all .3s'
+          this.refs.header.style.height = this.refs.headerHeight + 'px'
+          this.lastMoveYDistance = 0
+          this.floatShowName = this.floatFixed = this.isScroll = this.tempScroll = false
+        } else {
+          let endTime = Date.now()
+          let gapTime = endTime - this.startTime
+          //距离太小
+          if (Math.abs(moveDistance) < 20) gapTime = 1000
+          //超过header的1/3
+          if (Math.abs(moveDistance) > (this.refs.descHeight / 2)) gapTime = 50
+
+          if (gapTime < 150) {
+
+          } else {
+
+          }
+          // console.log('时间', gapTime)
+          if (Math.abs(pageMoveDistance) < this.canTransformY) {
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              this.$refs.scroll.style.transition = 'all .3s'
+              this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
+              this.lastMoveYDistance = moveTransformY
+
+            } else {
+              let endDistance = pageMoveDistance
+              if (Math.abs(moveDistance) > 20) {
+                if (moveDistance > 0) {
+                  endDistance += this.sprint
+                } else {
+                  endDistance -= this.sprint
+                }
+              }
+              this.lastMoveYDistance = endDistance
+              this.$refs.scroll.style.transition = 'all .3s'
+              this.$refs.scroll.style.transform = `translate3d(0,${endDistance}px,0)`
+            }
+          } else {
+            this.isScroll = true
+            this.tempScroll = false
+            this.lastMoveYDistance = -this.canTransformY
+          }
+        }
+      }
+    },
+    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 "Me";
+</style>
diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue
new file mode 100644
index 0000000..e5bb946
--- /dev/null
+++ b/src/pages/me/Me2.vue
@@ -0,0 +1,986 @@
+<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 @click="$nav('/me/request-update')"
+                 :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" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
+            <div class="detail">
+              <div class="head">
+                <img src="../../assets/img/icon/avatar/2.png" class="head-image"
+                     @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
+                <div class="heat">
+                  <div class="text">
+                    <span>获赞</span>
+                    <span class="num">18</span>
+                  </div>
+                  <div class="text">
+                    <span>粉丝</span>
+                    <span class="num">62</span>
+                  </div>
+                  <div class="text">
+                    <span>关注</span>
+                    <span class="num">8</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 f12" @click="$nav('/edit-userinfo-item',{type:3})">
+                  <template v-if="!userinfo.desc">
+                    <span>点击添加介绍，让大家认识你...</span>
+                    <img src="../../assets/img/icon/me/write-gray.png" alt="">
+                  </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>
+              <div class="my-buttons">
+                <div @click="$nav('/edit-userinfo')">
+                  <span class="mr1r">编辑资料</span>
+                </div>
+                <div class="add-friend" @click="$nav('/find-acquaintance')">
+                  <span class="mr5p">添加朋友</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Indicator
+              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;':''">
+              <div class="posterWrapper">
+                <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/>
+              </div>
+            </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>
+    </SlideRowList>
+    <transition name="fade">
+      <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
+        <img class="resource" :src="previewImg" alt="">
+        <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
+      </div>
+    </transition>
+  </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 {
+      previewImg: '',
+      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,
+      lastMoveYDistance: 0,
+      canTransformY: 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.canTransformY = this.refs.descHeight - this.floatHeight
+      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) {
+      // debugger
+      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) 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) 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) 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) 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)
+        let screenSlideHeight = this.initSlideHeight + Math.abs(transformY)
+        if (this.isScroll) {
+          this.refs.videoSlideHeight = this.refs.maxSlideHeight
+        } else {
+          let SlideItems = document.querySelectorAll('.posterWrapper')
+          let SlideItem = SlideItems[newVal]
+          if (SlideItem.clientHeight > screenSlideHeight) {
+            this.refs.videoSlideHeight = this.refs.maxSlideHeight
+          } else {
+            this.refs.videoSlideHeight = screenSlideHeight
+          }
+        }
+      } 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
+      console.log('到底了')
+      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) {
+          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.isScroll) {
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        // console.log('scrollHeight', SlideItem.scrollHeight)
+        // console.log('clientHeight', SlideItem.clientHeight)
+        // console.log('scrollTop', SlideItem.scrollTop)
+        if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
+          this.loadMoreData()
+        }
+      }
+    },
+    async touchMove(e) {
+      let moveDistance = e.touches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * 1.2
+      // console.log('move-pageMoveDistance', pageMoveDistance)
+      console.log('move-moveDistance', moveDistance)
+
+      if (this.isScroll) {
+        let SlideItems = document.querySelectorAll('.SlideItem')
+        let SlideItem = SlideItems[this.contentIndex]
+        if (SlideItem.scrollTop === 0) {
+          this.isScroll = false
+          SlideItem.style.overflow = 'hidden'
+          this.startLocationY = e.touches[0].pageY
+          this.lastMoveYDistance = -this.canTransformY
+        }
+      } else {
+        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.lastMoveYDistance = 400
+          }
+          // this.$refs.scroll.style.transform = `translate3d(0,${0}px,0)`
+        } else {
+          // let scrollAreaHeight = await this.getScrollAreaHeight()
+          // if (moveDistance > 0) {
+          //   //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
+          //   if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(moveDistance) > 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 (Math.abs(pageMoveDistance) < this.canTransformY) {
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
+
+              this.startLocationY = e.touches[0].pageY
+              this.lastMoveYDistance = moveTransformY
+
+              this.floatFixed = Math.abs(moveTransformY) > 100
+              this.floatShowName = Math.abs(moveTransformY) > 150
+            } else {
+              this.floatFixed = Math.abs(pageMoveDistance) > 100
+              this.floatShowName = Math.abs(pageMoveDistance) > 150
+              this.$refs.scroll.style.transform = `translate3d(0,${pageMoveDistance}px,0)`
+            }
+          } else {
+            this.$refs.scroll.style.transform = `translate3d(0,${-this.canTransformY}px,0)`
+            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 (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
+              this.loadMoreData()
+            }
+          }
+        }
+      }
+      // console.log(this.$refs.scroll.scrollTop)
+      // console.log(this.$refs.scroll.offsetTop)
+    },
+    touchEnd(e) {
+      let moveDistance = e.changedTouches[0].pageY - this.startLocationY
+      let pageMoveDistance = this.lastMoveYDistance + moveDistance * 1.2
+
+      console.log('move-pageMoveDistance', pageMoveDistance)
+
+      if (this.isScroll) {
+
+      } else {
+        if (pageMoveDistance > 0) {
+          this.refs.header.style.transition = 'all .3s'
+          this.refs.header.style.height = this.refs.headerHeight + 'px'
+          this.lastMoveYDistance = 0
+          this.floatShowName = this.floatFixed = this.isScroll = false
+        } else {
+          if (Math.abs(pageMoveDistance) < this.canTransformY) {
+            if (this.refs.videoSlideHeight < this.refs.maxSlideHeight) {
+              let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
+              let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
+              this.lastMoveYDistance = moveTransformY
+            } else {
+              this.lastMoveYDistance = pageMoveDistance
+            }
+          } else {
+            this.isScroll = true
+            this.lastMoveYDistance = -this.canTransformY
+          }
+        }
+      }
+    },
+    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;
+
+  .preview-img {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .resource {
+      width: 100vw;
+      max-height: 100vw;
+    }
+
+    .download {
+      position: absolute;
+      bottom: 2rem;
+      right: 2rem;
+      padding: .3rem;
+      background: @second-btn-color-tran;
+      width: 2rem;
+    }
+  }
+
+  .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-image: url('data:image/jpeg;base64,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');
+      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: 2px;
+          border-radius: 50%;
+          width: 8rem;
+          height: 8rem;
+        }
+
+        .heat {
+          margin-top: 1rem;
+          width: calc(100% - 12rem);
+          color: @second-text-color;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .num {
+            margin-top: .5rem;
+            color: white;
+            font-size: 1.6rem;
+            font-weight: bold;
+            margin-right: 3px;
+          }
+
+          .text {
+            font-size: 1.2rem;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+
+          }
+        }
+
+      }
+
+      .description {
+        font-size: 1.2rem;
+        color: white;
+        transform: translateY(-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;
+          }
+        }
+
+      }
+
+      .signature {
+        color: @second-text-color;
+        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;
+          }
+        }
+      }
+
+      .my-buttons {
+        display: flex;
+        justify-content: space-between;
+
+        div {
+          width: 49%;
+          font-size: 1.2rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: .2rem;
+          background: @second-btn-color;
+          height: 3rem;
+          color: white;
+        }
+
+      }
+    }
+  }
+
+
+  .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/Me3.vue b/src/pages/me/Me3.vue
index e4d5170..8c20e3c 100644
--- a/src/pages/me/Me3.vue
+++ b/src/pages/me/Me3.vue
@@ -13,7 +13,9 @@
             </div>
           </transition>
           <div class="right">
-            <img :style="floatFixed?'opacity: 0;':''" src="../../assets/img/icon/me/finger-right.png" alt="">
+            <img @click="$nav('/me/request-update')"
+                 :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>
@@ -23,18 +25,11 @@
              @touchmove="touchMove($event)"
              @touchend="touchEnd($event)">
           <div ref="desc" class="desc">
-            <header ref="header"></header>
+            <header ref="header" @click="previewImg = require('../../assets/img/header-bg.png')"></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>
+                <img src="../../assets/img/icon/avatar/2.png" class="head-image"
+                     @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
                 <div class="heat">
                   <div class="text">
                     <span>获赞</span>
@@ -111,7 +106,7 @@
               <no-more v-else/>
             </SlideItem>
             <SlideItem class="SlideItem"
-                       @touchmove="'move'"
+                       @touchmove="move"
                        :style="isScroll?'overflow: auto;':''">
               <div class="notice">
                 <img src="../../assets/img/icon/me/lock-gray.png" alt="">
@@ -191,6 +186,9 @@
           </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">
@@ -293,6 +291,12 @@
         </div>
       </SlideItem>
     </SlideRowList>
+    <transition name="fade">
+      <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
+        <img class="resource" :src="previewImg" alt="">
+        <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
+      </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -301,15 +305,16 @@ import Footer from "../../components/Footer";
 import Indicator from '../../components/Indicator'
 import {nextTick} from 'vue'
 import {mapState} from "vuex";
+import list from '../../assets/data/miao-list2.json'
 
 export default {
   name: "Me",
   components: {Posters, Footer, Indicator},
   data() {
     return {
+      previewImg: '',
       contentIndex: 0,
       baseActiveIndex: 0,
-      desc: null,
       tabContents: [],
       indicatorFixed: false,
       floatFixed: false,
@@ -384,17 +389,24 @@ export default {
     },
   },
   mounted() {
-    this.initSlideHeight = this.bodyHeight - 50 - 352 - 50
     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) {
@@ -419,6 +431,7 @@ export default {
       return scrollAreaHeight
     },
     async changeIndex(newVal, oldVal) {
+      // debugger
       if (this.loadings['loading' + newVal]) return
       let videoOb = this.videos[Object.keys(this.videos)[newVal]]
       if (newVal === 3) {
@@ -585,6 +598,7 @@ export default {
           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)`
@@ -754,6 +768,42 @@ export default {
   width: 100%;
   font-size: 1.4rem;
 
+  .preview-img {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .resource {
+      width: 100vw;
+      max-height: 100vw;
+    }
+
+    .download {
+      position: absolute;
+      bottom: 2rem;
+      right: 2rem;
+      padding: .3rem;
+      background: @second-btn-color-tran;
+      width: 2rem;
+    }
+  }
+
+  .mask {
+    background: #0000004f;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 3;
+  }
+
   .scroll {
 
     .notice {
@@ -948,6 +998,7 @@ export default {
     }
   }
 
+
   .desc {
     header {
       color: white;
@@ -1081,6 +1132,7 @@ export default {
     }
   }
 
+
   .ul {
     font-size: 1.4rem;
     width: 100%;
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index aeb5751..36fb820 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -232,6 +232,9 @@ export default {
     }
   },
   $imgPreview(url) {
+    if (url.includes('http')){
+      return url
+    }
     return Config.filePreview + url
   },
   $likeNum(num) {