为了账号安全,请及时绑定邮箱和手机立即绑定

13、优化轮播图组件与vue深度处理器

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。
github:https://github.com/Ewall1106/mall

1、焦点问题

我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也有一个小坑。

问题所在

2、如何解决

(1)这里我们要用到vue的深度作用选择器,关于深度作用选择其详情看一看官网介绍:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

vue官网

(2)用开发者工具找到这个点的class类名

tools

(3)使用深度选择器把这个点变为白色

深度选择器

ps:less里面不能用 >>> 这样写。

3、ok,最后的浏览器的效果就是这样了,perfect

最终轮播图效果

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7084
获赞与收藏
266

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消