fix: 优化分页器

src/views/BambooBookScene3.vue

@@ -35,6 +35,8 @@ const displayedPages = ref([])
 
 const currentIndex = ref(0)
 
+
+
 const slideChange = (item) => {
   swiperRealIndex.value = item.activeIndex
   // 这里只是一个简单的示例，根据实际需要调整逻辑
@@ -58,6 +60,12 @@ const slideChange = (item) => {
 
 }
 
+const curPercentage = computed(() => {
+  return currentIndex.value
+}, {
+  immediate: true,
+})
+
 
 // 跳转到指定幻灯片
 const goToSlide = (index) => {
@@ -110,14 +118,22 @@ onMounted(() => {
         </SwiperSlide>
       </Swiper>
       <!-- 自定义分页器 -->
-      <div class="custom-pagination">
+      <ProgressBar
+        class="progress-bar"
+        :totle-unit="displayedPages.length"
+        :cur-percentage="curPercentage"
+        type="1"
+        color-ac="#FFFFFF"
+        color="#FFFFFF60"
+      />
+      <!-- <div class="custom-pagination">
         <span
           v-for="(index, i) in displayedPages"
           :key="i"
           :class="{ 'pagination-bullet': true, 'swiper-pagination-bullet-active': index === currentIndex }"
           @click="goToSlide(index)"
         />
-      </div>
+      </div> -->
       <div class="system-btns">
         <BtnBack @click="emit('close')" />
       </div>
@@ -144,22 +160,36 @@ onMounted(() => {
     margin: 0 calc(5 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
   }
 
-  .custom-pagination {
-    width: 100%;
-    height: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-
-    span {
-      width: 10px;
-      height: 10px;
-      margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border-radius: 50px;
-      border: 1px solid rgb(245, 243, 243);
-    }
+  // .custom-pagination {
+  //   width: 100%;
+  //   height: 10px;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   position: fixed;
+  //   bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+  //   span {
+  //     width: 10px;
+  //     height: 10px;
+  //     margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  //     border-radius: 50px;
+  //     border: 1px solid rgb(245, 243, 243);
+  //   }
+  // }
+
+  .progress-bar{
+    position: absolute;
+    left: 0;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    height: 15px;
+    z-index: 3;
+    color: #e1edd95d;
+    transition: all 1s;
+    z-index: 12;
   }
 }
 
@@ -243,7 +273,7 @@ onMounted(() => {
       justify-content: space-between;
       position: absolute;
       bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      z-index: 2;
+      z-index: 20;
     }
   }
 

src/views/MoreContent.vue

@@ -326,11 +326,21 @@
       </div>
     </div>
 
-    <PaginationComp
+    <ProgressBar
+      :style="{ opacity: curStep != 0 ? 1: 0}"
+      class="pagination"
+      :totle-unit="4"
+      type="1"
+      :cur-percentage="curPercentage"
+      color-ac="#7B916B"
+      color="#7B916B60"
+    />
+
+    <!-- <PaginationComp
       class="pagination"
       :total="4"
       :idx="currentAnchorIdx"
-    />
+    /> -->
     <BtnBack
       @click="
         router.push({
@@ -589,6 +599,8 @@ const {
   initialAnchorIdx: Number(route.query.anchorIdx) || 0,
 })
 
+
+
 const bgInitialLeft = -30
 const bgLeft = ref(bgInitialLeft)
 const bgSpeedFactor = 0.8 * 0.8 * 0.8 * 0.8
@@ -602,6 +614,11 @@ watch(
   }
 )
 
+
+const curPercentage = computed(() => {
+  return currentAnchorIdx.value
+}, { immediate: true })
+
 const layer4SpeedFactor = 0.8 * 0.8 * 0.8
 const layer4InitialLeft = 0
 const layer4Left = ref(layer4InitialLeft)

src/views/ShuangGouSheSeDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
@@ -23,8 +23,8 @@ const reverseArray = (array) => {
   return array.slice().reverse()
 }
 
-const goPaintingDetail = () =>{
-  router.push('/shuanggou-painting-detail?idx=0')
+const goPaintingDetail = () => {
+  router.push(`/shuanggou-painting-detail?idx=0&&m=${curIndex.value}`)
 }
 
 const x = window.innerWidth / window.innerHeight
@@ -34,24 +34,63 @@ onMounted(() => {
 })
 
 const text = [
-  '设色，国画中晕染彩色的意思，',
-  '画面中只要出现彩色就可以说是设色作品。',
-  '与设色相反的是“水墨”，指画面中不出现彩色，',
-  '或者极少出现彩色的，以墨色为主绘制的作品。',
-  '双钩，中国画技法名。用线条钩描物象的轮廓，',
-  '通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，',
-  '故亦称“双钩”。大部用于工笔花鸟画。',
-  '又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，',
-  '也叫“双钩”；双钩后填墨的称为“双钩廓填”。'
+  ['双钩，中国画技法名。用线条钩描',
+    '物象的轮廓,通称“勾勒”，因基本上',
+    '是用左右或上下两笔钩描合拢，故亦',
+    '称“双钩”。大部用于工笔花鸟画。又',
+    '旧时摹搨法书。沿字的笔迹两边用细',
+    '劲的墨线线钩出轮廓，也叫“双钩”；',
+    '双钩后填墨的称为“双钩”'],
+  ['设色，国画中晕染彩色的意思，“廓',
+    '填”。画面中只要出现彩色就可以说',
+    '是设色作品。与设色相反的是“水墨”，',
+    '指画面中不出现彩色，或者极少出现',
+    '彩色的，以墨色为主绘制的作品。', ]
 ]
+
+const curIndex = ref(0)
+
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchEnd = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    if (curIndex.value == 0) {
+      curIndex.value = 1
+    }
+  } else if (tx > 0) {
+    if (curIndex.value == 1) {
+      curIndex.value = 0
+    }
+  }
+}
+
+const goToSlide = (index) => {
+  curIndex.value = index
+}
+
+const curPercentage = computed(() => {
+  return curIndex.value
+}
+)
+
 </script>
 
 <template>
   <div
     class="home"
+    @touchstart="handletouchstart($event)"
+    @touchend="touchEnd($event)"
   >
     <div class="title">
-      双钩设色
+      <span :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.50)' : '' }">双钩</span>
+      <span :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.50)' : '' }">设色</span>
     </div>
 
     <div class="shuanggou-yezi">
@@ -73,16 +112,36 @@ const text = [
     > -->
     <div
       class="text"
-      :style="{top: x> 0.5 ?'auto':'',bottom: x > 0.5 ? '0vh':''}"
+      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '15vh' : 'auto' }"
     >
       <div
-        v-for="(item,index) in reverseArray(text)"
+        v-for="(item, index) in reverseArray(text[curIndex])"
         :key="index"
       >
         {{ item }}
       </div>
+      <!-- <img
+        v-show="curIndex == 0"
+        src="@/assets/images/shuanggou-text.png"
+        alt=""
+      > -->
+      <!-- <img
+        v-show="curIndex == 1"
+        src="@/assets/images/shese-text.png"
+        alt=""
+      > -->
     </div>
 
+    <ProgressBar
+      class="progress-bar"
+      :totle-unit="2"
+      :cur-percentage="curPercentage"
+      color-ac="#7B916B"
+      color="#7B916B60"
+      type="1"
+      @go-to-slide="goToSlide"
+    />
+
     <img
       class="right-bottom"
       src="@/assets/images/right-bottom.png"
@@ -106,13 +165,16 @@ const text = [
 </template>
 
 <style lang='less' scoped>
-.home{
+*{
+  transition: all 1s ease;
+}
+.home {
   width: 100%;
   height: 100%;
   position: relative;
   background: #ffffff;
 
-  .title{
+  .title {
     color: #474747;
     font-size: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -123,57 +185,77 @@ const text = [
     top: 26%;
     letter-spacing: 10px;
   }
-  .shuanggou-yezi{
+
+  .shuanggou-yezi {
     width: 100%;
     animation: fade-in 2s forwards;
     position: relative;
-    z-index:2;
+    z-index: 2;
 
     @keyframes fade-in {
-      0%{
+      0% {
         opacity: 0;
       }
-      100%{
+
+      100% {
         opacity: 1;
       }
     }
 
-    >img{
+    >img {
       width: 100%;
       margin-top: -3%;
     }
-    >.hotspot-1{
+
+    >.hotspot-1 {
       position: absolute;
       bottom: 28%;
       left: 17%;
       pointer-events: initial;
-      z-index:3;
+      z-index: 3;
 
     }
   }
 
-  .text{
+  .text {
     display: flex;
     position: absolute;
-    left: 15vw;
-    top: 60vh;
+    right: 30%;
+    top: 40vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707F48;
-    font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-size: calc(18 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(26 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: 'KaiTi';
-    >div{
+
+    >div {
       writing-mode: vertical-rl;
       letter-spacing: 2px;
+      text-align: justify;
     }
   }
 
-  .right-bottom{
+  .right-bottom {
     width: 100%;
     position: absolute;
     bottom: 0;
     right: 0;
   }
+
+  .progress-bar{
+    position: absolute;
+    left: 0;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    height: 15px;
+    z-index: 3;
+    color: #e1edd95d;
+    transition: all 1s;
+    z-index: 1;
+  }
+
   .system-btns {
     width: 100%;
     padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));

src/views/ShuanggouPaintingDetail.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="painting-detail-list">
     <!-- <div class="bg-left" /> -->
+
+    <img
+      v-show="route.query.m == 1"
+      class="bg-img"
+      src="@/assets/images/img_shese.jpg"
+      alt=""
+    >
+    <img
+      v-show="!route.query.m || route.query.m == 0 "
+      class="bg-img"
+      src="@/assets/images/img_shuanggou.jpg"
+      alt=""
+    >
     <Swiper
       class="painting-list"
       :initial-slide="Number(route.query.idx)"
@@ -94,6 +107,11 @@ const isShowOperationTip = ref(true)
   top: 0;
   width: 100%;
   height: 100%;
+  >.bg-img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
   >.bg-left{
     background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
     position: absolute;
@@ -111,8 +129,8 @@ const isShowOperationTip = ref(true)
     height: 100%;
     // backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     // background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
-    background-image:url(@/assets/images/shuanggou-detail.jpg);
-    background-size: 100% 100%;
+    // background-image:url(@/assets/images/shuanggou-detail.jpg);
+    // background-size: 100% 100%;
     .swiper-slide{
       >.painting-item{
         position: relative !important;