1

README.md

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

src/views/HotspotDetail2.vue

@@ -37,48 +37,41 @@
         opacity: isAnimating ? AnimationProgress.value / 100 : fixedDescOpacity,
       }"
     >
-      <div class="inner-wrap">
-        <h3>修篁树石图</h3>
-        <p>李衎（元）</p>
-        <p>轴 绢本 墨笔</p>
-        <p>南京博物院藏</p>
-      </div>
-    </div>
+      <h1>修篁树石图</h1>
+      <p class="subtitle">
+        李衎（元）
+      </p>
+      <p class="subtitle">
+        轴 绢本 墨笔
+      </p>
+      <p class="subtitle">
+        南京博物院藏
+      </p>
 
-    <OperationTip
-      v-if="store.state.isStartupInvisible"
-      class="operation-tip"
-      :is-show="isShowOperationTip"
-    />
-    <div
-      ref="descEl"
-      class="desc"
-      :style="{
-        backdropFilter: `blur(${descBlurScale}px)`,
-        backgroundColor: `rgba(0, 0, 0, ${descBgAlpha})`,
-        pointerEvents: isAnimating ? 'none' : null,
-      }"
-    >
-      <button
-        class="show-big-painting"
-        @click="showBigPainting"
-      />
-      <h3>作品简介：</h3>
+      <h2>作品简介：</h2>
       <p
         v-for="(item, index) in homepagePaintingDesc"
         :key="index"
+        class="normal-text"
       >
         {{ item }}
       </p>
-      <h3>作者简介：</h3>
+      <h2>作者简介：</h2>
       <p
         v-for="(item, index) in homepageAuthorDesc"
         :key="index"
+        class="normal-text"
       >
         {{ item }}
       </p>
-      <div class="bottom-mask" />
     </div>
+
+    <!-- <OperationTip
+      v-if="store.state.isStartupInvisible"
+      class="operation-tip"
+      :is-show="isShowOperationTip"
+    /> -->
+
     <BtnBack
       @click="emit('close')"
     />
@@ -142,56 +135,18 @@ onUnmounted(() => {
   cancelAnimationFrame(animationRequestId)
 })
 
-const descEl = ref(null)
-const descElScrollTop = ref(0)
-onMounted(() => {
-  descEl.value.addEventListener('scroll', (e) => {
-    descElScrollTop.value = descEl.value.scrollTop
-  })
-})
-
 function showBigPainting() {
-  if (descElScrollTop.value < 20) {
-    viewerApi({
-      images: [bigPainting],
-    })
-  }
+  viewerApi({
+    images: [bigPainting],
+  })
 }
 
-const isShowOperationTip = ref(true)
-watch(descElScrollTop, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
-})
-
-const descBlurScale = computed(() => {
-  let ret = 0
-  if (descElScrollTop.value < window.innerHeight * 0.3) {
-    ret = descElScrollTop.value / (window.innerHeight * 0.3) * 20
-  } else {
-    ret = 20
-  }
-  return ret
-})
-const descBgAlpha = computed(() => {
-  let ret = 0
-  if (descElScrollTop.value < window.innerHeight * 0.3) {
-    ret = descElScrollTop.value / (window.innerHeight * 0.3) * 0.3
-  } else {
-    ret = 0.3
-  }
-  return ret
-})
-const fixedDescOpacity = computed(() => {
-  let ret = 1
-  if (descElScrollTop.value < window.innerHeight * 0.3) {
-    ret = 1 - descElScrollTop.value / (window.innerHeight * 0.3)
-  } else {
-    ret = 0
-  }
-  return ret
-})
+// const isShowOperationTip = ref(true)
+// watch(descElScrollTop, (v) => {
+//   if (v > 0) {
+//     isShowOperationTip.value = false
+//   }
+// })
 </script>
 
 <style lang="less" scoped>
@@ -235,70 +190,50 @@ const fixedDescOpacity = computed(() => {
     left: 50%;
     bottom: 2%;
     transform: translateX(-50%);
-    width: 100%;
-    height: 20%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    >.inner-wrap{
+    width: calc(306 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    overflow: auto;
+    >h1{
       text-align: center;
-      >h3{
-        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{
-        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'));
-      }
+      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'));
     }
-  }
-  >.operation-tip{
-    position: absolute;
-    right: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  }
-  >.desc{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    color: white;
-    overflow: auto;
-    padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: KaiTi, KaiTi;
-    color: #FFFFFF;
-    >button.show-big-painting{
-      height: calc(602 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      width: 100%;
-      margin-bottom: calc((844 - 602 - 70) / 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'));
     }
-    >h3{
+    >h2{
+      display: inline-block;
+      margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: KaiTi, KaiTi;
+      color: #FFFFFF;
       margin-top: 1em;
       margin-bottom: 0.5em;
       font-weight: 600;
       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >p{
+    >p.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: justified;
       margin-bottom: 0.5em;
     }
-    >.bottom-mask{
-      width: 100%;
-      height: 10vh;
-    }
+  }
+  >.operation-tip{
+    position: absolute;
+    right: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 }
 </style>

src/views/PaintingListMenu.vue

@@ -229,6 +229,10 @@ watch(menuElScrollLeft, (v) => {
           color: #FFFFFF;
           line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: 0.2em;
+          height: 20em;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
         }
       }
       >.splitter{

src/views/PoemList.vue

@@ -207,6 +207,7 @@ function onClickMenuItem(menuItemName) {
   top: 0;
   width: 100%;
   height: 100%;
+  background-color: #dde6db;
   ::-webkit-scrollbar { width: 0; height: 0; }
   >.bg{
     position: absolute;