feat: 推一波修改

public/configExcel.js

@@ -294,6 +294,7 @@ var configExcel = {
       "序号": "2",
       "标题": "潇湘竹石图\n（竹石部分）",
       "标题（展示）": "潇湘竹石图\n（竹石部分）",
+      "方向": '横向',
       "朝代": "宋",
       "作者": "苏轼",
       "馆藏": "中国美术馆藏",
@@ -307,6 +308,7 @@ var configExcel = {
       "序号": "3",
       "标题": "赵氏一门三竹图",
       "标题（展示）": "赵氏一门三竹图",
+      "方向": '横向',
       "朝代": "元",
       "作者": "赵孟頫",
       "馆藏": "故宫博物院藏",
@@ -321,6 +323,7 @@ var configExcel = {
       "标题": "枯木竹石图",
       "标题（展示）": "枯木竹石图",
       "朝代": "元",
+      "方向": '横向',
       "作者": "赵孟頫",
       "馆藏": "台北故宫博物院藏",
       "装裱\/材质\/笔类型": "卷 纸本 墨笔",
@@ -372,6 +375,7 @@ var configExcel = {
       "序号": "8",
       "标题": "竹枝图",
       "标题（展示）": "竹枝图",
+      "方向": '横向',
       "朝代": "元",
       "作者": "倪瓒",
       "馆藏": "故宫博物院藏",
@@ -385,6 +389,7 @@ var configExcel = {
       "序号": "9",
       "标题": "万竹秋深图\n（局部）",
       "标题（展示）": "万竹秋深图\n（局部）",
+      "方向": '横向',
       "朝代": "明",
       "作者": "王绂",
       "馆藏": "弗利尔美术馆藏",
@@ -414,6 +419,7 @@ var configExcel = {
       "标题": "墨竹图（二）",
       "标题（展示）": "墨竹图",
       "朝代": "明",
+      "方向": '横向',
       // "作者": "唐寅（音yín)",
       "音": ['唐', 'yín', '寅'],
       "作者": "唐寅",
@@ -441,6 +447,7 @@ var configExcel = {
       "序号": "13",
       "标题": "十二墨花图\n（墨竹部分）",
       "标题（展示）": "十二墨花图\n（墨竹部分）",
+      "方向": '横向',
       "朝代": "明",
       "作者": "徐渭",
       "馆藏": "佛利尔美术馆藏",
@@ -466,6 +473,7 @@ var configExcel = {
       "序号": "15",
       "标题": "花果图\n（墨竹部分）",
       "标题（展示）": "花果图\n（墨竹部分）",
+      "方向": '横向',
       "朝代": "清",
       "作者": "朱耷",
       "馆藏": "故宫博物院藏",

src/App.vue

@@ -37,6 +37,27 @@ const store = useStore()
 //   })
 // }
 
+function isNotMobile() {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera
+  const mobileKeywords = [
+    'Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone',
+    'Opera Mini', 'IEMobile', 'Mobile', 'Android'
+  ]
+
+  // Check if any of the mobile keywords are present in the user agent string.
+  return !mobileKeywords.some(keyword => userAgent.toLowerCase().includes(keyword.toLowerCase()))
+}
+
+onMounted(() => {
+  const appDom = document.getElementById('#app')
+  if (isNotMobile) {
+    // appDom.style.maxWidth = '390px'
+    // appDom.style.maxHeight = '844px'
+    // appDom.clientHeight = '844px'
+    // appDom.clientWidth = '390px'
+  }
+})
+
 </script>
 
 <style lang="less">
@@ -44,9 +65,6 @@ html, body {
   // overscroll-behavior: none;
   overflow: hidden;
   height: 100%;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
 }
 
 * {
@@ -66,6 +84,11 @@ input, textarea {
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
+  // background: green;
+  @media screen and (max-width: 400px) {
+    max-width: 390px;
+    max-height: 844px;
+  }
 }
 
 // 字体
@@ -77,9 +100,6 @@ input, textarea {
   font-family: 'KaiTi';
   src: url('@/assets/style/SIMKAI.TTF');
 }
-// i {
-//   font-style: italic;
-// }
 
 // 滚动条，只设置某一项可能导致不生效。
 // ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }

src/useFunctions/useSmoothSwipe.js

@@ -117,7 +117,7 @@ export default function useSmoothSwipe({
   }
 
   const onSwipeLeft = () => {
-    console.log('在左滑')
+    // console.log('在左滑')
     if (isTweening) {
       return
     }
@@ -143,7 +143,7 @@ export default function useSmoothSwipe({
   }
 
   const onswipeRight = () => {
-    console.log('在左滑')
+    // console.log('在左滑')
     const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
       return item - translateLength.value < -1
     })

src/views/MoreContent.vue

@@ -1,9 +1,9 @@
 <template>
-  <div
-    class="more-content"
-  >
+  <div class="more-content">
     <div
       ref="scrollTarget"
+      v-touch:swipe.left="onSwipeLeft"
+      v-touch:swipe.right="onswipeRight"
       class="scroll-target"
     >
       <img
@@ -196,9 +196,7 @@
             name: 'BambooHot',
           })"
         />
-        <div
-          class="shuang-gou-she-se-group"
-        >
+        <div class="shuang-gou-she-se-group">
           <button
             class="watch-detail animation-show-long-hide"
             @click="onClickShuangGouEntry"
@@ -221,9 +219,7 @@
           alt=""
           draggable="false"
         >
-        <div
-          class="mo-zhu-group"
-        >
+        <div class="mo-zhu-group">
           <div class="button-group">
             <button
               class="poem animation-show-long-hide"
@@ -267,7 +263,22 @@
           draggable="false"
         >
         <div class="wei-ye-group">
-          图片+文字
+          <img
+            src="@/assets/images/wu-jing-cang.png"
+            alt=""
+          >
+          <div
+            class="game-box"
+            @click="() => { isShowGamePage = true }"
+          >
+            画作创作
+          </div>
+          <div
+            class="online-box"
+            @click="() => { isShowScenePage = true }"
+          >
+            线上展厅
+          </div>
         </div>
         <img
           class="bamboo-1_05"
@@ -333,6 +344,34 @@
         x5-video-player-type="h5"
       />
     </Transition>
+    <!-- 游戏页面 -->
+    <div
+      v-if="isShowGamePage"
+      class="game-box"
+    >
+      <iframe
+        class="game-box"
+        :src="`./game/index.html`"
+      />
+      <!-- edit弹框 -->
+      <div class="edit-box" />
+    </div>
+
+
+    <!-- 线上展厅 -->
+    <div
+      v-if="isShowScenePage"
+      class="scene-box"
+    >
+      <BtnBack
+        class="scene-back"
+        @click="isShowScenePage = false"
+      />
+      <iframe
+        src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
+        frameborder="0"
+      />
+    </div>
   </div>
 </template>
 
@@ -348,12 +387,23 @@ import OperationTip from "@/components/OperationTip.vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
 import PaginationComp from "@/components/PaginationComp.vue"
 
+
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
 
+const isShowGamePage = ref(false)
+
+const isShowScenePage = ref(false)
+
+onMounted(() => {
+  window.closeGame = () => {
+    isShowGamePage.value = false
+  }
+})
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -367,7 +417,7 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
-const { haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
+const { onSwipeLeft, onswipeRight, haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
@@ -490,7 +540,7 @@ watch(goingToAnchorIdx, (v) => {
 </script>
 
 <style lang="less" scoped>
-.button-common-style{
+.button-common-style {
   font-family: KaiTi, KaiTi;
   font-weight: 400;
   font-size: calc(16px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
@@ -499,7 +549,8 @@ watch(goingToAnchorIdx, (v) => {
   white-space: pre;
   color: #B8AE7A;
 }
-.group-title-common-style{
+
+.group-title-common-style {
   font-family: KingHwa_OldSong, KingHwa_OldSong;
   font-weight: 400;
   font-size: calc(48px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
@@ -509,93 +560,108 @@ watch(goingToAnchorIdx, (v) => {
   white-space: pre;
 }
 
-.more-content{
+.more-content {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   user-select: none;
-  >.scroll-target{
+
+  >.scroll-target {
     height: 100%;
     width: 100%;
     display: flex;
     gap: 100px;
     overflow: hidden;
-    >img.bg{
+
+    >img.bg {
       position: absolute;
       height: 100%;
     }
-    >.layer-4{
+
+    >.layer-4 {
       position: absolute;
       height: 100%;
-      >.bamboo-4_01{
+
+      >.bamboo-4_01 {
         position: absolute;
         left: calc(0 * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         bottom: 0;
         height: calc(300px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-4_02{
+
+      >.bamboo-4_02 {
         position: absolute;
         bottom: 0;
         left: calc(120px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-4_03{
+
+      >.bamboo-4_03 {
         position: absolute;
         bottom: 0;
         left: calc(880px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-4_04{
+
+      >.bamboo-4_04 {
         position: absolute;
         bottom: 0;
         left: calc(870px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_05{
+
+      >.bamboo-4_05 {
         position: absolute;
         bottom: 0;
         left: calc(450px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_06{
+
+      >.bamboo-4_06 {
         position: absolute;
         bottom: 0;
         left: calc(520px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_07{
+
+      >.bamboo-4_07 {
         position: absolute;
         bottom: 0;
         left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_08{
+
+      >.bamboo-4_08 {
         position: absolute;
         bottom: 0;
         height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: calc(1553px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-4_09{
+
+      >.bamboo-4_09 {
         position: absolute;
         bottom: 0;
         left: calc(1345px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_10{
+
+      >.bamboo-4_10 {
         position: absolute;
         bottom: 0;
         left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_11{
+
+      >.bamboo-4_11 {
         position: absolute;
         bottom: 0;
         left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
-      >.bamboo-4_12{
+
+      >.bamboo-4_12 {
         position: absolute;
         bottom: 0;
         left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
@@ -603,99 +669,116 @@ watch(goingToAnchorIdx, (v) => {
       }
 
     }
-    >.layer-3{
+
+    >.layer-3 {
       position: absolute;
       height: 100%;
-      >.bamboo-3_01{
+
+      >.bamboo-3_01 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-3_02{
+
+      >.bamboo-3_02 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-3_03{
+
+      >.bamboo-3_03 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(1290px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-3_04{
+
+      >.bamboo-3_04 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(867px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
-    >.layer-2{
+
+    >.layer-2 {
       position: absolute;
       height: 100%;
-      >.bamboo-2_01{
+
+      >.bamboo-2_01 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(0px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-2_03{
+
+      >.bamboo-2_03 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(420px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-2_02{
+
+      >.bamboo-2_02 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
+
       // >.bamboo-2_03{
       //   position: absolute;
       //   top: 0;
       //   height: 100%;
       //   left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       // }
-      >.bamboo-2_04{
+      >.bamboo-2_04 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(1281px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-2_04-1{
+
+      >.bamboo-2_04-1 {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(1820px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(1863px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-2_05{
+
+      >.bamboo-2_05 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(997px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
-    >.layer-1{
+
+    >.layer-1 {
       position: absolute;
       height: 100%;
-      >.bamboo-1_01{
+
+      >.bamboo-1_01 {
         position: absolute;
         top: 0;
         height: 100%;
         left: 0;
       }
-      >.hotspot{
+
+      >.hotspot {
         position: absolute;
         top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: calc(71px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.shuang-gou-she-se-group{
+
+      >.shuang-gou-she-se-group {
         position: absolute;
         top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-        >button.watch-detail{
+
+        >button.watch-detail {
           position: absolute;
           top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
           left: 0;
@@ -706,12 +789,15 @@ watch(goingToAnchorIdx, (v) => {
           padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           .button-common-style();
         }
-        >div.group-title{
+
+        >div.group-title {
           position: absolute;
           top: 0;
-          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          ;
           .group-title-common-style();
-          >img.deco{
+
+          >img.deco {
             position: absolute;
             bottom: 0.9em;
             right: -0.05em;
@@ -720,24 +806,28 @@ watch(goingToAnchorIdx, (v) => {
           }
         }
       }
-      >.bamboo-1_02{
+
+      >.bamboo-1_02 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.mo-zhu-group{
+
+      >.mo-zhu-group {
         position: absolute;
         top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: calc(936px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-        >.button-group{
+
+        >.button-group {
           position: absolute;
           top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
           left: 0;
           display: flex;
           flex-direction: column;
           gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          >button{
+
+          >button {
             .button-common-style();
             background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
             background-size: contain;
@@ -746,12 +836,15 @@ watch(goingToAnchorIdx, (v) => {
             padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
         }
-        >div.group-title{
+
+        >div.group-title {
           position: absolute;
           top: 0;
-          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          ;
           .group-title-common-style();
-          >img.deco{
+
+          >img.deco {
             position: absolute;
             bottom: 0.9em;
             right: 0.1em;
@@ -760,44 +853,134 @@ watch(goingToAnchorIdx, (v) => {
           }
         }
       }
-      >.bamboo-1_03{
+
+      >.wei-ye-group {
+        position: absolute;
+        top: calc(170px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(1776px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        font-family: 'KingHwa_OldSong';
+        color: white;
+        z-index: 2;
+        width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        // background: green;
+        >.game-box {
+          width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          background: url(@/assets/images/game-bg.png);
+          background-size: 100% 100%;
+          padding: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          white-space: nowrap;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-left: calc(-60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        }
+
+        >.online-box {
+          width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          background: url(@/assets/images/online-scene-bg.png);
+          background-size: 100% 100%;
+          padding: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          white-space: nowrap;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        }
+      }
+
+      >.bamboo-1_03 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(960px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-1_04{
+
+      >.bamboo-1_04 {
         position: absolute;
         top: 0;
         height: 100%;
         left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >.bamboo-1_05{
+
+      >.bamboo-1_05 {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(1860px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(1891px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
   }
+
   >.pagination {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >.operation-tip{
+
+  >.operation-tip {
     position: absolute;
     right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >.fade-to-other-page{
+
+  >.fade-to-other-page {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    object-position: top;
+  }
+
+  >.game-box {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    >iframe {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  >.scene-box {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+
+    >.scene-back {
+      position: absolute;
+      left: 20px;
+      top: 25px;
+      transform: scale(1.2);
+      z-index: 2;
+    }
+
+    >iframe {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
   }
 }
 </style>

src/views/PaintingDetail.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="hotspot-detail-2">
     <div
+      id="painting-wrap-id"
       class="painting-wrap"
       :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%':''}`
       }"
+      :class="{ 'paintion-wrap-top': isUping }"
     >
       <img
         class="painting-border"
@@ -43,12 +48,19 @@
     </div>
     <div
       ref="descTextEl"
+      v-touch:swipe.top="onSwipeTop"
+      v-touch:swipe.bottom="onSwipeDown"
       class="desc-text"
+      :class="{'desc-text-up':isUping}"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
     >
-      <div class="info-title-content">
+      <div
+        v-show="!isUping"
+        class="info-title-content"
+        :class="{ 'info-title-content-up': isUping }"
+      >
         <h1>{{ props.title }}</h1>
         <p class="subtitle">
           {{ `${props.author} （${props.age}）` }}
@@ -60,18 +72,27 @@
           {{ props.location }}
         </p>
       </div>
-      <!-- <h2 v-if="paintingDesc">
-        作品简介：
-      </h2>
-      <div class="normal-text">
-        {{ paintingDesc }}
+      <div
+        v-show="isUping"
+        v-touch:swipe.bottom="() => {
+          isUping = true
+        }"
+        class="info-content"
+        :class="{'info-content-up':isUping}"
+      >
+        <h2 v-if="paintingDesc">
+          作品简介：
+        </h2>
+        <div class="normal-text">
+          {{ paintingDesc }}
+        </div>
+        <h2 v-if="authorDesc">
+          作者简介：
+        </h2>
+        <div class="normal-text">
+          {{ authorDesc }}
+        </div>
       </div>
-      <h2 v-if="authorDesc">
-        作者简介：
-      </h2>
-      <div class="normal-text">
-        {{ authorDesc }}
-      </div> -->
     </div>
 
     <OperationTip
@@ -89,7 +110,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject, onUnmounted } 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"
@@ -159,6 +180,12 @@ const props = defineProps({
       }
     },
   },
+  direction: {
+    type: String,
+    default: () => {
+      return
+    }
+  },
   needOperationTip: {
     type: Boolean,
     default: false,
@@ -179,18 +206,50 @@ onMounted(() => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
 
+  // 判断图片是否是横向
+
 })
 const unwatch = watch(descTextElScrollTop, (v) => {
   isShowOperationTip.value = false
   unwatch()
 })
 
+const isUping = ref(false)
+
+// 上滑
+const onSwipeTop = () => {
+  console.log('上滑')
+  // 画作缩小
+  isUping.value = props.paintingDesc ? true : false
+}
+
+// 下滑
+const onSwipeDown = () =>{
+  isUping.value = false
+}
+
+
+onBeforeUnmount(() => {
+  isUping.value = false
+})
+
 const isAnimating = ref(true)
 
 /** 卷轴展开动画的tweening */
 const AnimationProgress = ref({
   value: 7
 })
+
+const isShowTipTop = ref(false)
+
+watch(AnimationProgress, (v) => {
+  if (v == 99) {
+    isShowTipTop.value = true
+    setTimeout(() => {
+      isShowTipTop.value = false
+    }, 1000)
+  }
+})
 const tween = new TWEEN.Tween(AnimationProgress.value)
 tween.to({
   value: 100,
@@ -277,6 +336,8 @@ function showBigPainting() {
     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 {
       position: absolute;
@@ -318,6 +379,27 @@ function showBigPainting() {
     }
   }
 
+  // 上滑动画和状态
+
+  >.paintion-wrap-top {
+    animation: paintion-up 2s forwards;
+    transform: translate(-50%, 0) scale(0.6);
+    top: calc(-60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
+
+    // @keyframes paintion-up {
+    //   0% {
+    //     transform: translate(-50%, 0);
+    //     top: calc(70 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
+    //   }
+
+    //   100% {
+    //     transform: translate(-50%, 0) scale(0.6);
+    //     top: calc(-60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
+    //   }
+    // }
+
+  }
+
   >.desc-text {
     position: absolute;
     left: 50%;
@@ -326,8 +408,10 @@ function showBigPainting() {
     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 {
         text-align: center;
         font-family: KaiTi, KaiTi;
@@ -369,45 +453,126 @@ function showBigPainting() {
       }
     }
 
-    >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'));
+    // 向上滑动
+    .info-title-content-up {
+      // animation: title-up 2s forwards;
+      opacity: 0;
+      display: none;
+
+      // @keyframes title-up {
+      //   0% {
+      //     opacity: 1;
+      //   }
+
+      //   100% {
+      //     opacity: 0;
+      //     display: none;
+      //   }
+      // }
     }
 
-    >p.subtitle {
-      text-align: center;
-      font-family: KaiTi, KaiTi;
-      font-weight: 400;
-      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'));
-    }
+    >.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'));
+      }
 
-    >h2 {
-      display: inline-block;
-      margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: KaiTi, KaiTi;
-      color: #FFFFFF;
-      margin-top: 2em;
-      margin-bottom: 0.5em;
-      font-weight: 400;
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
+      >p.subtitle {
+        text-align: center;
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        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'));
+      }
+
+      >h2 {
+        display: inline-block;
+        margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: KaiTi, KaiTi;
+        color: #FFFFFF;
+        margin-top: 2em;
+        margin-bottom: 0.5em;
+        font-weight: 400;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
 
-    >.normal-text {
-      font-family: KaiTi, KaiTi;
-      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'));
-      text-align: justify;
-      white-space: pre-line;
+      >.normal-text {
+        font-family: KaiTi, KaiTi;
+        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'));
+        text-align: justify;
+        white-space: pre-line;
+      }
     }
+    >.info-content-up{
+      animation: info-up 2s forwards;
+      @keyframes info-up {
+        0%{
+          opacity: 0;
+        }
+        100%{
+          opacity: 1;
+          // transform: translateY(-50%);
+        }
+      }
+    }
+
+    // >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'));
+    // }
+
+    // >p.subtitle {
+    //   text-align: center;
+    //   font-family: KaiTi, KaiTi;
+    //   font-weight: 400;
+    //   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'));
+    // }
+
+    // >h2 {
+    //   display: inline-block;
+    //   margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    //   font-family: KaiTi, KaiTi;
+    //   color: #FFFFFF;
+    //   margin-top: 2em;
+    //   margin-bottom: 0.5em;
+    //   font-weight: 400;
+    //   font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    // }
+
+    // >.normal-text {
+    //   font-family: KaiTi, KaiTi;
+    //   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'));
+    //   text-align: justify;
+    //   white-space: pre-line;
+    // }
+  }
+  >.desc-text-up{
+    height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    // animation: text-up 2s forwards;
+    // @keyframes text-up {
+    //   100%{
+    //     height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    //   }
+    // }
   }
 
   >.operation-tip {

src/views/PaintingDetailList.vue

@@ -25,6 +25,7 @@
           :author-desc="item['作者简介']"
           :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"
           :can-close="false"
+          :direction="item['方向']"
           :size="getPaintingSize(item['尺寸'])"
         >
           {{ item }}
@@ -108,6 +109,7 @@ const isShowOperationTip = ref(true)
     .swiper-slide{
       >.painting-item{
         position: relative !important;
+        overflow: hidden;
       }
     }
   }

src/views/ShuangGouSheSeDetail.vue

@@ -116,8 +116,8 @@ const text = [
     writing-mode: vertical-rl;
     font-family: 'KingHwa_OldSong';
     position: absolute;
-    right: 10%;
-    top: 30%;
+    right: 13%;
+    top: 26%;
     letter-spacing: 10px;
   }
   .shuanggou-yezi{
@@ -137,6 +137,7 @@ const text = [
 
     >img{
       width: 100%;
+      margin-top: -3%;
     }
     >.hotspot-1{
       position: absolute;