圆点样式源代码使用border-radius:100%实现,可以修改为如4px之类的改成圆角矩形;
如图的样式css:
<style >
.swiper-plugs .swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1);
width: 33px;
height: 6px;
}
.swiper-plugs .swiper-pagination-bullet {
background-color: rgba(255, 255, 255, 0.6);
height: 6px;
border-radius: 2px;
}
</style>
.swiper-plugs是该vue文件包含swiper的div容器
需要使用全局的样式,style不能使用scoped,使用div容器的类进行选择防止影响其他vue文件