el-menu弹出菜单样式不生效

1. 使用 ruoyi 项目时出现的问题。

<template><el-menu:default-active="activeMenu":collapse="false":unique-opened="true"class="container":collapse-transition="true"mode="horizontal"><sidebar-itemv-for="(route, index) in sidebarRouters":key="route.path  + index":item="route":base-path="route.path"/></el-menu></template>

class=“container” 中的样式是这样的

 .container {box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);float: left;height:  100%;width: 200px;background-color: transparent !important;overflow: hidden;-webkit-transition: width .28s;transition: width 0.28s;-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);box-shadow: 2px 0 6px rgba(0,21,41,.35);.svg-icon {margin-right: 10px;margin-left: 3px;}// menu hover.el-submenu__title {font-size: 17px;color: white !important;&:hover {background-color: transparent !important;}}}

2. 问题描述

  • .svg-icon 这个 样式只对 一级菜单 “高速公路” 生效! 二级菜单和 其中的选项则不能生效!

在这里插入图片描述

2. 解决方法

  • html 文档中 是没有 弹出菜单项(出入口收费站 -> 总流量 。。。)的。
    在这里插入图片描述
  • 他们在 html 文档的末尾可以看到
    在这里插入图片描述
  • 所以 根据 弹出菜单出现的位置 设置样式就可以了!在 el-menu–popup这个样式的基础上作修改
.el-menu--popup {.el-submenu__title{background-color: #0B1423 !important;color: #FFF !important;}.el-menu-item{background-color: #0B1423 !important;color: #FFF !important;}.el-menu-item:hover {background-color: #FFF !important;color: #0B1423 !important;}.el-menu-item.is-active {background-color: #FFF !important;color: #0B1423 !important;}.svg-icon {margin-right: 10px;margin-left: 3px;}  
}

4. 总结

修改弹出框元素 不在 el-menu 样式中,我们 需要在 el-menu–popup 中修改样式!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为od 100问 持续分享6-入职体检

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年5月份开始&#xff0c;考的都是OD统一考试&#xff08;D卷&#xff09;&#xff0c;题库已经整…

学习opencv

初步学习可以参考&#xff1a; OpenCV学习之路&#xff08;附加资料分享&#xff09;_opencv资料-CSDN博客 【OpenCV】OpenCV常用函数合集【持续更新】_opencv函数手册-CSDN博客 整体框架可以参考&#xff1a; OpenCV学习指南&#xff1a;从零基础到全面掌握&#xff08;零…

Linux驱动开发-05APP和驱动的交互方式

一、传输数据 APP和驱动: copy_to_usercopy_from_user驱动和硬件: 各个子系统的函数通过ioremap映射寄存器地址后,直接访问寄存器二、APP使用驱动的四种方式 驱动程序:提供能力,不提供策略 非阻塞(查询)(应用程序访问底层驱动时(read、write时),驱动没有数据不等待,…

基于 CNN(二维卷积Conv2D)+LSTM 实现股票多变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

PHP 快速入门:构建动态网站的基础

引言 PHP&#xff0c;全称 Hypertext Preprocessor&#xff0c;是一种广泛用于创建动态网站的服务器端脚本语言。它易于学习&#xff0c;功能强大&#xff0c;能够与多种数据库系统&#xff08;如 MySQL&#xff09;集成&#xff0c;是 Web 开发者的常用工具之一。本文将带你快…

单机、集群、分布式服务器比较:

1. 单机服务器的瓶颈&#xff1a; 单机服务器&#xff1a;一台服务器独立运行一个工程所需的全部的业务模块 受限于服务器硬件资源&#xff0c;所承受用户并发量受限&#xff0c;32位linux操作系统最大并发量为两万任一模块的变动和修改&#xff0c;都会导致整个项目代码重新编…

轮播图变成响应式数据

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;Vue项目常用组件模板仓库&#x1f4d6;前言&#xff1a; &#x1f412;个人主页&#xff1a;信计2102罗铠威 &#x1f3c5;Vue项目常用组件模板仓库 &#x1f4d6;前言&#xff1a; 本篇博客主要记录轮…

Android 14 适配之 - 隐式/显示 Intent 和 广播适配

隐式 Intent 对隐式Intent 限制: 对 Android 14(API 级别 34)或更高版本为目标平台的应用,Android 会限制应用向内部应用组件发送隐式 intent: 1. 即隐式 intent 只能发送给导出的组件。在应用必须使用显式 intent 来发送组件,且被发送的组件是未被导出的属性配置。 …

解决ElasticJob项目重启ZooKeeper注册冲突以及zkCli删除目录

解决ElasticJob项目重启ZooKeeper注册冲突以及zkCli删除目录 背景 在现代化的分布式调度系统中&#xff0c;ElasticJob 是一个非常流行的选择。它利用 ZooKeeper 作为注册中心来管理任务分片。然而&#xff0c;有时在项目重启时&#xff0c;会遇到 ZooKeeper 注册冲突的问题&…

Elasticsearch 使用terms对long类型日期统计按月销售

索引mapping&#xff1a; {"properties" : {"_class" : {"type" : "text","fields" : {"keyword" : {"type" : "keyword","ignore_above" : 256}}},"createDate" : {&q…

PHP上门按摩专业版防东郊到家系统源码小程序

&#x1f486;‍♀️【尊享级体验】上门按摩专业版&#xff0c;告别东郊到家&#xff0c;解锁全新放松秘籍&#xff01;&#x1f3e0;✨ &#x1f525;【开篇安利&#xff0c;告别传统束缚】&#x1f525; 亲们&#xff0c;是不是厌倦了忙碌生活中的疲惫感&#xff1f;想要享…

从微软发iPhone,聊聊企业设备管理

今天讲个上周的旧闻&#xff0c;微软给员工免费发iPhone。其实上周就有很多朋友私信问我&#xff0c;在知乎上邀请我回答相关话题&#xff0c;今天就抽点时间和大家一起聊聊这事。我不想讨论太多新闻本身&#xff0c;而是更想聊聊事件的主要原因——微软企业设备管理&#xff0…

Azure MySQL资源优化策略

针对Azure MySQL资源的优化策略&#xff0c;可以从多个方面入手&#xff0c;以提升数据库的性能、稳定性和成本效益。以下是一些关键的优化策略&#xff1a; 1. 选择合适的服务器类型 灵活服务器与单一服务器&#xff1a;Azure Database for MySQL 提供灵活服务器和单一服务…

利用AI与数据分析优化招聘决策

一、引言 在竞争激烈的职场环境中&#xff0c;招聘是组织获取人才、实现战略目标的关键环节。然而&#xff0c;传统的招聘方式往往依赖人力资源部门的主观经验和直觉&#xff0c;难以准确预测招聘效果&#xff0c;评估招聘渠道的效率。随着人工智能&#xff08;AI&#xff09;…

CSPVD 智慧工地安全帽安全背心检测开发包

CSPVD SDK适用于为各种智慧工地应用增加安全防护穿戴合规的检测能力&#xff0c;能够有效检测未戴安全帽和未穿 安全背心的人员&#xff0c;提供Web API和原生API。官方下载&#xff1a;CSPVD工地安全防护检测 1、目录组织 CSPVD开发包的目录组织说明如下&#xff1a; xlpr_…

axios(ajax请求库)

json-server(搭建http服务) json-server用来快速搭建模拟的REST API的工具包 使用json-server 下载&#xff1a;npm install -g json-server创建数据库json文件&#xff1a;db.json开启服务&#xff1a;json-srver --watch db.json axios的基本使用 <!doctype html>…

linux进程——状态——linux与一般操作系统的状态

前言&#xff1a;博主在之前的文章已经讲解了PCB里面的pid——主要讲解了父子进程PID&#xff0c; 以及fork的相关内容。 本节进入PCB的下一个成员——状态&#xff0c; 状态是用来表示一个进程在内存中的状态的&#xff0c; 进程在内存中肯能处于各种状态&#xff0c; 比如运行…

DP 203 学习笔记

考试内容总览 Learning Objects: 工具 Designing and implementing data storage 1. Storage Azure Synapse Analytics Azure Databricks Azure Data Lake Storage Gen2(ADLS2&#xff0c;可代替Hadoop Distributed File System也就是HDFS) 2. Shard Partition data store …

云原生系列 - Jenkins

Jenkins Jenkins&#xff0c;原名 Hudson&#xff0c;2011 年改为现在的名字。它是一个开源的实现持续集成的软件工具。 官方网站&#xff08;英文&#xff09;&#xff1a;https://www.jenkins.io/ 官方网站&#xff08;中文&#xff09;&#xff1a;https://www.jenkins.io…

【Linux】汇总TCP网络连接状态命令

输入命令&#xff1a; netstat -na | awk /^tcp/ {S[$NF]} END {for(a in S) print a, S[a]} 显示&#xff1a; 让我们逐步解析这个命令&#xff1a; netstat -na: netstat 是一个用于显示网络连接、路由表、接口统计等信息的命令。 -n 选项表示输出地址和端口以数字格式显示…