tnblog
首页
视频
资源
登录

修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。修改切换箭头的样式,位置,颜色等

728人阅读 2024/12/23 16:34 总访问:840246 评论:0 收藏:0 手机
分类: 前端

代码如下:

  1. <!--
  2. 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。
  3. 以及切换箭头的颜色加深
  4. -->
  5. <style scoped="scoped" lang="scss">
  6. /*
  7. 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果
  8. */
  9. ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
  10. width: 7px;
  11. height: 7px;
  12. background: #ebe6e6;
  13. border-radius: 50%;
  14. opacity: 1;
  15. }
  16. ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
  17. width: 7px;
  18. height: 7px;
  19. background: #1880ff;
  20. border-radius: 50%;
  21. opacity: 1;
  22. }
  23. /*
  24. 修改element plus Carousel 走马灯 切换箭头样式,位置,颜色等
  25. */
  26. //调整走马灯箭头-左箭头
  27. ::v-deep .el-carousel__arrow--left {
  28. // top: 160px;
  29. // left: -13px;
  30. // 微调一下位置
  31. margin-top: -33px;
  32. font-size: 15px;
  33. opacity: 0.8;
  34. background: #18a6ff;
  35. // color: #02e9ff;
  36. }
  37. //右箭头
  38. ::v-deep .el-carousel__arrow--right {
  39. // top: 70px;
  40. // right: -13px;
  41. // 微调一下位置
  42. margin-top: -33px;
  43. font-size: 15px;
  44. opacity: 0.8;
  45. background: #18a6ff;
  46. // color: #02e9ff;
  47. }
  48. </style>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

EasyUI弹窗批量修改combogrid下拉框的值

JS方法//点击弹出批量修改框 UpdateLot:function(){ varrow=$(&quot;#dg&quot;).datagrid(&quot;getChecked&quot;); if(...

如何修改重置MD5加密后的SQL用户密码

二次开发时,要加一个忘记密码的功能,后台写了修改密码的方法,数据库执行也修改成功,但是登录一直提示密码错误。之所以...

如何修改CSS中存在的element.style内联样式

改腾讯地图的时候调整了下样式,发现样式一直存在问题,修改style里面的值,一点用都没有,html中这个值还找不到是在哪里出...

修改了css后让浏览器从缓存中更新

当我们修改了css后,如果不做一些操作,浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...

修改电脑的鼠标指针样式

安装完系统之后呢,觉点电脑自带的鼠标指针样式特别丑,下面推荐更换电脑鼠标指针的方法1.鼠标指针的下载地址:http://www....

修改rabbitmq的连接端口

rabbitmq的默认连接端口是5672,如果要修改的话,可以通过配置文件修改当然一般情况下都会遇到坑默认配置文件地址:安装目...

使用jquery操作元素的css样式(获取、修改等等)

使用jquery操作元素的css样式(获取、修改等等) //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...

.net webapi Newtonsoft.Json返回需要的字段忽略某些字段修改字段名动态返回需要的字段等

有时候我们在写webapi的时候,不想把正常用的对象所有字段都返回,我们需要进行一些筛选,忽略某些字段,大概说一下几种方法...

mui框架-移动端跳转以及传值的简单方法(修改解决方法)

纠结了两天的MUI跳转的问题,终于解决了 ,现在分享给大家,希望大家有什么坑的解决也给我分享分享 哈哈,废话不多说,上代...

vs2019开发net core3.x修改视图页面后刷新浏览器看不到修改后的效果

一:安装依赖包Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet 包。Install-PackageMicrosoft.AspNetCore.Mvc.R...

shell脚本强制修改MySQL --root密码

话不多说直接拿去撸;PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/binexport PATHread -p &quot...

EF多种更新方法EF修改Entity Framework修改abp vnext ef 更新封装

[TOC] 方法1:直接执行更新的sql语句过于简单不说了 方法2:先查询在更新Users result = oapEntities.Users.Where(a =&gt...

msdn把英文修改成中文

非常简单,so easy只需要把地址栏的zh-cn修改成zh-cn即可

SVN 解决同时提交修改的项目冲突问题

首先为了方便理解,创建两个文件夹。aa 和 bb 里面放一个类cs两个都已经修改过了ab两个内容都不同a,b提交后出现的问题是:...

修改qadmin中vue重复绑定对象问题

qadmin中绑定的vue绑定的对象是app,这个是id=app的div是全局的,会影响所有的子标签,如果子标签在去使用了vue实例,就很...

EFCore动态修改数据库连接字符串

code:context.Database.GetDbConnection().ConnectionString=&quot;数据库连接字符串&quot;
这一生多幸运赶上过你.
排名
8
文章
227
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术