垃圾ios 画作适配问题

src/views/PaintingDetail.vue

@@ -3,22 +3,21 @@
     :id="`${direction ? 'myRowBox' : ''}`"
     class="hotspot-detail-2"
   >
+    <!--
+  WebkitClipPath:`rect(0 100% ${AnimationProgress.value}% 0)`,
+          clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
+        maxHeight:`${direction?'100':AnimationProgress.value}%`
+
+     -->
+
     <div
       id="painting-wrap-id"
       :class="`painting-wrap ${direction ? 'swiper-no-swiping' : ''} ${
         isUping ? 'paintion-wrap-top' : ''
       }`"
       :style="{
-        clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
-        WebkitClipPath:`rect(0 100% ${AnimationProgress.value}% 0)`,
         top: `${direction && isUping ? '0%' : ''}`,
-        transform: `${
-          direction && isUping
-            ? 'translate(-50%, 0) rotate(-90deg)'
-            : direction
-              ? 'translate(-50%, 0) rotate(-90deg)'
-              : ''
-        }`,
+        transform: `${direction ? 'translate(-50%) rotate(-90deg)' : ''}`,
         left: `${direction && isUping ? '50%' : direction ? '26%' : ''}`,
       }"
     >
@@ -26,6 +25,7 @@
       <div
         v-if="direction"
         class="myRowBoxImg"
+        :style="`height:${isAnimating ? AnimationProgress.value - 4 : 100}%`"
         @click="showBigPainting"
       >
         <div>
@@ -41,30 +41,37 @@
         </div>
       </div>
 
-      <img
-        v-if="!direction"
-        class="painting-border"
-        src="@/assets/images/painting-border-new.png"
-        alt=""
-        draggable="false"
-      >
+      <!-- 竖向才有的 -->
       <div
         v-if="!direction"
-        ref="paintingWrap2El"
-        class="painting-wrap-2"
+        class="shuBox"
+        :style="`height:${AnimationProgress.value}%`"
       >
         <img
-          ref="paintingEl"
-          class="painting"
-          :class="{
-            oversize: isOversize,
-          }"
-          :src="props.thumb"
+          class="painting-border"
+          src="@/assets/images/painting-border-new.png"
           alt=""
           draggable="false"
-          @click="showBigPainting"
         >
+        <div
+          ref="paintingWrap2El"
+          class="painting-wrap-2"
+        >
+          <img
+            ref="paintingEl"
+            class="painting"
+            :class="{
+              oversize: isOversize,
+            }"
+            :src="props.thumb"
+            alt=""
+            draggable="false"
+            @click="showBigPainting"
+          >
+        </div>
       </div>
+
+
       <Transition name="fade-out">
         <img
           v-show="isAnimating"
@@ -245,7 +252,7 @@ const props = defineProps({
 const lastY = ref(0)
 // 开始滑动
 const handletouchstartUp = (event) => {
-  emit('touch-up')
+  emit("touch-up")
   lastY.value = event.changedTouches[0].pageY
 }
 
@@ -256,11 +263,11 @@ onMounted(() => {
 const touchEndUp = (event) => {
   let currentY = event.changedTouches[0].pageY
   let ty = currentY - lastY.value
-  if (ty > 0 ) {
-    console.log('向下')
+  if (ty > 0) {
+    console.log("向下")
     onSwipeDown()
-  } else if (ty < 0 ) {
-    console.log('向上')
+  } else if (ty < 0) {
+    console.log("向上")
     onSwipeTop()
   }
 }
@@ -394,7 +401,7 @@ function showBigPainting() {
 
 <style lang="less" scoped>
 ::-webkit-scrollbar {
-  display:none;
+  display: none;
 }
 
 .hotspot-detail-2 {
@@ -404,16 +411,6 @@ function showBigPainting() {
   width: 100%;
   height: 100%;
 
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .painting-wrapRow {
-    background-color: red;
-    z-index: 99;
-  }
-
   > .painting-wrap {
     position: absolute;
     left: 50%;
@@ -433,15 +430,14 @@ function showBigPainting() {
     overflow: hidden;
     transition: top 2s ease, transform 2s ease, left 2s ease;
 
-    > img.painting-border {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    > .painting-wrap-2 {
+    .shuBox {
+      display: inline-block;
+      overflow: hidden;
+      position: relative;
+      .painting-border {
+        width: 100%;
+      }
+      .painting-wrap-2 {
       position: absolute;
       left: 50%;
       top: calc(
@@ -459,8 +455,8 @@ function showBigPainting() {
       );
       overflow: auto;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
 
       > img.painting {
         position: absolute;
@@ -477,9 +473,12 @@ function showBigPainting() {
         transform: initial;
       }
     }
+    }
+
 
     > img.bottom-border-for-animation {
       position: absolute;
+      z-index: 100;
       left: 0;
       width: 100%;
     }
@@ -814,12 +813,13 @@ function showBigPainting() {
       overflow-x: auto;
       white-space: nowrap;
       display: inline-block;
+      position: relative;
       &::-webkit-scrollbar {
         display: none;
-    }
+      }
       & > div {
         padding: 28% 10% 28% 10%;
-        width:100%;
+        width: 100%;
         background-image: url("../assets/images/img_painting_heng.png");
         background-size: 100% 100%;
         display: inline-block;
@@ -828,7 +828,7 @@ function showBigPainting() {
           width: 100%;
         }
         position: relative;
-       .shuZhou{
+        .shuZhou {
           position: absolute;
           bottom: 0;
           left: 0;
@@ -846,7 +846,7 @@ function showBigPainting() {
         v-bind("windowSizeInCssForRef")
     );
   }
-  .desc-text-up{
+  .desc-text-up {
     height: calc(
       360 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")

src/views/PaintingList.vue

@@ -349,7 +349,7 @@ const isShowPaintingStyleDesc = ref(false)
     // background: red;
     >.menu-item{
       flex: 0 0 auto;
-      // min-width: 25vw;
+      min-width: 25vw;
       overflow: auto;
       &::-webkit-scrollbar {
       display: none;