upp

src/views/PaintingDetail.vue

@@ -1,23 +1,49 @@
 <template>
-  <div class="hotspot-detail-2">
+  <div
+    :id="`${direction ? 'myRowBox' : ''}`"
+    class="hotspot-detail-2"
+  >
     <div
       id="painting-wrap-id"
-      class="painting-wrap"
+      :class="`painting-wrap ${direction ? 'swiper-no-swiping' : ''} ${
+        isUping ? 'paintion-wrap-top' : ''
+      }`"
       :style="{
         clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
-
-        transform:`${direction && isUping ? 'rotate(-90deg) scale(0.6)' : direction ? 'rotate(-90deg)' :''}`,
-        left: `${direction && isUping ?'0%' : direction ? '26%':''}`
+        top: `${direction && isUping ? '0%' : ''}`,
+        transform: `${
+          direction && isUping
+            ? 'translate(-50%, 0) rotate(-90deg)'
+            : direction
+              ? 'translate(-50%, 0) rotate(-90deg)'
+              : ''
+        }`,
+        left: `${direction && isUping ? '50%' : direction ? '26%' : ''}`,
       }"
-      :class="{ 'paintion-wrap-top': isUping }"
     >
+      <!-- 横向才有的 -->
+      <div
+        v-show="direction"
+        class="myRowBoxImg"
+        @click="showBigPainting"
+      >
+        <div>
+          <img
+            :src="props.thumb"
+            alt=""
+          >
+        </div>
+      </div>
+
       <img
+        v-show="!direction"
         class="painting-border"
         src="@/assets/images/painting-border-new.png"
         alt=""
         draggable="false"
       >
       <div
+        v-show="!direction"
         ref="paintingWrap2El"
         class="painting-wrap-2"
       >
@@ -46,18 +72,23 @@
         >
       </Transition>
     </div>
+
+    <!-- 底部阴影 -->
+    <div
+      :class="`desc-text-upShowd ${isUping ? 'desc-text-upShowdShow' : ''}`"
+    />
+
     <div
       ref="descTextEl"
       v-touch:swipe.top="onSwipeTop"
       v-touch:swipe.bottom="onSwipeDown"
       class="desc-text"
-      :class="{'desc-text-up':isUping}"
+      :class="{ 'desc-text-up': isUping }"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
     >
       <div
-        v-show="!isUping"
         class="info-title-content"
         :class="{ 'info-title-content-up': isUping }"
       >
@@ -74,11 +105,13 @@
       </div>
       <div
         v-show="isUping"
-        v-touch:swipe.bottom="() => {
-          isUping = true
-        }"
+        v-touch:swipe.bottom="
+          () => {
+            isUping = true;
+          }
+        "
         class="info-content"
-        :class="{'info-content-up':isUping}"
+        :class="{ 'info-content-up': isUping }"
       >
         <h2 v-if="paintingDesc">
           作品简介：
@@ -110,25 +143,30 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject, onUnmounted, onBeforeUnmount } from "vue"
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  inject,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import TWEEN from '@tweenjs/tween.js'
-import { api as viewerApi } from 'v-viewer'
+import TWEEN from "@tweenjs/tween.js"
+import { api as viewerApi } from "v-viewer"
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const $env = inject('$env')
+const $env = inject("$env")
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(["close"])
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const props = defineProps({
   thumb: {
@@ -161,11 +199,11 @@ const props = defineProps({
   },
   paintingDesc: {
     type: String,
-    default: '',
+    default: "",
   },
   authorDesc: {
     type: String,
-    default: '',
+    default: "",
   },
   canClose: {
     type: Boolean,
@@ -184,7 +222,7 @@ const props = defineProps({
     type: String,
     default: () => {
       return
-    }
+    },
   },
   needOperationTip: {
     type: Boolean,
@@ -192,6 +230,10 @@ const props = defineProps({
   },
 })
 
+onMounted(() => {
+  // console.log('pppppppp', props.direction, props.title)
+})
+
 /**
  * 操作提示
  */
@@ -202,12 +244,11 @@ const isShowOperationTip = ref(true)
 const descTextEl = ref(null)
 const descTextElScrollTop = ref(0)
 onMounted(() => {
-  descTextEl.value.addEventListener('scroll', (e) => {
+  descTextEl.value.addEventListener("scroll", (e) => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
 
   // 判断图片是否是横向
-
 })
 const unwatch = watch(descTextElScrollTop, (v) => {
   isShowOperationTip.value = false
@@ -218,17 +259,18 @@ const isUping = ref(false)
 
 // 上滑
 const onSwipeTop = () => {
-  console.log('上滑')
+  // console.log('上滑')
   // 画作缩小
   isUping.value = props.paintingDesc ? true : false
 }
 
 // 下滑
-const onSwipeDown = () =>{
-  isUping.value = false
+const onSwipeDown = () => {
+  // 看看文字滚动是否到顶部了
+  const topNum = descTextEl.value.scrollTop
+  if (topNum <= 0) isUping.value = false
 }
 
-
 onBeforeUnmount(() => {
   isUping.value = false
 })
@@ -237,7 +279,7 @@ const isAnimating = ref(true)
 
 /** 卷轴展开动画的tweening */
 const AnimationProgress = ref({
-  value: 7
+  value: 7,
 })
 
 const isShowTipTop = ref(false)
@@ -251,9 +293,12 @@ watch(AnimationProgress, (v) => {
   }
 })
 const tween = new TWEEN.Tween(AnimationProgress.value)
-tween.to({
-  value: 100,
-}, 3000)
+tween.to(
+  {
+    value: 100,
+  },
+  3000
+)
 tween.easing(TWEEN.Easing.Cubic.InOut)
 let animationRequestId = null
 const animate = () => {
@@ -298,7 +343,9 @@ const paintingEl = ref(null)
 onMounted(() => {
   if (isOversize.value) {
     setTimeout(() => {
-      const y = (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) / 2
+      const y =
+        (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) /
+        2
       paintingWrap2El.value.scrollTo({
         top: y,
         // behavior: 'smooth',
@@ -312,7 +359,6 @@ function showBigPainting() {
     images: [props.bigPainting],
   })
 }
-
 </script>
 
 <style lang="less" scoped>
@@ -328,18 +374,31 @@ function showBigPainting() {
     height: 0;
   }
 
-  >.painting-wrap {
+  .painting-wrapRow {
+    background-color: red;
+    z-index: 99;
+  }
+
+  > .painting-wrap {
     position: absolute;
     left: 50%;
-    top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(
+      70 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     transform: translate(-50%, 0);
-    width: calc(356 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(602 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(
+      356 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    height: calc(
+      602 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     overflow: hidden;
     transition: top 2s ease, transform 2s ease, left 2s ease;
 
-
-    >img.painting-border {
+    > img.painting-border {
       position: absolute;
       left: 0;
       top: 0;
@@ -347,16 +406,25 @@ function showBigPainting() {
       height: 100%;
     }
 
-    >.painting-wrap-2 {
+    > .painting-wrap-2 {
       position: absolute;
       left: 50%;
-      top: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(
+        110 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       transform: translate(-50%, 0);
-      width: calc(v-bind('paintingWrapWidth') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(v-bind('paintingWrapHeight') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(
+        v-bind("paintingWrapWidth") / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        v-bind("paintingWrapHeight") / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       overflow: auto;
 
-      >img.painting {
+      > img.painting {
         position: absolute;
         left: 50%;
         top: 50%;
@@ -364,7 +432,7 @@ function showBigPainting() {
         width: 100%;
       }
 
-      >img.painting.oversize {
+      > img.painting.oversize {
         position: static;
         left: initial;
         top: initial;
@@ -372,7 +440,7 @@ function showBigPainting() {
       }
     }
 
-    >img.bottom-border-for-animation {
+    > img.bottom-border-for-animation {
       position: absolute;
       left: 0;
       width: 100%;
@@ -381,10 +449,12 @@ function showBigPainting() {
 
   // 上滑动画和状态
 
-  >.paintion-wrap-top {
+  > .paintion-wrap-top {
     animation: paintion-up 2s forwards;
     transform: translate(-50%, 0) scale(0.6);
-    top: calc(-60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
+    top: calc(
+      -60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
+    );
 
     // @keyframes paintion-up {
     //   0% {
@@ -397,57 +467,89 @@ function showBigPainting() {
     //     top: calc(-60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
     //   }
     // }
-
   }
 
-  >.desc-text {
+  > .desc-text {
     position: absolute;
     left: 50%;
     bottom: 2%;
     transform: translateX(-50%);
-    width: calc(306 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(
+      306 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    height: calc(
+      130 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     overflow: auto;
     transition: height 2s ease;
 
     .info-title-content {
       transition: all 2s ease;
-      >h1 {
+      > h1 {
         text-align: center;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        color: #ffffff;
+        margin-bottom: calc(
+          19 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >p.subtitle {
+      > p.subtitle {
         text-align: center;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          16 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         color: rgba(255, 255, 255, 0.8);
-        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: calc(
+          19 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        margin-bottom: calc(
+          6 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >h2 {
+      > h2 {
         display: inline-block;
-        margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-top: calc(
+          30 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         font-family: KaiTi, KaiTi;
-        color: #FFFFFF;
+        color: #ffffff;
         margin-top: 2em;
         margin-bottom: 0.5em;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >.normal-text {
+      > .normal-text {
         font-family: KaiTi, KaiTi;
-        color: #FFFFFF;
+        color: #ffffff;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        line-height: calc(
+          25 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         text-align: justify;
         white-space: pre-line;
       }
@@ -457,7 +559,8 @@ function showBigPainting() {
     .info-title-content-up {
       // animation: title-up 2s forwards;
       opacity: 0;
-      display: none;
+      height: 0;
+      overflow: hidden;
 
       // @keyframes title-up {
       //   0% {
@@ -471,54 +574,81 @@ function showBigPainting() {
       // }
     }
 
-    >.info-content {
-      >h1 {
+    > .info-content {
+      > h1 {
         text-align: center;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        color: #ffffff;
+        margin-bottom: calc(
+          19 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >p.subtitle {
+      > p.subtitle {
         text-align: center;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          16 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         color: rgba(255, 255, 255, 0.8);
-        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: calc(
+          19 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        margin-bottom: calc(
+          6 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >h2 {
+      > h2 {
         display: inline-block;
-        margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-top: calc(
+          30 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         font-family: KaiTi, KaiTi;
-        color: #FFFFFF;
+        color: #ffffff;
         margin-top: 2em;
         margin-bottom: 0.5em;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
       }
 
-      >.normal-text {
+      > .normal-text {
         font-family: KaiTi, KaiTi;
-        color: #FFFFFF;
+        color: #ffffff;
         font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(
+          20 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        line-height: calc(
+          25 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
         text-align: justify;
         white-space: pre-line;
       }
     }
-    >.info-content-up{
+    > .info-content-up {
       animation: info-up 2s forwards;
       @keyframes info-up {
-        0%{
+        0% {
           opacity: 0;
         }
-        100%{
+        100% {
           opacity: 1;
           // transform: translateY(-50%);
         }
@@ -565,8 +695,13 @@ function showBigPainting() {
     //   white-space: pre-line;
     // }
   }
-  >.desc-text-up{
-    height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  > .desc-text-up {
+    height: calc(
+      360 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: 0;
+    padding-bottom: 15px;
     // animation: text-up 2s forwards;
     // @keyframes text-up {
     //   100%{
@@ -575,16 +710,81 @@ function showBigPainting() {
     // }
   }
 
-  >.operation-tip {
+  .desc-text-upShowd {
+    width: 100%;
+    height: calc(
+      140 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    position: fixed;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 2s;
+    background: linear-gradient(
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.4)
+    );
+  }
+  .desc-text-upShowdShow {
+    opacity: 1;
+  }
+
+  > .operation-tip {
     position: absolute;
-    right: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(
+      39 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: calc(
+      49 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
   }
 
-  >.operation-tip {
+  > .operation-tip {
     position: absolute;
-    right: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(
+      49 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: calc(
+      39 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+  }
+}
+#myRowBox {
+  #painting-wrap-id {
+    height: 100vw !important;
+    left: 50% !important;
+    // transform: translate(-50%, 0) rotate(-90deg) scale(0.6) !important;
+    .myRowBoxImg {
+      height: 100%;
+      width: 100%;
+      max-height: 100vh;
+      overflow-x: auto;
+      white-space: nowrap;
+      display: inline-block;
+      & > div {
+        padding: 33% 10% 20% 10%;
+        // width:100%;
+        background-image: url("../assets/images/img_painting_heng.png");
+        background-size: 100% 100%;
+        display: inline-block;
+        & > img {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+    }
+    .painting-wrap-2 {
+      overflow: visible;
+    }
   }
 }
-</style>
+</style>