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.
140 lines
3.3 KiB
140 lines
3.3 KiB
<template>
|
|
<div class="header_container">
|
|
<swiper
|
|
:pagination="pagination"
|
|
:modules="modules"
|
|
:virtual="true"
|
|
:spaceBetween="0"
|
|
:loop="true"
|
|
@swiper="onSwiper"
|
|
@slideChange="onSlideChange"
|
|
:keyboard="{
|
|
enabled: true,
|
|
onlyInViewport: false,
|
|
pageUpDown: true,
|
|
}"
|
|
@autoplayTimeLeft="onAutoplayTimeLeft"
|
|
class="header_swiper"
|
|
>
|
|
<swiper-slide :virtualIndex="1">
|
|
<SlideFive />
|
|
</swiper-slide>
|
|
<swiper-slide :virtualIndex="2">
|
|
<SlideTwo />
|
|
</swiper-slide>
|
|
<swiper-slide :virtualIndex="3">
|
|
<SlideOne />
|
|
</swiper-slide>
|
|
<swiper-slide :virtualIndex="4">
|
|
<SlideFour />
|
|
</swiper-slide>
|
|
<swiper-slide :virtualIndex="5">
|
|
<SlideThree />
|
|
</swiper-slide>
|
|
<template #container-end>
|
|
<div class="autoplay-progress">
|
|
<svg viewBox="0 0 48 48" ref="progressLine">
|
|
<line x1="-200" y1="2" x2="300" y2="2"></line>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
</swiper>
|
|
<div class="down_circle" @click="toNext">
|
|
<img
|
|
:src="Arrow"
|
|
alt="arrow"
|
|
class="arrow animate__animated animate__heartBeat animate__infinite animate__slower"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// :autoplay="{
|
|
// delay: 5000,
|
|
// disableOnInteraction: false,
|
|
// }"
|
|
import { useSwiperStore } from '@/store'
|
|
// Import Swiper Vue.js components
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
// Import Swiper styles
|
|
import 'swiper/css'
|
|
// import required modules
|
|
import { Pagination, Autoplay, Keyboard, Virtual } from 'swiper'
|
|
import { ref } from 'vue'
|
|
import SlideOne from './SlideOne'
|
|
import SlideTwo from './SlideTwo'
|
|
import SlideThree from './SlideThree'
|
|
import SlideFour from './SlideFour'
|
|
import SlideFive from './SlideFive'
|
|
import Arrow from '@/assets/img/banner/arrow.png'
|
|
export default {
|
|
components: {
|
|
Swiper,
|
|
SwiperSlide,
|
|
SlideOne,
|
|
SlideTwo,
|
|
SlideThree,
|
|
SlideFour,
|
|
SlideFive,
|
|
},
|
|
methods: {
|
|
toNext() {
|
|
const swiperStore = useSwiperStore()
|
|
swiperStore.slideTo(1)
|
|
},
|
|
onSwiper(swiper) {},
|
|
onSlideChange(swiper) {
|
|
const swiperStore = useSwiperStore()
|
|
const { activeIndex } = swiper
|
|
swiperStore.updateHeaderIndex(activeIndex)
|
|
},
|
|
},
|
|
setup() {
|
|
const progressLine = ref(null)
|
|
const onAutoplayTimeLeft = (s, time, progress) => {
|
|
progressLine.value.style.setProperty('--progress', 1 - progress)
|
|
}
|
|
return {
|
|
onAutoplayTimeLeft,
|
|
progressLine,
|
|
Arrow,
|
|
pagination: {
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return '<div class="' + className + '"></div>'
|
|
},
|
|
},
|
|
modules: [Pagination, Autoplay, Keyboard, Virtual],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header_container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
min-width: 1668px;
|
|
background: #000;
|
|
.down_circle {
|
|
position: absolute;
|
|
bottom: 67px;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 2px solid #ffffff;
|
|
z-index: 11;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.arrow {
|
|
width: 12px;
|
|
height: 8px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|