1 gadu atpakaļ · 0b64eed86a
--- a/README.md
+++ b/README.md
@@ -4,9 +4,7 @@
 
				 访问url：https://culture.4dage.com/NanjingMuseumWuJinZang/index.html#/
			
 
				 
			
 
				 ## 任一存的todos
			
 
				-绘画详情页开发 
			
 
				-
			
 
				-绘画详情页 长福画作居中显示
			
 
				+内容扩展页 滚动行为原理开发
			
 
				 
			
 
				 内容扩展页开发
			
 
				 
			
--- a/public/configMultiMedia/paintings-small/万竹秋深图（局部）.jpg
+++ b/public/configMultiMedia/paintings-small/万竹秋深图（局部）.jpg
--- a/public/configMultiMedia/paintings-small/修篁树石图.jpg
+++ b/public/configMultiMedia/paintings-small/修篁树石图.jpg
--- a/public/configMultiMedia/paintings-small/十二墨花图（墨竹部分）.jpg
+++ b/public/configMultiMedia/paintings-small/十二墨花图（墨竹部分）.jpg
--- a/public/configMultiMedia/paintings-small/古木竹石.jpg
+++ b/public/configMultiMedia/paintings-small/古木竹石.jpg
--- a/public/configMultiMedia/paintings-small/墨竹.jpg
+++ b/public/configMultiMedia/paintings-small/墨竹.jpg
--- a/public/configMultiMedia/paintings-small/墨竹图屏.jpg
+++ b/public/configMultiMedia/paintings-small/墨竹图屏.jpg
--- a/public/configMultiMedia/paintings-small/墨竹图（一）.jpg
+++ b/public/configMultiMedia/paintings-small/墨竹图（一）.jpg
--- a/public/configMultiMedia/paintings-small/墨竹图（二）.jpg
+++ b/public/configMultiMedia/paintings-small/墨竹图（二）.jpg
--- a/public/configMultiMedia/paintings-small/托根乱岩图.jpg
+++ b/public/configMultiMedia/paintings-small/托根乱岩图.jpg
--- a/public/configMultiMedia/paintings-small/晚香高节图.jpg
+++ b/public/configMultiMedia/paintings-small/晚香高节图.jpg
--- a/public/configMultiMedia/paintings-small/朱竹图.jpg
+++ b/public/configMultiMedia/paintings-small/朱竹图.jpg
--- a/public/configMultiMedia/paintings-small/枯木竹石图.jpg
+++ b/public/configMultiMedia/paintings-small/枯木竹石图.jpg
--- a/public/configMultiMedia/paintings-small/桃竹双凫图.jpg
+++ b/public/configMultiMedia/paintings-small/桃竹双凫图.jpg
--- a/public/configMultiMedia/paintings-small/湘潭秋意图.jpg
+++ b/public/configMultiMedia/paintings-small/湘潭秋意图.jpg
--- a/public/configMultiMedia/paintings-small/潇湘竹石图（竹石部分）.jpg
+++ b/public/configMultiMedia/paintings-small/潇湘竹石图（竹石部分）.jpg
--- a/public/configMultiMedia/paintings-small/灵谷探梅图.jpg
+++ b/public/configMultiMedia/paintings-small/灵谷探梅图.jpg
--- a/public/configMultiMedia/paintings-small/竹枝图.jpg
+++ b/public/configMultiMedia/paintings-small/竹枝图.jpg
--- a/public/configMultiMedia/paintings-small/竹石菊花图.jpg
+++ b/public/configMultiMedia/paintings-small/竹石菊花图.jpg
--- a/public/configMultiMedia/paintings-small/竹禽图.jpg
+++ b/public/configMultiMedia/paintings-small/竹禽图.jpg
--- a/public/configMultiMedia/paintings-small/筼筜清影图.jpg
+++ b/public/configMultiMedia/paintings-small/筼筜清影图.jpg
--- a/public/configMultiMedia/paintings-small/花果图（墨竹部分）.jpg
+++ b/public/configMultiMedia/paintings-small/花果图（墨竹部分）.jpg
--- a/public/configMultiMedia/paintings-small/赵氏一门三竹图.jpg
+++ b/public/configMultiMedia/paintings-small/赵氏一门三竹图.jpg
--- a/public/configMultiMedia/paintings-thumb/万竹秋深图（局部）.jpg
+++ b/public/configMultiMedia/paintings-thumb/万竹秋深图（局部）.jpg
--- a/public/configMultiMedia/paintings-thumb/修篁树石图.jpg
+++ b/public/configMultiMedia/paintings-thumb/修篁树石图.jpg
--- a/public/configMultiMedia/paintings-thumb/十二墨花图（墨竹部分）.jpg
+++ b/public/configMultiMedia/paintings-thumb/十二墨花图（墨竹部分）.jpg
--- a/public/configMultiMedia/paintings-thumb/古木竹石.jpg
+++ b/public/configMultiMedia/paintings-thumb/古木竹石.jpg
--- a/public/configMultiMedia/paintings-thumb/墨竹.jpg
+++ b/public/configMultiMedia/paintings-thumb/墨竹.jpg
--- a/public/configMultiMedia/paintings-thumb/墨竹图屏.jpg
+++ b/public/configMultiMedia/paintings-thumb/墨竹图屏.jpg
--- a/public/configMultiMedia/paintings-thumb/墨竹图（一）.jpg
+++ b/public/configMultiMedia/paintings-thumb/墨竹图（一）.jpg
--- a/public/configMultiMedia/paintings-thumb/墨竹图（二）.jpg
+++ b/public/configMultiMedia/paintings-thumb/墨竹图（二）.jpg
--- a/public/configMultiMedia/paintings-thumb/托根乱岩图.jpg
+++ b/public/configMultiMedia/paintings-thumb/托根乱岩图.jpg
--- a/public/configMultiMedia/paintings-thumb/晚香高节图.jpg
+++ b/public/configMultiMedia/paintings-thumb/晚香高节图.jpg
--- a/public/configMultiMedia/paintings-thumb/朱竹图.jpg
+++ b/public/configMultiMedia/paintings-thumb/朱竹图.jpg
--- a/public/configMultiMedia/paintings-thumb/枯木竹石图.jpg
+++ b/public/configMultiMedia/paintings-thumb/枯木竹石图.jpg
--- a/public/configMultiMedia/paintings-thumb/桃竹双凫图.jpg
+++ b/public/configMultiMedia/paintings-thumb/桃竹双凫图.jpg
--- a/public/configMultiMedia/paintings-thumb/湘潭秋意图.jpg
+++ b/public/configMultiMedia/paintings-thumb/湘潭秋意图.jpg
--- a/public/configMultiMedia/paintings-thumb/潇湘竹石图（竹石部分）.jpg
+++ b/public/configMultiMedia/paintings-thumb/潇湘竹石图（竹石部分）.jpg
--- a/public/configMultiMedia/paintings-thumb/灵谷探梅图.jpg
+++ b/public/configMultiMedia/paintings-thumb/灵谷探梅图.jpg
--- a/public/configMultiMedia/paintings-thumb/竹枝图.jpg
+++ b/public/configMultiMedia/paintings-thumb/竹枝图.jpg
--- a/public/configMultiMedia/paintings-thumb/竹石菊花图.jpg
+++ b/public/configMultiMedia/paintings-thumb/竹石菊花图.jpg
--- a/public/configMultiMedia/paintings-thumb/竹禽图.jpg
+++ b/public/configMultiMedia/paintings-thumb/竹禽图.jpg
--- a/public/configMultiMedia/paintings-thumb/筼筜清影图.jpg
+++ b/public/configMultiMedia/paintings-thumb/筼筜清影图.jpg
--- a/public/configMultiMedia/paintings-thumb/花果图（墨竹部分）.jpg
+++ b/public/configMultiMedia/paintings-thumb/花果图（墨竹部分）.jpg
--- a/public/configMultiMedia/paintings-thumb/赵氏一门三竹图.jpg
+++ b/public/configMultiMedia/paintings-thumb/赵氏一门三竹图.jpg
--- a/public/configText.js
+++ b/public/configText.js
@@ -10,7 +10,7 @@ var configText = {
 
				     `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,

			
 
				   ],

			
 
				   homepagePaintingDetailDescStem: '坡石一隅的三竿修竹，两竿近，一竿远，近低远高，近开远合，两竿向右，一竿向左，一聚一分，构图稳定，法度森严。',

			
 
				-  homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

			
 
				+  homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

			
 
				   homepagePaintingDetailDescStone: '卧石、枯树和灌木在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。',

			
 
				   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',

			
 
				   craft: [

			
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,8 @@
 
				     <meta charset="utf-8">
			
 
				     <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
			
 
				-    <link rel="icon" href="<%= BASE_URL %>logo.png">
			
 
				-    <title>我是标题</title>
			
 
				+    <link rel="icon" href="<%= BASE_URL %>logo.ico">
			
 
				+    <title>无尽藏</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <script src="./configText.js"></script>
			
--- a/public/logo.ico
+++ b/public/logo.ico
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/assets/images/painting-thumb-border.png
+++ b/src/assets/images/painting-thumb-border.png
--- a/src/utils.js
+++ b/src/utils.js
@@ -74,5 +74,16 @@ export default {
 
				       ret += charSet.charAt(Math.floor(Math.random() * charSet.length))

			
 
				     }

			
 
				     return ret

			
 
				-  }

			
 
				-}
			
 
				+  },

			
 
				+  getPaintingSize(raw) {

			
 
				+    const temp = raw.split('\n')

			
 
				+    let height = temp[0]

			
 
				+    let width = temp[1]

			
 
				+    height = Number(height.substring(1, height.length - 2))

			
 
				+    width = Number(width.substring(1, width.length - 2))

			
 
				+    return {

			
 
				+      width,

			
 
				+      height,

			
 
				+    }

			
 
				+  },

			
 
				+}

			
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -49,7 +49,7 @@
 
				           alt=""

			
 
				           draggable="false"

			
 
				         >

			
 
				-        <span>100cm</span>

			
 
				+        <span>100.6cm</span>

			
 
				       </div>

			
 
				       <div

			
 
				         class="size-sign-v"

			
@@ -63,7 +63,7 @@
 
				           alt=""

			
 
				           draggable="false"

			
 
				         >

			
 
				-        <span>152cm</span>

			
 
				+        <span>151.7cm</span>

			
 
				       </div>

			
 
				       <img

			
 
				         class="painting-border"

			
@@ -160,6 +160,7 @@
 
				     <div

			
 
				       class="fixed-desc detail-desc-stem"

			
 
				       :style="{

			
 
				+        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,

			
 
				         opacity: stemOpacity,

			
 
				       }"

			
 
				     >

			
@@ -168,6 +169,7 @@
 
				     <div

			
 
				       class="fixed-desc detail-desc-leaf"

			
 
				       :style="{

			
 
				+        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,

			
 
				         opacity: leafOpacity,

			
 
				       }"

			
 
				     >

			
@@ -176,6 +178,7 @@
 
				     <div

			
 
				       class="fixed-desc detail-desc-stone"

			
 
				       :style="{

			
 
				+        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,

			
 
				         opacity: stoneOpacity,

			
 
				       }"

			
 
				     >

			
@@ -504,7 +507,7 @@ const isShowHotspotDetail3 = ref(false)
 
				         transform: translate(-50%, -50%);

			
 
				         font-family: KaiTi, KaiTi;

			
 
				         font-weight: 400;

			
 
				-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				+        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         color: #FFFFFF;

			
 
				         line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;

			
@@ -526,7 +529,7 @@ const isShowHotspotDetail3 = ref(false)
 
				         transform: translate(-50%, -50%);

			
 
				         font-family: KaiTi, KaiTi;

			
 
				         font-weight: 400;

			
 
				-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				+        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         color: #FFFFFF;

			
 
				         line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;

			
@@ -594,19 +597,16 @@ const isShowHotspotDetail3 = ref(false)
 
				       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: justified;

			
 
				+      text-align: justify;

			
 
				       margin-bottom: 0.5em;

			
 
				     }

			
 
				   }

			
 
				   >.fixed-desc{

			
 
				     position: absolute;

			
 
				     left: 50%;

			
 
				-    bottom: 2%;

			
 
				     transform: translateX(-50%);

			
 
				-    width: 100%;

			
 
				+    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				     height: 20%;

			
 
				-    padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				-    padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				     display: flex;

			
 
				     justify-content: center;

			
 
				     align-items: center;

			
@@ -615,7 +615,7 @@ const isShowHotspotDetail3 = ref(false)
 
				     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: justified;

			
 
				+    text-align: justify;

			
 
				   }

			
 
				   >.operation-tip{

			
 
				     position: absolute;

			
--- a/src/views/HotspotDetail1.vue
+++ b/src/views/HotspotDetail1.vue
@@ -130,7 +130,7 @@ const craftInfo = configText.craft
 
				         font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         color: rgba(255, 255, 255, 0.8);

			
 
				         line-height: 1.3;

			
 
				-        text-align: justified;

			
 
				+        text-align: justify;

			
 
				       }

			
 
				     }

			
 
				     >.image{

			
--- a/src/views/HotspotDetail3.vue
+++ b/src/views/HotspotDetail3.vue
@@ -130,7 +130,7 @@ const craftInfo = configText.craft
 
				         font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				         color: rgba(255, 255, 255, 0.8);

			
 
				         line-height: 1.3;

			
 
				-        text-align: justified;

			
 
				+        text-align: justify;

			
 
				       }

			
 
				     }

			
 
				     >.image{

			
--- a/src/views/PaintingDetail.vue
+++ b/src/views/PaintingDetail.vue
@@ -12,9 +12,16 @@
 
				         alt=""

			
 
				         draggable="false"

			
 
				       >

			
 
				-      <div class="painting-wrap-2">

			
 
				+      <div

			
 
				+        ref="paintingWrap2El"

			
 
				+        class="painting-wrap-2"

			
 
				+      >

			
 
				         <img

			
 
				+          ref="paintingEl"

			
 
				           class="painting"

			
 
				+          :class="{

			
 
				+            oversize: isOversize,

			
 
				+          }"

			
 
				           :src="props.thumb"

			
 
				           alt=""

			
 
				           draggable="false"

			
@@ -129,6 +136,15 @@ const props = defineProps({
 
				   canClose: {

			
 
				     type: Boolean,

			
 
				     default: true,

			
 
				+  },

			
 
				+  size: {

			
 
				+    type: Object,

			
 
				+    default: () => {

			
 
				+      return {

			
 
				+        width: 1,

			
 
				+        height: 1,

			
 
				+      }

			
 
				+    },

			
 
				   }

			
 
				 })

			
 
				 

			
@@ -164,6 +180,37 @@ onUnmounted(() => {
 
				   cancelAnimationFrame(animationRequestId)

			
 
				 })

			
 
				 

			
 
				+/**

			
 
				+ * 尺寸相关

			
 
				+ */

			
 
				+const paintingWrapWidth = ref(329)

			
 
				+const paintingWrapHeight = ref(561)

			
 
				+let wrapSizeRatio = paintingWrapWidth.value / paintingWrapHeight.value

			
 
				+if (wrapSizeRatio < 1) {

			
 
				+  wrapSizeRatio = 1 / wrapSizeRatio

			
 
				+}

			
 
				+

			
 
				+let sizeRatio = props.size.width / props.size.height

			
 
				+if (sizeRatio < 1) {

			
 
				+  sizeRatio = 1 / sizeRatio

			
 
				+}

			
 
				+

			
 
				+const isOversize = ref(sizeRatio > wrapSizeRatio)

			
 
				+

			
 
				+const paintingWrap2El = ref(null)

			
 
				+const paintingEl = ref(null)

			
 
				+onMounted(() => {

			
 
				+  if (isOversize.value) {

			
 
				+    setTimeout(() => {

			
 
				+      const y = (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) / 2

			
 
				+      paintingWrap2El.value.scrollTo({

			
 
				+        top: y,

			
 
				+        // behavior: 'smooth',

			
 
				+      })

			
 
				+    }, 0)

			
 
				+  }

			
 
				+})

			
 
				+

			
 
				 function showBigPainting() {

			
 
				   viewerApi({

			
 
				     images: [props.bigPainting],

			
@@ -200,8 +247,8 @@ function showBigPainting() {
 
				       left: 50%;

			
 
				       top: 50%;

			
 
				       transform: translate(-50%, -50%);

			
 
				-      width: calc(329 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				-      height: calc(561 / 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{

			
 
				         position: absolute;

			
@@ -210,6 +257,12 @@ function showBigPainting() {
 
				         transform: translate(-50%, -50%);

			
 
				         width: 100%;

			
 
				       }

			
 
				+      >img.painting.oversize{

			
 
				+        position: static;

			
 
				+        left: initial;

			
 
				+        top: initial;

			
 
				+        transform: initial;

			
 
				+      }

			
 
				     }

			
 
				     >img.bottom-border-for-animation{

			
 
				       position: absolute;

			
@@ -247,7 +300,7 @@ function showBigPainting() {
 
				       margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				       font-family: KaiTi, KaiTi;

			
 
				       color: #FFFFFF;

			
 
				-      margin-top: 1em;

			
 
				+      margin-top: 2em;

			
 
				       margin-bottom: 0.5em;

			
 
				       font-weight: 400;

			
 
				       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
@@ -258,7 +311,7 @@ function showBigPainting() {
 
				       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: justified;

			
 
				+      text-align: justify;

			
 
				       white-space: pre-line;

			
 
				     }

			
 
				   }

			
--- a/src/views/PaintingDetailList.vue
+++ b/src/views/PaintingDetailList.vue
@@ -25,11 +25,17 @@
 
				           :author-desc="item['作者简介']"

			
 
				           :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"

			
 
				           :can-close="false"

			
 
				+          :size="getPaintingSize(item['尺寸'])"

			
 
				         >

			
 
				           {{ item }}

			
 
				         </PaintingDetail>

			
 
				       </SwiperSlide>

			
 
				     </Swiper>

			
 
				+    <OperationTip

			
 
				+      class="operation-tip"

			
 
				+      direction="h"

			
 
				+      :is-show="isShowOperationTip"

			
 
				+    />

			
 
				     <BtnBack

			
 
				       class="btn-back"

			
 
				       @click="router.go(-1)"

			
@@ -44,6 +50,8 @@ import { useStore } from "vuex"
 
				 import PaintingDetail from '@/views/PaintingDetail.vue'

			
 
				 import useSizeAdapt from "@/useFunctions/useSizeAdapt"

			
 
				 

			
 
				+const getPaintingSize = utils.getPaintingSize

			
 
				+

			
 
				 const route = useRoute()

			
 
				 const router = useRouter()

			
 
				 const store = useStore()

			
@@ -65,7 +73,12 @@ const onSwiper = (swiperP) => {
 
				   swiper = swiperP

			
 
				 }

			
 
				 const onSlideChange = (e) => {

			
 
				+  if (isShowOperationTip.value && e.activeIndex !== Number(route.query.idx)) {

			
 
				+    isShowOperationTip.value = false

			
 
				+  }

			
 
				 }

			
 
				+

			
 
				+const isShowOperationTip = ref(true)

			
 
				 </script>

			
 
				 

			
 
				 <style lang="less" scoped>

			
@@ -98,6 +111,13 @@ const onSlideChange = (e) => {
 
				       }

			
 
				     }

			
 
				   }

			
 
				+  >.operation-tip{

			
 
				+    position: absolute;

			
 
				+    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				+    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateX(-50%);

			
 
				+    z-index: 10;

			
 
				+  }

			
 
				   >.btn-back{

			
 
				     z-index: 10;

			
 
				   }

			
--- a/src/views/PaintingList.vue
+++ b/src/views/PaintingList.vue
@@ -7,6 +7,7 @@
 
				     >

			
 
				       <div

			
 
				         v-for="(paintingGroup, ageName) in menuInfo"

			
 
				+        :id="`menu-item-${ageName}`"

			
 
				         :key="ageName"

			
 
				         class="menu-item"

			
 
				       >

			
@@ -93,14 +94,20 @@
 
				             </div>

			
 
				             <div class="img-wrap">

			
 
				               <img

			
 
				-                class=""

			
 
				+                class="thumb"

			
 
				                 :src="`${$env.BASE_URL}configMultiMedia/paintings-thumb/${item['标题']}.jpg`"

			
 
				                 alt=""

			
 
				                 draggable="false"

			
 
				               >

			
 
				+              <img

			
 
				+                class="border"

			
 
				+                src="@/assets/images/painting-thumb-border.png"

			
 
				+                alt=""

			
 
				+                draggable="false"

			
 
				+              >

			
 
				             </div>

			
 
				             <div class="size">

			
 
				-              {{ getPaintingSizeString(item['尺寸']) }}

			
 
				+              {{ getPaintingSizeStringForShow(getPaintingSize(item['尺寸'])) }}

			
 
				             </div>

			
 
				             <div class="position">

			
 
				               {{ item['馆藏'] }}

			
@@ -135,6 +142,8 @@ import { useStore } from "vuex"
 
				 import useSizeAdapt from "@/useFunctions/useSizeAdapt"

			
 
				 import PaintingStyleDesc from "@/views/PaintingStyleDesc.vue"

			
 
				 

			
 
				+const getPaintingSize = utils.getPaintingSize

			
 
				+

			
 
				 const route = useRoute()

			
 
				 const router = useRouter()

			
 
				 const store = useStore()

			
@@ -196,15 +205,11 @@ function getAuthorList(paintingGroup) {
 
				   return Array.from(new Set(temp))

			
 
				 }

			
 
				 

			
 
				-function getPaintingSizeString(raw) {

			
 
				-  const temp = raw.split('\n')

			
 
				-  let height = temp[0]

			
 
				-  let width = temp[1]

			
 
				-  height = height.substring(1, height.length - 2)

			
 
				-  width = width.substring(1, width.length - 2)

			
 
				+function getPaintingSizeStringForShow({ width, height }) {

			
 
				   return `${width}\u00D7${height} 厘米`

			
 
				 }

			
 
				 

			
 
				+

			
 
				 const paintingWidthWhenDesign = 240

			
 
				 const paintingMarginWhenDesin = 75

			
 
				 const specialDescWidthWhenDesin = 444

			
@@ -222,6 +227,10 @@ function onClickAge(ageName) {
 
				     expandedAgeNameList.value.delete(ageName)

			
 
				   } else {

			
 
				     expandedAgeNameList.value.add(ageName)

			
 
				+    const menuItemEl = document.getElementById(`menu-item-${ageName}`)

			
 
				+    setTimeout(() => {

			
 
				+      menuEl.value.scrollLeft = menuItemEl.offsetLeft

			
 
				+    }, 200)

			
 
				   }

			
 
				 }

			
 
				 

			
@@ -254,6 +263,7 @@ watch(menuElScrollLeft, (v) => {
 
				     height: 100%;

			
 
				     display: flex;

			
 
				     overflow: auto;

			
 
				+    scroll-behavior: smooth;

			
 
				     >.menu-item{

			
 
				       flex: 0 0 auto;

			
 
				       height: 100%;

			
@@ -327,7 +337,7 @@ watch(menuElScrollLeft, (v) => {
 
				             font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				             color: #476446;

			
 
				             line-height: 2;

			
 
				-            text-align: justified;

			
 
				+            text-align: justify;

			
 
				             height: calc(552 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				             letter-spacing: 0.15em;

			
 
				           }

			
@@ -380,7 +390,7 @@ watch(menuElScrollLeft, (v) => {
 
				               }

			
 
				             }

			
 
				             >.author.long{

			
 
				-              transform: initial;

			
 
				+              transform: translateY(0);

			
 
				               letter-spacing: initial;

			
 
				             }

			
 
				             >.title{

			
@@ -407,14 +417,21 @@ watch(menuElScrollLeft, (v) => {
 
				             width: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				             height: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				             border-radius: 50%;

			
 
				-            border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #50361E;

			
 
				             overflow: hidden;

			
 
				             margin-bottom: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

			
 
				-            >img{

			
 
				+            position: relative;

			
 
				+            >img.thumb{

			
 
				               width: 100%;

			
 
				               height: 100%;

			
 
				               object-fit: cover;

			
 
				             }

			
 
				+            >img.border{

			
 
				+              position: absolute;

			
 
				+              left: 0;

			
 
				+              top: 0;

			
 
				+              width: 100%;

			
 
				+              height: 100%;

			
 
				+            }

			
 
				           }

			
 
				           >.size{

			
 
				             font-family: KingHwa_OldSong, KingHwa_OldSong;

			
--- a/src/views/PoemList.vue
+++ b/src/views/PoemList.vue
@@ -45,7 +45,7 @@
 
				       >

			
 
				         <div class="inner-wrap">

			
 
				           <div class="title-wrap">

			
 
				-            <h1>《{{ item['标题（展示）'] }}》</h1>

			
 
				+            <h1>《{{ item['标题'] }}》</h1>

			
 
				             <div class="sub-title">

			
 
				               <span class="author">{{ item['作者'] }}</span>

			
 
				               <span class="age">{{ item['朝代'] }}</span>