<template><view class="container"><swiper class="swiper":circular="true":autoplay="true":interval="3000":duration="500":previous-margin="'160rpx'":next-margin="'160rpx'"@change="swiperChange"@transition="swiperTransition"@animationfinish="swiperAnimationfinish"><swiper-item v-for="(item, index) in imageList" :key="index"><view class="card-wrapper"><view class="card-container" :class="{'active': current === index, 'prev': isPrev(index), 'next': isNext(index)}"><image :src="item.url" mode="aspectFill" class="card-image" lazy-load :style="{ transform: `translateZ(0)` }"/><!-- <view class="text-overlay" v-if="current === index"><text class="quote-text">"感谢领导"</text></view> --></view></view></swiper-item></swiper></view>
</template><style>
.container {padding: 20rpx 0;
}.swiper {height: 280rpx;
}.card-wrapper {perspective: 800rpx;height: 100%;
}.card-container {height: 200rpx;margin: 20rpx 0rpx;position: relative;transition: transform 0.3s ease;/* border-radius: 20rpx; */overflow: hidden;transform-style: preserve-3d;transform: scale(0.9) rotateY(0deg);opacity: 0.6;will-change: transform;-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;
}.active {transform: scale(1) rotateY(0deg) translateZ(50rpx);opacity: 1;box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
}.prev {transform: scale(0.9) rotateY(25deg) translateX(30rpx);
}.next {transform: scale(0.9) rotateY(-25deg) translateX(-30rpx);
}.card-image {width: 100%;height: 100%;/* border-radius: 20rpx; */
}.text-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(to right, rgba(255, 228, 196, 0.8), rgba(255, 218, 185, 0.8));display: flex;align-items: center;justify-content: center;backface-visibility: hidden;
}.quote-text {color: #333;font-size: 32rpx;font-weight: 500;
}
</style><script>
export default {data() {return {current: 0,isAnimating: false,imageList: [{ url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },{ url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },{ url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },{ url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },]}},methods: {swiperChange(e) {this.current = e.detail.current;},isPrev(index) {if (this.current === 0 && index === this.imageList.length - 1) return true;return index === this.current - 1;},isNext(index) {if (this.current === this.imageList.length - 1 && index === 0) return true;return index === this.current + 1;},swiperTransition() {this.isAnimating = true;},swiperAnimationfinish() {this.isAnimating = false;}}
}
</script>