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

news2024/11/14 13:54:12

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

<template>
    <el-menu
        :default-active="activeMenu"
        :collapse="false"
        :unique-opened="true"
        class="container"
        :collapse-transition="true"
        mode="horizontal"
    >
        <sidebar-item
            v-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.coloradmin.cn/o/1936377.html

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

相关文章

CH01_WPF概述

第1章&#xff1a;WPF概述 本章目标 了解Windows图形演化了解WPF高级API了解分辨率无关性概念了解WPF体系结构了解WPF 4.5 WPF概述 ​ 欢迎使用 Windows Presentation Foundation (WPF) 桌面指南&#xff0c;这是一个与分辨率无关的 UI 框架&#xff0c;使用基于矢量的呈现引…

核函数支持向量机(Kernel SVM)

核函数支持向量机&#xff08;Kernel SVM&#xff09;是一种非常强大的分类器&#xff0c;能够在非线性数据集上实现良好的分类效果。以下是关于核函数支持向量机的详细数学模型理论知识推导、实施步骤与参数解读&#xff0c;以及两个多维数据实例&#xff08;一个未优化模型&a…

【iOS】—— isMemberOfClass isKindOfClass以及源码

【iOS】—— isMemberOfClass & isKindOfClass以及源码 isa指针示例源码解析&#xff1a;isKindOfClass&#xff1a;源码解析&#xff08;实例方法和类方法&#xff09;isMemberOfClass&#xff1a;源码解析&#xff08;实例方法和类方法&#xff09;源码分析总结&#xff…

MF173:将多个工作表转换成PDF文件

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

【C++】16. set 和 map

在之前的博客中&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 我们这篇博客的内容是关联式容器&#xff…

负重3Kg垂起固定翼无人机技术详解

一、基本参数 负重3Kg垂起固定翼无人机是一款具备强大负载能力和长航时特性的无人机。其基本参数如下&#xff1a; - 最大负载&#xff1a;3Kg - 最大续航时间&#xff1a;203分钟&#xff08;示例数据&#xff0c;实际续航时间可能根据任务负载、环境条件等因素有所不同&…

敲详细的springframework-amqp-rabbit源码解析

看源码时将RabbitMQ的springframework-amqp-rabbit和spring-rabbit的一套区分开&#xff0c;springboot是基于RabbitMQ的Java客户端建立了简便易用的框架。 springboot的框架下相对更多地使用消费者Consumer和监听器Listener的概念&#xff0c;这两个概念不注意区分容易混淆。…

【electron6】浏览器实时播放PCM数据

pcm介绍&#xff1a;PCM&#xff08;Puls Code Modulation&#xff09;全称脉码调制录音&#xff0c;PCM录音就是将声音的模拟信号表示成0,1标识的数字信号&#xff0c;未经任何编码和压缩处理&#xff0c;所以可以认为PCM是未经压缩的音频原始格式。PCM格式文件中不包含头部信…

FPGA文档阅读

FPGA的文档没有相应的基础还真不容易看懂&#xff0c;下面是B站上对FPGA文档的解读(本文非对文档解读&#xff0c;只是为个人记录第三期&#xff1a;CycloneIV E最小系统板设计&#xff08;一&#xff09;从Datasheet上获取FPGA的基本参数_哔哩哔哩_bilibili 电源部份 核心电…

elasticsearch, kibana, 6.8.18 版本下的创建索引,指定timestamp,java CRUD,maven版本等

ELK 这一套的版本更迭很快&#xff0c; 而且es常有不兼容的东西出现&#xff0c; 经常是搜一篇文章&#xff0c;看似能用&#xff0c;拿到我这边就不能用了。 很是烦恼。 我这边的ELK版本目前是 6.8.18&#xff0c;这次的操作记录一下。 &#xff08;涉密内容略有删改&#xf…

SQL语句——DDL数据定义语言

1.sql语言不区分大小写 2._&#xff08;下划线&#xff09;进行名字的分割&#xff0c;不适用驼峰命名 3.; 语句sql结尾处加一个;来表示结束 4.一般关键词建议用大写 5.所有名称不能用中文 1.创建数据库 CREATE DATABASE [IF NOT EXISTS] 库名 -- 库 #创建库 #create databa…

计算机网络序章

计算机网络学习什么&#xff1f; 下列举例由用户使用计算机角度去理解 首先&#xff0c;计算机网络是通过路由等方式去获取我们希望的数据用户可以在APP中去进行方便的操作去获取数据。每个应用都有自己的端口去确定每次来的数据是否是自己需要的数据应该应该传到哪里&#x…

COD论文笔记 Deep Gradient Learning for Efficient Camouflaged 2022

动机 这篇论文的动机在于解决伪装目标检测(COD)中的一个关键问题&#xff1a;在复杂背景下&#xff0c;伪装目标与背景的边界模糊&#xff0c;使得检测变得极其困难。现有的方法&#xff0c;如基于边界或不确定性的模型&#xff0c;通常仅响应于伪装目标的稀疏边缘&#xff0c…

oceanbase架构、功能模块、数据存储、特性、sql流转层等概念详解

一、架构图 OceanBase 数据库采用无共享&#xff08;Shared-Nothing&#xff09;分布式集群架构&#xff0c;各个节点之间完全对等&#xff0c;每个节点都有自己的 SQL 引擎、存储引擎、事务引擎&#xff0c;运行在普通 PC 服务器组成的集群之上&#xff0c;具备高可扩展性、高…

澎湃算力 玩转AI 华为昇腾AI开发板——香橙派OriengePi AiPro边缘计算案例评测

澎湃算力 玩转AI 华为昇腾AI开发板 香橙派OriengePi AiPro 边缘计算案例评测 人工智能&#xff08;AI&#xff09;技术正以前所未有的速度改变着我们的生活、工作乃至整个社会的面貌。作为推动这一变革的关键力量&#xff0c;边缘计算与AI技术的深度融合正成为行业发展的新趋势…

秒懂C++之类与对象(下)

目录 一.static成员 测试&#xff1a; 二.explicit关键字 三.友元&#xff08;少用&#xff09; 友元函数&#xff1a; 友元类&#xff1a; 四.内部类&#xff08;少用&#xff09; 五.&#xff08;扩展&#xff09;编译器的优化 一.static成员 测试&#xff1a; 实现一…

【分布式事务】怎么解决分布式场景下数据一致性问题

分布式事务的由来 拿充值订单举个栗子吧&#xff0c;假设&#xff1a;原本订单模块和账户模块是放在一起的&#xff0c;现在需要做服务拆分&#xff0c;拆分成订单服务&#xff0c;账户余额服务。原本收到充值回调后&#xff0c;可以将修改订单状态和扣减余额放在一个mysql事务…

邮件安全篇:邮件传输加密(SSL/TLS or STATRTTLS)

1. 前言 使用过邮件客户端的同学一定见过下面这张图。这是客户端账号配置界面&#xff0c;里面有SSL、STARTTLS选项。刚接触邮件客户端的同学肯定会有这些疑问&#xff1a;什么是SSL&#xff1f;什么是STARTTLS&#xff1f;两者有什么区别&#xff1f;具体该如何选择呢&#x…

首批通过 | 百度通过中国信通院H5端人脸识别安全能力评估工作

2024年5月&#xff0c;中国信息通信研究院人工智能研究所依托中国人工智能产业发展联盟安全治理委员会&#xff08;AIIA&#xff09;、“可信人脸应用守护计划”及多家企业代表共同开展《H5端人脸识别线上身份认证安全能力要求及评估方法》的编制工作&#xff0c;并基于该方法开…

创新驱动的力量:探索Web3在技术发展中的作用

随着科技的不断进步和创新&#xff0c;Web3作为新一代互联网技术范式&#xff0c;正在以其去中心化、安全、透明和可编程的特性&#xff0c;深刻影响着全球技术发展的方向和速度。本文将深入探讨Web3技术的核心概念、关键特征以及其在技术创新中的重要作用&#xff0c;展示其在…