<template>
|
<div class="art-subject">
|
<div class="bg">
|
<img class="title" src="@/assets/home/art_subject/title.png">
|
|
<div class="swiper-container swiper-container-art">
|
<div class="swiper-wrapper">
|
<div
|
v-for="(banner, i) in banners"
|
:key="banner"
|
class="swiper-slide"
|
:class="className[i]+1"
|
@click="switchover(i)"
|
>
|
<img :src="banner" class="shadow">
|
</div>
|
</div>
|
<!-- Add Pagination -->
|
<!-- <div class="swiper-pagination" />-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Swiper from 'swiper/swiper-bundle.js'
|
import 'swiper/swiper-bundle.css'
|
|
export default {
|
name: 'ArtSubject',
|
data() {
|
return {
|
activeIndex: 2, // 最上层图片索引
|
banners: [ // 需要显示的图片
|
require('@/assets/home/core_value/1.jpg'),
|
require('@/assets/home/core_value/2.jpg'),
|
require('@/assets/home/core_value/3.jpg'),
|
require('@/assets/home/core_value/4.jpg'),
|
require('@/assets/home/core_value/5.jpg'),
|
require('@/assets/home/core_value/6.jpg')
|
],
|
className: ['ele-0', 'ele-1', 'ele-2', 'ele-3', 'ele-4', 'ele-5']
|
}
|
},
|
mounted() {
|
new Swiper('.swiper-container-art', {
|
autoplay: {
|
delay: 1000
|
},
|
slidesPerView: 5,
|
spaceBetween: 45,
|
centeredSlides: true,
|
centeredSlidesBounds: true,
|
loop: true,
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
}
|
});
|
},
|
methods: {
|
switchover(index) {
|
let removeItemCount = index - this.activeIndex
|
if (!removeItemCount) {
|
// 如果在最优位置，则不动
|
return
|
}
|
|
if (removeItemCount < 0) {
|
removeItemCount = removeItemCount + 6
|
}
|
const className = Object.assign([], this.className)
|
let result = []
|
result = className.splice(6 - removeItemCount)
|
result = result.concat(className)
|
this.className = result
|
this.activeIndex = index
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/styles/variables.scss";
|
|
.art-subject {
|
width: 100%;
|
height: 33.5rem;
|
position: relative;
|
text-align: center;
|
|
.bg {
|
width: 100%;
|
height: 33.5rem;
|
background-image: url("../../../assets/home/art_subject/bg.png");
|
background-size: 100% 100%;
|
|
.title {
|
width: 523px;
|
height: 70px;
|
margin-top: 42px;
|
}
|
|
.swiper-container {
|
width: 1200px;
|
.swiper-wrapper {
|
height: 422px;
|
width: 1200px;
|
position: relative;
|
top: -50px;
|
//transform: translateX(0px) rotateY(-20px);
|
|
.swiper-slide {
|
|
width: 466px;
|
height: 422px;
|
//transition: transform 300ms, top 300ms, left 300ms, right 300ms, margin-top 300ms, margin-left 300ms, margin-right 300ms;
|
|
img {
|
width: 366px;
|
height: 188px;
|
}
|
|
.shadow {
|
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8))
|
}
|
}
|
|
.swiper-slide {
|
text-align: center;
|
font-size: 18px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
transition: 300ms;
|
transform: scale(0.8);
|
}
|
|
.swiper-slide-active, .swiper-slide-duplicate-active {
|
transform: scale(1);
|
z-index: 200;
|
}
|
|
.swiper-slide-next,.swiper-slide-prev{
|
transform: scale(0.9);
|
z-index:100;
|
}
|
}
|
}
|
|
}
|
|
}
|
</style>
|
