upup

src/views/HomeView.vue

@@ -31,6 +31,7 @@
     <!-- 画作 -->
     <div
       class="painting-wrap"
+      :class="{last:summaryOpacity > 0}"
       :style="{
         top: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)` : paintingWidth == 485 ? `110%` : `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
@@ -317,6 +318,8 @@
         top: `${(paintingTop + paintingHeight + 60) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
     >
       <div
         class="page2-box"
@@ -771,14 +774,19 @@ const paintingWidth = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= paintingMoveUpAt) {
     ret = paintingWidthInitial
+    console.log(1, ret)
   } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
     ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
+    console.log(2, ret)
   } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
     ret = paintingWidthMovedUp
+    console.log(3, ret)
   } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
     ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
+    console.log(4, ret)
   } else {
     ret = paintingWidthMovedDown
+    console.log(5, ret)
   }
   return ret
 })
@@ -1213,7 +1221,7 @@ const currentPosition = computed(() => {
   if (stoneOpacity3.value > 0) {
     return `translate(-25%, -6%) scale(2.2)`
   }
-  return ``
+  return `translate(-50%, 0)`
 })
 
 
@@ -1596,7 +1604,10 @@ function onClickGoNextPage() {
 
 
   }
-
+  >.last{
+    left: calc(100% - ((225 / 308 * 100vw) * 2.35 ) / 2);
+    transform:scale(1) !important;
+  }
   >.hotspot-wrap {
     position: absolute;
     left: 50%;
@@ -2054,4 +2065,5 @@ function onClickGoNextPage() {
     transform: translate(-50%, 0);
   }
 }
-</style>
+</style>import { transform } from "lodash"
+