首页优化

public/configText.js

@@ -1,13 +1,13 @@
 var configText = {
   homepagePaintingDesc: [
     `古人创作墨竹的灵感来自“因观竹影而得意。”又有“学画竹者，取一枝竹，因月夜照其影于素壁之上，则竹之真形出矣”，或者“每灯下照竹枝模影写真”，再或者“折小枝，就日影视之，皆欲精到”。画家通过日光、月影和灯下竹影写成墨竹。`,
-    `我们从文献与实物综合考察分析，墨竹起源于唐、五代，北宋时以文同为集大成者，经苏轼加持，形成了中国绘画史上影响最大的“湖州竹派”。`,
-    `该派既继承传统又重视写生，技法严谨，精神内涵丰富。李衎是元代湖州竹派的代表性画家。`,
+    // `我们从文献与实物综合考察分析，墨竹起源于唐、五代，北宋时以文同为集大成者，经苏轼加持，形成了中国绘画史上影响最大的“湖州竹派”。`,
+    // `该派既继承传统又重视写生，技法严谨，精神内涵丰富。李衎是元代湖州竹派的代表性画家。`,
   ],
   homepageAuthorDesc: [
     `李衎（1245年-1320年），字仲宾，号息斋道人，蓟丘（今北京）人。皇庆元年（1312年）任吏部尚书，拜集贤殿大学士，与赵孟頫相友善。死后追封蓟国公，谥文简。擅长画竹，墨竹初师王庭筠，继师文同，青绿设色师李颇。`,
     `李衎喜欢在绢上作画，尤其是晚期作品，因其身为官场显贵，有财力购买好绢，与南方文人好用纸大异其趣；又因绢质能增画面清贵感，符合其地位。此外，绢画是唐宋传统，可以增加古意。`,
-    `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
+    // `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
   ],
   homepagePaintingDetailDescStem: '坡石一隅的三竿修竹，两竿近，一竿远，近低远高，近开远合，两竿向右，一竿向左，一聚一分，构图稳定，法度森严。',
   homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

src/store/index.js

@@ -9,7 +9,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
+    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',
     // userInfo: {

src/views/HomeView.vue

@@ -34,7 +34,9 @@
     <div
       class="painting-wrap"
       :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        width: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        height: `${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
       }"
     >
       <div
@@ -136,7 +138,7 @@
       ref="longDesc"
       class="long-desc"
       :style="{
-        top: `${(paintingTop + 540) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + paintingHeight + 53) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
     >
@@ -192,6 +194,38 @@
       {{ summaryDesc }}
     </div>
 
+    <div
+      class="progress-bar"
+    >
+      <div class="bar-artwork-desc" />
+      <img
+        class="progress-bar-node-1"
+        src="@/assets/images/progress-bar-node-1.png"
+        alt=""
+        draggable="false"
+      >
+      <div class="bar-author-desc" />
+      <img
+        class="progress-bar-node-2"
+        src="@/assets/images/progress-bar-node-2.png"
+        alt=""
+        draggable="false"
+      >
+      <div class="bar-artwork-enjoy" />
+      <img
+        class="progress-bar-node-3"
+        src="@/assets/images/progress-bar-node-3.png"
+        alt=""
+        draggable="false"
+      >
+
+      <div
+        class="mask"
+        :style="{
+          width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
+        }"
+      />
+    </div>
     <OperationTip
       v-if="isStartupOver"
       class="operation-tip"
@@ -205,7 +239,12 @@
       @touchstart="handletouchstart($event)"
       @touchmove="touchMove($event)"
     >
-      <div class="inner" />
+      <div
+        class="inner"
+        :style="{
+          height: summaryHideAt + windowHeight + 'px',
+        }"
+      />
     </div>
 
     <!-- 热点详情页 -->
@@ -276,6 +315,9 @@ import HotspotDetail1 from '@/views/HotspotDetail1.vue'
 // import PaintingDetail from '@/views/PaintingDetail.vue'
 import HotspotDetail3 from '@/views/HotspotDetail3.vue'
 import { api as viewerApi } from 'v-viewer'
+import { useWindowSize } from '@vueuse/core'
+
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const route = useRoute()
 const router = useRouter()
@@ -327,124 +369,197 @@ const unwatch = watch(haveShownStartup, (v) => {
   }
 })
 
+
+const titleHideAt = window.innerHeight * 0
+const titleHideFinishAt = window.innerHeight * 0.75
 const titleOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
-    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 0.5) {
+  if (scrollerElScrollTop.value <= titleHideAt) {
     ret = 1
   } else {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
+    ret = 1 - (scrollerElScrollTop.value - titleHideAt) / (titleHideFinishAt - titleHideAt)
   }
   return ret
 })
 
+const paintingMoveUpAt = window.innerHeight * 0
+const paintingTopInitial = 236
+const paintingMoveUpFinishAt = window.innerHeight * 1
+const paintingTopMovedUp = 41
+const paintingMoveDownAt = window.innerHeight * 2
+const paintingMoveDownFinishAt = window.innerHeight * 2.5
+const paingtingTopMovedDown = 90
 const paintingTop = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.5) {
-    ret = 180
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.5 && scrollerElScrollTop.value < window.innerHeight * 1) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (1 - 0.5)) * (67 - 180) + 180
+  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
+    ret = paintingTopInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingTopMovedUp - paintingTopInitial) + paintingTopInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
+    ret = paintingTopMovedUp
+  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paingtingTopMovedDown - paintingTopMovedUp) + paintingTopMovedUp
+  } else {
+    ret = paingtingTopMovedDown
+  }
+  return ret
+})
+
+const paintingWidthInitial = 308
+const paintingWidthMovedUp = 250
+const paintingWidthMovedDown = 308
+const paintingWidth = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
+    ret = paintingWidthInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
+    ret = paintingWidthMovedUp
+  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
+  } else {
+    ret = paintingWidthMovedDown
+  }
+  return ret
+})
+
+const paintingHeightInitial = 523
+const paintingHeightMovedUp = 425
+const paintingHeightMovedDown = 523
+const paintingHeight = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
+    ret = paintingHeightInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingHeightMovedUp - paintingHeightInitial) + paintingHeightInitial
+  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
+    ret = paintingHeightMovedUp
+  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
+    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingHeightMovedDown - paintingHeightMovedUp) + paintingHeightMovedUp
   } else {
-    ret = 67
+    ret = paintingHeightMovedDown
   }
   return ret
 })
 
 const longDesc = ref(null)
+const longDescShowFinishAt = window.innerHeight * 0.5
+const longDescHideAt = longDescShowFinishAt + window.innerHeight * 1
+const longDescHideFinishAt = longDescHideAt + window.innerHeight * 0.5
 const longDescOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
-    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 2) {
+  if (scrollerElScrollTop.value <= longDescShowFinishAt) {
+    ret = 1 - (longDescShowFinishAt - scrollerElScrollTop.value) / (longDescShowFinishAt)
+  } else if (scrollerElScrollTop.value > longDescShowFinishAt && scrollerElScrollTop.value < longDescHideAt) {
     ret = 1
   } else {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (3 - 2))
+    ret = 1 - (scrollerElScrollTop.value - longDescHideAt) / (longDescHideFinishAt - longDescHideAt)
   }
   return ret
 })
 watch(scrollerElScrollTop, (vNew, vOld) => {
-  if (vNew > window.innerHeight * 1) {
-    longDesc.value.scrollTop = vNew - window.innerHeight * 1
-  } else if (vNew < vOld && vNew <= window.innerHeight * 1) {
+  if (vNew > paintingMoveUpFinishAt) {
+    longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
+  } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
     longDesc.value.scrollTop = 0
   }
 })
 
+const stemShowAt = longDescHideFinishAt + window.innerHeight * 0.1
+const stemShowFinishAt = stemShowAt + window.innerHeight * 0.5
+const stemHideAt = stemShowFinishAt + window.innerHeight * 0.5
+const stemHideFisishAt = stemShowFinishAt + window.innerHeight * 0.5
 const stemOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= stemShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 4) {
+  } else if (scrollerElScrollTop.value > stemShowAt && scrollerElScrollTop.value < stemShowFinishAt) {
+    ret = (scrollerElScrollTop.value - stemShowAt) / (stemShowFinishAt - stemShowAt)
+  } else if (scrollerElScrollTop.value >= stemShowFinishAt && scrollerElScrollTop.value <= stemHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > window.innerHeight * 4 && scrollerElScrollTop.value < window.innerHeight * 4.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 4) / (window.innerHeight * (4.5 - 4))
+  } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stemHideAt) / (stemHideFisishAt - stemHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const leafShowAt = stemHideFisishAt + (0.1 * window.innerHeight)
+const leafShowFinishAt = leafShowAt + (0.5 * window.innerHeight)
+const leafHideAt = leafShowFinishAt + (0.5 * window.innerHeight)
+const leafHideFisishAt = leafHideAt + (0.5 * window.innerHeight)
 const leafOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 5) {
+  if (scrollerElScrollTop.value <= leafShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 5 && scrollerElScrollTop.value < window.innerHeight * 5.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 5) / (window.innerHeight * (5.5 - 5))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 5.5 && scrollerElScrollTop.value <= window.innerHeight * 6) {
+  } else if (scrollerElScrollTop.value > leafShowAt && scrollerElScrollTop.value < leafShowFinishAt) {
+    ret = (scrollerElScrollTop.value - leafShowAt) / (leafShowFinishAt - leafShowAt)
+  } else if (scrollerElScrollTop.value >= leafShowFinishAt && scrollerElScrollTop.value <= leafHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > window.innerHeight * 6 && scrollerElScrollTop.value < window.innerHeight * 6.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 6) / (window.innerHeight * (6.5 - 6))
+  } else if (scrollerElScrollTop.value > leafHideAt && scrollerElScrollTop.value < leafHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - leafHideAt) / (leafHideFisishAt - leafHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const stoneShowAt = leafHideFisishAt + (0.1 * window.innerHeight)
+const stoneShowFinishAt = stoneShowAt + (0.5 * window.innerHeight)
+const stoneHideAt = stoneShowFinishAt + (0.5 * window.innerHeight)
+const stoneHideFinishAt = stoneHideAt + (0.5 * window.innerHeight)
 const stoneOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 7) {
+  if (scrollerElScrollTop.value <= stoneShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 7 && scrollerElScrollTop.value < window.innerHeight * 7.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 7.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
+  } else if (scrollerElScrollTop.value > stoneShowAt && scrollerElScrollTop.value < stoneShowFinishAt) {
+    ret = (scrollerElScrollTop.value - stoneShowAt) / (stoneShowFinishAt - stoneShowAt)
+  } else if (scrollerElScrollTop.value >= stoneShowFinishAt && scrollerElScrollTop.value <= stoneHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
+  } else if (scrollerElScrollTop.value > stoneHideAt && scrollerElScrollTop.value < stoneHideFinishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stoneHideAt) / (stoneHideFinishAt - stoneHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const summaryShowAt = stoneHideFinishAt + window.innerHeight * 0.3
+const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.5
+const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.5
+const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.5
 const summaryOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 9) {
+  if (scrollerElScrollTop.value <= summaryShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 9 && scrollerElScrollTop.value < window.innerHeight * 9.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 9) / (window.innerHeight * (9.5 - 9))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 9.5 && scrollerElScrollTop.value <= window.innerHeight * 10) {
+  } else if (scrollerElScrollTop.value > summaryShowAt && scrollerElScrollTop.value < summaryShowFinishAt) {
+    ret = (scrollerElScrollTop.value - summaryShowAt) / (summaryShowFinishAt - summaryShowAt)
+  } else if (scrollerElScrollTop.value >= summaryShowFinishAt && scrollerElScrollTop.value <= summaryHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > window.innerHeight * 10 && scrollerElScrollTop.value < window.innerHeight * 10.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 10) / (window.innerHeight * (10.5 - 10))
+  } else if (scrollerElScrollTop.value > summaryHideAt && scrollerElScrollTop.value < summaryHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - summaryHideAt) / (summaryHideFisishAt - summaryHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const sizeShowAt = stemShowAt
+const sizeShowFinishAt = stemShowFinishAt
+const sizeHideAt = stoneHideAt
+const sizeHideFisishAt = stoneHideFinishAt
 const sizeOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= sizeShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
+  } else if (scrollerElScrollTop.value > sizeShowAt && scrollerElScrollTop.value < sizeShowFinishAt) {
+    ret = (scrollerElScrollTop.value - sizeShowAt) / (sizeShowFinishAt - sizeShowAt)
+  } else if (scrollerElScrollTop.value >= sizeShowFinishAt && scrollerElScrollTop.value <= sizeHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
+  } else if (scrollerElScrollTop.value > sizeHideAt && scrollerElScrollTop.value < sizeHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - sizeHideAt) / (sizeHideFisishAt - sizeHideAt)
   } else {
     ret = 0
   }
@@ -453,7 +568,7 @@ const sizeOpacity = computed(() => {
 
 const isShowHotspot = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= sizeShowAt) {
     ret = false
   } else {
     return true
@@ -528,7 +643,7 @@ const touchMove = (event) => {
   >.title-wrap{
     position: absolute;
     left: 50%;
-    top: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%);
     width: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -560,14 +675,12 @@ const touchMove = (event) => {
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
-    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >.size-sign-h{
       position: absolute;
       left: 50%;
       top: 0;
       transform: translate(-50%, -105%);
-      width: calc(309 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(245 / 308 * 100%);
       >img{
         width: 100%;
       }
@@ -578,7 +691,7 @@ const touchMove = (event) => {
         transform: translate(-50%, -50%);
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(16 / 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;
@@ -587,9 +700,9 @@ const touchMove = (event) => {
     >.size-sign-v{
       position: absolute;
       right: 0;
-      top: 50%;
+      top: 54%;
       transform: translate(80%, -50%);
-      height: calc(464 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(371 / 523 * 100%);
       >img{
         height: 100%;
       }
@@ -600,7 +713,7 @@ const touchMove = (event) => {
         transform: translate(-50%, -50%);
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(16 / 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;
@@ -617,9 +730,9 @@ const touchMove = (event) => {
     >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
       position: absolute;
       left: 50%;
-      top: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      transform: translate(-50%, 0);
-      width: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: 54%;
+      transform: translate(-50%, -50%);
+      width: calc(245 / 308 * 100%);
     }
   }
   >.hotspot-wrap{
@@ -691,6 +804,66 @@ const touchMove = (event) => {
     line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     text-align: justify;
   }
+  >.progress-bar{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 15px;
+    >.bar-artwork-desc{
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 10px;
+      height: 3px;
+      background-color: #A9D185;
+    }
+    >img.progress-bar-node-1{
+      position: absolute;
+      left: calc(0.6 * v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
+      bottom: 1px;
+      width: 2.41px;
+      height: 10.23px
+    }
+    >.bar-author-desc{
+      position: absolute;
+      left: 12px;
+      bottom: 0;
+      right: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
+      height: 3px;
+      background: #A9D185;
+    }
+    >img.progress-bar-node-2{
+      position: absolute;
+      left: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
+      bottom: 1px;
+      width: 7.5px;
+      height: 10.8px
+    }
+    >.bar-artwork-enjoy{
+      position: absolute;
+      left: calc(v-bind('stoneShowAt') / v-bind('summaryHideAt') * 100%);
+      bottom: 0;
+      right: 0;
+      height: 3px;
+      background: #A9D185;
+    }
+    >img.progress-bar-node-3{
+      position: absolute;
+      right: 0;
+      bottom: 1px;
+      width: 9.7px;
+      height: 10.8px
+    }
+
+    > .mask{
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      height: 15px;
+      background-color: #6e8175;
+    }
+  }
   >.operation-tip{
     position: absolute;
     left: 50%;
@@ -706,7 +879,6 @@ const touchMove = (event) => {
     overflow: auto;
     >.inner{
       width: 100%;
-      height: 1050%;
     }
   }
   >.hotspot-detail{