fix：更新首页热点位置和文字重点突出

public/configText.js

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

src/views/HomeView.vue

@@ -186,7 +186,8 @@
     <div
       class="hotspot-wrap"
       :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        width: summaryOpacity > 0 ? `calc(215 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
       }"
     >
       <HotspotForHomepage
@@ -271,27 +272,24 @@
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemGreenOpacity,
       }"
-    >
-      {{ detailDescStem }}
-    </div>
+      v-html="detailDescStem"
+    />
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: leafGreenOpacity,
       }"
-    >
-      {{ detailDescLeaf }}
-    </div>
+      v-html="leafOpacity1 > 0 ? detailDescLeaf1 :leafOpacity2> 0? detailDescLeaf2:detailDescLeaf3"
+    />
     <div
       class="fixed-desc detail-desc-stone"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stoneGreenOpacity,
       }"
-    >
-      {{ detailDescStone }}
-    </div>
+      v-html="detailDescStone"
+    />
     <div
       class="fixed-desc summary-desc"
       :style="{
@@ -449,7 +447,9 @@ const {
 const homepagePaintingDesc = configText.homepagePaintingDesc
 const homepageAuthorDesc = configText.homepageAuthorDesc
 const detailDescStem = configText.homepagePaintingDetailDescStem
-const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
+const detailDescLeaf1 = configText.homepagePaintingDetailDescLeaf1
+const detailDescLeaf2 = configText.homepagePaintingDetailDescLeaf2
+const detailDescLeaf3 = configText.homepagePaintingDetailDescLeaf3
 const detailDescStone = configText.homepagePaintingDetailDescStone
 const summaryDesc = configText.homepagePaintingSummary
 
@@ -521,6 +521,7 @@ const paintingTop = computed(() => {
   return ret
 })
 
+
 const paintingWidthInitial = 308
 const paintingWidthMovedUp = 250
 const paintingWidthMovedDown = 485
@@ -576,7 +577,6 @@ const longDescOpacity = computed(() => {
   return ret
 })
 watch(scrollerElScrollTop, (vNew, vOld) => {
-  console.log('scrollerElScrollTop', vNew / scrollerEl.value.scrollHeight)
   if (vNew > paintingMoveUpFinishAt) {
     // longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
   } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
@@ -942,8 +942,8 @@ const sizeOpacity = computed(() => {
 const isShowHotspot = computed(() => {
   let ret = null
 
-  // console.log('scrollerElScrollTop.value', scrollerElScrollTop.value <= sizeShowAt)
-  if (scrollerElScrollTop.value <= sizeShowAt && scrollerElScrollTop.value > 0) {
+  console.log('scrollerElScrollTop.value', scrollerElScrollTop.value)
+  if (scrollerElScrollTop.value >= summaryShowAt) {
     ret = true
   } else {
     return false
@@ -1187,9 +1187,10 @@ function onClickGoNextPage() {
   >.hotspot-wrap {
     position: absolute;
     left: 50%;
-    transform: translate(-50%, 0);
+    top: calc(92 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    transform: translate(-46%, 0);
     width: calc(264 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(517 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 7;
     pointer-events: none;
 
@@ -1271,6 +1272,18 @@ function onClickGoNextPage() {
     position:relative;
     z-index:2;
   }
+  >.detail-desc-stem{
+    display: block;
+    margin-top: 10%;
+  }
+  >.detail-desc-leaf{
+    display: block;
+    margin-top: 6%;
+  }
+  >.detail-desc-stone{
+    display: block;
+    margin-top: 8%;
+  }