小程序 轮播图 有间距 选中当前变大

wxml部分

<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" previous-margin="60rpx" next-margin="60rpx" :autoplay="false" duration="500" circular="true"
					 @change="change">
					 <swiper-item v-for="(item,index) in cardList" :key="index">
					 	<view class="swiper-item center">
							<view :class="['bg',swiperIndex == index ? 'active':'']">
								<image src="../../static/img/img_bg_card2.png" class="bg-img"></image>
								<view class="card-info">
									<view class="card-bar row">
										<image src="../../static/img/img_vipcard2.png"></image>
										<text>{{item.type}}</text>
									</view>
									<view class="number-bar">
										<text class="title">卡号</text>
										<text class="number">{{item.number}}</text>
									</view>
								</view>
							</view>
					 	</view>
					 </swiper-item>
					</swiper>
				</view>
			</view>
			<view class="dot-main center">
				<view :class="['dot-item',current == index ? 'dot-active':'']" v-for="(item,index) in cardList" :key="index"></view>
			</view>
		</view>

js部分

data{
return{
				current:0,
				swiperIndex:0,
				cardList:[
					{
						type:"卡类型",
						number:"23557855563"
					},
					{
						type:"卡类型",
						number:"23557855563"
					},
					{
						type:"卡类型",
						number:"23557855563"
					}
				],
},
methods:{
			change(e) {
				this.current = e.detail.current;
				this.swiperIndex = e.detail.current;
			},
		}

wxss部分

.uni-padding-wrap {
		position: relative;
		padding:20px 0;
		background: #F4F5F7;
	}
	.swiper-item{
		margin:0 10px;
		height: 150px;
			
		.bg{
			width: 100%;
			height: 120px;		
			position: relative;
		}
		.bg-img{
			position: absolute;
				width: 100%;
				height: 100%;			
				top:0;
			}
		.active{
				 height: 150px;
			}
		.card-info{
				position: relative;
				z-index: 33;
				padding:30px;
				.card-bar{
					image{
						width: 25px;
						height: 20px;
						margin-right: 20px;
					}
					text{
						font-size: 17px;
						color:#FFFFFF;
					}
				}
				.number-bar{
					color:#FFFFFF;
					margin-top:20px;
					margin-left:30px;
					.title{
						font-size: 15px;
						margin-right: 10px;
					}
					.number{
						font-size: 23px;
						
					}
				}
			}
	}
.dot-main {
				width: 100%;
				height: 30px;
				// background: #646566;
				// position: absolute;
				flex-direction: row;
				// bottom: 0;
			
				.dot-item {
					width: 10px;
					height: 5px;
					background: rgba(0, 0, 0, 0.1);
					margin: 0 3px;
					border-radius: 3px;
				}
			
				.dot-active {
					width: 20px;
					background: #5CC78F;
				}
			}

效果图