优化

public/configText.js

@@ -10,7 +10,7 @@ var configText = {
     `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
   ],
   homepagePaintingDetailDescStem: '坡石一隅的三竿修竹，两竿近，一竿远，近低远高，近开远合，两竿向右，一竿向左，一聚一分，构图稳定，法度森严。',
-  homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',
+  homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',
   homepagePaintingDetailDescStone: '卧石、枯树和灌木在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。',
   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',
   craft: [

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;

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{

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{

src/views/PaintingDetail.vue

@@ -311,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;
     }
   }

src/views/PaintingList.vue

@@ -337,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;
           }
@@ -390,7 +390,7 @@ watch(menuElScrollLeft, (v) => {
               }
             }
             >.author.long{
-              transform: initial;
+              transform: translateY(0);
               letter-spacing: initial;
             }
             >.title{

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>