NanjingMuseumWuJinZang/src/views/BambooBookScene3.vue

<script setup>
// import { ref } 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 {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const emit = defineEmits(['close'])

const modules = [Pagination]
const paginationOptions = { clickable: true }

const stepList = [
  {
    id: 0,
    title: "直杆带曲"
  },
  {
    id: 1,
    title: "直杆带曲2"
  },
  {
    id: 2,
    title: "直杆带曲3"
  },
]


</script>

<template>
  <div class="screen-box">
    <div class="screen-box3">
      <Swiper
        class="step-list"
        :modules="modules"
        :pagination="paginationOptions"
      >
        <SwiperSlide
          v-for="(item,index) in stepList"
          :key="index"
          class="step-item"
        >
          {{ item.title }}
        </SwiperSlide>
      </Swiper>
      <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(10 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));

      }
}
.screen-box {
  width: 100%;
  height: 100%;
  position: relative;

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

    }

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

}
</style>