diff --git a/package.json b/package.json
index 668aac3..7959acd 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "抖音",
+  "name": "douyin",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 6d2a4f0..934b36f 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -200,6 +200,27 @@ export default {
     this.width = document.body.clientWidth
     this.line = this.$refs.line
     this.point = this.$refs.point
+    let video = this.$refs.video
+    video.currentTime = 0
+    let fun = e => {
+      this.currentTime = Math.ceil(e.target.currentTime)
+      this.pageX = this.currentTime * this.step
+    }
+    video.addEventListener('timeupdate', fun)
+    video.addEventListener('loadedmetadata', e => {
+      this.duration = video.duration
+      if (this.duration > 60) {
+        this.step = this.width / Math.floor(this.duration)
+      } else {
+        video.removeEventListener('timeupdate', fun)
+      }
+    })
+    video.addEventListener('play', e=>{
+      this.isPlaying = true
+    })
+    video.addEventListener('pause', e=>{
+      this.isPlaying = false
+    })
   },
   methods: {
     attention() {
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 35fe062..4bd1b8a 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -5,6 +5,7 @@
                       :virtual="true"
                       :list="videos"
                       :renderSlide="render"
+                      v-model:active-index="videoActiveIndex"
     >
     </SlideListVirtual>
     <Comment v-model:is-commenting="isCommenting"/>
@@ -149,32 +150,100 @@ export default {
       ],
       isCommenting: false,
       isSharing: false,
-      render: (item, index, list) => {
-        console.log(item)
-        let style = {}
-        if (index !== undefined) {
-          // style.top = (index - 1) * 812 + 'px'
-        }
+      videoActiveIndex: 0,
+      render: (item, itemIndex, slideItemIndex) => {
         return (
-            <div className="base-slide-item" data-index={index} style={style}>
-              <Video1 disabled={false}
+            <div className="base-slide-item" data-index={itemIndex}>
+              <Video1 disabled={itemIndex !== 0}
                       video={item}
-                      index={index}
+                      index={itemIndex}
                       onShowShare={this.t}
                       onVideoTest={this.t}
-                      v-model={[this.videos[index], 'video']}
+                      v-model={[this.videos[itemIndex], 'video']}
               />
             </div>
         )
       }
     }
   },
+  watch: {
+    videoActiveIndex(newVal) {
+      console.log(newVal)
+      $(".base-slide-item").each(function () {
+        let video = $(this).find('video')
+        if ($(this).data('index') === newVal) {
+          video.trigger('play')
+        } else {
+          video.trigger('pause')
+          setTimeout(() => {
+            video[0].currentTime = 0
+          }, 100)
+        }
+      })
+      if (newVal === this.videos.length - 3) {
+        [{
+          videoUrl: mp40,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: true,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+          {
+            videoUrl: mp41,
+            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+            videoPoster: src1Bg,
+            isLoved: true,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },
+          {
+            videoUrl: mp42,
+            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+            videoPoster: src1Bg,
+            isLoved: false,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },
+          {
+            videoUrl: mp43,
+            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+            videoPoster: src1Bg,
+            isLoved: false,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },
+          {
+            videoUrl: mp44,
+            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+            videoPoster: src1Bg,
+            isLoved: false,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },].map(v => {
+          this.videos.push(v)
+        })
+
+      }
+    }
+  },
   mounted() {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
   methods: {
     t(e) {
+      console.log(this.videoActiveIndex)
       this.$refs.ssss.update(e.index)
       // console.log(this.videos)
       // this.isSharing = !this.isSharing
diff --git a/src/pages/home/SlideListVirtual.vue b/src/pages/home/SlideListVirtual.vue
index c59b438..2400253 100644
--- a/src/pages/home/SlideListVirtual.vue
+++ b/src/pages/home/SlideListVirtual.vue
@@ -95,7 +95,7 @@ export default {
     },
   },
   render() {
-    console.log('render')
+    // console.log('render')
     // this.$console(this.list.slice(0, 2))
     return (
         <div id="base-slide-wrapper">
@@ -115,7 +115,7 @@ export default {
   },
   mounted: async function () {
     await this.checkChildren(true)
-    this.list.slice(0, 2).map((item, index) => {
+    this.list.slice(0, 3).map((item, index) => {
       this.slideList.appendChild(this.getInsEl(item, index))
     })
     // await this.checkChildren(true)
@@ -128,7 +128,7 @@ export default {
       $(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
     },
     getInsEl(v, index) {
-      let slideVNode = this.renderSlide(v, index)
+      let slideVNode = this.renderSlide(v, index, this.currentSlideItemIndex)
       const app = Vue.createApp({
         render() {
           return slideVNode
@@ -264,31 +264,34 @@ export default {
           } else {
             this.currentSlideItemIndex -= 1
           }
-          // console.log(this.slideItems)
+          // console.log(this.slideItems.length)
           let that = this
           if (this.virtual) {
-            if (this.slideItems.length > 2) {
+            if (this.slideItems.length > 4) {
               if (this.isDrawDown) {
-                $("#base-slide-list .base-slide-item:first").remove()
-                $(".base-slide-item").each(function () {
-                  $(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
-                })
-                let item = this.list[this.currentSlideItemIndex + 1]
-                let s = $(this.getInsEl(item, this.currentSlideItemIndex + 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
-                this.slideList.appendChild(s[0])
+                if (this.currentSlideItemIndex > 2) {
+                  let item = this.list[this.currentSlideItemIndex + 2]
+                  this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
+                  $("#base-slide-list .base-slide-item:first").remove()
+                  $(".base-slide-item").each(function () {
+                    $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+                  })
+                }
               } else {
-                $("#base-slide-list .base-slide-item:last").remove()
-                $(".base-slide-item").each(function () {
-                  $(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
-                })
-                let item = this.list[this.currentSlideItemIndex - 1]
-                let s = $(this.getInsEl(item, this.currentSlideItemIndex - 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
-                $('#base-slide-list').prepend(s)
+                if (this.currentSlideItemIndex > 1) {
+                  let item = this.list[this.currentSlideItemIndex - 2]
+                  this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
+                  $("#base-slide-list .base-slide-item:last").remove()
+                  $(".base-slide-item").each(function () {
+                    $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+                  })
+                }
               }
             } else {
-              let item = this.list[this.currentSlideItemIndex + 1]
-              console.log('this.list[this.currentSlideItemIndex + 1]', item)
-              this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 1))
+              if (this.isDrawDown) {
+                let item = this.list[this.currentSlideItemIndex + 2]
+                this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 2))
+              }
             }
             this.checkChildren()
           }