vue修改element面包屑样式

vue修改element面包屑样式

element面包屑默认后边的是浅颜色的,前边的是深色的,
在这里插入图片描述
现在UI设计图要修改成前面是浅色的,后面是深色的
在这里插入图片描述
如果直接修改样式会无法区分一级或者二级路由,用一下方法可以实现:

<el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="{ path: item.path }"
        :class="index==0&&breadList.length>1?'first_route':'two_route'"
      >
        {{ (item.meta.title != undefined) && item.path !== '/home' ? item.meta.title : null }}
      </el-breadcrumb-item>
    </el-breadcrumb>

这样就会给一级路由加上了first_route类名,给二级路由加上了two_route的类名,然后定义样式:

我用的是scss

.el-bread-two{
  ::v-deep .el-breadcrumb__inner{
    font-weight: 500 !important;
    color: #21212B !important;
  }
}
.el-bread-one{
  ::v-deep .el-breadcrumb__inner{
    font-weight: 400;
    color: #797979;
  }
  ::v-deep .el-breadcrumb__inner.is-link:hover{
    color: #797979;
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/344510.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

装完32G内存条 电脑飞跃提升!

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 大家…

Unity - 角色控制

Test_05 角色控制 创建一个3D对象作为角色&#xff0c;添加 “CharacterController” 组件来控制角色移动&#xff0c;绑定脚本"PlayerControl"。 PlayerControl public class PlayerControl : MonoBehaviour {private CharacterController player;void Start(){p…

Power Apps 向Power Automate传一个数组参数

Power Apps传Power Automate数组参数 背景Power Apps传参方法画布开发我们现在power apps中设置一个集合**ArrCollect**准备一个按钮 Power Automate接收总结画布流 背景 我们通常会从Power Apps界面传递参数给Flow中&#xff0c;但是很多时候仅仅是一个字符串类型的已经不适用…

Qt/Qt Creator窗体界面集成自定义MyRibbon工具栏Qt纯代码实现-升级版2-非第三方Ribbon工具

程序示例精选 Qt/Qt Creator窗体界面集成自定义MyRibbon工具栏Qt纯代码实现-升级版2-非第三方Ribbon工具 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Qt/Qt Creator窗体界面集成自定义M…

github配置ssh的时候 ssh: connect to host github.com port 22: Connection timed out

今天配置ssh的时候最后一步验证是否能够连接成功的时候&#xff0c;出现了这个报错 查看了一下 .ssh 文件夹&#xff0c;发现只有两个文件 但是看到网上别人的都是有一个config文件&#xff0c;所以我们也要创建一个config文件&#xff08;这个文件是没有文件类型的&#xff0…

大模型-提示词工程

提示原则 1.编写明确具体的指令 策略一&#xff1a;使用分隔符清晰地表示输入的不同部分&#xff0c;分隔符可以是&#xff1a;&#xff0c;“”&#xff0c;<>&#xff0c; 你可以使用任何明显的标点符号将特定的文本部分与提示的其余部分分开。这可以是任何可以使模型…

Navicat 技术干货 | 保护关系数据库安全的措施

在当今的数字信息时代&#xff0c;数据是组织的生命线。因此&#xff0c;保护数据安全从未如此重要。为了防止敏感数据受到未经授权的访问、泄露或其他的安全威胁&#xff0c;实施强有力的安全措施非常有必要。本文将为大家列举一些保护关系数据库安全的措施建议。 访问控制 数…

微信小程序(十三)生命周期-更新应用提醒

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.onLaunch用法 2.onShow用法 3.onHide用法 4.应用更新API的调用模板 源码&#xff1a; App({//小程序初始化时触发&#xff0c;全局只触发一次onLaunch(option) {//可以获取场景值和启动参数&#xff0c;eg.optioncons…

golang通过go-git下载gitlab源码

1 申请令牌 方法1&#xff1a;具体项目下申请&#xff1a; 方法2&#xff1a;全局申请 2 获取token 3 下载代码 package mainimport ("fmt""os""github.com/go-git/go-git/v5" )func main() {_, err : git.PlainClone("/tmp/foo",…

数据结构和算法笔记4:排序算法-归并排序

归并排序算法完全遵循分治模式。直观上其操作如下&#xff1a; 分解&#xff1a;分解待排序的n个元素的序列成各具n/2个元素的两个子序列。解决&#xff1a;使用归并排序递归地排序两个子序列。合并&#xff1a;合并两个已排序的子序列以产生已排序的答案。 我们直接来看例子…

消失的她,GERBER失踪之谜

高速先生成员--王辉东 那天的雪好大&#xff0c;深深的脚印在在青春里安了家。 林如烟正倚在窗前&#xff0c;看着窗外的雪花飘飘撒撒。 她好想这一刻就去雪中奔跑潇洒。 赵理工偷偷看着林如烟的背影痴痴傻傻。 一切都显得那么静谥和诗意。 突然大师兄喊一句&#xff1a;“…

Transformer and Pretrain Language Models3-1

content transformer attention mechanism transformer structure​​​​​​​ pretrained language models language modeling pre-trained langue models(PLMs&#xff09; fine-tuning approaches PLMs after BERT applications of masked LM frontiers of PLMs …

Linux系统常用命令行指令

Linux系统是一种常用于开源项目开发的生产环境&#xff0c;因其免费、开源、安全、稳定的特点被广泛应用于手机、平板电脑、路由器、电视和电子游戏机等嵌入式系统中&#xff0c;能够更加简便地让用户知道系统是怎样工作的。前几日我安装好了Red Hat Enterprise Linux 9.0&…

秒级弹性!探索弹性调度与虚拟节点如何迅速响应瞬时算力需求?

作者&#xff1a;吴昆 前言 在前面的文章《弹性调度助力企业灵活应对业务变化&#xff0c;高效管理云上资源》中&#xff0c;我们介绍了阿里云容器服务 ACK 弹性调度为了帮助客户解决在使用云上弹性资源时&#xff0c;面对的“难以差异化控制业务资源使用量&#xff0c;缩容时…

边缘计算及相关产品历史发展

边缘计算及相关产品历史发展 背景边缘计算的历史CDN&#xff08;Content Delivery Network&#xff09;Cloudlet雾计算MEC&#xff08;Multi-Access Edge Computing&#xff0c;MEC&#xff09; 边缘计算的现状云计算厂商硬件厂商软件基金会 背景 最近&#xff0c;公司部分业务…

MySQL45道练习题

作业需要数据表SQL语句已给 1. 查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数 select * from Student RIGHT JOIN (select t1.SId, class1, class2 from(select SId, score as class1 from sc where sc.CId 01)as t1, (select SId, score as …

『踩坑记录』Ubuntu安装python3-pip报错Package ‘python3-pip‘ has no installation candidate

文章目录 问题描述解决方法&#xff1a;添加apt的Universe库完 问题描述 sudo apt update;sudo aptupgrade后安装python3-pip仍然失败&#xff0c;报错&#xff1a; Package python3-pip is not available, but is referred to by another package. This may mean that the p…

环形链表的约瑟夫问题

前言 大家好呀&#xff0c;我是Humble&#xff0c;今天要分享的内容是环形链表的约瑟夫问题 说到链表&#xff0c;约瑟夫问题&#xff08;约瑟夫环&#xff09;绝对是一个经典的算法题&#xff0c;下面就让我们一起看一下吧~ 正文开始前&#xff0c;我们先看一个小小的故事&a…

视频监控平台EasyCVR增加fMP4流媒体视频格式及其应用场景介绍

近期我们在视频监控管理平台EasyCVR系统中新增了HTTP-FMP4播放协议&#xff0c;今天我们就来聊聊该协议的特点和应用。 fMP4&#xff08;Fragmented MPEG-4&#xff09;是基于MPEG-4 Part 12的流媒体格式&#xff0c;是流媒体的一项重要技术&#xff0c;因为它能通过互联网传送…

如何正确使用RC滤波网络

众所周知&#xff0c;最有效的滤波电路应靠近噪声源放置&#xff0c;滤波的作用是对噪声电流进行及时有效地阻止和转移&#xff0c;实际设计中&#xff0c;工程师经常使用高的串联阻抗&#xff08;电阻、电感和铁氧体&#xff09;阻止电流&#xff0c;并使用低的并联阻抗&#…
最新文章