diff --git a/package-lock.json b/package-lock.json
index 064be95..e9cc24c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4793,6 +4793,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
+      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -11202,6 +11210,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
+      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -11459,6 +11472,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "6.7.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.7.5.tgz",
+      "integrity": "sha512-KaTjO93tZyMpxWHaey+T+H/JeePMZV/joZWhZaor76Xk+rPGmjOz1S8mXSyrRkaW0p0LOJYeWGB8d0gYxSSV/Q==",
+      "requires": {
+        "dom7": "^3.0.0",
+        "ssr-window": "^3.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.nlark.com/table/download/table-5.4.6.tgz",
diff --git a/package.json b/package.json
index 1fa58f8..d282849 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "lodash": "^4.17.21",
     "mitt": "^2.1.0",
     "pinyin": "^2.9.0",
+    "swiper": "^6.7.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.8",
     "vuex": "^4.0.1"
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 0e626c0..6d2a4f0 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -1,9 +1,14 @@
+<!--<template>-->
+<!--  <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>-->
+<!--    <p> 您的浏览器不支持 video 标签。</p>-->
+<!--  </video>-->
+<!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
     <video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
-    <div class="float-container" @click.stop="togglePlayVideo">
+    <div class="float-container" v-if="true" @click.stop="togglePlayVideo">
       <transition name="pause">
         <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
         >
@@ -104,6 +109,7 @@
 </template>
 
 <script>
+import globalMethods from '../utils/global-methods'
 
 export default {
   name: "Video",
@@ -114,6 +120,12 @@ export default {
         return {}
       }
     },
+    index: {
+      type: Number,
+      default: () => {
+        return -1
+      }
+    },
     disabled: {
       type: Boolean,
       default: () => {
@@ -139,23 +151,23 @@ export default {
         // console.log('disabled', this.currentVideoId, v)
         this.isPlaying = !v
         if (!v) {
-          this.$store.commit('setCurrentVideoId', this.currentVideoId)
+          // this.$store.commit('setCurrentVideoId', this.currentVideoId)
           setTimeout(() => {
             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)
-              }
-            })
+            // 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.play()
           })
         } else {
@@ -172,13 +184,10 @@ export default {
       step: 0,
       currentTime: 0,
       pageX: 0,
-      index: 0,
       height: 0,
       width: 0,
       isPlaying: !this.disabled,
-      isCommenting: false,
       isAttention: false,
-      isSharing: false,
       line: null,
       point: null,
       isMove: false,
@@ -240,22 +249,14 @@ export default {
       }
       this.isPlaying = !video.paused
     },
-    //展示评论
-    showComment() {
-      return this.test.push(Date.now())
-      this.isCommenting = !this.isCommenting
-    },
-    showShare() {
-      this.isSharing = !this.isSharing
-    },
+
     loved(e, index) {
-      let temp = this.$clone(this.video)
+      // console.log(e)
+      // let temp = this.$clone(this.video)
+      let temp = globalMethods.$clone(this.video)
       temp.isLoved = !temp.isLoved
       this.$emit('update:video', temp)
-    },
-    //返回视频列表
-    backVideoList() {
-      this.wrapperLeft = '0'
+      this.$emit('videoTest', {item: temp, index: this.index})
     },
     move(e) {
       this.isMove = true
@@ -274,8 +275,7 @@ export default {
       video.currentTime = this.currentTime
       video.play()
       // this.$stopPropagation(e)
-    },
-
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index f6bd613..90182ef 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,7 +23,7 @@ app.provide('mitt', mitt())
 app.component('BaseHeader', BaseHeader)
 app.component('SlideList', SlideList)
 app.component('SlideItem', SlideItem)
-app.component('Video', Video)
+app.component('Video1', Video)
 app.mixin(mixin)
 app.use(router)
 app.use(store)
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 312038d..35fe062 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -1,19 +1,21 @@
 <template>
   <div id="home-index">
     <SlideListVirtual direction="column"
-                      ref="slideList"
+                      ref="ssss"
                       :virtual="true"
                       :list="videos"
-                      :render="render"
+                      :renderSlide="render"
     >
     </SlideListVirtual>
+    <Comment v-model:is-commenting="isCommenting"/>
+    <Share v-model:is-sharing="isSharing" ref="share"/>
   </div>
 </template>
 
 <script>
 import SlideListVirtual from './SlideListVirtual'
 import src1Bg from '../../assets/img/poster/src1-bg.png'
-import Video from "../../components/Video.vue";
+import Video1 from "../../components/Video.vue";
 import mp40 from "../../assets/video/0.mp4";
 import mp41 from "../../assets/video/1.mp4";
 import mp42 from "../../assets/video/2.mp4";
@@ -25,10 +27,12 @@ import mp47 from "../../assets/video/7.mp4";
 import mp48 from "../../assets/video/8.mp4";
 import mp49 from "../../assets/video/9.mp4";
 import mp410 from "../../assets/video/10.mp4";
+import Comment from "../../components/Comment";
+import Share from "../../components/Share";
 
 export default {
   name: "HomeIndex",
-  components: {SlideListVirtual, Video},
+  components: {SlideListVirtual, Video1, Comment, Share,},
   data() {
     return {
       videos: [
@@ -143,15 +147,24 @@ export default {
           duration: 99
         },
       ],
-      render: item => {
+      isCommenting: false,
+      isSharing: false,
+      render: (item, index, list) => {
+        console.log(item)
+        let style = {}
+        if (index !== undefined) {
+          // style.top = (index - 1) * 812 + 'px'
+        }
         return (
-            `
-            <div class="base-slide-item">
-              <video src="${item.videoUrl}" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
-              <p> 您的浏览器不支持 video 标签。</p>
-            </video>
-      </div>
-           `
+            <div className="base-slide-item" data-index={index} style={style}>
+              <Video1 disabled={false}
+                      video={item}
+                      index={index}
+                      onShowShare={this.t}
+                      onVideoTest={this.t}
+                      v-model={[this.videos[index], 'video']}
+              />
+            </div>
         )
       }
     }
@@ -160,6 +173,16 @@ export default {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
+  methods: {
+    t(e) {
+      this.$refs.ssss.update(e.index)
+      // console.log(this.videos)
+      // this.isSharing = !this.isSharing
+      // console.log(111)
+      console.log(e)
+    },
+
+  }
 }
 </script>
 <style scoped lang="scss">
diff --git a/src/pages/home/SlideListVirtual.vue b/src/pages/home/SlideListVirtual.vue
index 97af9d3..c59b438 100644
--- a/src/pages/home/SlideListVirtual.vue
+++ b/src/pages/home/SlideListVirtual.vue
@@ -1,59 +1,11 @@
-<template>
-  <div id="base-slide-wrapper" ref="slideWrapper">
-    <div class="indicator-home" v-if="showIndicator && indicatorType === 'home'">
-      <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
-      <div class="toolbar" ref="toolbar" :style="toolbarStyle">
-        <div class="left">直播</div>
-        <div class="tab-ctn">
-          <div class="tabs" ref="tabs">
-            <div class="tab"
-                 :class="currentSlideItemIndex === 0?'active':''"
-                 @click="changeIndex(false,0)">
-              <span>关注</span></div>
-            <div class="tab"
-                 :class="currentSlideItemIndex === 1?'active':''"
-                 @click="changeIndex(false,1)"><span>推荐</span></div>
-          </div>
-          <div class="indicator" ref="indicator"></div>
-        </div>
-        <div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
-      </div>
-      <div class="loading" :style="loadingStyle">AA</div>
-    </div>
-    <div class="indicator-me" :class="indicatorFixed?'fixed':''" v-if="showIndicator && indicatorType === 'me'">
-      <div class="tabs" ref="tabs">
-        <div class="tab"
-             :class="currentSlideItemIndex === 0?'active':''"
-             @click="changeIndex(false,0)">
-          <span>作品</span></div>
-        <div class="tab"
-             :class="currentSlideItemIndex === 1?'active':''"
-             @click.stop="changeIndex(false,1)">
-          <span>私密</span>
-        </div>
-        <div class="tab"
-             :class="currentSlideItemIndex === 2?'active':''"
-             @click="changeIndex(false,2,$event)">
-          <span>喜欢</span>
-        </div>
-      </div>
-      <div class="indicator" ref="indicator"></div>
-    </div>
-    <div id="base-slide-list" ref="slideList"
-         :style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
-         @touchstart="touchStart($event)"
-         @touchmove="touchMove($event)"
-         @touchend="touchEnd($event)">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
 <script>
+
+import * as Vue from 'vue'
+
 export default {
   name: "BaseSlideList",
   props: {
-    render: {
+    renderSlide: {
       type: Function,
       default: () => {
         return null
@@ -102,40 +54,6 @@ export default {
       default: () => 0
     },
   },
-  computed: {
-    toolbarStyle() {
-      if (!this.useHomeLoading) return
-      return {
-        opacity: 1 - this.homeLoadingMoveYDistance / 20,
-        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-        transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
-      }
-    },
-    noticeStyle() {
-      if (!this.useHomeLoading) return
-      return {
-        opacity: this.homeLoadingMoveYDistance / 60,
-        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-        transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
-      }
-    },
-    loadingStyle() {
-      if (!this.useHomeLoading) return
-      if (this.loading) {
-        return {
-          opacity: 1,
-          'transition-duration': '300ms',
-        }
-      }
-      if (this.homeLoadingMoveYDistance !== 0) {
-        return {
-          opacity: this.homeLoadingMoveYDistance / 60,
-          'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-          transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
-        }
-      }
-    }
-  },
   data() {
     return {
       loading: false,
@@ -173,21 +91,56 @@ export default {
   watch: {
     activeIndex() {
       // console.log('activeIndex')
-      this.changeIndex()
+      // this.changeIndex()
     },
   },
+  render() {
+    console.log('render')
+    // this.$console(this.list.slice(0, 2))
+    return (
+        <div id="base-slide-wrapper">
+          <div id="base-slide-list"
+               ref="slideList"
+               style={{flexDirection: 'column'}}
+               ontouchstart={this.touchStart}
+               ontouchmove={this.touchMove}
+               ontouchend={this.touchEnd}
+          >
+            {
+              // this.list.slice(0, 2).map((item, index) => this.renderSlide(item, index))
+            }
+          </div>
+        </div>
+    )
+  },
   mounted: async function () {
     await this.checkChildren(true)
-    if (this.virtual && this.render) {
-      this.list.slice(0, 2).map(v => {
-        this.slideList.innerHTML += this.render(v)
-      })
-    }
-    await this.checkChildren(true)
-    this.showIndicator && this.initTabs()
-    this.changeIndex(true)
+    this.list.slice(0, 2).map((item, index) => {
+      this.slideList.appendChild(this.getInsEl(item, index))
+    })
+    // await this.checkChildren(true)
+    // this.showIndicator && this.initTabs()
+    // this.changeIndex(true)
   },
   methods: {
+    update(index) {
+      let newEl = this.getInsEl(this.list[index], index)
+      $(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
+    },
+    getInsEl(v, index) {
+      let slideVNode = this.renderSlide(v, index)
+      const app = Vue.createApp({
+        render() {
+          return slideVNode
+        }
+      })
+      const parent = document.createElement('div')
+      const ins = app.mount(parent)
+      return ins.$el
+    },
+    t() {
+      alert(11)
+    },
     changeIndex(init = false, index = null, e) {
       this.currentSlideItemIndex = index !== null ? index : this.activeIndex
       !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
@@ -311,30 +264,31 @@ export default {
           } else {
             this.currentSlideItemIndex -= 1
           }
-          console.log(this.slideItems)
+          // console.log(this.slideItems)
           let that = this
           if (this.virtual) {
             if (this.slideItems.length > 2) {
               if (this.isDrawDown) {
-                $("#base-slide-list div:first").remove()
+                $("#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.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
+                let s = $(this.getInsEl(item, this.currentSlideItemIndex + 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
                 this.slideList.appendChild(s[0])
               } else {
-                $("#base-slide-list div:last").remove()
+                $("#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.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
+                let s = $(this.getInsEl(item, this.currentSlideItemIndex - 1)).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
                 $('#base-slide-list').prepend(s)
               }
             } else {
               let item = this.list[this.currentSlideItemIndex + 1]
-              this.slideList.appendChild($(this.render(item))[0])
+              console.log('this.list[this.currentSlideItemIndex + 1]', item)
+              this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 1))
             }
             this.checkChildren()
           }
@@ -527,5 +481,4 @@ export default {
   }
 
 }
-
 </style>
\ No newline at end of file