swiper 椭圆dot
2024-05-09

   <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;
    }