fix:优化分页器功能

public/configExcel.js

@@ -307,7 +307,7 @@ var configExcel = {
     {
       "序号": "3",
       "标题": "赵氏一门三竹图",
-      "标题（展示）": "赵氏一门三竹图",
+      "标题（展示）": "赵氏一门三竹图\n（此段画为赵孟頫所画之竹）",
       "方向": '横向',
       "朝代": "元",
       "作者": "赵孟頫",

src/App.vue

@@ -14,11 +14,11 @@
     src="./configMultiMedia/music/music1.mp3"
     style="opacity: 0;"
   />
-  <audio
+  <!-- <audio
     id="bg-music2"
     src="./configMultiMedia/music/music2.mp3"
     style="opacity: 0;"
-  />
+  /> -->
 </template>
 
 <script setup>

src/views/HomeView.vue

@@ -530,10 +530,11 @@
       />
     </div> -->
     <ProgressBar
-      v-show="curStep != 0"
+      :style="{ opacity: curStep != 0 ? 1: 0}"
       class="progress-bar"
       :totle-unit="5"
       :cur-percentage="curPercentage"
+      @go-to-slide="goToSlide"
     />
     <OperationTip
       v-if="isStartupOver"
@@ -653,6 +654,8 @@ const isShowPaintingDesc = ref(false)
 
 
 
+
+
 const homepagePaintingDesc = configText.homepagePaintingDesc
 const homepageAuthorDesc = configText.homepageAuthorDesc
 const detailDescStem1 = configText.homepagePaintingDetailDescStem1
@@ -1305,9 +1308,35 @@ const scrollerPositionList = [0, 0.078, 0.166, 0.228, 0.290, 0.353, 0.436, 0.509
 const scrollerPositionTimeRight = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
 const scrollerPositionTimeLeft = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 300]
 
+// 进度条跳转
+const goToSlide = (index) => {
+  let step = 0
+  switch (index) {
+  case 0:
+    step = 0
+    break
+  case 1:
+    step = 2
+    break
+  case 2:
+    step = 5
+    break
+  case 3:
+    step = 9
+    break
+  case 4:
+    step = 13
+    break
+  }
+  curStep.value = step
+  const pp = scrollerPositionList[curStep.value]
+  const startTime = performance.now()
+  requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime) })
+}
+
+
 // 进度条百分比
 const curPercentage = computed(() => {
-
   if (curStep.value == scrollerPositionList.length - 1) {
     return 100
   } else if (curStep.value == 2) {
@@ -1685,7 +1714,7 @@ function onClickGoNextPage() {
     // align-content: center;
     align-items: center;
     // justify-content: center;
-    z-index: 12;
+    z-index: 15;
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
@@ -1700,9 +1729,10 @@ function onClickGoNextPage() {
         overflow: auto;
 
         >p {
+          text-indent: 2em;
           margin-bottom: 10px;
           color: #FFFFFF;
-          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: KaiTi, KaiTi;
         }
@@ -1740,7 +1770,7 @@ function onClickGoNextPage() {
     top: 0;
     left: 0;
     padding: 0 10%;
-    z-index: 12;
+    z-index: 15;
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
@@ -1773,9 +1803,10 @@ function onClickGoNextPage() {
         width: 100%;
 
         >p {
+          text-indent: 2em;
           margin-bottom: 10px;
           color: #FFFFFF;
-          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-family: KaiTi, KaiTi;
         }
@@ -1870,13 +1901,15 @@ function onClickGoNextPage() {
   >.progress-bar {
     position: absolute;
     left: 0;
-    bottom: 10px;
+    bottom: 15px;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     height: 15px;
     z-index: 3;
     color: #e1edd95d;
+    transition: all 1s;
+    z-index: 12;
 
     >.bar-artwork-desc {
       position: absolute;

src/views/HotspotDetail3.vue

@@ -204,6 +204,7 @@ const goState2 = () => {
     overflow: auto;
     position: absolute;
     transition: opacity 1s ease;
+    z-index:2;
 
     img {
       // height: 50vh;

src/views/PaintingDetail.vue

@@ -506,6 +506,7 @@ function showBigPainting() {
           19 / v-bind("windowSizeWhenDesignForRef") *
             v-bind("windowSizeInCssForRef")
         );
+        white-space: pre;
       }
 
       > p.subtitle {

src/views/StartupView.vue

@@ -103,11 +103,11 @@ const videoEl = ref(null)
 function onClickStart() {
   isShowVideo.value = true
   const audioEl = document.getElementById('bg-music')
-  const audioEl2 = document.getElementById('bg-music2')
   nextTick(() => {
     videoEl.value.play()
     if (window.location.href.includes('?m=1')) {
-      audioEl2.play()
+      audioEl.src = './configMultiMedia/music/music2.mp3'
+      audioEl.play()
     } else {
       audioEl.play()
     }