diff --git a/src/assets/img/icon/arrow-up-white.png b/src/assets/img/icon/arrow-up-white.png
new file mode 100644
index 0000000..f5facb5
Binary files /dev/null and b/src/assets/img/icon/arrow-up-white.png differ
diff --git a/src/assets/scss/custom.less b/src/assets/scss/custom.less
index 03b9a11..e838a54 100644
--- a/src/assets/scss/custom.less
+++ b/src/assets/scss/custom.less
@@ -101,11 +101,12 @@
     }
   }
 
-  &.disabled{
+  &.disabled {
     &.primary {
       background: gainsboro;
       color: white;
     }
+
     &:active {
       &.primary {
         background: gainsboro;
@@ -128,6 +129,14 @@
   }
 }
 
+.not-read {
+  @width: .7rem;
+  width: @width;
+  height: @width;
+  border-radius: 50%;
+  background: yellow;
+}
+
 p {
   padding: 0;
   margin: 0;
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 065eb75..ae5da75 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -103,49 +103,7 @@
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
-        <div v-if="false">
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-        </div>
-        <Me></Me>
+        <Uploader></Uploader>
       </SlideItem>
     </SlideRowList>
 
@@ -179,7 +137,6 @@
   </div>
 </template>
 <script>
-import src1Bg from '../../assets/img/poster/src1-bg.png'
 import Video1 from "../../components/Video.vue";
 import mp40 from "../../assets/video/0.mp4";
 import mp41 from "../../assets/video/1.mp4";
@@ -196,12 +153,12 @@ import Comment from "../../components/Comment";
 import Share from "../../components/Share";
 import SlideColumnList from "../../components/slide/SlideColumnList";
 import SlideRowList from "../../components/slide/SlideRowList";
-import Me from '../me/Me'
 import PlayFeedback from "./components/PlayFeedback";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 import Duoshan from "./components/Duoshan";
 import ShareTo from "./components/ShareTo";
 import DouyinCode from "../../components/DouyinCode";
+import Uploader from "../me/Uploader";
 
 export default {
   name: "HomeIndex",
@@ -212,7 +169,7 @@ export default {
     Video1,
     Comment,
     Share,
-    Me,
+    Uploader,
     PlayFeedback,
     Duoshan,
     ShareTo,
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index 31999c9..5903171 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -1,4 +1,3 @@
-
 @import "../../assets/scss/index";
 
 .fade1-enter-active,
@@ -197,9 +196,8 @@
 
   .float {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
+    box-sizing: border-box;
+    width: 100vw;
     z-index: 2;
     display: flex;
     justify-content: space-between;
@@ -366,8 +364,9 @@
         display: flex;
         justify-content: space-between;
 
-        div {
-          width: 49%;
+        .button {
+          position: relative;
+          width: 32%;
           font-size: 1.2rem;
           display: flex;
           align-items: center;
@@ -376,9 +375,48 @@
           background: @second-btn-color;
           height: 3rem;
           color: white;
+
+          .not-read {
+            right: 1.5rem;
+            position: absolute;
+          }
         }
 
       }
+
+      .other {
+        display: flex;
+        margin-bottom: 2rem;
+
+        .item {
+          margin-right: 2.5rem;
+          display: flex;
+
+          img {
+            margin-right: .8rem;
+            border-radius: .4rem;
+            background: @second-btn-color-tran;
+            padding: .8rem;
+            height: 2.2rem;
+          }
+
+          .right {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .top {
+              color: white;
+              font-size: 1.4rem;
+            }
+
+            .bottom {
+              color: @second-text-color;
+              font-size: 1.2rem;
+            }
+          }
+        }
+      }
     }
   }
 
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 77f55eb..84191bd 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -77,12 +77,32 @@
                 </div>
 
               </div>
-              <div class="my-buttons">
-                <div @click="$nav('/edit-userinfo')">
-                  <span class="mr1r">编辑资料</span>
+              <div class="other">
+                <div class="item">
+                  <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
+                  <div class="right">
+                    <div class="top">抖音商城</div>
+                    <div class="bottom">发现超值好物</div>
+                  </div>
                 </div>
-                <div class="add-friend" @click="$nav('/find-acquaintance')">
-                  <span class="mr5p">添加朋友</span>
+                <div class="item">
+                  <img src="../../assets/img/icon/me/music-white.png" alt="">
+                  <div class="right">
+                    <div class="top">我的音乐</div>
+                    <div class="bottom">已收藏20首</div>
+                  </div>
+                </div>
+              </div>
+              <div class="my-buttons">
+                <div class="button" @click="$nav('/edit-userinfo')">
+                  <span>编辑资料</span>
+                </div>
+                <div class="button" @click="$nav('/edit-userinfo')">
+                  <span>主页访客</span>
+                </div>
+                <div class="button" @click="$nav('/find-acquaintance')">
+                  <span>添加朋友</span>
+                  <div class="not-read"></div>
                 </div>
               </div>
             </div>
diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue
deleted file mode 100644
index 5b809dc..0000000
--- a/src/pages/me/Me2.vue
+++ /dev/null
@@ -1,656 +0,0 @@
-<template>
-  <div class="Me">
-    <SlideRowList style="width: 100vw;" v-model:active-index="baseActiveIndex">
-      <SlideItem>
-        <div ref="float" class="float" :class="floatFixed?'fixed':''">
-          <div class="left" style="opacity: 0;">
-            <img src="../../assets/img/icon/next.svg" alt="">
-            <span>切换账号</span>
-          </div>
-          <transition name="fade">
-            <div class="center" v-if="floatShowName">
-              <p class="name f22 mt1r mb1r">ttentau</p>
-            </div>
-          </transition>
-          <div class="right">
-            <img @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">
-          <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"
-                       @scroll="scroll"
-                       :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"
-                       @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>
-            <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.like.total !== -1" :list="videos.like.list"></Posters>
-              <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-            <SlideItem class="SlideItem"
-                       @scroll="scroll"
-                       :style="SlideItemStyle">
-              <div class="notice">
-                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-                <span>只有你能看到自己的收藏列表</span>
-              </div>
-              <div class="collect" ref="collect">
-                <div class="video" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
-                      <span>视频</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="num">
-                        <img class="love" src="../../assets/img/icon/love.svg" alt="">
-                        <span>{{ $likeNum(i.likeNum) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="audio" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
-                      <span>音乐</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-          </SlideRowList>
-        </div>
-        <Footer v-bind:init-tab="5"/>
-        <transition name="fade">
-          <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
-        </transition>
-      </SlideItem>
-    </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: [],
-      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
-        }
-      }
-      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() {
-
-    },
-    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
-        }
-      } else {
-        //手指往下划，页面向上动
-        if (moveDistance > 0) {
-          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 {
-            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.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,${pageMoveDistance}px,0)`
-          }
-        } 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()
-            }
-          }
-        }
-      }
-    },
-    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)
-
-      if (this.isScroll) {
-        this.tempScroll = false
-        this.lastMoveYDistance = -this.canTransformY
-      } else {
-        let endTime = Date.now()
-        let gapTime = endTime - this.startTime
-
-        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.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.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 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.floatShowName = this.floatFixed = this.isScroll = false
-              let SlideItems = document.querySelectorAll('.SlideItem')
-              SlideItems.forEach(SlideItem => {
-                SlideItem.scrollTop = 0
-              })
-              this.tempScroll = this.isScroll = false
-            } else {
-              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.floatShowName = this.floatFixed = this.isScroll = true
-              this.tempScroll = false
-              this.lastMoveYDistance = -this.canTransformY
-            }
-          } else {
-            //手指往上划，页面向下动
-            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.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/Uploader.less b/src/pages/me/Uploader.less
new file mode 100644
index 0000000..f3ecdd0
--- /dev/null
+++ b/src/pages/me/Uploader.less
@@ -0,0 +1,420 @@
+@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;
+}
+
+.Uploader {
+  position: fixed;
+  background: @main-bg;
+  height: 100%;
+  width: 100%;
+  font-size: 1.4rem;
+
+  .preview-img {
+    z-index: 3;
+    position: fixed;
+    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;
+    box-sizing: border-box;
+    width: 100vw;
+    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;
+
+        .button {
+          position: relative;
+          width: 32%;
+          font-size: 1.2rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: .2rem;
+          background: @second-btn-color;
+          height: 3rem;
+          color: white;
+
+          img {
+            @width: 1.6rem;
+            width: @width;
+            height: @width;
+          }
+        }
+
+      }
+
+      .other {
+        display: flex;
+        margin-bottom: 2rem;
+
+        .item {
+          margin-right: 2.5rem;
+          display: flex;
+
+          img {
+            margin-right: .8rem;
+            border-radius: .4rem;
+            background: @second-btn-color-tran;
+            padding: .8rem;
+            height: 2.2rem;
+          }
+
+          .right {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .top {
+              color: white;
+              font-size: 1.4rem;
+            }
+
+            .bottom {
+              color: @second-text-color;
+              font-size: 1.2rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/me/Me1.vue b/src/pages/me/Uploader.vue
similarity index 67%
rename from src/pages/me/Me1.vue
rename to src/pages/me/Uploader.vue
index cbe24e2..ff2b805 100644
--- a/src/pages/me/Me1.vue
+++ b/src/pages/me/Uploader.vue
@@ -1,193 +1,212 @@
 <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 class="Uploader">
+    <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="other">
+            <div class="item">
+              <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
+              <div class="right">
+                <div class="top">抖音商城</div>
+                <div class="bottom">发现超值好物</div>
+              </div>
+            </div>
+            <div class="item">
+              <img src="../../assets/img/icon/me/music-white.png" alt="">
+              <div class="right">
+                <div class="top">我的音乐</div>
+                <div class="bottom">已收藏20首</div>
+              </div>
+            </div>
+          </div>
+          <div class="my-buttons">
+            <div class="">
+              <div class="button" @click="$nav('/edit-userinfo')">
+                <img src="../../assets/img/icon/add-white.png" alt="">
+              </div>
+<!--              <div class="button" @click="$nav('/edit-userinfo')">-->
+<!--                <span>编辑资料</span>-->
+<!--              </div>-->
+<!--              <div class="button" @click="$nav('/edit-userinfo')">-->
+<!--                <span>主页访客</span>-->
+<!--              </div>-->
+            </div>
+            <div class="button" @click="$nav('/find-acquaintance')">
+              <img src="../../assets/img/icon/arrow-up-white.png" alt="">
             </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>
+      <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"
+                   @scroll="scroll"
+                   :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"
+                   @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>
+        <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.like.total !== -1" :list="videos.like.list"></Posters>
+          <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
+          <no-more v-else/>
+        </SlideItem>
+        <SlideItem class="SlideItem"
+                   @scroll="scroll"
+                   :style="SlideItemStyle">
+          <div class="notice">
+            <img src="../../assets/img/icon/me/lock-gray.png" alt="">
+            <span>只有你能看到自己的收藏列表</span>
+          </div>
+          <div class="collect" ref="collect">
+            <div class="video" v-if=" videos.collect.video.list.length">
+              <div class="top">
+                <div class="left">
+                  <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
+                  <span>视频</span>
+                </div>
+                <div class="right">
+                  <span>全部</span>
+                  <back direction="right"></back>
                 </div>
-
               </div>
-              <div class="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 class="list">
+                <div class="item"
+                     v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                  <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                  <div class="num">
+                    <img class="love" src="../../assets/img/icon/love.svg" alt="">
+                    <span>{{ $likeNum(i.likeNum) }}</span>
                   </div>
                 </div>
-
               </div>
-              <div class="my-buttons">
-                <div @click="$nav('/edit-userinfo')">
-                  <span class="mr1r">编辑资料</span>
+            </div>
+
+            <div class="audio" v-if=" videos.collect.video.list.length">
+              <div class="top">
+                <div class="left">
+                  <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
+                  <span>音乐</span>
                 </div>
-                <div class="add-friend" @click="$nav('/find-acquaintance')">
-                  <span class="mr5p">添加朋友</span>
+                <div class="right">
+                  <span>全部</span>
+                  <back direction="right"></back>
+                </div>
+              </div>
+              <div class="list">
+                <div class="item"
+                     v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
+                  <img class="poster" :src="$imgPreview(i.poster)" alt="">
+                  <div class="title">用户创作的原声用户创作的原声用户创作的原声
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <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"
-                       @scroll="scroll"
-                       :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"
-                       @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>
-            <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.like.total !== -1" :list="videos.like.list"></Posters>
-              <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-            <SlideItem class="SlideItem"
-                       @scroll="scroll"
-                       :style="SlideItemStyle">
-              <div class="notice">
-                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
-                <span>只有你能看到自己的收藏列表</span>
-              </div>
-              <div class="collect" ref="collect">
-                <div class="video" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/video-whitegray.png" alt="">
-                      <span>视频</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="num">
-                        <img class="love" src="../../assets/img/icon/love.svg" alt="">
-                        <span>{{ $likeNum(i.likeNum) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="audio" v-if=" videos.collect.video.list.length">
-                  <div class="top">
-                    <div class="left">
-                      <img src="../../assets/img/icon/me/music-whitegray.png" alt="">
-                      <span>音乐</span>
-                    </div>
-                    <div class="right">
-                      <span>全部</span>
-                      <back direction="right"></back>
-                    </div>
-                  </div>
-                  <div class="list">
-                    <div class="item"
-                         v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
-                      <img class="poster" :src="$imgPreview(i.poster)" alt="">
-                      <div class="title">用户创作的原声用户创作的原声用户创作的原声
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
-              <no-more v-else/>
-            </SlideItem>
-          </SlideRowList>
-        </div>
-        <Footer v-bind:init-tab="5"/>
-        <transition name="fade">
-          <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
-        </transition>
-      </SlideItem>
-    </SlideRowList>
+          <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
+          <no-more v-else/>
+        </SlideItem>
+      </SlideRowList>
+    </div>
+    <transition name="fade">
+      <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
+    </transition>
     <transition name="fade">
       <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
         <img class="resource" :src="previewImg" alt="">
@@ -198,14 +217,14 @@
 </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";
+import bus from "../../utils/bus";
 
 export default {
   name: "Me",
-  components: {Posters, Footer, Indicator},
+  components: {Posters, Indicator},
   data() {
     return {
       previewImg: '',
@@ -266,6 +285,7 @@ export default {
       tempScroll: false,
       acceleration: 1.2,
       sprint: 15,
+      canScroll: true
     }
   },
   computed: {
@@ -302,6 +322,8 @@ export default {
       this.changeIndex(0, null)
     })
     this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
+    bus.on('baseSlide-moved', () => this.canScroll = false)
+    bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
     click(e) {
@@ -433,6 +455,7 @@ export default {
       }
     },
     async touchMove(e) {
+      if (!this.canScroll) return
       let moveDistance = e.touches[0].pageY - this.startLocationY
       let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
       // console.log('move-pageMoveDistance', pageMoveDistance)
@@ -520,11 +543,12 @@ export default {
       }
     },
     async touchEnd(e) {
+      if (!this.canScroll) return
       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)
+      // console.log('end-moveDistance', moveDistance)
 
       if (this.isScroll) {
         this.tempScroll = false
@@ -533,7 +557,7 @@ export default {
         let endTime = Date.now()
         let gapTime = endTime - this.startTime
 
-        console.log('end-gapTime', gapTime)
+        // console.log('end-gapTime', gapTime)
         let endTransformY = Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
 
 
@@ -661,5 +685,5 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "Me";
+@import "Uploader";
 </style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index a038539..fbae749 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -239,6 +239,7 @@ export default {
 
 <style scoped lang="less">
 @import "../../assets/scss/index";
+
 ::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
@@ -577,12 +578,6 @@ export default {
         height: 15px;
       }
 
-      .not-read {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: yellow;
-      }
     }
   }
 
diff --git a/src/router/index.js b/src/router/index.js
index be3ebfa..6d2894f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,8 +51,8 @@ import RequestUpdate from "../pages/me/RequestUpdate";
 
 const routes = [
   // {path: '', component: Music},
-  {path: '/', component: Index},
-  // {path: '/', component: Index2},
+  // {path: '/', component: Index},
+  {path: '/', component: Index2},
   {path: '/test', component: Test},
   {path: '/test2', component: Test2},
   {path: '/test3', component: Test3},