首页改版

README.md

@@ -4,4 +4,16 @@
 访问url：https://culture.4dage.com/NanjingMuseumWuJinZang/index.html#/
 
 ## 任一存的todos
-首页 文字区域变更 要问一下。
+首页 文字区域变更
+
+图画详情页 文字区域变更
+
+诗歌页 切图
+
+绘画详情页开发
+
+绘画目录页 各种切图 排版
+
+内容扩展页开发
+
+启动页

src/views/HomeView.vue

@@ -9,6 +9,8 @@
         class="startup"
       />
     </Transition>
+
+    <!-- 标题 -->
     <div
       class="title-wrap"
       :style="{
@@ -27,7 +29,14 @@
         元 李衎<br>
       </div>
     </div>
-    <div class="painting-wrap">
+
+    <!-- 画作 -->
+    <div
+      class="painting-wrap"
+      :style="{
+        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+      }"
+    >
       <div
         class="size-sign-h"
         :style="{
@@ -99,7 +108,14 @@
         draggable="false"
       >
     </div>
-    <div class="hotspot-wrap">
+
+    <!-- 热点层 -->
+    <div
+      class="hotspot-wrap"
+      :style="{
+        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+      }"
+    >
       <HotspotComp
         v-show="isShowHotspot"
         class="hotspot-1"
@@ -116,6 +132,31 @@
         @click="isShowHotspotDetail3 = true"
       />
     </div>
+
+    <!-- 文字介绍 -->
+    <div
+      ref="longDesc"
+      class="long-desc"
+      :style="{
+        top: `${(paintingTop + 540) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: longDescOpacity,
+      }"
+    >
+      <h3>作品简介：</h3>
+      <p
+        v-for="(item, index) in homepagePaintingDesc"
+        :key="index"
+      >
+        {{ item }}
+      </p>
+      <h3>作者简介：</h3>
+      <p
+        v-for="(item, index) in homepageAuthorDesc"
+        :key="index"
+      >
+        {{ item }}
+      </p>
+    </div>
     <div
       class="fixed-desc detail-desc-stem"
       :style="{
@@ -148,32 +189,22 @@
     >
       {{ summaryDesc }}
     </div>
+
     <OperationTip
       v-if="store.state.isStartupInvisible"
       class="operation-tip"
       text="了解作品"
       :is-show="isShowOperationTip"
     />
+
     <div
-      ref="descEl"
-      class="desc"
+      ref="scrollerEl"
+      class="scroller"
     >
-      <h3>作品简介：</h3>
-      <p
-        v-for="(item, index) in homepagePaintingDesc"
-        :key="index"
-      >
-        {{ item }}
-      </p>
-      <h3>作者简介：</h3>
-      <p
-        v-for="(item, index) in homepageAuthorDesc"
-        :key="index"
-      >
-        {{ item }}
-      </p>
-      <div class="bottom-mask" />
+      <div class="inner" />
     </div>
+
+    <!-- 热点详情页 -->
     <Transition name="fade-in-out">
       <HotspotDetail1
         v-if="isShowHotspotDetail1"
@@ -226,20 +257,20 @@ const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
 const detailDescStone = configText.homepagePaintingDetailDescStone
 const summaryDesc = configText.homepagePaintingSummary
 
-const descEl = ref(null)
-const descElScrollTop = ref(0)
+const scrollerEl = ref(null)
+const scrollerElScrollTop = ref(0)
 onMounted(() => {
-  descEl.value.addEventListener('scroll', (e) => {
-    descElScrollTop.value = descEl.value.scrollTop
+  scrollerEl.value.addEventListener('scroll', (e) => {
+    scrollerElScrollTop.value = scrollerEl.value.scrollTop
   })
 })
 
 const isShowOperationTip = ref(true)
-watch(descElScrollTop, (v) => {
+watch(scrollerElScrollTop, (v) => {
   if (v > 0) {
     isShowOperationTip.value = false
   }
-  if (Math.abs(v - (descEl.value.scrollHeight - descEl.value.clientHeight)) <= 1) {
+  if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
     router.push({
       name: 'MoreContent',
     })
@@ -252,26 +283,58 @@ const isStartupInvisible = computed(() => {
 
 const titleOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 0.3) {
-    ret = 1 - (window.innerHeight * 0.3 - descElScrollTop.value) / (window.innerHeight * 0.3)
-  } else if (descElScrollTop.value > window.innerHeight * 0.3 && descElScrollTop.value < window.innerHeight * 0.5) {
+  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) {
+    ret = 1
+  } else {
+    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
+  }
+  return ret
+})
+
+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
+  } else {
+    ret = 67
+  }
+  return ret
+})
+
+const longDesc = ref(null)
+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) {
     ret = 1
   } else {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
+    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (3 - 2))
   }
   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) {
+    longDesc.value.scrollTop = 0
+  }
+})
 
 const stemOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 2) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
     ret = 0
-  } else if (descElScrollTop.value > window.innerHeight * 2 && descElScrollTop.value < window.innerHeight * 2.5) {
-    ret = (descElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (2.5 - 2))
-  } else if (descElScrollTop.value >= window.innerHeight * 2.5 && descElScrollTop.value <= window.innerHeight * 3) {
+  } 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) {
     ret = 1
-  } else if (descElScrollTop.value > window.innerHeight * 3 && descElScrollTop.value < window.innerHeight * 3.5) {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
+  } 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 {
     ret = 0
   }
@@ -280,14 +343,14 @@ const stemOpacity = computed(() => {
 
 const leafOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 4) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 5) {
     ret = 0
-  } else if (descElScrollTop.value > window.innerHeight * 4 && descElScrollTop.value < window.innerHeight * 4.5) {
-    ret = (descElScrollTop.value - window.innerHeight * 4) / (window.innerHeight * (4.5 - 4))
-  } else if (descElScrollTop.value >= window.innerHeight * 4.5 && descElScrollTop.value <= window.innerHeight * 5) {
+  } 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) {
     ret = 1
-  } else if (descElScrollTop.value > window.innerHeight * 5 && descElScrollTop.value < window.innerHeight * 5.5) {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 5) / (window.innerHeight * (5.5 - 5))
+  } 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 {
     ret = 0
   }
@@ -296,14 +359,14 @@ const leafOpacity = computed(() => {
 
 const stoneOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 6) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 7) {
     ret = 0
-  } else if (descElScrollTop.value > window.innerHeight * 6 && descElScrollTop.value < window.innerHeight * 6.5) {
-    ret = (descElScrollTop.value - window.innerHeight * 6) / (window.innerHeight * (6.5 - 6))
-  } else if (descElScrollTop.value >= window.innerHeight * 6.5 && descElScrollTop.value <= window.innerHeight * 7) {
+  } 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) {
     ret = 1
-  } else if (descElScrollTop.value > window.innerHeight * 7 && descElScrollTop.value < window.innerHeight * 7.5) {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
+  } 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 {
     ret = 0
   }
@@ -312,14 +375,14 @@ const stoneOpacity = computed(() => {
 
 const summaryOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 8) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 9) {
     ret = 0
-  } else if (descElScrollTop.value > window.innerHeight * 8 && descElScrollTop.value < window.innerHeight * 8.5) {
-    ret = (descElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
-  } else if (descElScrollTop.value >= window.innerHeight * 6.5 && descElScrollTop.value <= window.innerHeight * 9) {
+  } 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) {
     ret = 1
-  } else if (descElScrollTop.value > window.innerHeight * 9 && descElScrollTop.value < window.innerHeight * 9.5) {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 9) / (window.innerHeight * (9.5 - 9))
+  } 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 {
     ret = 0
   }
@@ -328,14 +391,14 @@ const summaryOpacity = computed(() => {
 
 const sizeOpacity = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 2) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
     ret = 0
-  } else if (descElScrollTop.value > window.innerHeight * 2 && descElScrollTop.value < window.innerHeight * 2.5) {
-    ret = (descElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (2.5 - 2))
-  } else if (descElScrollTop.value >= window.innerHeight * 2.5 && descElScrollTop.value <= window.innerHeight * 7) {
+  } 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) {
     ret = 1
-  } else if (descElScrollTop.value > window.innerHeight * 7 && descElScrollTop.value < window.innerHeight * 7.5) {
-    ret = 1 - (descElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
+  } 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 {
     ret = 0
   }
@@ -344,7 +407,7 @@ const sizeOpacity = computed(() => {
 
 const isShowHotspot = computed(() => {
   let ret = null
-  if (descElScrollTop.value <= window.innerHeight * 2) {
+  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
     ret = false
   } else {
     return true
@@ -413,8 +476,7 @@ const isShowHotspotDetail3 = ref(false)
   >.painting-wrap{
     position: absolute;
     left: 50%;
-    top: 48%;
-    transform: translate(-50%, -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{
@@ -480,8 +542,7 @@ const isShowHotspotDetail3 = ref(false)
   >.hotspot-wrap{
     position: absolute;
     left: 50%;
-    top: 48%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 7;
@@ -505,6 +566,29 @@ const isShowHotspotDetail3 = ref(false)
       pointer-events: initial;
     }
   }
+  >.long-desc{
+    position: absolute;
+    left: 50%;
+    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    color: white;
+    overflow: auto;
+    font-family: KaiTi, KaiTi;
+    color: #FFFFFF;
+    >h3{
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: 0.5em;
+      font-weight: 600;
+    }
+    >p{
+      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;
+      margin-bottom: 0.5em;
+    }
+  }
   >.fixed-desc{
     position: absolute;
     left: 50%;
@@ -530,35 +614,16 @@ const isShowHotspotDetail3 = ref(false)
     bottom: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translateX(-50%);
   }
-  >.desc{
+  >.scroller{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    padding-top: 100vh;
-    color: white;
     overflow: auto;
-    padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: KaiTi, KaiTi;
-    color: #FFFFFF;
-    >h3{
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-top: 1em;
-      margin-bottom: 0.5em;
-      font-weight: 600;
-    }
-    >p{
-      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;
-      margin-bottom: 0.5em;
-    }
-    >.bottom-mask{
+    >.inner{
       width: 100%;
-      height: 750vh;
+      height: 1000%;
     }
   }
   >.hotspot-detail{