NanjingMuseumWuJinZang/src/views/BambooBookScene3.vue

<script setup>
import { onMounted, inject, ref, computed } from 'vue'
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
// import { Pagination } from 'swiper'
// import 'swiper/css'
// import 'swiper/css/pagination'




const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const emit = defineEmits(['close'])
const props = defineProps({
  list: {
    type: Array,
    default: () => { return [] },
  },
})

const modules = [Pagination]

const swiperRef = ref(null) // 用于访问Swiper实例

const swiperRealIndex = ref(0)

const displayedPages = ref([])

const currentIndex = ref(0)



const slideChange = (item) => {
  swiperRealIndex.value = item.activeIndex
  // 这里只是一个简单的示例，根据实际需要调整逻辑
  const totalSlides = props.list.length // 总幻灯片数量
  const visibleRange = 5 // 每次显示的分页指示器数量（可以根据需要调整）
  currentIndex.value = swiperRealIndex.value % 5// 当前幻灯片索引
  // console.log('currentIndex', currentIndex)
  // displayedPages.value = totalSlides / 5

  // let start = Math.max(0, currentIndex.value - Math.floor(visibleRange / 2))
  // let end = Math.min(totalSlides - 1, start + visibleRange - 1)

  if (swiperRealIndex.value >= totalSlides - totalSlides % visibleRange ) {
    displayedPages.value = Array.from({ length: totalSlides % visibleRange }, (_, i) => 0 + i)
    // console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)
  } else {
    displayedPages.value = Array.from({ length: 5 }, (_, i) => 0 + i)
  }
  console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)


}

const curPercentage = computed(() => {
  return currentIndex.value
}, {
  immediate: true,
})


// 跳转到指定幻灯片
const goToSlide = (index) => {
  swiperRef.value.slideTo(index)
}

onMounted(() => {
  const totalSlides = props.list.length // 总幻灯片数量
  const visibleRange = 5 // 每次显示的分页指示器数量（可以根据需要调整）
  const currentIndex = swiperRealIndex.value// 当前幻灯片索引
  let start = Math.max(0, currentIndex - Math.floor(visibleRange / 2))
  let end = Math.min(totalSlides - 1, start + visibleRange - 1)
  displayedPages.value = Array.from({ length: end - start + 1 }, (_, i) => start + i)
})


</script>

<template>
  <div class="screen-box">
    <div class="screen-box3">
      <Swiper
        ref="swiperRef"
        class="step-list"
        :modules="modules"
        @slide-change="slideChange"
      >
        <SwiperSlide
          v-for="(item, index) in list"
          :key="index"
          class="step-item"
        >
          <!-- <div>{{ item['名称'] }}</div> -->
          <div class="name-box">
            {{ item['画法'] }}
            <div class="name-box2">
              {{ item['名称'] }}
            </div>
            <!-- <div
              v-for="(item1,index1) in item['显示名称']"
              :key="index1"
            >
              {{ item1 }}
            </div> -->
          </div>
          <img
            :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
            alt=""
          >
        </SwiperSlide>
      </Swiper>
      <!-- 自定义分页器 -->
      <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 class="system-btns">
        <BtnBack @click="emit('close')" />
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep {
  .swiper-pagination-bullet {
    border: 1px solid white;
    background: none;
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background: white;
  }

  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    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);
  //   }
  // }

  .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;
  }
}

.screen-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;

  .screen-box3 {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/screen-box3.png);
    background-size: cover;

    .step-list {
      width: 100%;
      height: calc(100% - 15px);

      .step-item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        >.name-box {
          position: absolute;
          left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          writing-mode: vertical-rl;
          letter-spacing: 12px;
          background: url(@/assets/images/name-bg.png);
          background-size: 100% 100%;
          padding: 10px;
          color: #476446;
          font-family: 'KingHwa_OldSong';
          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          // >:nth-child(odd){
          //   color:#7B916B;
          //   font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          //   line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          //   transform: translateX(-40%)
          // }

          .name-box2 {
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translate(100%, 30%);
            writing-mode: vertical-rl;
            letter-spacing: 8px;
            font-family: 'KingHwa_OldSong';
            font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            color: #7B916B;
            white-space: nowrap;
          }
        }

        >img {
          // width: 40%;
          max-width: 50%;
          max-height: 80vh;
          margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
          margin-top: 10%;
        }
      }



    }

    .system-btns {
      width: 100%;
      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      z-index: 20;
    }
  }

}
</style>