1 سال پیش · d678a2ed64
--- 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/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/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'));

			
--- 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%;

			
@@ -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;