如何修改mint-ui组件默认 轮播图小圆点颜色

最近移动端项目有用mint-ui框架的轮播图，但由于项目需求，我要更改mint-ui轮播图的小圆点的默认当前显示图片的颜色样式，因为默认提供的小圆点颜色在页面显示效果差，不易识别，而官方文档并没有提供解决方法。找了很多方法，最终使用 /deep/ 方法解决，以下方法供参考：

1、引入框架默认轮播图效果如下：

image.png

2、首先，你需要在浏览器中选中小圆点，这时会显示出小圆点的css样式；然后你给轮播图外层的div 绑定一个class；

image.png

3、在css样式中使用 /deep/ 方法改变默认小圆点白色；

//更改轮播图原始小圆点颜色
  .goods_swipe /deep/ .mint-swipe-indicator.is-active{
    background: #58B2DC;
  }

4、这时默认的小圆点颜色已被改变，但是改变后的颜色并不是很明显，查找后发现是默认样式设置了透明度，这时我们又需要更改默认的透明度；

image.png

5、默认设置的透明度；

image.png

6、使用同样的方法来增加透明度，提高小圆点颜色的识别度，我这里是把默认的样式全部复制过来了，因为是透明度的问题，我就只修改了透明度，从原来的 0.2 改到 0.9，然后把默认未选中时显示的灰色颜色加深了；

//更改轮播图原选中的小圆点颜色
  .solve_swipe /deep/ .mint-swipe-indicator{
    width: 8px;height: 8px;display: inline-block;border-radius: 100%;
    background: gray;opacity: 0.9;margin: 0 3px;
  }

7、这就是更改默认后的效果了；

image.png

另外，>>>穿透法也可以实现此功能，只要把 /deep/ 处改为 >>>穿透法就可以，其它地方不变，大家也可以自己尝试下。

 //更改轮播图原始小圆点颜色
  .goods_swipe >>> .mint-swipe-indicator.is-active{
    background: #58B2DC;
  }

其时，一般默认的组件的样式都是可以修改的，只要在封装后的样式上找并一行一行的点击看效果，最后总会实现你想要的效果的~~