前言：上篇讲了vue里面轮播图组件的使用，还有有个小问题可以优化一下。
1、焦点问题
我们看到这里的焦点会有一个默认的颜色，改变这个焦点颜色也有一个小坑。
image
2、如何解决
（1）这里我们要用到vue的深度作用选择器，关于深度作用选择其详情看一看官网介绍：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
image
（2）用开发者工具找到这个点的class类名
image
（3）使用深度选择器把这个点变为白色 carousel.vue
<style lang="less" scoped>
.carousel {
/deep/ .swiper-pagination-bullet-active {
background: #fff;
}
.myswiper_img {
width: 100%;
height: 4rem;
}
}
</style>
ps：less里面不能用 >>> 这样写。
3、ok，最后的浏览器的效果就是这样了，perfect
image
参考学习
https://github.com/surmon-china/vue-awesome-swiper
http://www.swiper.com.cn/api/index2.html
https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
