<view style=" padding-top: 40rpx;position: relative;">
<view style="position: relative;z-index: 3;display: flex;justify-content: center;">
<swiper class="swiper" :circular="true" :autoplay="true" :interval="300000" style=" height: 360rpx;width: 690rpx;border-radius: 10rpx;overflow: hidden;box-shadow: 0px 2px 9px 0px rgba(102, 0, 0, 0.25);" @change="change">
<swiper-item v-for="(item, index) in banners" :key="index" >
<view style=" line-height: 0; text-align: center;height: 360rpx;width: 690rpx" >
<image :src="item.img" style="height: 360rpx;width: 690rpx;" mode="aspectFill" ></image>
</view>
</swiper-item>
</swiper>
</view>
<view style=" position: absolute;z-index: 5;bottom: 20rpx; left: 0;right: 0">
<view style="display: flex;justify-content: center;" >
<view style="
width: 12rpx;
height:12rpx;
background: #fff;
border-radius: 50%;
margin-right: 10rpx; " v-for="(item, index) in banners" :class="{active:index==sw_act}" ></view>
</view>
</view>
</view>
.active{
width: 24rpx !important;
background: #FB5B59 !important;
border-radius: 10rpx !important;
}