fix:更新首页作品、作者简介，进度条一版本

public/configText.js

@@ -6,7 +6,7 @@ var configText = {
     // `该派既继承传统又重视写生，技法严谨，精神内涵丰富。李衎是元代湖州竹派的代表性画家。`,
   ],
   homepageAuthorDesc: [
-    `李衎（音kān）（1245~1320），字仲宾，号息斋道人，蓟丘（今北京）人。皇庆元年（1312）为吏部尚书，拜集贤殿大学士，与赵孟頫相友善。死后追封蓟国公，谥文简。善画竹，墨竹初师王庭筠，继师文同，青绿设色师李颇。`,
+    `字仲宾，号息斋道人，蓟丘（今北京）人。皇庆元年（1312）为吏部尚书，拜集贤殿大学士，与赵孟頫相友善。死后追封蓟国公，谥文简。善画竹，墨竹初师王庭筠，继师文同，青绿设色师李颇。`,
     `李衎作画喜欢在绢上作画，晚期的作品一律是画在绢上。这与南方文人好用纸大异其趣，大概是因为其是官场中的显贵，既有资财购买好绢，又因绢质可增画面的清贵感，符合其地位和身份。另一方面可能是绢画乃唐宋的传统以绢作画可以增加古意。`,
     `李衎的竹图风格，早期受金代王庭筠的影响，此于《竹梧兰石四清图》仍有迹可寻。晚期主要是以文同笔墨写“真竹”，那些竹子的造型大多是他研究竹子生态的心得。但他的创作—不论多么写真总有一个基本理念作为指导原则，这个基本理念便是“清”。`,
     `李衎特别重视清润，这也就是他最根本的美学理念，由此衍生的一套伦理道德观念便藉他的迹画表达出来，因此他的画有很强的象征主义特征。`

src/main.js

@@ -22,6 +22,7 @@ import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
 import BtnSkip from '@/components/BtnSkip.vue'
 import PaginationComp from '@/components/PaginationComp.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 import Vue3TouchEvents from "vue3-touch-events"
 
@@ -102,6 +103,7 @@ app.use(store)
   .component('SerialFrames', SerialFrames)
   .component('BtnSkip', BtnSkip)
   .component('PaginationComp', PaginationComp)
+  .component('ProgressBar', ProgressBar)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/views/HomeView.vue

@@ -35,7 +35,7 @@
         top: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)` : paintingWidth == 485 ? `110%` : `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        transform: `${currentPosition != '' ? currentPosition :`translate(-50%, 0)`}`,
+        transform: `${currentPosition != '' ? currentPosition : `translate(-50%, 0)`}`,
         transition: currentPosition != '' ? `all 1s` : ``
       }"
     >
@@ -312,21 +312,39 @@
     <!-- 文字介绍 -->
     <div
       ref="longDesc"
-      v-touch:swipe.left="onSwipeLeft"
-      v-touch:swipe.right="onSwipeRight"
       class="long-desc"
       :style="{
-        top: `${(paintingTop + paintingHeight + 53) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + paintingHeight + 60) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
     >
+      <div
+        class="page2-box"
+        @click="isShowPaintingDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_detail-min.png"
+          alt=""
+        >
+        <div>作品简介</div>
+      </div>
+      <div
+        class="page2-box"
+        @click="isShowAuthorDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_author-min.png"
+          alt=""
+        >
+        <div>作者简介</div>
+      </div>
       <!-- <h3>作品简介：</h3> -->
-      <p
+      <!-- <p
         v-for="(item, index) in homepagePaintingDesc"
         :key="index"
       >
         {{ item }}
-      </p>
+      </p> -->
       <!-- <h3>作者简介：</h3>
       <p
         v-for="(item, index) in homepageAuthorDesc"
@@ -337,8 +355,7 @@
     </div>
 
     <!-- 展开作者简介 -->
-
-    <div
+    <!-- <div
       class="up-icon"
       :style="{
         top: `${(paintingTop + paintingHeight + 315) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
@@ -347,32 +364,85 @@
       @click="isShowAuthorDesc = true"
     >
       <img src="@/assets/images/icon_up.png">
-    </div>
+    </div> -->
+    <!-- 作品简介 -->
     <div
-      v-show="isShowAuthorDesc"
-      class="author-box"
+      v-show="isShowPaintingDesc"
+      class="painting-box"
     >
+      <!-- 顶部画作 -->
       <img
-        class="top-icon"
-        src="@/assets/images/img_author.png"
+        class="painting-img"
+        src="@/assets/images/img_painting-box.png"
         alt=""
       >
-      <div class="author-desc">
+      <div
+        class="text-box"
+      >
         <p
-          v-for="(item, index) in homepageAuthorDesc"
+          v-for="(item,index) in homepagePaintingDesc"
           :key="index"
         >
           {{ item }}
         </p>
       </div>
-      <img
-        class="down-icon"
-        src="@/assets/images/icon_down.png"
-        @click="isShowAuthorDesc = false"
-      >
+      <div class="bottom-box" />
+      <div class="system-btns">
+        <BtnBack @click="isShowPaintingDesc = false" />
+      </div>
     </div>
 
+    <!-- 作者简介 -->
+    <div
+      v-show="isShowAuthorDesc"
+      class="author-box"
+    >
+      <div class="author-content">
+        <img
+          class="author-img"
+          src="@/assets/images/img_author-min.png"
+        >
+        <img
+          class="author-name"
+          src="@/assets/images/text_likan-min.png"
+        >
 
+        <div class="line" />
+        <div class="text-box">
+          <p
+            v-for="(item, index) in homepageAuthorDesc"
+            :key="index"
+          >
+            {{ item }}
+          </p>
+        </div>
+      </div>
+      <!-- 底部遮罩 -->
+      <div class="bottom-box" />
+      <div class="system-btns">
+        <BtnBack @click="isShowAuthorDesc = false" />
+      </div>
+    </div>
+
+    <!-- 竹杆提示 -->
+    <OperationTip
+      v-if="stemOpacity > 0"
+      class="stem-operation-h"
+      direction="h"
+    />
+    <!-- 竹叶提示 -->
+    <OperationTip
+      v-if="leafOpacity > 0"
+      class="leaf-operation-h"
+      direction="h"
+    />
+
+    <!-- 石头提示 -->
+    <OperationTip
+      v-if="stoneOpacity > 0"
+      class="stone-operation-h"
+      direction="h"
+    />
 
     <!-- stem title -->
     <!-- 上面 -->
@@ -380,7 +450,7 @@
       class="fixed-desc detail-title-stem"
       :style="{
         top: `${paintingTop + 750 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity:stemOpacity ,
+        opacity: stemOpacity,
       }"
     >
       三竿修竹
@@ -418,16 +488,16 @@
     <div
       class="fixed-desc detail-desc-stem"
       :style="{
-        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + 715) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemGreenOpacity,
 
       }"
-      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2 "
+      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2"
     />
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
-        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + 715) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: leafGreenOpacity,
         zIndex: 4,
       }"
@@ -451,42 +521,20 @@
       {{ summaryDesc }}
     </div>
 
-    <div class="progress-bar">
+    <!-- <div class="progress-bar">
       <div
         class="bar-artwork-desc"
         :style="{
           width: `${scrollerElScrollTop / summaryHideAt * 100}%`,
         }"
       />
-      <!-- <img
-        class="progress-bar-node-1"
-        src="@/assets/images/progress-bar-node-1.png"
-        v-show="scrollerElScrollTop / summaryHideAt > 0.10"
-        alt=""
-        draggable="false"
-      > -->
-      <!-- <div class="bar-author-desc" /> -->
-      <!-- <img
-        class="progress-bar-node-2"
-        src="@/assets/images/progress-bar-node-2.png"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="progress-bar-node-3"
-        src="@/assets/images/progress-bar-node-3.png"
-        alt=""
-        draggable="false"
-      > -->
-
-      <!-- <div
-        class="mask"
-        :style="{
-          width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
-          backgroundColor:stemGreenOpacity > 0 || leafGreenOpacity > 0 || stoneGreenOpacity > 0?'rgba(85,116,83,0.8)':''
-        }"
-      /> -->
-    </div>
+    </div> -->
+    <ProgressBar
+      v-show="curStep != 0"
+      class="progress-bar"
+      :totle-unit="5"
+      :cur-percentage="curPercentage"
+    />
     <OperationTip
       v-if="isStartupOver"
       class="operation-tip"
@@ -600,6 +648,7 @@ const {
 } = useSizeAdapt()
 
 const isShowAuthorDesc = ref(false)
+const isShowPaintingDesc = ref(false)
 
 
 
@@ -618,7 +667,7 @@ const scrollerEl = ref(null)
 const scrollerElScrollTop = ref(0)
 function onScroll() {
   scrollerElScrollTop.value = scrollerEl.value.scrollTop
-  console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
+  // console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
 }
 onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
@@ -685,7 +734,7 @@ const paintingTop = computed(() => {
 
 
 const paintingWidthInitial = 308
-const paintingWidthMovedUp = 250
+const paintingWidthMovedUp = 300
 const paintingWidthMovedDown = 485
 const paintingWidth = computed(() => {
   let ret = null
@@ -705,7 +754,7 @@ const paintingWidth = computed(() => {
 
 
 const paintingHeightInitial = 523
-const paintingHeightMovedUp = 425
+const paintingHeightMovedUp = 495
 let paintingHeightMovedDown = 758
 
 const paintingHeight = computed(() => {
@@ -1256,6 +1305,20 @@ 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 curPercentage = computed(() => {
+
+  if (curStep.value == scrollerPositionList.length - 1) {
+    return 100
+  } else if (curStep.value == 2) {
+    return 20
+  } else if (curStep.value == 5) {
+    return 40
+  } else if (curStep.value == 9) {
+    return 60
+  }
+  return Number.parseInt(curStep.value / scrollerPositionList.length * 100)
+})
 
 const onSwipeLeft = () => {
   if (curStep.value < scrollerPositionList.length - 1) {
@@ -1553,7 +1616,7 @@ function onClickGoNextPage() {
   >.long-desc {
     position: absolute;
     left: 50%;
-    bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, 0);
     color: white;
@@ -1561,6 +1624,26 @@ function onClickGoNextPage() {
     font-family: KaiTi, KaiTi;
     color: #FFFFFF;
     animation: none;
+    display: flex;
+    justify-content: space-between;
+    z-index: 12;
+
+    >.page2-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      >img {
+        width: 65%;
+        margin-bottom: 10px;
+      }
+
+      >div {
+        font-size: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: KaiTi, KaiTi;
+      }
+    }
 
 
     >h3 {
@@ -1589,53 +1672,157 @@ function onClickGoNextPage() {
     }
   }
 
-  >.author-box {
+  >.painting-box {
     width: 100%;
     height: 100%;
-    background: rgba(85, 116, 83, 0.8);
+    background: rgba(73, 91, 71, 0.7);
+    backdrop-filter: blur(22.5px);
     position: fixed;
     top: 0;
     left: 0;
-    padding: 0 10%;
-    z-index: 12;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    // align-content: center;
     align-items: center;
+    // justify-content: center;
+    z-index: 12;
+    padding-top: 15%;
+    padding-left: 10%;
+    padding-right: 10%;
+    >.painting-img{
+      width: 70%;
+      margin-bottom: 20px;
+    }
+
+    >.text-box {
+        width: 100%;
+        max-height: 30vh;
+        overflow: auto;
+
+        >p {
+          margin-bottom: 10px;
+          color: #FFFFFF;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+        }
+      }
 
-    >.top-icon {
-      width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.bottom-box{
+      width: 100%;
+      min-height: 10vh;
+      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
       position: absolute;
-      top: 10%;
-      transform: translateX(-50%);
-      left: 50%;
-      margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: 0;
+      left: 0;
+    }
+
 
+
+    >.system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: fixed;
+      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 10;
     }
+  }
 
-    >.author-desc {
+  >.author-box {
+    width: 100%;
+    height: 100%;
+    background: rgba(73, 91, 71, 0.7);
+    backdrop-filter: blur(22.5px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 0 10%;
+    z-index: 12;
+    padding-top: 15%;
+    padding-left: 10%;
+    padding-right: 10%;
+
+    >.author-content {
       width: 100%;
-      max-height: 60vh;
-      margin-top: 10vh;
-      color: white;
+      height: 100%;
       overflow: auto;
-      font-family: KaiTi, KaiTi;
-      color: #FFFFFF;
-      animation: none;
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      >.author-img {
+        width: 40%;
+        margin-bottom: 5px;
+      }
+
+      >.author-name {
+        width: 50%;
+      }
+
+      >.line {
+        width: 100%;
+        min-height: 1px;
+        background: #E1EDD9;
+        margin: 15px auto;
+        content: "";
+      }
+
+      >.text-box {
+        width: 100%;
+
+        >p {
+          margin-bottom: 10px;
+          color: #FFFFFF;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+        }
+      }
     }
 
-    >.down-icon {
+    >.bottom-box{
+      width: 100%;
+      min-height: 20vh;
+      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
       position: absolute;
-      transform: translateX(-50%);
-      left: 50%;
-      bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      width: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: 0;
+      left: 0;
+    }
+
+
+
+    >.system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: fixed;
+      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 10;
     }
   }
 
+  >.stem-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
+  }
+
+  >.leaf-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
+  }
+
+  >.stone-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
+  }
+
   >.fixed-desc {
     position: absolute;
     left: 50%;
@@ -1683,10 +1870,13 @@ function onClickGoNextPage() {
   >.progress-bar {
     position: absolute;
     left: 0;
-    bottom: 0;
-    width: 100%;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
     height: 15px;
     z-index: 3;
+    color: #e1edd95d;
 
     >.bar-artwork-desc {
       position: absolute;
@@ -1792,7 +1982,7 @@ function onClickGoNextPage() {
   >button.go-next-page {
     position: absolute;
     left: 50%;
-    bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 20;
     transform: translate(-50%, 0);
   }