122 lines
1.9 KiB
Vue
122 lines
1.9 KiB
Vue
<template>
|
|
<swiper
|
|
class="image-container"
|
|
previous-margin="145rpx"
|
|
next-margin="145rpx"
|
|
circular
|
|
autoplay
|
|
:interval="3000"
|
|
indicatorDots="true"
|
|
indicator-color="#ddd"
|
|
indicator-active-color="#777"
|
|
:style="{
|
|
'background-image': `url(${bgImg})`
|
|
}"
|
|
@change="swiperChange"
|
|
>
|
|
<swiper-item
|
|
v-for="(item, index) in imgList"
|
|
:key="item[urlKey]"
|
|
:class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
|
|
>
|
|
<image
|
|
:src="item[urlKey]"
|
|
:class="currentIndex == index ? 'item-img' : 'item-img-side'"
|
|
:style="dontFirstAnimation ? 'animation: none;' : ''"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
@click="clickImg(item)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
imgList: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
urlKey: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
bgImg: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
dontFirstAnimation: true
|
|
}
|
|
},
|
|
methods: {
|
|
swiperChange(e) {
|
|
this.dontFirstAnimation = false
|
|
this.currentIndex = e.detail.current
|
|
},
|
|
clickImg(item) {
|
|
this.$emit('selected', item, this.currentIndex)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.image-container {
|
|
width: 750rpx;
|
|
height: 840rpx;
|
|
background-size: 750rpx 840rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 430rpx;
|
|
height: 700rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.swiper-item {
|
|
width: 430rpx;
|
|
height: 700rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.item-img-side {
|
|
width: 344rpx;
|
|
height: 560rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.swiper-item-side {
|
|
width: 430rpx;
|
|
height: 560rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
@keyframes to-mini
|
|
{
|
|
from {
|
|
height: 700rpx;
|
|
}
|
|
to {
|
|
height: 560rpx;
|
|
}
|
|
}
|
|
@keyframes to-big
|
|
{
|
|
from {
|
|
height: 560rpx;
|
|
}
|
|
to {
|
|
height: 700rpx;
|
|
}
|
|
}
|
|
</style>
|