diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7b26d97..24c98d5 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -5,7 +5,7 @@
       <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
     </div>
     <div class="l-button" @click="refresh(2)">
-      <span v-if="!isRefresh2" :class="{active:currentTab === 2}">同城</span>
+      <span v-if="!isRefresh2" :class="{active:currentTab === 2}">朋友</span>
       <img v-if="isRefresh2" src="../assets/img/icon/refresh1.png" alt="" class="refresh">
     </div>
     <div class="l-button" @click="tab(3)">
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 568e699..9757218 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -3,7 +3,7 @@
        @scroll="scroll"
        ref="page">
     <div ref="float" class="float" :class="state.floatFixed?'fixed':''">
-      <div class="left" @click="back">
+      <div class="left" @click="$emit('back')">
         <img class="back" src="@/assets/img/icon/next.svg" alt="">
         <transition name="fade">
           <div class="float-user" v-if="state.floatFixed">
@@ -195,6 +195,7 @@ import {useStore} from "vuex";
 import resource from "@/assets/data/resource";
 import Posters from '@/components/Posters'
 
+const emit = defineEmits(['back'])
 const $nav = useNav()
 const store = useStore()
 const props = defineProps({
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 5ab60c4..e7ef4d5 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -1,402 +1,81 @@
 <template>
-  <div id="attention">
+  <div id="friend">
     <header ref="header">
-      <span @click="$nav('/me/country-choose')">双流</span>
-      <div class="arrow"></div>
-    </header>
-    <div class="scroller"
-         ref="scroller"
-         @touchstart="start"
-         @touchmove="move"
-         @touchend="end"
-         @scroll="scroll"
-    >
-      <div ref="wrapper" class="wrapper"
-      >
-        <div class="refresh" ref="refresh">
-          <Loading :isFullScreen="false"></Loading>
-        </div>
-        <div class="ad" v-if="false">
-          <div class="title">超值卖场 次日达</div>
-          <div class="good-ctn">
-            <div class="left">
-              <div class="left-title">
-                <span>限量秒杀</span>
-                <div>低至0.99元</div>
-              </div>
-              <div class="goods">
-                <div class="good">
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                  <div class="name">每日坚果5包</div>
-                  <div class="price">￥0.99</div>
-                </div>
-                <div class="good">
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                  <div class="name">每日坚果5包</div>
-                  <div class="price">￥0.99</div>
-                </div>
-              </div>
-            </div>
-            <div class="right">
-              <div class="goods">
-                <div class="good">
-                  <div class="notice">
-                    <div class="ad-name">低价疯抢</div>
-                    <div class="ad-desc">统一方便面</div>
-                  </div>
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                </div>
-                <div class="good">
-                  <div class="notice">
-                    <div class="ad-name">低价疯抢</div>
-                    <div class="ad-desc">统一方便面</div>
-                  </div>
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div ref="content" class="content">
-          <div class="left">
-            <div class="item" v-for="item in left" @click="scrollToTop">
-              <template v-if="item.type === 0">
-                <div class="wrapper">
-                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
-                  <img :src="item.author" alt="" class="author">
-                </div>
-                <div class="location" v-if="item.address">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.address.name }}</div>
-                  </div>
-                  <div class="bottom">
-                    <div class="type">{{ item.address.type }}</div>
-                    <div class="line"></div>
-                    <div class="other">{{ item.address.number }}人想去</div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 1">
-                <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                  <img class="poster" :src="item.src"/>
-                </div>
-              </template>
-              <template v-if="item.type === 2">
-                <div class="ranking-list">
-                  <div class="desc">
-                    <div class="top">
-                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                      <div class="name">{{ item.desc }}</div>
-                    </div>
-                    <div class="bottom">
-                      基于6亿抖音用户真实数据...
-                    </div>
-                  </div>
-                  <div class="ads">
-                    <div class="ad" v-for="(ad,index) in item.ads">
-                      <div class="left">
-                        <img class="ad-logo" :src="ad.src"/>
-                      </div>
-                      <div class="right">
-                        <div class="rank">TOP{{ index + 1 }}</div>
-                        <div class="name">{{ ad.name }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 3">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                  <div class="live">直播中</div>
-                </div>
-              </template>
-            </div>
-
-          </div>
-          <div class="right">
-            <div class="item" v-for="item in right">
-              <template v-if="item.type === 0">
-                <div class="wrapper">
-                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
-                  <img :src="item.author" alt="" class="author">
-                </div>
-                <div class="location" v-if="item.address">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.address.name }}</div>
-                  </div>
-                  <div class="bottom">
-                    <div class="type">{{ item.address.type }}</div>
-                    <div class="line"></div>
-                    <div class="other">{{ item.address.number }}人想去</div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 1">
-                <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                  <img class="poster" :src="item.src"/>
-                </div>
-              </template>
-              <template v-if="item.type === 2">
-                <div class="ranking-list">
-                  <div class="desc">
-                    <div class="top">
-                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                      <div class="name">{{ item.desc }}</div>
-                    </div>
-                    <div class="bottom">
-                      基于6亿抖音用户真实数据...
-                    </div>
-                  </div>
-                  <div class="ads">
-                    <div class="ad" v-for="(ad,index) in item.ads">
-                      <div class="left">
-                        <img class="ad-logo" :src="ad.src"/>
-                      </div>
-                      <div class="right">
-                        <div class="rank">TOP{{ index + 1 }}</div>
-                        <div class="name">{{ ad.name }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 3">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                  <div class="live">直播中</div>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-        <Loading v-if="loading" :isFullScreen="false"></Loading>
+      <div class="new">
+        <img src="@/assets/img/icon/add-light.png" alt="">
       </div>
-    </div>
+      <img class="center" src="@/assets/img/icon/add-light.png" alt="">
+      <img class='right' src="@/assets/img/icon/search-light.png" alt="" @click="nav('/home/search')">
+    </header>
+    <InfiniteList id="InfiniteList"/>
     <Footer v-bind:init-tab="2" style="position: fixed;"/>
   </div>
 </template>
 
-<script>
-
-//TODO 还差个点击，返回后，定位到当前item最高点
-import Footer from '../../components/Footer.vue';
-import Loading from "../../components/Loading";
-
-export default {
-  name: "Attention",
-  components: {
-    Footer,
-    Loading
-  },
-  data() {
-    return {
-      items: [],
-      height: 0,
-      width: 0,
-      footerHeight: 0,
-      refreshHeight: 80,
-      headerHeight: 50,
-      itemType: {
-        VIDEO: 0,
-        AD: 1,
-        RANKING_LIST: 2,
-        LIVE: 3,
-      },
-      isTop: false,
-      isFixed: true,
-      isMove: false,
-      loading: false,
-      isRefresh: false,
-      startLocationY: 0,
-      topStartLocationY: 0,
-      refs: {
-        scroller: null,
-        wrapper: null,
-        header: null,
-      },
-    }
-  },
-  created() {
-    this.height = document.body.clientHeight;
-    this.width = document.body.clientWidth;
-  },
-  computed: {
-    left() {
-      return this.items.filter((v, i) => {
-        return i % 2 === 0
-      })
-    },
-    right() {
-      return this.items.filter((v, i) => {
-        return i % 2 !== 0
-
-      })
-    },
-    bodyHeight() {
-      return this.$store.state.bodyHeight
-    },
-    bodyWidth() {
-      return this.$store.state.bodyWidth
-    },
-  },
-  mounted() {
-    for (let i = 1; i < 12; i++) {
-      let temp = {
-        src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-        author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
-      }
-      temp.type = i - 1 > 3 ? 3 : i - 1
-      if (temp.type === 2) {
-        temp.desc = '成都市好友聚会美食榜'
-        temp.ads = [
-          {
-            src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-            name: '烧江南烧肉'
-          },
-          {
-            src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-            name: '欧叶无国界料理餐厅'
-          },
-          {
-            src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-            name: '陆派玛歌庄园'
-          }
-        ]
-      }
-
-      if (i % 2 === 0) {
-        temp.address = {
-          name: '大源中央公园',
-          type: '综合商场',
-          number: 150
-        }
-      }
-      this.items.push(temp)
-    }
-    setTimeout(() => {
-      this.refs.scroller = this.$refs["scroller"]
-      this.refs.wrapper = this.$refs["wrapper"]
-      this.refs.header = this.$refs["header"]
-    })
-  },
-  methods: {
-    scrollToTop(e) {
-      let current = e.currentTarget
-      this.refs.scroller.scrollTop = current.offsetTop - this.headerHeight - 30
+<script setup lang="jsx">
+
+import VInfinite from '@/pages/slideHooks/VInfinite.vue'
+import {reactive} from "vue";
+import api from "@/api";
+import {useNav} from "@/utils/hooks/useNav";
+import InfiniteList from "@/pages/slideHooks/InfiniteList.vue";
+
+const nav = useNav()
+
+const state = reactive({
+  baseIndex: 0,
+  navIndex: 4,
+  itemIndex: 0,
+  test: '',
+  recommendVideos: [
+    // {
+    //   type: 'img',
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    // },
+    {
+      type: 'imgs',
+      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
     },
-    start(e) {
-      this.refs.header.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `none`
-      this.topStartLocationY = this.startLocationY = e.touches[0].pageY
+    {
+      type: 'user',
+      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
     },
-    move(e) {
-      let scrollTop = this.refs.scroller.scrollTop
-      this.isTop = scrollTop === 0
-      // console.log('scrollTop', scroller.scrollTop)
-      let touchMoveDistance = e.touches[0].pageY - this.startLocationY
-      // console.log('touchMoveDistance', touchMoveDistance)
-      // let transformY = this.$getTransform(header)
+  ],
+
+  isSharing: false,
+  canMove: true,
+  loading: false,
+  isUp: false,
+
+  shareType: -1,
+
+  showPlayFeedback: false,
+  showShareDuoshan: false,
+  showShareDialog: false,
+  showShare2WeChatZone: false,
+  showDouyinCode: false,
+  showFollowSetting: false,
+  showFollowSetting2: false,
+  showBlockDialog: false,
+  showChangeNote: false,
+  shareToFriend: false,
+
+  commentVisible: false,
+  fullScreen: false,
+  subType: -1,
+  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
+  subTypeIsTop: false,
+  totalSize: 0,
+  pageSize: 10,
+  pageNo: 0,
+})
 
-      let refreshHeight = 80
-      let headerHeight = 50
-      if (touchMoveDistance > 0) {
-        if (!this.isFixed) {
-          if (Math.abs(touchMoveDistance) < headerHeight) {
-            this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance - headerHeight}px,0)`
-          } else {
-            this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
-          }
-        }
-        if (this.isTop && (!this.isRefresh)) {
-          let wrapperTouchMoveDistance = e.touches[0].pageY - this.topStartLocationY
-          this.refs.wrapper.style.transform = `translate3d(0,${wrapperTouchMoveDistance > refreshHeight ? refreshHeight : wrapperTouchMoveDistance}px,0)`
-        } else {
-          this.topStartLocationY = e.touches[0].pageY
-        }
-      } else {
-        if (this.isFixed) {
-          if (Math.abs(touchMoveDistance) < headerHeight) {
-            this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
-          } else {
-            this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-headerHeight}px,0)`
-          }
-        }
-        let wrapperHeight = this.refs.wrapper.offsetHeight
-        if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
-          this.loadMore()
-          this.refs.scroller.scrollTop = wrapperHeight
-        }
-        // let s = wrapperHeight - scrollTop
-        // console.log(s)
-      }
-      // console.log('isTop', this.isTop)
-    },
-    end(e) {
-      this.refs.header.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `all .3s`
-      let headerHeight = 50
-      let refreshHeight = 80
-      let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
-      if (this.isTop && Math.abs(touchMoveDistance) > refreshHeight / 2) {
-        this.refs.wrapper.style.transform = `translate3d(0,${refreshHeight}px,0)`
-        this.refresh(() => {
-          console.log('refresh-done')
-          this.refs.wrapper.style.transform = `translate3d(0,0,0)`
-        })
-      } else {
-        this.refs.wrapper.style.transform = `translate3d(0,${0}px,0)`
-      }
-      let transformY = this.$getTransform(this.refs.header)
-      if (Math.abs(transformY) > headerHeight / 2) {
-        this.isFixed = false
-        this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-headerHeight}px,0)`
-      } else {
-        this.isFixed = true
-        this.refs.header.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
-      }
-    },
-    scroll(e) {
-      if (this.isTop) {
-        e.preventDefault();
-      } else {
-        let scrollTop = this.refs.scroller.scrollTop
-        let wrapperHeight = this.refs.wrapper.offsetHeight
-        if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
-          this.loadMore()
-          this.refs.scroller.scrollTop = wrapperHeight
-        }
-      }
-    },
-    async loadMore() {
-      console.log('loadMore-start')
-      if (this.loading) return
-      this.loading = true
-      await this.$sleep(1500)
-      this.items = this.items.concat(this.items)
-      this.loading = false
-    },
-    async refresh(done) {
-      console.log('refresh-start')
-      if (this.isRefresh) return
-      this.isRefresh = true
-      await this.$sleep(1500)
-      this.isRefresh = false
-      // this.items = []
-      done()
-    }
-  }
-}
 </script>
 
 <style scoped lang="less">
 @import "../../assets/less/index";
 
-#attention {
-  /*background: rgb(22，24，34);*/
-  /*background: #161822;*/
+#friend {
   //抖音原色，感觉很暗
   @douyin-bg: #2e3244;
   background: @douyin-bg;
@@ -408,319 +87,23 @@ export default {
   top: 0;
   //overflow: auto;
 
-  .scroller {
-    //transform: translate3d(0, -50rem, 0);
-    height: calc(100vh - 50rem);
-    position: relative;
-    overflow: scroll;
-
-    > .wrapper {
-      position: absolute;
-      top: -80rem;
-      left: 0;
-      width: 100%;
-      z-index: 2;
-
-      > .refresh {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        height: 80rem;
-      }
-    }
-  }
-
   header {
-    //transform: translate3d(0, -50rem, 0);
-    background: @douyin-bg;
-    width: 100%;
-    font-size: 15rem;
-    height: 50rem;
+    height: @header-height;
+    padding: 20rem;
+    box-sizing: border-box;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    position: absolute;
+    width: 100%;
 
-    @arrow-width: 5px;
-
-    .arrow {
-      position: relative;
-      top: 3px;
-      left: 5px;
-      width: 0;
-      height: 0;
-      border-top: @arrow-width solid white;
-      border-right: @arrow-width solid transparent;
-      border-bottom: @arrow-width solid transparent;
-      border-left: @arrow-width solid transparent;
-    }
-  }
-
-  > .ad {
-    padding: 10px;
-    color: white;
-
-    .title {
-      margin-bottom: 15px;
-      font-size: 18rem;
-      font-weight: bold;
-    }
-
-    .good-ctn {
-      display: flex;
-      justify-content: space-between;
-
-      .left, .right {
-        width: calc(50% - 3px);
-      }
-
-
-      .left {
-        padding: 10px;
-        box-sizing: border-box;
-        border-radius: 5px;
-        background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
-
-
-        .left-title {
-          font-weight: bold;
-          font-size: 17rem;
-          display: flex;
-          align-items: center;
-          margin-bottom: 10px;
-
-          div {
-            background: linear-gradient(to top right, #e37c7c, #bd5959);
-            padding: 0 4px 2px 4px;
-            border-radius: 3px;
-            font-size: 10rem;
-            font-weight: lighter;
-            margin-left: 5px;
-          }
-        }
-
-        .goods {
-          display: flex;
-          justify-content: space-between;
-
-          .good {
-            width: calc(50% - 5px);
-
-            .good-img {
-              width: 100%;
-              height: 50px;
-              border-radius: 5px;
-            }
-
-            .name {
-              margin-top: 5px;
-            }
-
-            .price {
-              font-size: 10rem;
-            }
-          }
-        }
-      }
-
-      .right {
-        .goods {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-
-          .good {
-            height: calc(50% - 3px);
-            border-radius: 5px;
-            box-sizing: border-box;
-            padding: 10px;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
-
-            &:nth-child(2) {
-              background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
-            }
-
-            .notice {
-              display: flex;
-              justify-content: center;
-              flex-direction: column;
-
-              .ad-name {
-                font-weight: bold;
-              }
-
-              .ad-desc {
-                font-size: 10rem;
-                color: darkgray;
-              }
-            }
-
-            .good-img {
-              width: 50px;
-              height: 50px;
-              border-radius: 5px;
-            }
-          }
-        }
-      }
+    img {
+      width: 25rem;
     }
   }
 
-  .content {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    overflow: auto;
-    //background: black;
-    box-sizing: border-box;
-
-    > .left, > .right {
-      width: calc(50%);
-    }
-
-    > .left {
-      .item {
-        padding: 0 2px 3px 3px;
-
-        &:nth-last-child(1) {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    > .right {
-      .item {
-        padding: 0 3px 3px 2px;
-
-        &:nth-last-child(1) {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    .item {
-      background: black;
-      width: 100%;
-      box-sizing: border-box;
-
-      .wrapper {
-        position: relative;
-
-        .poster {
-          width: 100%;
-          max-height: 50vh;
-          display: block;
-        }
-
-        .author {
-          position: absolute;
-          border-radius: 50%;
-          height: 30rem;
-          bottom: 10rem;
-          left: 10rem;
-        }
-
-        .live {
-          position: absolute;
-          padding: 2rem 5rem;
-          border-radius: 2rem;
-          top: 10rem;
-          left: 10rem;
-          color: white;
-          background: @primary-btn-color;
-        }
-      }
-
-      .location {
-        padding: 8px 10px 10px 10px;
-        background: @douyin-bg;
-
-        .top, .bottom {
-          font-size: 14rem;
-          display: flex;
-          align-items: center;
-
-          .logo {
-            height: 12px;
-            width: 12px;
-            margin-right: 8px;
-          }
-
-          .name {
-            color: white;
-          }
-
-          .line {
-            margin: 0 4px;
-            width: 1px;
-            height: 8rem;
-            background: gray;
-          }
-        }
-
-        .bottom {
-          margin-top: 2px;
-          font-size: 10rem;
-        }
-      }
-
-      .ranking-list {
-        padding: 20rem 10rem;
-        background: @douyin-bg;
-
-        .desc {
-          .top {
-            margin-bottom: 2rem;
-            display: flex;
-            align-items: center;
-            font-size: 14rem;
-
-            .logo {
-              margin-right: 5rem;
-              height: 14rem;
-            }
-
-            .name {
-              //background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
-            }
-          }
-        }
-
-        .ads {
-          font-size: 12rem;
-
-          .ad {
-            background: @second-btn-color;
-            display: flex;
-            margin-top: 10rem;
-
-            .left {
-              margin-right: 10rem;
-
-              .ad-logo {
-                height: 40rem;
-                width: 40rem;
-              }
-            }
-
-            .right {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-
-              .rank {
-                color: @second-text-color;
-                margin-bottom: 2rem;
-              }
-            }
-          }
-        }
-
-      }
-    }
+  #VInfinite {
+    height: calc(100% - @header-height);
   }
 }
 
diff --git a/src/pages/slideHooks/InfiniteList.vue b/src/pages/slideHooks/InfiniteList.vue
new file mode 100644
index 0000000..90d62a7
--- /dev/null
+++ b/src/pages/slideHooks/InfiniteList.vue
@@ -0,0 +1,198 @@
+<template>
+  <VInfinite
+      :style="{background: 'black'}"
+      name="main"
+      v-model:index="state.itemIndex"
+      :render="render"
+      :list="state.recommendVideos"
+      :position="{
+                  baseIndex:0,
+                  navIndex:5,
+                }"
+      @loadMore="loadMore"
+      @refresh="() => getData(true)"
+  >
+  </VInfinite>
+</template>
+
+<script setup lang="jsx">
+import VInfinite from './VInfinite.vue'
+import SlideAlbum from "../../components/slide/SlideAlbum";
+import SlideUser from "../../components/slide/SlideUser";
+import BVideo from "../../components/slide/BVideo";
+import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
+import bus, {EVENT_KEY} from "../../utils/bus";
+import {useNav} from "@/utils/hooks/useNav";
+import Utils from "@/utils";
+import api from "@/api";
+import {useStore} from "vuex";
+
+const nav = useNav()
+
+function stop(e) {
+  e.stopPropagation()
+}
+
+const store = useStore()
+const friends = computed(() => store.state.friends)
+const bodyHeight = computed(() => store.state.bodyHeight)
+const bodyWidth = computed(() => store.state.bodyWidth)
+
+const subTypeRef = ref(null)
+const state = reactive( {
+  baseIndex: 0,
+  navIndex: 4,
+  itemIndex: 0,
+  test: '',
+  recommendVideos: [
+    // {
+    //   type: 'img',
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    // },
+    {
+      type: 'imgs',
+      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    },
+    {
+      type: 'user',
+      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    },
+  ],
+
+  isSharing: false,
+  canMove: true,
+  loading: false,
+  isUp: false,
+
+  shareType: -1,
+
+  showPlayFeedback: false,
+  showShareDuoshan: false,
+  showShareDialog: false,
+  showShare2WeChatZone: false,
+  showDouyinCode: false,
+  showFollowSetting: false,
+  showFollowSetting2: false,
+  showBlockDialog: false,
+  showChangeNote: false,
+  shareToFriend: false,
+
+  commentVisible: false,
+  fullScreen: false,
+  subType: -1,
+  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
+  subTypeIsTop: false,
+  totalSize: 0,
+  pageSize: 10,
+  pageNo: 0,
+})
+
+async function getData(refresh = false) {
+  // if (process.env.NODE_ENV !== 'development') {
+  //   state.totalSize = 11
+  //   return state.recommendVideos = resource.videos
+  // }
+  if (state.loading) return
+  state.loading = true
+  let res = await api.videos.recommended({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
+  console.log('loadMore-', 'refresh', refresh, res)
+  state.loading = false
+  if (res.code === 200) {
+    state.totalSize = res.data.total
+    if (refresh) {
+      state.recommendVideos = []
+    }
+    state.recommendVideos = state.recommendVideos.concat(res.data.list)
+  } else {
+    state.pageNo--
+  }
+}
+
+function loadMore() {
+  if (!state.loading) {
+    state.pageNo++
+    getData()
+  }
+}
+
+function dislike() {
+  // this.$refs.virtualList.dislike(this.videos[10])
+  // this.videos[this.videoIndex] = this.videos[10]
+  // this.$notice('操作成功，将减少此类视频的推荐')
+}
+
+function end() {
+  // this.$notice('暂时没有更多了')
+}
+
+onMounted(() => {
+  getData()
+  bus.on(EVENT_KEY.SINGLE_CLICK, () => {
+    let id = ''
+    if (state.navIndex === 4) {
+      id = state.recommendVideos[state.itemIndex].id
+    }
+    bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {id, type: EVENT_KEY.ITEM_TOGGLE})
+  })
+  bus.on('update:item', val => {
+    const {baseIndex, navIndex, itemIndex} = val.position
+    if (navIndex === 5) {
+      state.recommendVideos[itemIndex] = val.item
+    }
+  })
+
+  bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => state.fullScreen = true)
+  bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => state.fullScreen = false)
+  bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
+    bus.emit(EVENT_KEY.ENTER_FULLSCREEN)
+    state.commentVisible = true
+  })
+  bus.on(EVENT_KEY.CLOSE_COMMENTS, (e) => {
+    bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
+    state.commentVisible = false
+  })
+  bus.on('nav', path => nav(path))
+})
+onUnmounted(() => {
+  bus.offAll()
+})
+
+function closeComments() {
+  bus.emit(EVENT_KEY.CLOSE_COMMENTS)
+}
+
+function render(item, itemIndex, play, position) {
+  // console.log('item', item)
+  let node
+  if (item.type === 'img') {
+    node = <img src={item.src} style="height:100%;"/>
+  }
+  if (item.type === 'imgs') {
+    node = <SlideAlbum/>
+  }
+  if (item.type === 'user') {
+    node = <SlideUser/>
+  }
+  if (item.type === 'send-video') {
+    node = <video src={item.src} style="height:100%;"/>
+  }
+  if (item.type === 'recommend-video') {
+    node = <BVideo
+        isPlay={false}
+        item={item}
+        position={{...position, itemIndex}}
+        onGoMusic={e => nav('/home/music')}
+        onShowShare={e => state.isSharing = true}
+        onGoUserInfo={e => state.baseIndex = 1}
+    />
+  }
+  return node
+}
+
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/slideHooks/common.js b/src/pages/slideHooks/common.js
index 340c297..b5d8e96 100644
--- a/src/pages/slideHooks/common.js
+++ b/src/pages/slideHooks/common.js
@@ -121,4 +121,5 @@ export function getSlideDistance(state, type = SlideType.HORIZONTAL) {
   } else {
     return -state.localIndex * state.wrapper.height
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue
index d55cc3a..32f7738 100644
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@@ -9,50 +9,7 @@
             name="main"
             v-model:index="state.navIndex"
         />
-        <div class="sub-type"
-             :class="state.subTypeIsTop?'top':''"
-             ref="subTypeRef">
-          <div class="local">
-            <div class="card" @touchmove.capture="stop">
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>美食</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>休闲娱乐</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>游玩</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>丽人/美发</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>住宿</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>游玩</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>丽人/美发</span>
-              </div>
-              <div class="nav-item">
-                <img src="../../assets/img/icon/msg-icon9.webp" alt="">
-                <span>住宿</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="sub-type-notice"
-             v-if="state.subType===-1 && state.navIndex === 0"
-             @click="showSubType">附近吃喝玩乐
-        </div>
+
         <div class="slide-content"
              @touchstart="pageClick">
           <H class="first-horizontal-item"
@@ -61,7 +18,64 @@
              v-love="'slideHook'"
              v-model:index="state.navIndex">
             <SlideItem>
-              <div class="big">热点</div>
+              <div class="sub-type"
+                   :class="state.subTypeIsTop?'top':''"
+                   ref="subTypeRef">
+                <div class="local">
+                  <div class="card" @touchmove.capture="stop">
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>美食</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>休闲娱乐</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>游玩</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>丽人/美发</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>住宿</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>游玩</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>丽人/美发</span>
+                    </div>
+                    <div class="nav-item">
+                      <img src="../../assets/img/icon/msg-icon9.webp" alt="">
+                      <span>住宿</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="sub-type-notice"
+                   v-if="state.subType===-1 && state.navIndex === 0"
+                   @click="showSubType">附近吃喝玩乐
+              </div>
+              <VInfinite
+                  :style="{background: 'black'}"
+                  name="main"
+                  v-model:index="state.itemIndex"
+                  :render="render"
+                  :list="state.recommendVideos"
+                  :position="{
+                  baseIndex:0,
+                  navIndex:5,
+                }"
+                  @loadMore="loadMore"
+                  @refresh="() => getData(true)"
+              >
+              </VInfinite>
             </SlideItem>
             <SlideItem>
               <Community/>
@@ -92,8 +106,7 @@
         </div>
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
-      <SlideItem class=" gray">
-        <!--          <div class="big" v-for="i in 100">主页</div>-->
+      <SlideItem>
         <UserPanel
             ref="uploader"
             :isOnThisPage="state.baseIndex === 1"
diff --git a/src/router/routes.js b/src/router/routes.js
index ff41be8..d93c362 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -69,16 +69,16 @@ const routes = [
   {path: '/', redirect: '/test'},
   {path: '/test', component: Test},
   {path: '/test4', component: Test4},
-  {path: '/home', component: Index2},
-  {path: '/home/music', component: Music},
-  {path: '/home/music-rank-list', component: MusicRankList},
-  {path: '/home/search', component: Search},
-  {path: '/home/live', component: LivePage},
 
   {path: '/video-detail', component: VideoDetail},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
 
+  {path: '/home', component: Index2},
+  {path: '/home/music', component: Music},
+  {path: '/home/music-rank-list', component: MusicRankList},
+  {path: '/home/live', component: LivePage},
+  {path: '/home/search', component: Search},
 
   {path: '/me', component: Me,},
   {path: '/me/edit-userinfo', component: EditUserInfo},