想要實(shí)現(xiàn)下面的樣式

wxml? 文件（swiper內(nèi)容正常寫）：

<swiper?class="swiper"?style="height:260rpx"??indicator-dots="{{true}}"?easing-function="{{linear}}"?indicator-color="#fff"?indicator-active-color="#1ec2a1"?autoplay="{{true}}"?interval="2000"?circular="true">

??????<swiper-item?wx:for="{{goodsImg}}"?wx:key="item"?style="overflow:hidden;border-radius:?10rpx;height:260rpx;">

??????<image?src="{{item.imageUrl}}"?class="banner"></image>

??????</swiper-item>

????</swiper>

wxss 文件（距離、大小、顏色都可以設(shè)置）：

.swiper?.wx-swiper-dots.wx-swiper-dots-horizontal?{

??margin-bottom:?6rpx;

??margin-left:?200rpx;

}

.swiper?.wx-swiper-dot?{

??width:?40rpx;

??display:?inline-flex;

??height:?5rpx;

??margin-left:?10rpx;

??justify-content:?space-between;

??border-radius:?3rpx;

}

.swiper?.wx-swiper-dot::before?{

??content:?'';

??flex-grow:?1;

??background:?#ccc8c8;

}

.swiper?.wx-swiper-dot-active::before?{

??background:?#3874f6;

}