add many pages

src/components/icon/BackIcon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import {Icon} from "@iconify/vue";
+
+</script>
+
+<template>
+  <Icon
+      class="back-icon"
+      icon="octicon:arrow-left-24" width="22"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/icon/DeleteIcon.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import {Icon} from "@iconify/vue";
+
+</script>
+
+<template>
+  <Icon icon="solar:trash-bin-minimalistic-linear"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/slide/SlideHorizontal.vue

@@ -44,16 +44,16 @@ const state = reactive({
   start: {x: 0, y: 0, time: 0},
   move: {x: 0, y: 0},
   wrapper: {width: 0, height: 0, childrenLength: 0},
-  slideItemsWidths:[]
+  slideItemsWidths: []
 })
 
-watch(
-    () => props.index,
-    (newVal) => {
+watch(() => props.index, (newVal) => {
       if (state.localIndex !== newVal) {
         state.localIndex = newVal
         if (props.changeActiveIndexUseAnim) {
           GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        } else {
+          GM.$setCss(wrapperEl.value, 'transition-duration', `0ms`)
         }
         GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`)
       }
@@ -84,9 +84,9 @@ function touchEnd(e) {
 
 
 function canNext(isNext) {
-  if (isNext){
+  if (isNext) {
     return state.localIndex !== state.wrapper.childrenLength - 1
-  }else {
+  } else {
     return state.localIndex !== 0
   }
 }

src/components/slide/common.js

@@ -18,7 +18,7 @@ export function slideInit(el, state, type) {
   if (type === SlideType.HORIZONTAL) dx1 = t
   else dx2 = t
 
-  console.log('start', dx1)
+  // console.log('start', dx1)
   Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
 }