uniapp轮播图中间放大，两边缩小动态绑定

业务需要一个轮播图，中间大两边小的那种

业务代码：

        <view class="environmentSwiper">
		    <swiper @change="partSwiperChange" :indicator-dots="false" circular='true' :interval="3000":duration="1000" previous-margin="180rpx" next-margin="180rpx" style="height: 500rpx;">
				<swiper-item v-for="(item,index) in videolists" :key="index">
					<view class="items">
						<view class="swiper-item":class="indexc === index?'active':''">
							<view class="">
								<view class="">
									<image :src="item.cover" mode="scaleToFill">
										<view class="" :class="indexc === index?'aac':'aad'"style="">
											<view class="qqc">
												#{{item.mark}}
											</view>
										</view>
									</image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
        </view>

.environmentSwiper {
		margin-top: 17rpx;
		// height: 400;
		.items {
			display: flex;padding-top: 30rpx;
			.swiper-item {
				width: 360rpx;
				border-radius: 20rpx;
				text-align: center;
				image {
					width: 80% !important;
					height: 400rpx !important;
					border-radius: 25rpx;
					position: relative;
					z-index: 2;
				}
			}
		}
	}

videolists: [],
indexc: 0,


// videolists是从后端获取的数组

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

动态绑定样式

.active {
	width: 110%;
	height: 430rpx;
	transform: scale(1.14);
	transition: all 0.2s ease-in 0s;
}

    .aac {
		color: #000;
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 80%;
		margin-left: 10%;
		z-index: 3;
		background-color: #fff;
		opacity: 0.8;
		border-radius: 0 0 25rpx 25rpx;
		height: 120rpx;

		.qqc {
			margin-top: 10rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
			text-align: left;
		}
	}

	.aad {
		color: #000;
		position: absolute;
		bottom: 60rpx;
		left: 0;
		width: 80%;
		margin-left: 10%;
		z-index: 3;
		background-color: #fff;
		opacity: 0.8;
		border-radius: 0 0 25rpx 25rpx;
		height: 100rpx;

		.qqc {
			margin-top: 10rpx;
			padding: 0 20rpx;
			font-size: 20rpx;
			text-align: left;
		}
	}