generated from maochaoying/dreamworks-frontend-template
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.5 KiB
64 lines
1.5 KiB
<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>
|