diff --git a/src/components/slide/SlideImgs.vue b/src/components/slide/SlideImgs.vue
index ae85be7..466b5a2 100644
--- a/src/components/slide/SlideImgs.vue
+++ b/src/components/slide/SlideImgs.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="SlideImgs">
-    <div class="img-slide-wrapper" ref="wap">
+    <div class="img-slide-wrapper">
       <div class="img-slide-list"
-           ref="list"
-           @touchstart="touchstart"
-           @touchmove="touchmove"
-           @touchend="touchend">
-        <div class="img-slide-item" v-for="img in modelValue.imgs">
+           ref="wrapperEl"
+           @touchstart="touchStart"
+           @touchmove="touchMove"
+           @touchend="touchEnd">
+        <div class="img-slide-item" v-for="img in props.modelValue.imgs">
           <img :ref="setItemRef" :src="img">
         </div>
       </div>
@@ -20,11 +20,20 @@
   </div>
 </template>
 
-<script>
+<script setup lang="jsx">
 import enums from "../../utils/enums";
-import globalMethods from '../../utils'
+import Utils from '../../utils'
 import {mat4} from 'gl-matrix'
-import {cloneDeep} from "lodash";
+import {onMounted, reactive, ref} from "vue";
+import {
+  getSlideDistance,
+  slideInit,
+  slideReset,
+  slideTouchEnd,
+  slideTouchMove,
+  slideTouchStart
+} from "../../pages/slideHooks/common";
+import {SlideType} from "../../utils/const_var";
 
 let out = new Float32Array([
   0, 0, 0, 0,
@@ -38,426 +47,291 @@ let ov = new Float32Array([
   0, 0, 1, 0,
   0, 0, 0, 1,
 ]);
-let original = cloneDeep(ov)
 const rectMap = new Map()
-export default {
-  name: "SlideImgs",
-  components: {},
-  props: {
-    modelValue: {
-      type: Object,
-      default() {
-        return {
-          type: 'imgs',
-          imgs: [
-            new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
-          ],
-          "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-          video: 'http://douyin.ttentau.top/0.mp4',
-          "video_data_size": 26829508,
-          "duration": 427780,
-          "desc": "我不管我们宿舍第一好看",
-          "allow_download": 0,
-          "allow_duet": 0,
-          "allow_react": 0,
-          "allow_music": 1,
-          "allow_douplus": 1,
-          "allow_share": 1,
-          "digg_count": 10480000,
-          "comment_count": 79000,
-          "download_count": 6,
-          "play_count": 0,
-          "share_count": 119000,
-          "forward_count": 0,
-          "collect_count": 3,
-          "sort": 195,
-          "is_top": 0,
-          "city": "北京",
-          address: '中央戏剧学院',
-          "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-          "create_time": "1630423555",
-          "creator_id": "93864497380",
-          "status": 1,
-          "topics": [
-            {
-              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-              "name": "敬礼变装",
-              "creator_id": "93864497380",
-              "create_time": "1630423555",
-              "status": 1
-            },
-            {
-              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-              "name": "宿舍",
-              "creator_id": "93864497380",
-              "create_time": "1630423555",
-              "status": 1
-            }
-          ],
-          "music": {
-            "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-            "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-            "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-            "title": "@穷电影创作的原声-小高快起来跳舞",
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default() {
+      return {
+        type: 'imgs',
+        imgs: [
+          new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+        ],
+        "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+        video: 'http://douyin.ttentau.top/0.mp4',
+        "video_data_size": 26829508,
+        "duration": 427780,
+        "desc": "我不管我们宿舍第一好看",
+        "allow_download": 0,
+        "allow_duet": 0,
+        "allow_react": 0,
+        "allow_music": 1,
+        "allow_douplus": 1,
+        "allow_share": 1,
+        "digg_count": 10480000,
+        "comment_count": 79000,
+        "download_count": 6,
+        "play_count": 0,
+        "share_count": 119000,
+        "forward_count": 0,
+        "collect_count": 3,
+        "sort": 195,
+        "is_top": 0,
+        "city": "北京",
+        address: '中央戏剧学院',
+        "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+        "create_time": "1630423555",
+        "creator_id": "93864497380",
+        "status": 1,
+        "topics": [
+          {
+            "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+            "name": "敬礼变装",
             "creator_id": "93864497380",
             "create_time": "1630423555",
             "status": 1
           },
-          "author": {
-            "id": "1",
-            "unique_id_modify_time": "1630393144",
-            "unique_id": "10040050",
-            "favoriting_count": 143,
-            "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-            school: {
-              name: '中央戏剧学院',
-              department: null,
-              joinTime: null,
-              education: null,
-              displayType: enums.DISPLAY_TYPE.ALL,
-            },
-            "city": "",
-            "province": '北京',
-            "country": "",
-            "location": "",
-            "birthday": "2002-01-01",
-            "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-            "following_count": 66,
-            "follower_count": 235000,
-            "aweme_count": 1796000,
-            "nickname": "我是小睿耶",
-            certification: '',
-            "phone": "",
-            "sex": "",
-            "last_login_time": "1630423555",
+          {
+            "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+            "name": "宿舍",
+            "creator_id": "93864497380",
             "create_time": "1630423555",
-            "status": 1,
-            "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-            "is_private": 0
+            "status": 1
           }
+        ],
+        "music": {
+          "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+          "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+          "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+          "title": "@穷电影创作的原声-小高快起来跳舞",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        "author": {
+          "id": "1",
+          "unique_id_modify_time": "1630393144",
+          "unique_id": "10040050",
+          "favoriting_count": 143,
+          "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+          school: {
+            name: '中央戏剧学院',
+            department: null,
+            joinTime: null,
+            education: null,
+            displayType: enums.DISPLAY_TYPE.ALL,
+          },
+          "city": "",
+          "province": '北京',
+          "country": "",
+          "location": "",
+          "birthday": "2002-01-01",
+          "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+          "following_count": 66,
+          "follower_count": 235000,
+          "aweme_count": 1796000,
+          "nickname": "我是小睿耶",
+          certification: '',
+          "phone": "",
+          "sex": "",
+          "last_login_time": "1630423555",
+          "create_time": "1630423555",
+          "status": 1,
+          "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+          "is_private": 0
         }
       }
     }
+  }
+})
+const judgeValue = 20
+const wrapperEl = ref(null)
+
+const state = reactive({
+  name: 'SlideHorizontal',
+  localIndex: 0,
+  needCheck: true,
+  isTwo: true,
+  next: false,
+  wrapper: {width: 0, height: 0, childrenLength: 0},
+  last: {
+    point1: {x: 0, y: 0},
+    point2: {x: 0, y: 0},
   },
-  data() {
-    return {
-      itemRefs: [],
-      baseActiveIndex: 0,
-      progress: 0,
-      cycleFn: null,
-      state: 'play',//stop,custom
-
-      startX: 0,
-      startY: 0,
-
-      moveX: 0,
-      moveY: 0,
-      width: document.body.clientWidth,
-      startTime: 0,
-      index: 0,
-      isDrawRight: false,
-      isDrawDown: false,
-      isTwo: false,
-      store: {
-        scale: 1
-      },
-      result: {
-        width: 414,
-        height: 737
-      },
-      x: 0,
-      y: 79,
-      scale: 1,
-      maxScale: 3,
-      minScale: 0.5,
-      point1: {x: 0, y: 0},
-      point2: {x: 0, y: 0},
-      diff: {x: 0, y: 0},
-      lastPointermove: {x: 0, y: 0},
-      lastPoint1: {x: 0, y: 0},
-      lastPoint2: {x: 0, y: 0},
-      lastCenter: {x: 0, y: 0},
-      startCenter: {x: 0, y: 0},
-      a: {},
-      b: {},
-      last: {
-        ratio: 1,
-        point1: {x: 0, y: 0},
-        point2: {x: 0, y: 0},
-      },
-      start: {
-        point1: {x: 0, y: 0},
-        point2: {x: 0, y: 0},
-      }
-    }
-  },
-  created() {
-    this.width = document.body.clientWidth
-  },
-  watch: {
-    state(newVal, oldVal) {
-      return
-      console.log('newVal', newVal)
-      if (newVal === 'play') requestAnimationFrame(this.cycleFn)
-      if (newVal === 'stop') cancelAnimationFrame(this.cycleFn)
-      if (newVal === 'custom') cancelAnimationFrame(this.cycleFn)
-    }
+  start: {
+    x: 0, y: 0,
+    point1: {x: 0, y: 0},
+    point2: {x: 0, y: 0},
+    center: {x: 0, y: 0},
+    time: 0
   },
-  mounted() {
-    this.cycleFn = () => {
-      if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
-      if (this.progress < this.modelValue.imgs.length * 100) {
-        this.progress += .4
-        this.index = parseInt(this.progress / 100)
-        if (this.$refs.list) {
-          globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          globalMethods.$setCss(this.$refs.list, 'transform',
-              `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
-        }
-      } else {
-        this.progress = 0
-        // cancelAnimationFrame(this.cycleFn)
+  move: {x: 0, y: 0},
+  itemRefs: [],
+  status: 'play',//stop,custom
+  progress: 0,
+  cycleFn: null,
+})
+onMounted(() => {
+  slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
+
+  state.cycleFn = () => {
+    if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
+    if (state.progress < props.modelValue.imgs.length * 100) {
+      state.progress += .4
+      state.localIndex = parseInt(state.progress / 100)
+      if (wrapperEl.value) {
+        Utils.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        Utils.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state)}px, 0px, 0px)`)
       }
-      requestAnimationFrame(this.cycleFn)
+    } else {
+      state.progress = 0
+      // cancelAnimationFrame(this.cycleFn)
     }
-    return
-    // requestAnimationFrame(this.cycleFn)
-
-    let x = 0
-    let y = 0
-    let scale = 1
+    requestAnimationFrame(state.cycleFn)
+  }
+  requestAnimationFrame(state.cycleFn)
+})
+
+function touchStart(e) {
+  console.log('start', e.touches.length)
+  // if (s.state !== 'custom') {
+  //   this.state = 'stop'
+  // }
+  if (e.touches.length === 1) {
+    state.isTwo = false
+    slideTouchStart(e, wrapperEl.value, state)
+  } else {
+    if (state.isTwo) return
+    state.isTwo = true
+    state.itemRefs[state.localIndex].style['transition-duration'] = '0ms';
+    state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
+    state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
+    state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
+  }
+}
 
-    let isDrag = false  // 按下标识
-    const image = document.querySelector(`.img-slide-list`);
-    let tt = new Map()
-    image.addEventListener('wheel', e => {
-      this.itemRefs[this.index].style['transition-duration'] = '0ms';
+function touchMove(e) {
+  // console.log('move', e.touches.length)
+  if (state.isTwo && e.touches.length === 1) {
+    state.status = 'pause'
+    Utils.$stopPropagation(e)
+
+    // console.log('单手移动',)
+    let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+    let movementX = current.x - state.last.point1.x
+    let movementY = current.y - state.last.point1.y
+    // console.log(movementX, movementY)
+    const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
+    ov = mat4.multiply(out, t, ov);
+    state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
+    state.last.point1 = current
+  } else {
+    if (e.touches.length === 1) {
+      state.isTwo = false
+      slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
+        state.status = 'pause'
+      }, SlideType.HORIZONTAL)
+    } else {
+      state.isTwo = true
+      Utils.$stopPropagation(e)
+      state.status = 'pause'
 
-      let {clientX, clientY, deltaY} = e;
       let rect = {x: 0, y: 0}
-      if (tt.has(this.index)) {
-        rect = tt.get(this.index)
+      if (rectMap.has(state.localIndex)) {
+        rect = rectMap.get(state.localIndex)
       } else {
-        rect = this.itemRefs[this.index].getBoundingClientRect()
-        tt.set(this.index, rect)
-      }
-      clientX -= rect.x
-      clientY -= rect.y
-      const zoom = 1 + (deltaY < 0 ? 0.1 : -0.1);
-      const x = clientX * (1 - zoom);
-      const y = clientY * (1 - zoom);
-      const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
-      ov = mat4.multiply(out, t, ov);
-      this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-      // image.setAttribute("style", `transform:matrix3d(${ov.toString()});`);
-    })
-    image.addEventListener('mousedown', () => {
-      this.itemRefs[this.index].style['transition-duration'] = '0ms';
-      isDrag = true
-    });
-    image.addEventListener('mousemove', (e) => {
-      e.preventDefault();
-      if (isDrag) {
-        const {movementX, movementY} = e;
-        const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
-        ov = mat4.multiply(out, t, ov);
-        this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-      }
-    });
-    image.addEventListener('mouseup', () => {
-      this.itemRefs[this.index].style['transition-duration'] = '300ms';
-      this.itemRefs[this.index].style.transform = `matrix3d(${original.toString()})`;
-      ov = original
-      isDrag = false
-    });
-  },
-  methods: {
-    getCenter(a, b) {
-      const x = (a.x + b.x) / 2;
-      const y = (a.y + b.y) / 2;
-      return {x, y}
-    },
-    // 获取坐标之间的举例
-    getDistance(start, stop) {
-      return Math.hypot(stop.x - start.x, stop.y - start.y);
-    },
-    touchstart(e) {
-      console.log('start', e.touches.length)
-      if (this.state !== 'custom') {
-        this.state = 'stop'
+        //getBoundingClientRect在手机上获取不到值
+        let offset = $(state.itemRefs[state.localIndex]).offset()
+        rect = {x: offset.left, y: offset.top}
+        rectMap.set(state.localIndex, rect)
       }
-      if (e.touches.length === 1) {
-        this.isTwo = false
-        globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
-        this.startX = e.touches[0].pageX
-        this.startY = e.touches[0].pageY
-        this.startTime = Date.now()
-      } else {
-        if (this.isTwo) return
-        this.isTwo = true
-        this.itemRefs[this.index].style['transition-duration'] = '0ms';
 
-        if (e.cancelable) {
-          e.preventDefault();
-        }
+      let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+      let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
 
-        this.last.point1 = this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
-        this.last.point2 = this.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
-        this.startCenter = this.getCenter(this.point1, this.point2)
-      }
-    },
-    touchmove(e) {
-      console.log('move', e.touches.length)
-      if (this.isTwo && e.touches.length === 1) {
-        // console.log('单手移动',)
-        let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-        let movementX = current.x - this.last.point1.x
-        let movementY = current.y - this.last.point1.y
-        console.log(movementX, movementY)
-        const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
-        let ov1 = mat4.multiply(out, t, ov);
-        this.itemRefs[this.index].style.transform = `matrix3d(${ov1.toString()})`;
-        // this.last.point1 = current
-      } else {
-        if (e.touches.length === 1) {
-          this.isTwo = false
+      // 双指缩放比例，就是对应的放大倍数
+      let currentRatio = Utils.getDistance(current1, current2) / Utils.getDistance(state.start.point1, state.start.point2);
 
-          this.moveX = e.touches[0].pageX - this.startX
-          this.moveY = e.touches[0].pageY - this.startY
+      let center = Utils.getCenter(current1, current2)
 
-          this.isDrawRight = this.moveX < 0
-          this.isDrawDown = this.moveY < 0
+      center.x -= rect.x
+      center.y -= rect.y
+      //用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
+      let zoom = currentRatio / ov[0]
+      const x = center.x * (1 - zoom);
+      const y = center.y * (1 - zoom);
+      const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
+      //如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
+      //如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
+      ov = mat4.multiply(out, t, ov);
 
-          if (this.index === 0 && !this.isDrawRight) return
-          if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
+      let movementRatio = currentRatio - ov[0]
+      //如果本次比例和上次的不超过0.02。那么判定为平移
+      if (Math.abs(movementRatio) <= 0.02) {
+        let movementX = current1.x - state.last.point1.x
+        let movementY = current1.y - state.last.point1.y
+        let movement2X = current2.x - state.last.point2.x
+        let movement2Y = current2.y - state.last.point2.y
+
+        let minX = Math.min(movementX, movement2X)
+        let minY = Math.min(movementY, movement2Y)
+        const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
+        ov = mat4.multiply(out, t1, ov);
+      }
 
-          globalMethods.$setCss(this.$refs.list, 'transform',
-              `translate3d(${-this.getWidth(this.index) +
-              this.moveX}px, 0px, 0px)`)
-        } else {
-          this.isTwo = true
-          if (e.cancelable) {
-            e.preventDefault();
-          }
-          let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-          let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
-
-          // 双指缩放比例，就是对应的放大倍数
-          let ratio = this.getDistance(current1, current2) / this.getDistance(this.point1, this.point2);
-
-          let rect = {x: 0, y: 0}
-          if (rectMap.has(this.index)) {
-            rect = rectMap.get(this.index)
-          } else {
-            //getBoundingClientRect在手机上获取不到值
-            let offset = $(this.itemRefs[this.index]).offset()
-            rect.x = offset.left
-            rect.y = offset.top
-            rectMap.set(this.index, rect)
-          }
+      state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
+      state.last.point1 = current1
+      state.last.point2 = current2
+    }
+  }
+}
 
-          let center = cloneDeep(this.startCenter)
-          center.x -= rect.x
-          center.y -= rect.y
-          let zoom = ratio
-          const x = center.x * (1 - zoom);
-          const y = center.y * (1 - zoom);
-          const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
-          //如果zoom是累加放大（比如每次都是0.15），第三个参数用ov
-          //但这里zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
-          ov = mat4.multiply(out, t, original);
-
-          let movementX = current1.x - this.last.point1.x
-          let movementY = current1.y - this.last.point1.y
-          let movement2X = current2.x - this.last.point2.x
-          let movement2Y = current2.y - this.last.point2.y
-
-          let minX = Math.min(movementX, movement2X)
-          let minY = Math.min(movementY, movement2Y)
-
-          console.log('minX', minX, 'minY', minY)
-
-          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-          this.last.point1 = current1
-          this.last.point2 = current2
-        }
-      }
-    },
-    touchend(e) {
-      console.log('end', e.touches.length, this.isTwo)
-      if (this.isTwo && e.touches.length === 1) {
-        //双指绽放，但只松开了一只手
-        this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-      } else {
-        if (this.isTwo) {
-          ov = original
-          this.itemRefs[this.index].style['transition-duration'] = '300ms';
-          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-          // if (this.state !== 'custom') {
-          //   this.state = 'play'
-          // }
-          // if (e.touches.length) {
-          //   this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-          // }
-
-        } else {
-          if (this.index === 0 && !this.isDrawRight) return
-          if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
-
-          let canSlide = this.width / 5 < Math.abs(this.moveX);
-          if (Date.now() - this.startTime < 40) canSlide = false
-
-          if (canSlide) {
-            if (this.isDrawRight) {
-              this.index += 1
-            } else {
-              this.index -= 1
-            }
-            this.state = 'custom'
-            this.progress = (this.index + 1) * 100
-          } else {
-            if (this.state !== 'custom') {
-              this.state = 'play'
+function touchEnd(e) {
+  console.log('end', e.touches.length, state.isTwo)
+  //双指缩放，但只松开了一只手
+  if (state.isTwo && e.touches.length === 1) {
+    Utils.$stopPropagation(e)
+    state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+  } else {
+    if (state.isTwo) {
+      Utils.$stopPropagation(e)
+      state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
+      state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
+
+    } else {
+      slideTouchEnd(e, state, canNext,
+          () => {
+            state.status = 'custom'
+            state.progress = (state.localIndex + 1) * 100
+          },
+          () => {
+            if (state.status !== 'custom') {
+              state.status = 'play'
+              requestAnimationFrame(state.cycleFn)
             }
           }
-          globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          globalMethods.$setCss(this.$refs.list, 'transform',
-              `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
-        }
-      }
-    },
-    getWidth(index) {
-      return index * this.width
-    },
-    setItemRef(el) {
-      if (el) {
-        this.itemRefs.push(el)
-      }
-    },
-    beforeUpdate() {
-      this.itemRefs = []
-    },
-    updated() {
-      console.log(this.itemRefs)
-    },
-    toggle() {
-      return
-      if (this.state === 'stop') {
-        this.state = 'play'
-        requestAnimationFrame(this.cycleFn)
-      } else {
-        this.state = 'stop'
-      }
-    },
-    getProgressWidth(index) {
-      if (this.progress >= (index + 1) * 100) return {width: '100%'}
-      return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
+      )
+      slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
     }
   }
 }
+
+function getProgressWidth(index) {
+  if (state.progress >= (index + 1) * 100) return {width: '100%'}
+  return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
+}
+
+function setItemRef(el) {
+  el && state.itemRefs.push(el)
+}
+
+function canNext(isNext) {
+  return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext));
+}
+
 </script>
 
 <style scoped lang="less">
@@ -469,14 +343,10 @@ html {
   position: relative;
   background: black;
   width: 100%;
-  //height: 100%;
-  height: calc(100vh - 50rem);
+  height: 100%;
   overflow: hidden;
   color: white;
   font-size: 14rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 
   .img-slide-wrapper {
     height: 100%;
@@ -498,30 +368,15 @@ html {
 
         img {
           transform-origin: 0 0;
-          width: 100vw;
+          width: 100%;
         }
       }
     }
   }
 
-  .content {
-    width: 100vw;
-
-    .base-slide-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    img {
-      width: 100vw;
-    }
-
-  }
-
   .progress-bar {
     position: absolute;
-    width: 100vw;
+    width: 100%;
     bottom: 0;
     display: flex;
     box-sizing: border-box;
diff --git a/src/components/slide/SlideImgs2.vue b/src/components/slide/SlideImgs2.vue
index 251f20e..c0bfe4f 100644
--- a/src/components/slide/SlideImgs2.vue
+++ b/src/components/slide/SlideImgs2.vue
@@ -3,9 +3,9 @@
     <div class="img-slide-wrapper">
       <div class="img-slide-list"
            ref="list"
-           @touchstart="start"
-           @touchmove="move"
-           @touchend="end">
+           @touchstart="touchstart"
+           @touchmove="touchmove"
+           @touchend="touchend">
         <div class="img-slide-item" v-for="img in modelValue.imgs">
           <img :ref="setItemRef" :src="img">
         </div>
@@ -22,8 +22,25 @@
 
 <script>
 import enums from "../../utils/enums";
-import globalMethods from '../../utils'
-//TODO 放大功能待完善
+import Utils from '../../utils'
+import GM from '../../utils'
+import {mat4} from 'gl-matrix'
+import {cloneDeep} from "lodash";
+
+let out = new Float32Array([
+  0, 0, 0, 0,
+  0, 0, 0, 0,
+  0, 0, 0, 0,
+  0, 0, 0, 0
+])
+let ov = new Float32Array([
+  1, 0, 0, 0,
+  0, 1, 0, 0,
+  0, 0, 1, 0,
+  0, 0, 0, 1,
+]);
+let original = cloneDeep(ov)
+const rectMap = new Map()
 export default {
   name: "SlideImgs",
   components: {},
@@ -134,42 +151,27 @@ export default {
       cycleFn: null,
       state: 'play',//stop,custom
 
-      startX: 0,
-      startY: 0,
-
-      moveX: 0,
-      moveY: 0,
-      width: document.body.clientWidth,
-      startTime: 0,
       index: 0,
-      isDrawRight: false,
-      isDrawDown: false,
+      isNext: false,
       isTwo: false,
-      store: {
-        scale: 1
+      last: {
+        ratio: 1,
+        point1: {x: 0, y: 0},
+        point2: {x: 0, y: 0},
       },
-      result: {
-        width: 414,
-        height: 737
+      start: {
+        point1: {x: 0, y: 0},
+        point2: {x: 0, y: 0},
+        center: {x: 0, y: 0},
+        time: 0
       },
-      x: 0,
-      y: 79,
-      scale: 1,
-      maxScale: 3,
-      minScale: 0.5,
-      point1: {x: 0, y: 0},
-      point2: {x: 0, y: 0},
-      diff: {x: 0, y: 0},
-      lastPointermove: {x: 0, y: 0},
-      lastPoint1: {x: 0, y: 0},
-      lastPoint2: {x: 0, y: 0},
-      lastCenter: {x: 0, y: 0},
-      a: {},
-      b: {},
+      move: {x: 0, y: 0},
+      wrapper: {
+        width: 0
+      }
     }
   },
   created() {
-    this.width = document.body.clientWidth
   },
   watch: {
     state(newVal, oldVal) {
@@ -187,9 +189,8 @@ export default {
         this.progress += .4
         this.index = parseInt(this.progress / 100)
         if (this.$refs.list) {
-          globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          globalMethods.$setCss(this.$refs.list, 'transform',
-              `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
+          Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
+          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
         }
       } else {
         this.progress = 0
@@ -197,6 +198,8 @@ export default {
       }
       requestAnimationFrame(this.cycleFn)
     }
+    this.wrapper.width = GM.$getCss(this.$refs.list, 'width')
+    return
     // requestAnimationFrame(this.cycleFn)
   },
   methods: {
@@ -205,137 +208,164 @@ export default {
       const y = (a.y + b.y) / 2;
       return {x, y}
     },
-    start(e) {
-      console.log('start')
+    // 获取坐标之间的举例
+    getDistance(start, stop) {
+      return Math.hypot(stop.x - start.x, stop.y - start.y);
+    },
+    touchstart(e) {
+      console.log('start', e.touches.length)
       if (this.state !== 'custom') {
         this.state = 'stop'
       }
-      if (e.touches && e.touches.length === 1) {
+      if (e.touches.length === 1) {
         this.isTwo = false
-        globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
-        this.startX = e.touches[0].pageX
-        this.startY = e.touches[0].pageY
-        this.startTime = Date.now()
+        Utils.$setCss(this.$refs.list, 'transition-duration', `0ms`)
+        this.start = {
+          point1: {
+            x: e.touches[0].pageX,
+            y: e.touches[0].pageY,
+          },
+          time: Date.now()
+        }
       } else {
+        if (this.isTwo) return
+
         this.isTwo = true
         this.itemRefs[this.index].style['transition-duration'] = '0ms';
 
-        let events = e.touches[0];
-        let events2 = e.touches[1];
-
-        if (e.cancelable) {
-          e.preventDefault();
-        }
-
-        this.lastPoint1 = this.point1 = {x: events.pageX, y: events.pageY};
-        this.lastPoint2 = this.point2 = {x: events2.pageX, y: events2.pageY};
-
-        this.lastCenter = this.getCenter(this.lastPoint1, this.lastPoint2)
+        this.last.point1 = this.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
+        this.last.point2 = this.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
+        this.start.center = this.getCenter(this.start.point1, this.start.point2)
       }
     },
-    move(e) {
-      if (e.touches && e.touches.length === 1) {
-        this.isTwo = false
-
-        this.moveX = e.touches[0].pageX - this.startX
-        this.moveY = e.touches[0].pageY - this.startY
-
-        this.isDrawRight = this.moveX < 0
-        this.isDrawDown = this.moveY < 0
-
-        if (this.index === 0 && !this.isDrawRight) return
-        if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
-
-        globalMethods.$setCss(this.$refs.list, 'transform',
-            `translate3d(${-this.getWidth(this.index) +
-            this.moveX}px, 0px, 0px)`)
+    touchmove(e) {
+      console.log('move', e.touches.length)
+      if (this.isTwo && e.touches.length === 1) {
+        Utils.$stopPropagation(e)
+
+        // console.log('单手移动',)
+        let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+        let movementX = current.x - this.last.point1.x
+        let movementY = current.y - this.last.point1.y
+        console.log(movementX, movementY)
+        const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
+        ov = mat4.multiply(out, t, ov);
+        this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
+        this.last.point1 = current
       } else {
-        this.isTwo = true
-        if (e.cancelable) {
-          e.preventDefault();
-        }
-
-        let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-        let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
-
-        // 获取坐标之间的举例
-        let getDistance = function (start, stop) {
-          return Math.hypot(stop.x - start.x, stop.y - start.y);
-        };
-
-        // 双指缩放比例计算
-        let ratio = getDistance(current1, current2) / getDistance(this.lastPoint1, this.lastPoint2);
-
+        if (e.touches.length === 1) {
+          this.isTwo = false
+          this.move.x = e.touches[0].pageX - this.start.point1.x
+          this.move.y = e.touches[0].pageY - this.start.point1.y
+          this.isNext = this.move.x < 0
+          if (!this.canNext(this.isNext)) return
+          Utils.$stopPropagation(e)
+          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance() + this.move.x}px, 0px, 0px)`)
+        } else {
+          Utils.$stopPropagation(e)
+          this.isTwo = true
 
-        // 计算当前双指中心点坐标
-        let center = this.getCenter(current1, current2)
-        console.log('center', center)
+          let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+          let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
 
-        // 计算图片中心偏移量，默认transform-origin: 50% 50%
-        // 如果transform-origin: 30% 40%，那origin.x = (ratio - 1) * result.width * 0.3
-        // origin.y = (ratio - 1) * result.height * 0.4
-        // 如果通过修改宽高或使用transform缩放，但将transform-origin设置为左上角时。
-        // 可以不用计算origin，因为(ratio - 1) * result.width * 0 = 0
-        const origin = {
-          x: (ratio - 1) * this.result.width * 0.5,
-          y: (ratio - 1) * this.result.height * 0.5
-        };
-        // 计算偏移量，认真思考一下为什么要这样计算(带入特定的值计算一下)
-        this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
-        this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
+          // 双指缩放比例，就是对应的放大倍数
+          let ratio = this.getDistance(current1, current2) / this.getDistance(this.start.point1, this.start.point2);
 
-        // console.log('this.x', this.x)
-        // console.log('this.y', this.y)
+          let rect = {x: 0, y: 0}
+          if (rectMap.has(this.index)) {
+            rect = rectMap.get(this.index)
+          } else {
+            //getBoundingClientRect在手机上获取不到值
+            let offset = $(this.itemRefs[this.index]).offset()
+            rect.x = offset.left
+            rect.y = offset.top
+            rectMap.set(this.index, rect)
+          }
 
-        // 图像应用缩放效果
-        this.itemRefs[this.index].style.transform =
-            `translate3d(${this.x}px,${this.y}px,0) scale(${this.store.scale * ratio})`;
+          let center = this.getCenter(current1, current2)
+          center.x -= rect.x
+          center.y -= rect.y
+          //用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
+          let zoom = ratio / ov[0]
+          const x = center.x * (1 - zoom);
+          const y = center.y * (1 - zoom);
+          const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
+          //如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
+          //如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
+          ov = mat4.multiply(out, t, ov);
+
+          let dRatio = this.last.ratio - ratio
+          //如果本次比例和上次的不超过0.02。那么判定为平移
+          if (Math.abs(dRatio) <= 0.02) {
+            let movementX = current1.x - this.last.point1.x
+            let movementY = current1.y - this.last.point1.y
+            let movement2X = current2.x - this.last.point2.x
+            let movement2Y = current2.y - this.last.point2.y
+
+            let minX = Math.min(movementX, movement2X)
+            let minY = Math.min(movementY, movement2Y)
+            const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
+            ov = mat4.multiply(out, t1, ov);
+          }
 
-        this.lastCenter = {x: center.x, y: center.y};
-        this.lastPoint1 = {x: current1.x, y: current1.y};
-        this.lastPoint2 = {x: current2.x, y: current2.y};
+          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
+          this.last.point1 = current1
+          this.last.point2 = current2
+          this.last.ratio = ratio
+        }
       }
     },
-    end(e) {
-      console.log('end',e.touches)
-      if (this.isTwo) {
-        this.store.scale = 1
-        this.itemRefs[this.index].style['transition-duration'] = '300ms';
-        this.itemRefs[this.index].style.transform = `translate3d(0,0,0) scale(1)`;
-        if (this.state !== 'custom') {
-          this.state = 'play'
-        }
-        if (e.touches.length){
-          this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-        }
+    touchend(e) {
+      console.log('end', e.touches.length, this.isTwo)
+      if (this.isTwo && e.touches.length === 1) {
+        Utils.$stopPropagation(e)
 
+        //双指缩放，但只松开了一只手
+        this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
       } else {
-        if (this.index === 0 && !this.isDrawRight) return
-        if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
+        if (this.isTwo) {
+          Utils.$stopPropagation(e)
+
+          ov = original
+          this.itemRefs[this.index].style['transition-duration'] = '300ms';
+          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
+          // if (this.state !== 'custom') {
+          //   this.state = 'play'
+          // }
+          // if (e.touches.length) {
+          //   this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+          // }
 
-        let canSlide = this.width / 5 < Math.abs(this.moveX);
-        if (Date.now() - this.startTime < 40) canSlide = false
+        } else {
+          if (!this.canNext(this.isNext)) return
+          Utils.$stopPropagation(e)
+
+          let canSlide = this.wrapper.width / 5 < Math.abs(this.move.x);
+          if (Date.now() - this.start.time < 40) canSlide = false
 
-        if (canSlide) {
-          if (this.isDrawRight) {
-            this.index += 1
+          if (canSlide) {
+            if (this.isNext) {
+              this.index += 1
+            } else {
+              this.index -= 1
+            }
+            this.state = 'custom'
+            this.progress = (this.index + 1) * 100
           } else {
-            this.index -= 1
-          }
-          this.state = 'custom'
-          this.progress = (this.index + 1) * 100
-        } else {
-          if (this.state !== 'custom') {
-            this.state = 'play'
+            if (this.state !== 'custom') {
+              this.state = 'play'
+            }
           }
+          Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
+          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
         }
-        globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-        globalMethods.$setCss(this.$refs.list, 'transform',
-            `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
       }
     },
-    getWidth(index) {
-      return index * this.width
+    canNext(isNext) {
+      return !((this.index === 0 && !isNext) || (this.index === this.modelValue.imgs.length - 1 && isNext));
+    },
+    getSlideDistance() {
+      return -this.index * this.wrapper.width
     },
     setItemRef(el) {
       if (el) {
@@ -374,76 +404,60 @@ html {
   position: relative;
   background: black;
   width: 100%;
-  //height: 100%;
-  height: calc(100vh - 5rem);
-  overflow: auto;
+  height: 100%;
+  overflow: hidden;
   color: white;
-  font-size: 1.4rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 14rem;
 
   .img-slide-wrapper {
-    width: 100vw;
-    overflow: hidden;
+    height: 100%;
+    width: 100%;
 
     .img-slide-list {
-      width: 100vw;
+      height: 100%;
+      width: 100%;
       display: flex;
+      position: relative;
 
       .img-slide-item {
-        min-width: 100vw;
+        height: 100%;
+        width: 100%;
+        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: center;
 
         img {
-          //transform-origin: left top;
-          width: 100vw;
-          //position: absolute;
-          //height: 100%;
+          transform-origin: 0 0;
+          width: 100%;
         }
       }
     }
   }
 
-  .content {
-    width: 100vw;
-
-    .base-slide-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    img {
-      width: 100vw;
-    }
-
-  }
 
   .progress-bar {
     position: absolute;
-    width: 100vw;
+    width: 100%;
     bottom: 0;
     display: flex;
     box-sizing: border-box;
-    padding: 0 .5rem;
+    padding: 0 5rem;
     justify-content: space-between;
 
     .bar {
-      border-radius: 1rem;
+      border-radius: 10rem;
       flex: 1;
-      margin: 0 .2rem;
-      height: .2rem;
+      margin: 0 2rem;
+      height: 2rem;
       background: gray;
       position: relative;
 
       .progress {
-        border-radius: 1rem;
+        border-radius: 10rem;
         position: absolute;
         left: 0;
-        height: .2rem;
+        height: 2rem;
         background: white;
         //width: 100%;
         //animation: start 3s linear;
diff --git a/src/pages/slideHooks/H.vue b/src/pages/slideHooks/H.vue
index aeed99d..b0322df 100644
--- a/src/pages/slideHooks/H.vue
+++ b/src/pages/slideHooks/H.vue
@@ -47,7 +47,7 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.HORIZONTAL)
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.HORIZONTAL)
 }
 
 function touchEnd(e) {
diff --git a/src/pages/slideHooks/SlideItem.vue b/src/pages/slideHooks/SlideItem.vue
index cf62de0..2ed5ba9 100644
--- a/src/pages/slideHooks/SlideItem.vue
+++ b/src/pages/slideHooks/SlideItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="slide-item">
+  <div class="slide-item2">
     <slot></slot>
   </div>
 </template>
@@ -8,7 +8,7 @@
 </script>
 
 <style scoped lang="less">
-.slide-item {
+.slide-item2 {
   height: 100%;
   width: 100%;
   flex-shrink: 0;
diff --git a/src/pages/slideHooks/V.vue b/src/pages/slideHooks/V.vue
index fb6f863..21b33af 100644
--- a/src/pages/slideHooks/V.vue
+++ b/src/pages/slideHooks/V.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, reactive, ref,watch} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import GM from '../../utils'
 import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
 import {SlideType} from "../../utils/const_var";
@@ -46,13 +46,11 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
 }
 
 function touchEnd(e) {
-  slideTouchEnd(e, state, canNext, () => {
-
-  }, SlideType.VERTICAL)
+  slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
   slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
 }
 
diff --git a/src/pages/slideHooks/VInfinite.vue b/src/pages/slideHooks/VInfinite.vue
index 248710a..b6f4394 100644
--- a/src/pages/slideHooks/VInfinite.vue
+++ b/src/pages/slideHooks/VInfinite.vue
@@ -124,13 +124,13 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
 }
 
 function touchEnd(e) {
   slideTouchEnd(e, state, canNext, () => {
 
-  }, SlideType.VERTICAL)
+  },null, SlideType.VERTICAL)
   slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
 }
 
diff --git a/src/pages/slideHooks/common.js b/src/pages/slideHooks/common.js
index b4cd904..a9bbb41 100644
--- a/src/pages/slideHooks/common.js
+++ b/src/pages/slideHooks/common.js
@@ -36,15 +36,16 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
   return state.next
 }
 
-export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HORIZONTAL) {
+export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
   state.move.x = e.touches[0].pageX - state.start.x
   state.move.y = e.touches[0].pageY - state.start.y
 
   let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
-  if (!cb?.(isNext)) return
+  if (!canNextCb?.(isNext)) return
 
   if (canSlide(state, judgeValue, type)) {
+    nextCb?.()
     bus.emit(state.name + '-moveX', state.move.x)
     Utils.$stopPropagation(e)
     let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
@@ -55,11 +56,12 @@ export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HO
     } else {
       dx2 = t + state.move.y
     }
+    Utils.$setCss(el, 'transition-duration', `0ms`)
     Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
   }
 }
 
-export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
+export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = SlideType.HORIZONTAL) {
   let isHorizontal = type === SlideType.HORIZONTAL;
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 
@@ -79,6 +81,8 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORI
         state.localIndex--
       }
       nextCb?.()
+    } else {
+      notNextCb?.()
     }
   }
 }
@@ -97,7 +101,7 @@ export function slideReset(el, state, type, emit) {
   state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
   state.next = false
   state.needCheck = true
-  emit('update:index', state.localIndex)
+  emit?.('update:index', state.localIndex)
   bus.emit(state.name + '-end', state.localIndex)
 }
 
diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue
index d26aa0f..f84d221 100644
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="test-slide-wrapper">
     <H v-model:index="state.baseIndex">
-      <SlideItem class="slide-item gray">
+      <SlideItem class=" gray">
         <H class="h" v-model:index="state.navIndex">
-          <SlideItem class="slide-item gray">
+          <SlideItem class=" gray">
             <div class="big">找红包</div>
           </SlideItem>
-          <SlideItem class="slide-item gray">
+          <SlideItem class=" gray">
             <div class="big">热点</div>
           </SlideItem>
-          <SlideItem class="slide-item gray">
+          <SlideItem class=" gray">
             <div class="big">社区</div>
           </SlideItem>
-          <SlideItem class="slide-item gray">
+          <SlideItem class=" gray">
             <div class="big">关注</div>
           </SlideItem>
-          <SlideItem class="slide-item gray">
+          <SlideItem class=" gray">
             <div class="big">商城</div>
           </SlideItem>
-          <SlideItem class="slide-item">
+          <SlideItem class="">
             <VInfinite
                 v-model:index="state.index"
                 :render="render"
@@ -40,7 +40,7 @@
         </div>
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
-      <SlideItem class="slide-item gray">
+      <SlideItem class=" gray">
         <div class="big" v-for="i in 100">主页</div>
       </SlideItem>
     </H>
@@ -63,10 +63,10 @@ const state = reactive({
   navIndex: 5,
   index: 0,
   recommendVideos: [
-    {
-      type: 'img',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    },
+    // {
+    //   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}`
@@ -85,7 +85,7 @@ function render(item, itemIndex, play) {
     node = <SlideImgs/>
   }
   return node
-  // return <SlideItem class="slide-item gray">{node}</SlideItem>
+  // return <SlideItem class=" gray">{node}</SlideItem>
 }
 
 // function render1(item, itemIndex, play) {
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index 331d703..39e2d2a 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -1,9 +1,9 @@
 <template>
   <!--  <TestSlide></TestSlide>-->
   <!--  <SlideUser></SlideUser>-->
-  <SlideImgs></SlideImgs>
-  <!--    <TestImg/>-->
-  <!--  <slideHooks></slideHooks>-->
+<!--  <SlideImgs></SlideImgs>-->
+<!--      <TestImg/>-->
+    <slideHooks></slideHooks>
 
   <!--  <div class="body">-->
   <!--    <div class="wrapper">-->
@@ -46,7 +46,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style scoped lang="less">
 .body {
   display: flex;
   align-items: center;
@@ -63,10 +63,4 @@ export default {
   background: black;
   overflow: hidden;
 }
-
-img {
-  transform-origin: 0 0;
-  max-width: 1040px;
-  max-height: 600px;
-}
 </style>
diff --git a/src/utils/index.jsx b/src/utils/index.jsx
index 5d27ce6..f38190d 100644
--- a/src/utils/index.jsx
+++ b/src/utils/index.jsx
@@ -353,7 +353,7 @@ export default {
     }
     return str
   },
-  $randomNum(minNum, maxNum) {
+  randomNum(minNum, maxNum) {
     switch (arguments.length) {
       case 1:
         return parseInt(Math.random() * minNum + 1, 10);
@@ -363,4 +363,13 @@ export default {
         return 0;
     }
   },
+  getCenter(a, b) {
+    const x = (a.x + b.x) / 2;
+    const y = (a.y + b.y) / 2;
+    return {x, y}
+  },
+  // 获取坐标之间的举例
+  getDistance(start, stop) {
+    return Math.hypot(stop.x - start.x, stop.y - start.y);
+  },
 }