uniapp-swiper轮播图中间放大两边缩小

有个新需求,做一个轮播图,但是需要轮播到中间的时候,中间放大. 是采用uniapp开发的小程序 下面贴代码和效果图哈 效果图:

代码块:

<view class="con-part2-con">
	<swiper class="swiper-tall" :autoplay="true" :interval="3000" :duration="1000"
		circular='true' previous-margin='260rpx' current='0' @change="partSwiperChange">
		<swiper-item class="con-part2-con-container"
			v-for="(item,index) in partSwiperChangeList" :key="index">
			<view :class="['slide-image', partcurrentIndex === index?'active':'']"
				:style="{background:'url('+ item.pic +') center no-repeat',backgroundSize:'100%'}">
				<view class="part2-con-title">{{item.title}}</view>
				<view class="part2-con-img">
					<image :src="item.img" class="img"></image>
				</view>
				<image :src="item.txt1Img" class="part2-con-txt1-img"></image>
				<view class="part2-con-txt2">
					{{item.txt2}}
				</view>
			</view>
		</swiper-item>
	</swiper>
</view>

.con-part2-con {
	width: 100%;
	height: 390rpx;

	.swiper-tall {
		display: flex;
		align-items: center;
		height: 388rpx;

		.con-part2-con-container {
			display: flex;
			align-items: center;
			width: 50% !important;

			.slide-image {
				height: 305rpx;
				width: 223rpx;
				z-index: 1;
				margin: 0 auto;
				padding-top: 12rpx;

				.part2-con-title {
					text-align: center;
					font-size: 22rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #3596F1;
				}

				.part2-con-img {
					margin-top: 13rpx;
					width: 133rpx;
					height: 136rpx;
					margin: 0 auto;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.part2-con-txt1-img {
					display: block;
					margin: 10rpx auto 0rpx;
					height: 28rpx;
					width: 170rpx;
				}

				.part2-con-txt2 {
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC;
					font-weight: 500;
					color: #FFFFFF;
					width: 121rpx;
					margin: 20rpx auto 0rpx;
				}
			}

			.active {
				transform: scale(1.14);
				transition: all 0.2s ease-in 0s;
				z-index: 20;
			}
		}
	}

}

partSwiperChange(event) {
	this.partcurrentIndex = event.detail.current
},

partSwiperChangeList: [{
		pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
		title: '限量800份',
		img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize3.png',
		txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img3.png',
		txt2: 'xxxx'
	}, {
		pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
		title: '限量100份',
		img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize1.png',
		txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img2.png',
		txt2: 'xxxx'
	},
	{
		pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
		title: '限量500份',
		img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize2.png',
		txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img1.png',
		txt2: 'xxxx'
	},
],
partcurrentIndex: 0,