dreamworks-mobile/src/components/Swiper.vue

<template>
  <div class="swiper_container">
    <swiper
      :slidesPerView="1"
      :spaceBetween="0"
      :loop="true"
      :pagination="{
        clickable: true,
      }"
      :navigation="true"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
    </swiper>
    <div class="summar_wrap">
      <Summarize />
    </div>
    <div class="top_wrap"><Top /></div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import Summarize from 'cpns/Summarize'
import Top from 'cpns/Top'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { Pagination, Navigation } from 'swiper'
const modules = [Pagination, Navigation]
</script>

<style lang="scss" scoped>
.swiper_container {
  width: 100vw;
  height: 126vw;
  position: relative;
  .summar_wrap {
    position: absolute;
    box-sizing: border-box;
    padding: 0 7px;
    left: 0;
    bottom: -300px;
    z-index: 100;
    right: 0;
    width: 100%;
    height: 340px;
  }
  .top_wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 47px;
    z-index: 200;
  }
}
</style>