想要实现下面的样式

wxml 文件(swiper内容正常写):
<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 文件(距离、大小、颜色都可以设置):
.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;
}