diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss
index d93b99e..1077e61 100644
--- a/src/assets/scss/color.scss
+++ b/src/assets/scss/color.scss
@@ -1,61 +1,4 @@
 $main-bg: rgb(22, 26, 37);
-.c-red {
-  color: red;
-}
-
-.c-white {
-  color: white;
-}
-
-.c-gray {
-  color: gray;
-}
-
-.c-text-notice {
-  color: #008000 !important;
-}
-
-.c-black {
-  color: black;
-}
-
-.c-text-gray {
-  color: #80808094;
-}
-
-.bg-red {
-  background: red;
-}
-
-.bg-gold {
-  background: gold;
-}
-
-.bg-green {
-  background: green;
-}
-
-.bg-white {
-  background: white;
-}
-
-.bg-gray {
-  background: gray;
-}
-
-.bg-second-gray {
-  background: #c1c1c1;
-
-}
-
-.red {
-  background: red;
-}
-
-.gold {
-  background: gold;
-}
-
-.green {
-  background: green;
-}
+$second-text-color: rgb(143, 143, 158);
+$second-btn-color: rgb(58,58,70);
+$line-color: rgb(37, 45, 66);
diff --git a/src/components/BaseSlideItem.vue b/src/components/BaseSlideItem.vue
deleted file mode 100644
index d9be9dd..0000000
--- a/src/components/BaseSlideItem.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <div id="base-slide-item" ref="slideItem">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BaseSlideItem"
-    }
-</script>
-
-<style scoped lang="scss">
-    #base-slide-item {
-        width: 100%;
-        height: 100%;
-        /*flex: 1;*/
-        /*flex-shrink: 1;*/
-        overflow-y: scroll;
-    }
-
-</style>
\ No newline at end of file
diff --git a/src/components/BaseSlideList.vue b/src/components/BaseSlideList.vue
deleted file mode 100644
index d25e26c..0000000
--- a/src/components/BaseSlideList.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-    <div id="base-slide-wrapper" ref="slideWrapper">
-        <div id="base-slide-list" ref="slideList"
-             @touchstart="touchStart($event)"
-             @touchmove="touchMove($event)"
-             @touchend="touchEnd($event)">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BaseSlideList",
-        created() {
-            // console.log('created',this.$refs)
-        },
-        data() {
-            return {
-                wrapperWidth: 0,
-
-                startLocationX: 0,
-                startLocationY: 0,
-
-                lastLocationX: 0,
-                lastLocationY: 0,
-
-                moveXDistance: 0,
-                moveYDistance: 0,
-
-                judgeValue: 20,
-                startTime: 0,
-
-                currentSlideItemIndex: 0,
-                isDrawRight: 0,
-                isCanRightWiping: false,
-                isCanDownWiping: false,
-                isNeedCheck: true,
-
-                slideList: null,
-                slideItems: null,
-            }
-        },
-        mounted() {
-            this.slideList = this.$refs.slideList
-            this.slideItems = this.slideList.children
-            this.wrapperWidth = this.$getCss(this.slideList, 'width')
-            console.log(this.wrapperWidth)
-            this.slideList.style.width = this.slideItems.length * this.wrapperWidth + 'px'
-        },
-        methods: {
-            touchStart(e) {
-                this.slideList.style.transition = 'none'
-                // indicator.style.transition = 'none'
-
-                this.startLocationX = e.touches[0].pageX
-                this.startLocationY = e.touches[0].pageY
-                // console.log(' this.startLocationX', this.startLocationX)
-                // console.log(' this.startLocationY', this.startLocationY)
-                this.startTime = Date.now()
-            },
-            touchMove(e) {
-                this.lastLocationX = e.touches[0].pageX
-                this.lastLocationY = e.touches[0].pageY
-                this.moveXDistance = this.lastLocationX - this.startLocationX
-                this.moveYDistance = this.lastLocationY - this.startLocationY
-
-                // console.log('moveXDistance', this.moveXDistance)
-                // console.log('moveYDistance', this.moveYDistance)
-
-                this.isDrawRight = this.moveXDistance < 0
-
-                // console.log(this.isDrawRight)
-
-                this.checkDirection()
-                if (this.isCanRightWiping) {
-                    //禁止在index=0页面的时候，向左划
-                    if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
-                        return
-                    }
-                    //禁止在最后页面的时候，向右划
-                    if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
-                        return
-                    }
-                    e.stopImmediatePropagation()
-                    e.stopPropagation()
-
-                    if (this.isDrawRight) {
-                        this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance + this.judgeValue + 'px'
-                    } else {
-                        this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance - this.judgeValue + 'px'
-                    }
-                }
-            },
-            touchEnd(e) {
-                if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
-                    return
-                }
-                //禁止在最后页面的时候，向右划
-                if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
-                    return
-                }
-
-                this.slideList.style.transition = 'all .3s'
-
-                let endTime = Date.now()
-                let gapTime = endTime - this.startTime
-
-                // 如果
-                if (Math.abs(this.moveXDistance) < 20) {
-                    gapTime = 1000
-                }
-                if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) {
-                    gapTime = 100
-                }
-
-                if (gapTime < 150) {
-                    if (this.isDrawRight) {
-                        this.currentSlideItemIndex += 1
-                    } else {
-                        this.currentSlideItemIndex -= 1
-                    }
-                    this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
-
-                } else {
-                    this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
-                }
-                this.resetConfig()
-            },
-            resetConfig() {
-                this.isCanDownWiping = false
-                this.isCanRightWiping = false
-                this.isNeedCheck = true
-                this.moveXDistance = 0
-                this.moveYDistance = 0
-            },
-            checkDirection() {
-                if (!this.isNeedCheck) {
-                    // console.log('不需要检测了')
-                    return
-                }
-                if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
-                    // console.log((Math.abs(this.moveXDistance) * 10))
-                    // console.log((Math.abs(this.moveYDistance) * 10))
-                    // console.log((Math.abs(this.moveYDistance)))
-                    //y移动距离为0 ，angle为Infinty
-                    if (Math.abs(this.moveYDistance) === 0) {
-                        //左右划
-                        this.isCanDownWiping = false
-                        this.isCanRightWiping = true
-                        this.isNeedCheck = false
-                        return;
-                    }
-                    //X 除以 Y
-                    let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
-                    // console.log('angle', angle);
-                    if (angle > 0.7 && angle < 1.3) {
-                        this.isNeedCheck = false
-                        return
-                    }
-
-                    // console.log('x------------', moveXDistance)
-                    // console.log('y------------', moveYDistance)
-                    // console.log('角度------------', angle)
-
-                    if (angle < 0.6) {
-                        //上下划
-                        this.isCanDownWiping = true
-                        this.isCanRightWiping = false
-                        this.isNeedCheck = false
-                        return
-                    }
-                    if (angle > 5) {
-                        //左右划
-                        this.isCanDownWiping = false
-                        this.isCanRightWiping = true
-                        this.isNeedCheck = false
-                        return
-                    }
-                }
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    #base-slide-wrapper {
-        width: 100%;
-        overflow: hidden;
-
-        #base-slide-list {
-            display: flex;
-            left: 0;
-            /*transition: all 0.3s ease 0s;*/
-            height: 100%;
-            width: 100%;
-            position: relative;
-        }
-    }
-
-</style>
\ No newline at end of file
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index 06439a7..a5a7c72 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list">
+    <div class="poster-item" v-for="i in list" @click="$nav('/VideoDetail')">
       <img class="poster" src="../assets/img/poster/2.jpg" alt="">
       <div class="num">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
diff --git a/src/components/Video.vue b/src/components/Video.vue
index eceeb18..4440c9e 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -33,7 +33,8 @@
               </div>
               <span>{{ video.loves }}</span>
             </div>
-            <div class="message mb15p" @click.stop="$emit('showComments')">
+<!--            <div class="message mb15p" @click.stop="$emit('showComments')">-->
+            <div class="message mb15p" @click.stop="showComment">
               <img src="../assets/img/icon/message.svg" alt="" class="message-image">
               <span>{{ video.comments }}</span>
             </div>
@@ -49,7 +50,7 @@
               </div>
             </div>
           </div>
-          <div class="content ml10p mb10p" @click.stop="goUserInfo()">
+          <div class="content ml10p mb10p" @click.stop="goUserInfo()" v-if="!isMy">
             <div class="name mb10p">@TTentau</div>
             <div class="description mb10p">
               吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
@@ -60,6 +61,27 @@
               <div behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</div>
             </div>
           </div>
+          <div class="comment-status">
+            <div class="comment">
+              <div class="type-comment">
+                <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+                <div class="right">
+                  <p>
+                    <span class="name">zzzzz</span>
+                    <span class="time">2020-01-20</span>
+                  </p>
+                  <p class="text">北京</p>
+                </div>
+              </div>
+              <transition-group name="fade" tag="ul">
+                <div class="type-loved"  v-for="i in test">
+                  <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+                  <img src="../assets/img/icon/love.svg" alt="" class="loved">
+                </div>
+              </transition-group>
+            </div>
+
+          </div>
         </div>
         <div class="process"
              :class="isMove ? '' : isPlaying && 'stop'"
@@ -97,6 +119,12 @@ export default {
       default: () => {
         return true
       }
+    },
+    isMy: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
     }
   },
   computed: {
@@ -156,6 +184,7 @@ export default {
       isMove: false,
       mitt: inject('mitt'),
       currentVideoId: 'a' + Date.now(),
+      test: [1]
     }
   },
   mounted() {
@@ -169,6 +198,7 @@ export default {
       // this.currentTime = v.isMove ? v.e : this.currentTime
       v.isMove ? this.move(v.e) : this.end(v.e)
     })
+
   },
   methods: {
     attention() {
@@ -220,6 +250,7 @@ export default {
     },
     //展示评论
     showComment() {
+      return this.test.push(Date.now())
       this.isCommenting = !this.isCommenting
     },
     showShare() {
@@ -258,15 +289,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../assets/scss/color";
+
 .fade-enter-active,
 .fade-leave-active {
-  transition: transform 0.1s linear;
+  transition: transform 0.5s linear;
 }
 
 .fade-enter-from,
 .fade-leave-to {
   transform: scale(0);
 }
+
 .bg-video {
   position: relative;
   background: black;
@@ -492,6 +526,68 @@ export default {
 
           }
         }
+
+        .comment-status {
+          display: flex;
+          align-items: center;
+
+          .comment {
+
+            .type-comment {
+              display: flex;
+              background: rgb(130, 21, 44);
+              border-radius: 50px;
+              padding: 3px;
+              margin-bottom: 20px;
+
+              .avatar {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+              }
+
+              .right {
+                margin: 0 10px;
+                color: $second-text-color;
+
+                .name {
+                  margin-right: 10px;
+                }
+
+                .text {
+                  color: white;
+                }
+
+              }
+
+            }
+
+            .type-loved {
+              position: relative;
+              margin-bottom: 20px;
+
+              .avatar {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+              }
+
+              .loved {
+                position: absolute;
+                bottom: 0;
+                left: 20px;
+                width: 10px;
+                height: 10px;
+                background: red;
+                padding: 3px;
+                border-radius: 50%;
+                border: 2px solid white;
+              }
+
+            }
+
+          }
+        }
       }
 
       .process {
diff --git a/src/components/home/Home2.vue b/src/components/home/Home2.vue
deleted file mode 100644
index 26d34f8..0000000
--- a/src/components/home/Home2.vue
+++ /dev/null
@@ -1,594 +0,0 @@
-<template>
-    <div id="home">
-        <div class="wrapper" :style="{left:wrapperLeft}"
-             @touchstart="wrapperTouchstart($event)"
-             @touchmove="wrapperTouchmove($event)"
-             @touchend="wrapperTouchend($event)">
-            <div class="left-container swiper-item">
-                <div class="content-list" :style="{top:contentListTop}">
-                    <div class="content-item" v-for="(item,index) of data"
-                         @touchstart="contentItemTouchstart($event,index)"
-                         @touchmove="contentItemTouchmove($event)"
-                         @touchend="contentItemTouchend($event,index)">
-                        <div class="bg-video" v-bind:style="{'height':height+'px'}">
-                            <video :src="item.videoUrl" :poster="item.poster" ref="video" muted :autoplay="index === 0" loop>
-                                <p> 您的浏览器不支持 video 标签。</p>
-                            </video>
-                            <div class="float" @click="togglePlayVideo($event)">
-                                <transition name="pause">
-                                    <img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
-                                         @click.stop="togglePlayVideo($event)">
-                                </transition>
-                                <div class="toolbar mb10p">
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" @click.stop="goUserInfo(item)">
-                                    <div class="love mb15p" @click.stop="loved($event,index)">
-                                        <div>
-                                            <transition name="love">
-                                                <img src="../../assets/img/icon/love.svg" class="love-image"
-                                                     v-if="!item.isLoved">
-                                                <img src="../../assets/img/icon/loved.svg" class="love-image"
-                                                     v-if="item.isLoved">
-
-                                            </transition>
-                                            <transition name="loved">
-                                            </transition>
-                                        </div>
-                                        <span class="f14">{{item.loves}}</span>
-                                    </div>
-                                    <div class="message mb15p" @click.stop="showComment">
-                                        <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
-                                        <span class="f14">{{item.comments}}</span>
-                                    </div>
-                                    <div class="share mb35p" @click.stop="showShare">
-                                        <img src="../../assets/img/icon/share.svg" alt="" class="share-image">
-                                        <span class="f14">{{item.shared}}</span>
-                                    </div>
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
-                                </div>
-                                <div class="content ml10p" @click.stop="goUserInfo()">
-                                    <div class="name mb10p" >@TTentau</div>
-                                    <div class="description mb10p">
-                                        吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
-                                    </div>
-                                    <div class="music mb10p" @click.stop="goMusic()">
-                                        <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
-                                        <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
-                                            光年之外
-                                        </marquee>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <Comment v-bind:is-commenting.sync="isCommenting"/>
-                <Share v-bind:is-sharing.sync="isSharing" ref="share"/>
-                <Footer v-bind:init-tab="1"/>
-            </div>
-            <div class="right-container swiper-item">
-                <Other ref="other" @back="backVideoList"/>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import Comment from '../Comment'
-    import Other from '../Other'
-    import Share from '../Share'
-    import Footer from "../Footer"
-
-    export default {
-        name: "Home",
-        components: {Footer, Comment, Share, Other},
-        data() {
-            return {
-                data: [
-                    {
-                        videoUrl: require('../../assets/video/1.mp4'),
-                        // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                        isLoved: false,
-                        loves: 1234,
-                        comments: 666,
-                        shared: 999
-                    },
-                    {
-                        videoUrl: require('../../assets/video/src1.mp4'),
-                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                        isLoved: false,
-                        loves: 1234,
-                        comments: 666,
-                        shared: 999
-                    },
-                    {
-                        videoUrl: require('../../assets/video/src1.mp4'),
-                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                        isLoved: false,
-                        loves: 1234,
-                        comments: 666,
-                        shared: 999
-                    }
-                ],
-                height: 0,
-                width: 0,
-                startLocationY: 0,
-                startLocationX: 0,
-
-                lastLocationY: 0,
-                lastLocationX: 0,
-
-                moveXDistance: 0,
-                moveYDistance: 0,
-
-                judgeValue: 10,
-
-                startTime: 0,
-                currentIndex: 0,
-                currentSwiperItemIndex: 0,
-                isDrawDown: false,
-                isDrawRight: false,
-
-                isCanDownWiping: false,
-                isCanRightWiping: false,
-                isNeedCheck: true,
-
-                isPlaying: true,
-                isCommenting: false,
-                isSharing: false,
-
-                wrapperLeft: 0,
-                contentListTop: 0,
-
-                commentHeight: 0,
-                shareHeight: 0,
-            }
-        },
-        mounted() {
-            this.height = document.body.clientHeight
-            this.width = document.body.clientWidth
-        },
-        methods: {
-            goMusic(){
-                this.$router.push('/music')
-            },
-            checkDirection() {
-                if (!this.isNeedCheck) {
-                    return
-                }
-                if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
-                    //X 除以 Y
-                    let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
-                    if (angle > 0.7 && angle < 1.3) {
-                        this.isNeedCheck = false
-                        return
-                    }
-
-                    // console.log('x------------', moveXDistance)
-                    // console.log('y------------', moveYDistance)
-                    // console.log('角度------------', angle)
-
-                    if (angle < 0.6) {
-                        //上下划
-                        this.isCanDownWiping = true
-                        this.isCanRightWiping = false
-                        this.isNeedCheck = false
-                        return
-                    }
-                    if (angle > 5) {
-                        //左右划
-                        this.isCanDownWiping = false
-                        this.isCanRightWiping = true
-                        this.isNeedCheck = false
-                    }
-                }
-            },
-            resetConfig() {
-                this.isCanDownWiping = false
-                this.isCanRightWiping = false
-                this.isNeedCheck = true
-                this.moveXDistance = 0
-                this.moveYDistance = 0
-            },
-            wrapperTouchstart(e) {
-                if (this.isSharing || this.isCommenting) {
-                    // this.isNeedCheck = this.isCommenting = this.isSharing = false
-                    this.isNeedCheck = false
-                    return
-                }
-
-                this.startLocationX = e.touches[0].pageX
-                this.startTime = Date.now()
-            },
-            wrapperTouchmove(e) {
-                this.lastLocationX = e.touches[0].pageX
-                this.moveXDistance = this.lastLocationX - this.startLocationX
-                this.isDrawRight = this.moveXDistance < 0
-                this.checkDirection()
-                if (this.isCanRightWiping) {
-                    if (this.isDrawRight) {
-                        this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance + this.judgeValue + 'px'
-                    } else {
-                        this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance - this.judgeValue + 'px'
-                    }
-                }
-            },
-            wrapperTouchend(e) {
-                if (!this.isCanRightWiping) {
-                    this.isNeedCheck = true
-                    return
-                }
-                let endTime = Date.now()
-                let gapTime = endTime - this.startTime
-
-                if (Math.abs(this.moveXDistance) < 20) {
-                    gapTime = 1000
-                }
-                if (Math.abs(this.moveXDistance) > (this.width / 3)) {
-                    gapTime = 100
-                }
-                if (gapTime < 150) {
-                    if (this.isDrawRight) {
-                        // console.log('往左划');
-                        if (this.currentSwiperItemIndex === 2 - 1) {
-                            return this.wrapperLeft = -this.width + 'px'
-                        }
-                        this.wrapperLeft = -(this.currentSwiperItemIndex + 1) * this.width + 'px'
-                        this.currentSwiperItemIndex += 1
-                    } else {
-                        // console.log('往右划');
-                        if (this.currentSwiperItemIndex === 0) {
-                            return this.wrapperLeft = 0 + 'px'
-                        }
-                        this.wrapperLeft = -(this.currentSwiperItemIndex - 1) * this.width + 'px'
-                        this.currentSwiperItemIndex -= 1
-                    }
-                } else {
-                    this.wrapperLeft = -(this.currentSwiperItemIndex) * this.width + 'px'
-                }
-
-                //暂停播放视频
-                let videos = this.$refs.video
-                if (this.currentSwiperItemIndex === 0) {
-                    videos[this.currentIndex].play()
-                } else {
-                    videos[this.currentIndex].pause()
-                }
-
-                this.resetConfig()
-            },
-            contentItemTouchstart(e, index) {
-                // this.currentIndex = index
-                this.startLocationY = e.touches[0].pageY
-                this.startTime = Date.now()
-            },
-            contentItemTouchmove(e) {
-                this.lastLocationY = e.touches[0].pageY
-
-                this.moveYDistance = this.lastLocationY - this.startLocationY
-                this.isDrawDown = this.moveYDistance < 0
-
-                this.checkDirection()
-                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})
-                    } else {
-                        this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px'
-                        // contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
-                    }
-                }
-            },
-            contentItemTouchend(e, index) {
-                this.currentIndex = index
-
-                if (!this.isCanDownWiping) {
-                    this.isNeedCheck = true
-                    return
-                }
-                let endTime = Date.now()
-                let gapTime = endTime - this.startTime
-
-                // 如果
-                if (Math.abs(this.moveYDistance) < 20) {
-                    gapTime = 1000
-                }
-                if (Math.abs(this.moveYDistance) > (this.width / 3)) {
-                    gapTime = 100
-                }
-                if (gapTime < 150) {
-                    if (this.isDrawDown) {
-                        console.log('往下划')
-                        if (this.data.length < this.currentIndex + 4) {
-                            this.loadNewVideo()
-                        }
-                        this.contentListTop = -(this.currentIndex + 1) * this.height + 'px'
-                        this.currentIndex += 1
-                    } else {
-                        console.log('往上划')
-                        if (this.currentIndex === 0) {
-                            return this.contentListTop = 0
-                        }
-                        this.contentListTop = -(this.currentIndex - 1) * this.height + 'px'
-                        this.currentIndex -= 1
-                    }
-                    this.swipingVideo()
-                } else {
-                    this.contentListTop = -this.currentIndex * this.height + 'px'
-                }
-
-                this.resetConfig()
-            },
-            //加载新的视频
-            loadNewVideo() {
-                this.data.push({
-                    videoUrl: require('../../assets/video/src1.mp4'),
-                    videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                    isLoved: false,
-                    loves: 1234,
-                    comments: 666,
-                    shared: 999
-                })
-            },
-
-            //划动到下一个视频
-            swipingVideo() {
-                let videos = this.$refs.video
-                if (this.currentIndex) {
-                    videos[this.currentIndex - 1].pause()
-                }
-                videos[this.currentIndex].play()
-                videos[this.currentIndex].muted  = false
-                videos[this.currentIndex + 1].pause()
-
-
-                this.isCommenting = false
-                this.isSharing = false
-                this.isPlaying = true
-            },
-            //切换视频状态
-            togglePlayVideo(e) {
-                if (this.isSharing) {
-                    this.isSharing = false
-                    return
-                }
-                if (this.isCommenting) {
-                    this.isCommenting = false
-                    return
-                }
-                let el = e.target
-                let video = ''
-                if (el.nodeName == 'IMG') {
-                    video = el.parentNode.previousSibling
-                } else {
-                    video = el.previousSibling
-                }
-                if (video.paused) {
-                    video.play()
-                } else {
-                    video.pause()
-                }
-                this.isPlaying = !video.paused
-            },
-            //展示评论
-            showComment() {
-                this.isCommenting = !this.isCommenting
-            },
-            showShare() {
-                this.isSharing = !this.isSharing
-            },
-            loved(e, index) {
-                this.data[index].isLoved = !this.data[index].isLoved
-            },
-            //前往用户中心
-            goUserInfo(item){
-                this.wrapperLeft = '-100%'
-            },
-            //返回视频列表
-            backVideoList(){
-                this.wrapperLeft = '0'
-            }
-        },
-        created() {
-
-        },
-
-    }
-</script>
-<style scoped lang="scss">
-    #home {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-
-        .wrapper {
-            /*transition: left 0.25s ease;*/
-            transition: left 0.25s ease-out;
-            position: relative;
-            display: flex;
-            width: 100%;
-            height: 100%;
-
-            .swiper-item {
-                /*flex-shrink: 0;*/
-                position: absolute;
-                width: 100%;
-                height: 100%;
-            }
-
-            .left-container {
-                top: 0;
-                left: 0;
-                overflow: hidden;
-
-                .content-list {
-                    position: absolute;
-                    transition: top 0.25s ease-out;
-                    height: 100%;
-                    width: 100%;
-
-                    .content-item {
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-
-                        .bg-video {
-                            position: relative;
-                            background: black;
-
-                            video {
-                                width: 100%;
-                                height: 100%;
-                                /*position: absolute;*/
-                            }
-
-                            .float {
-                                z-index: 1;
-                                position: absolute;
-                                top: 0;
-                                width: 100%;
-                                height: 100%;
-                                justify-content: center;
-                                align-items: center;
-
-                                .pause {
-                                    width: 60px;
-                                    height: 60px;
-                                    opacity: 0.5;
-                                    position: absolute;
-                                    margin: auto;
-                                    left: 0;
-                                    top: 0;
-                                    bottom: 0;
-                                    right: 0;
-                                }
-
-                                .toolbar {
-                                    width: 40px;
-                                    position: absolute;
-                                    bottom: 35px;
-                                    right: 20px;
-                                    color: #fff;
-
-                                    div {
-                                        text-align: center;
-                                    }
-
-                                    img {
-                                        width: 90%;
-                                        height: 90%;
-                                    }
-
-                                    .head-image, .music {
-                                        width: 100%;
-                                        height: 100%;
-                                        border-radius: 50%;
-                                    }
-
-                                    .love {
-                                        img {
-
-                                        }
-                                    }
-
-                                    .loved {
-                                        background: red;
-                                    }
-
-                                    .music {
-                                        animation: animations 4s linear forwards infinite;
-                                    }
-
-                                    @keyframes animations {
-                                        0% {
-                                            transform: rotate(0deg);;
-                                        }
-                                        100% {
-                                            transform: rotate(360deg);
-                                        }
-                                    }
-                                }
-
-                                .content {
-                                    color: #fff;
-                                    position: absolute;
-                                    bottom: 35px;
-                                    width: 75%;
-
-                                    .music {
-                                        position: relative;
-                                        width: 60%;
-
-                                        .music-image {
-                                            width: 20px;
-                                            height: 20px;
-                                            margin-top: 3px;
-                                            position: absolute;
-                                        }
-
-                                        marquee {
-                                            margin-left: 30px;
-                                        }
-
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .right-container {
-                top: 0;
-                left: 100%;
-                overflow: auto;
-
-                .user-videos {
-                    height: 12000px;
-                }
-            }
-        }
-    }
-</style>
-<style scoped lang="scss">
-
-    .pause-enter-active {
-        transition: all .3s ease;
-    }
-
-    .pause-leave-active {
-        /*transition: all 1s ease ;*/
-    }
-
-    .pause-enter, .pause-leave-to {
-        transform: scale(2);
-        opacity: 0;
-    }
-
-    .love-enter-active {
-        transition: all .3s ease;
-    }
-
-    .love-leave-active {
-        transition: all .3s ease;
-    }
-
-    .love-leave-to {
-        transform: scale(2);
-        opacity: 0;
-    }
-
-    .loved-enter-active {
-        transition: all .3s ease;
-    }
-
-    .loved-leave-active {
-        transition: all .3s ease;
-    }
-
-    .loved-leave-to {
-        opacity: 0;
-    }
-
-
-</style>
diff --git a/src/components/home/SlideItem.vue b/src/components/home/SlideItem.vue
deleted file mode 100644
index 122a158..0000000
--- a/src/components/home/SlideItem.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div id="base-slide-item" ref="slideItem">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BaseSlideItem"
-}
-</script>
-
-<style scoped lang="scss">
-#base-slide-item {
-  width: 100vw;
-  height: 100%;
-  //flex: 1;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/home/SlideList.vue b/src/components/home/SlideList.vue
deleted file mode 100644
index c12d372..0000000
--- a/src/components/home/SlideList.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <div id="base-slide-wrapper" ref="slideWrapper">
-    <div id="base-slide-list" ref="slideList"
-         :style="{'flex-direction':direction}"
-         @touchstart="touchStart($event)"
-         @touchmove="touchMove($event)"
-         @touchend="touchEnd($event)">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BaseSlideList",
-  props: {
-    direction: {
-      type: String,
-      default: () => 'row'
-    },
-    key1: {
-      type: String,
-      default: () => 'row'
-    }
-  },
-  data() {
-    return {
-      wrapperWidth: 0,
-      wrapperHeight: 0,
-
-      startLocationX: 0,
-      startLocationY: 0,
-
-      lastLocationX: 0,
-      lastLocationY: 0,
-
-      moveXDistance: 0,
-      moveYDistance: 0,
-
-      judgeValue: 10,
-      startTime: 0,
-
-      currentSlideItemIndex: 0,
-      isDrawRight: true,
-      isDrawDown: true,
-      isCanRightWiping: false,
-      isCanDownWiping: false,
-      isNeedCheck: true,
-
-      slideList: null,
-      slideItems: null,
-      slideItemsWidths: [],
-      slideItemsHeights: [],
-    }
-  },
-  mounted() {
-    this.slideList = this.$refs.slideList
-    this.slideItems = this.slideList.children
-    this.wrapperWidth = this.$getCss(this.slideList, 'width')
-    this.wrapperHeight = this.$getCss(this.slideList, 'height')
-    // console.log(this.wrapperWidth)
-    // console.log(this.wrapperHeight)
-    for (let i = 0; i < this.slideItems.length; i++) {
-      this.slideItemsWidths.push(this.$getCss(this.slideItems[i], 'width'))
-      this.slideItemsHeights.push(this.$getCss(this.slideItems[i], 'height'))
-    }
-  },
-  methods: {
-    touchStart(e) {
-      this.setCss(this.slideList, 'transition-duration', `0ms`)
-      this.startLocationX = e.touches[0].pageX
-      this.startLocationY = e.touches[0].pageY
-      // console.log(' this.startLocationX', this.startLocationX)
-      // console.log(' this.startLocationY', this.startLocationY)
-      this.startTime = Date.now()
-    },
-    touchMove(e) {
-      // console.log(e)
-      this.lastLocationX = e.touches[0].pageX
-      this.lastLocationY = e.touches[0].pageY
-      this.moveXDistance = this.lastLocationX - this.startLocationX
-      this.moveYDistance = this.lastLocationY - this.startLocationY
-
-      // console.log(this.key)
-      // console.log(this.direction + '  moveXDistance', this.moveXDistance)
-      // console.log(this.direction + '  moveYDistance', this.moveYDistance)
-
-      this.isDrawRight = this.moveXDistance < 0
-      this.isDrawDown = this.moveYDistance < 0
-      this.checkDirection()
-      if (this.direction === 'row') {
-        if (this.isCanRightWiping) {
-          // //禁止在index=0页面的时候，向左划
-          if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
-          //禁止在最后页面的时候，向右划
-          if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
-          e.stopImmediatePropagation()
-          e.stopPropagation()
-          e.preventDefault()
-          this.setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
-          // this.setCss(this.slideList, 'transform', `translate3d(${-this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance}px, 0px, 0px)`)
-        }
-      } else {
-        if (this.isCanDownWiping) {
-          // //禁止在index=0页面的时候，向左划
-          if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
-          //禁止在最后页面的时候，向右划
-          if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
-          e.stopImmediatePropagation()
-          e.stopPropagation()
-          e.preventDefault()
-          this.setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
-        }
-      }
-    },
-    getWidth(index) {
-      return this.slideItemsWidths.reduce((p, c, i) => {
-        if (i < index) {
-          //最后一页，如果宽度不够屏幕宽度，那不能拉完
-          if (this.slideItemsWidths.length - 1 === i + 1) {
-            p = p + c - (this.wrapperWidth - this.slideItemsWidths[index])
-          } else {
-            p += c
-          }
-        }
-        return p
-      }, 0)
-    },
-    getHeight(index) {
-      return this.slideItemsHeights.reduce((p, c, i) => {
-        if (i < index) {
-          //最后一页，如果宽度不够屏幕宽度，那不能拉完
-          if (this.slideItemsHeights.length - 1 === i + 1) {
-            p = p + c - (this.wrapperHeight - this.slideItemsHeights[index])
-          } else {
-            p += c
-          }
-        }
-        return p
-      }, 0)
-    },
-    setCss(el, key, value) {
-      if (key === 'transform') {
-        el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;
-      } else {
-        el.style[key] = value
-      }
-    },
-    touchEnd(e) {
-      this.setCss(this.slideList, 'transition-duration', `300ms`)
-      let endTime = Date.now()
-      let gapTime = endTime - this.startTime
-      if (this.direction === 'row') {
-        if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
-        if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
-        e.stopImmediatePropagation()
-        e.stopPropagation()
-        e.preventDefault()
-        if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
-        if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) gapTime = 100
-        if (gapTime < 150) {
-          if (this.isDrawRight) {
-            this.currentSlideItemIndex += 1
-          } else {
-            this.currentSlideItemIndex -= 1
-          }
-        }
-        // this.setCss(this.slideList, 'transform', `translate3d(${-(this.currentSlideItemIndex) * this.wrapperWidth}px, 0px, 0px)`)
-        this.setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`)
-      } else {
-        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
-        if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
-        if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
-        if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
-        if (gapTime < 150) {
-          if (this.isDrawDown) {
-            this.currentSlideItemIndex += 1
-          } else {
-            this.currentSlideItemIndex -= 1
-          }
-        }
-        // this.setCss(this.slideList, 'transform', `translate3d(0px, ${-(this.currentSlideItemIndex) * this.wrapperHeight}px,  0px)`)
-        this.setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px,  0px)`)
-      }
-      this.resetConfig()
-    },
-    resetConfig() {
-      this.isCanDownWiping = false
-      this.isCanRightWiping = false
-      this.isNeedCheck = true
-      this.moveXDistance = 0
-      this.moveYDistance = 0
-    },
-    checkDirection() {
-      if (!this.isNeedCheck) return
-      let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
-      if (angle < 0.6) {
-        //上下划
-        this.isCanDownWiping = true
-        this.isCanRightWiping = false
-        this.isNeedCheck = false
-        return
-      }
-      if (angle > 5) {
-        //左右划
-        this.isCanDownWiping = false
-        this.isCanRightWiping = true
-        this.isNeedCheck = false
-        return
-      }
-      return;
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-#base-slide-wrapper {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  #base-slide-list {
-    display: flex;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/home/index.vue b/src/components/home/index.vue
deleted file mode 100644
index ae74771..0000000
--- a/src/components/home/index.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class='index'>
-
-
-    </div>
-</template>
-<script>
-  export default {
-    name: "index",
-    components: {},
-    data() {
-      return {}
-    },
-    created() {
-      
-    },
-    computed: {},
-    methods: {}
-  }
-</script>
-
-<style scoped lang='scss'>
-    .index {
-
-    }
-</style>
diff --git a/src/pages/home/SlideItem.vue b/src/components/slide/SlideItem.vue
similarity index 100%
rename from src/pages/home/SlideItem.vue
rename to src/components/slide/SlideItem.vue
diff --git a/src/pages/home/SlideList.vue b/src/components/slide/SlideList.vue
similarity index 99%
rename from src/pages/home/SlideList.vue
rename to src/components/slide/SlideList.vue
index 556726e..c30c665 100644
--- a/src/pages/home/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -53,6 +53,10 @@
 export default {
   name: "BaseSlideList",
   props: {
+    canMove: {
+      type: Boolean,
+      default: () => true
+    },
     direction: {
       type: String,
       default: () => 'row'
@@ -217,6 +221,7 @@ export default {
       this.startTime = Date.now()
     },
     touchMove(e) {
+      if (!this.canMove) return;
       this.moveXDistance = e.touches[0].pageX - this.startLocationX
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
 
@@ -400,6 +405,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/scss/color";
+
 #base-slide-wrapper {
   width: 100%;
   height: 100%;
@@ -490,7 +497,7 @@ export default {
     left: 0;
     right: 0;
     z-index: 999;
-    background: #333;
+    background: $main-bg;
 
     .tabs {
       display: flex;
diff --git a/src/main.js b/src/main.js
index b01be86..f6bd613 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,8 +5,9 @@ import mitt from 'mitt'
 import './assets/scss/index.scss'
 
 import BaseHeader from "./components/BaseHeader.vue"
-import BaseSlideList from "./components/BaseSlideList.vue";
-import BaseSlideItem from "./components/BaseSlideItem.vue";
+import SlideList from "./components/slide/SlideList";
+import SlideItem from "./components/slide/SlideItem";
+import Video from "./components/Video";
 import router from "./router";
 import store from "./store";
 import globalMethods from './utils/global-methods'
@@ -20,8 +21,9 @@ const app = Vue.createApp(App)
 app.provide('mitt', mitt())
 
 app.component('BaseHeader', BaseHeader)
-app.component('BaseSlideList', BaseSlideList)
-app.component('BaseSlideItem', BaseSlideItem)
+app.component('SlideList', SlideList)
+app.component('SlideItem', SlideItem)
+app.component('Video', Video)
 app.mixin(mixin)
 app.use(router)
 app.use(store)
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index 6727652..711c570 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -172,13 +172,11 @@ import mp43 from '../../assets/video/3.mp4'
 import mp44 from '../../assets/video/4.mp4'
 import mp45 from '../../assets/video/5.mp4'
 import src1Bg from '../../assets/img/poster/src1-bg.png'
-import SlideItem from './SlideItem.vue'
-import SlideList from './SlideList.vue'
 import Video from "../../components/Video.vue";
 
 export default {
   name: "HomeIndex",
-  components: {Footer, Comment, Share, Other, SlideList, SlideItem, Video},
+  components: {Footer, Comment, Share, Other, Video},
   data() {
     return {
       list: [1, 2, 3, 4, 5],
diff --git a/src/pages/home/Message.vue b/src/pages/home/Message.vue
index aee55e9..2656444 100644
--- a/src/pages/home/Message.vue
+++ b/src/pages/home/Message.vue
@@ -132,8 +132,6 @@ export default {
   padding-bottom: 60px;
   color: white;
 
-  $second-text-color: rgb(143, 143, 158);
-  $line-color: rgb(37, 45, 66);
 
   .header {
     .title {
diff --git a/src/pages/home/Me.vue b/src/pages/me/Me.vue
similarity index 97%
rename from src/pages/home/Me.vue
rename to src/pages/me/Me.vue
index 0db8d7e..ebccdec 100644
--- a/src/pages/home/Me.vue
+++ b/src/pages/me/Me.vue
@@ -198,14 +198,12 @@
   </div>
 </template>
 <script>
-import SlideList from "./SlideList.vue";
-import SlideItem from "./SlideItem.vue";
 import Posters from '../../components/Posters'
 import Footer from "../../components/Footer";
 
 export default {
   name: "Me",
-  components: {SlideList, SlideItem, Posters, Footer},
+  components: {  Posters, Footer},
   data() {
     return {
       serviceEl: {},
@@ -308,8 +306,7 @@ export default {
 </script>
 
 <style scoped lang='scss'>
-$left-bg-color: #333;
-$right-bg-color: #2e3244;
+@import "../../assets/scss/color";
 
 .fade-enter-active,
 .fade-leave-active {
@@ -323,7 +320,7 @@ $right-bg-color: #2e3244;
 }
 
 .Me {
-  background: $right-bg-color;
+  background: $main-bg;
   height: 100%;
   width: 100%;
 
@@ -380,7 +377,7 @@ $right-bg-color: #2e3244;
     }
 
     .detail {
-      background: $right-bg-color;
+      background: $main-bg;
       padding: 0 20px;
 
       .head {
@@ -401,14 +398,14 @@ $right-bg-color: #2e3244;
 
         .my-buttons {
           div {
-            font-size: 1.4rem;
+            font-size: 1.2rem;
             display: flex;
             align-items: center;
             justify-content: center;
             float: left;
             border-radius: 2px;
-            background: rgb(99, 98, 98);
-            margin-right: 5px;
+            background: $second-btn-color;
+            margin-left: 5px;
             padding: 0 10px;
             height: 30px;
             color: white;
@@ -431,9 +428,9 @@ $right-bg-color: #2e3244;
         transform: translateY(-20px);
 
         .number {
-          color: darkgray;
+          color: $second-text-color;
           padding-bottom: 10px;
-          border-bottom: 1px solid gray;
+          border-bottom: 1px solid $line-color;
           display: flex;
           align-items: center;
 
@@ -472,7 +469,7 @@ $right-bg-color: #2e3244;
     margin: 0;
     position: absolute;
     color: white;
-    background: $right-bg-color;
+    background: $main-bg;
 
     .line {
       height: 1px;
@@ -482,7 +479,7 @@ $right-bg-color: #2e3244;
     }
 
     li {
-      background: $right-bg-color;
+      background: $main-bg;
       padding: 10px 20px;
       list-style: none;
       display: flex;
@@ -510,7 +507,7 @@ $right-bg-color: #2e3244;
     font-size: 1.2rem;
     width: 100%;
     position: absolute;
-    background: $right-bg-color;
+    background: $main-bg;
 
     .title {
       padding: 20px;
@@ -546,7 +543,7 @@ $right-bg-color: #2e3244;
     width: 70vw;
     position: absolute;
     bottom: 0;
-    background: $right-bg-color;
+    background: $main-bg;
 
     .button {
       box-sizing: border-box;
diff --git a/src/pages/home/Me2.vue b/src/pages/me/Me2.vue
similarity index 100%
rename from src/pages/home/Me2.vue
rename to src/pages/me/Me2.vue
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index 4054412..c62fe06 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -1,130 +1,129 @@
 <template>
-        <div id='MyCard'>
-            <BaseHeader >
-                <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                     xmlns="http://www.w3.org/2000/svg"
-                     p-id="15320" width="32" height="32">
-                    <path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
-                          fill="#8a8a8a" p-id="15321">
-                    </path>
-                </svg>
-            </BaseHeader>
-            <div class="content">
-                <div class="card">
-                    <div class="logo-ctn">
-                        <img src="../../assets/img/icon/head-image.jpeg" alt="">
-                    </div>
-                    <span class="name">TTentau</span>
-                    <span class="notice">使用抖音扫码，加我好友</span>
-                    <img src="../../assets/img/icon/logo2.png" alt="" class="logo">
-                </div>
-            </div>
-            <div class="notice-two">请使用最新版抖音扫描</div>
-            <div class="footer">
-                <div class="btn">
-                    <img src="../../assets/img/icon/download.png" alt="">
-                    <span>保存到相册</span>
-                </div>
-                <div class="btn">
-                    <img src="../../assets/img/icon/scan.png" alt="">
-                    <span>保存到相册</span>
-                </div>
-            </div>
+  <div id='MyCard'>
+    <BaseHeader>
+      <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
+           xmlns="http://www.w3.org/2000/svg"
+           p-id="15320" width="32" height="32">
+        <path
+            d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
+            fill="#8a8a8a" p-id="15321">
+        </path>
+      </svg>
+    </BaseHeader>
+    <div class="content">
+      <div class="card">
+        <div class="logo-ctn">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
         </div>
+        <span class="name">TTentau</span>
+        <span class="notice">使用抖音扫码，加我好友</span>
+        <img src="../../assets/img/icon/logo2.png" alt="" class="logo">
+      </div>
+    </div>
+    <div class="notice-two">请使用最新版抖音扫描</div>
+    <div class="footer">
+      <div class="btn">
+        <img src="../../assets/img/icon/download.png" alt="">
+        <span>保存到相册</span>
+      </div>
+      <div class="btn">
+        <img src="../../assets/img/icon/scan.png" alt="">
+        <span>保存到相册</span>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-    export default {
-        name: "MyCard",
-        components: {},
-        data() {
-            return {
-                transitionName: 'fade'
-            }
-        },
-        created() {
-            
-        },
-        computed: {},
-        methods: {
-
-        }
+export default {
+  name: "MyCard",
+  components: {},
+  data() {
+    return {
+      transitionName: 'fade'
     }
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {}
+}
 </script>
 
 <style scoped lang='scss'>
-    #MyCard {
-        width: 100vw;
-        height: 100%;
-        position: fixed;
+#MyCard {
+  width: 100vw;
+  height: 100%;
+  position: fixed;
 
-        .content {
-            padding: 20px;
+  .content {
+    padding: 20px;
 
-            .card {
-                margin: 10px 20px;
-                background: white;
-                border-radius: 10px;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
+    .card {
+      margin: 10px 20px;
+      background: white;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
 
-                .logo-ctn {
-                    margin: 20px 0;
-                    width: 50vw;
-                    height: 50vw;
-                    background-image: url("/@/assets/img/icon/logo-bg.png");
-                    background-position: center;
-                    background-size: 100% 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    img {
-                        width: 50%;
-                        height: 50%;
-                        border-radius: 50%;
-                    }
-                }
-
-                .notice {
-                    margin-top: 60px;
-                    opacity: .4;
-                }
-
-                .logo {
-                    margin: 20px 0;
-                    width: 40vw;
-                }
-            }
+      .logo-ctn {
+        margin: 20px 0;
+        width: 50vw;
+        height: 50vw;
+        background-image: url("/@/assets/img/icon/logo-bg.png");
+        background-position: center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
+        img {
+          width: 50%;
+          height: 50%;
+          border-radius: 50%;
         }
+      }
 
-        .notice-two {
-            color: white;
-            opacity: .4;
-            text-align: center;
-        }
+      .notice {
+        margin-top: 60px;
+        opacity: .4;
+      }
 
-        .footer {
-            position: absolute;
-            bottom: 30px;
-            display: flex;
-            justify-content: space-around;
-            width: 100%;
-
-            .btn {
-                color: white;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                img {
-                    width: 30px;
-                    margin-bottom: 10px;
-                }
-            }
-        }
+      .logo {
+        margin: 20px 0;
+        width: 40vw;
+      }
     }
 
+  }
+
+  .notice-two {
+    color: white;
+    opacity: .4;
+    text-align: center;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 30px;
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+
+    .btn {
+      color: white;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        width: 30px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
 
 </style>
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
new file mode 100644
index 0000000..01d895c
--- /dev/null
+++ b/src/pages/me/VideoDetail.vue
@@ -0,0 +1,162 @@
+<template>
+  <div id="home-index">
+    <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
+      <SlideItem >
+        <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
+          <SlideItem :style="itemTop" v-for="(item,index)  of videos">
+            <Video
+                :disabled="videoActiveIndex !== addCount + index"
+                v-model:video="videos[index]"
+                @showComments="isCommenting = !isCommenting"
+                @showShare="isSharing = !isSharing"
+                @goUserInfo="baseActiveIndex = 1"
+            ></Video>
+          </SlideItem>
+        </SlideList>
+      </SlideItem>
+      <SlideItem style="font-size: 40px;overflow:auto;">
+        <div>
+          <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>
+      </SlideItem>
+    </SlideList>
+  </div>
+</template>
+
+<script>
+import Comment from '../../components/Comment.vue'
+import Other from '../../components/Other.vue'
+import Share from '../../components/Share.vue'
+import Footer from "../../components/Footer.vue"
+import src1Bg from '../../assets/img/poster/src1-bg.png'
+import mp41 from "../../assets/video/1.mp4";
+import mp42 from "../../assets/video/2.mp4";
+import mp43 from "../../assets/video/3.mp4";
+import mp44 from "../../assets/video/4.mp4";
+import mp45 from "../../assets/video/5.mp4";
+
+export default {
+  name: "VideoDetail",
+  components: {Footer, Comment, Share, Other},
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5],
+      videos: [
+        {
+          videoUrl: mp41,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: true,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp42,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp43,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp44,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp45,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+      ],
+      addCount: 0,
+      total: 10,
+      baseActiveIndex: 0,
+      videoActiveIndex: 0,
+      canMove: false
+    }
+  },
+  computed: {
+    itemTop() {
+      return {top: this.addCount * 812 + 'px'}
+    },
+  },
+  mounted() {
+    // this.height = document.body.clientHeight
+    // this.width = document.body.clientWidth
+  },
+  created() {
+
+  },
+
+}
+</script>
+<style scoped lang="scss">
+#home-index {
+  height: 100%;
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/home/我的动态.vue b/src/pages/me/我的动态.vue
similarity index 100%
rename from src/pages/home/我的动态.vue
rename to src/pages/me/我的动态.vue
diff --git a/src/router/index.js b/src/router/index.js
index 730855a..3bc7922 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,12 +3,13 @@ import * as VueRouter from "vue-router";
 import Index from "../pages/home/Index";
 import Attention from "../pages/home/Attention";
 import Message from "../pages/home/Message";
-import Me from "../pages/home/Me";
-import Me2 from "../pages/home/Me2";
+import Me from "../pages/me/Me";
+import Me2 from "../pages/me/Me2";
 import Music from "../components/common/Music";
 import countryChoose from "../pages/login/countryChoose";
 import MyCard from "../pages/me/MyCard";
 import MyCollect from "../pages/me/MyCollect";
+import VideoDetail from "../pages/me/VideoDetail";
 
 const routes = [
   // {path: '', component: Music},
@@ -22,6 +23,7 @@ const routes = [
   {path: '/countryChoose', component: countryChoose},
   {path: '/MyCard', component: MyCard},
   {path: '/MyCollect', component: MyCollect},
+  {path: '/VideoDetail', component: VideoDetail},
 ]
 
 export default VueRouter.createRouter({