当前位置: 首页 > news >正文

覆盖element-ui的el-menu样式记录:背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

在这里插入图片描述

页面中修改el-menu

设置background-color="transparent",menu菜单下的背景图片则能正常显示了

 <el-menuclass="el-menu-demo"mode="horizontal"background-color="transparent"><el-menu-item index="1"><img :src="require('~@assets/imgs/menu_logo_1.png')" />菜单1</el-menu-item><el-submenu index="2"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_2.png')" />菜单2</template><el-menu-item index="2-1">子菜单1</el-menu-item><el-menu-item index="2-2">子菜单2</el-menu-item><el-menu-item index="2-3">子菜单3</el-menu-item></el-submenu><el-menu-item index="3"><img :src="require('~@assets/imgs/menu_logo_3.png')" />菜单3</el-menu-item><el-submenu index="4"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_4.png')" />菜单4</template><el-menu-item index="3-1">子菜单</el-menu-item></el-submenu><el-menu-item index="5"><img :src="require('~@assets/imgs/menu_logo_5.png')" />菜单5</el-menu-item><el-submenu index="6"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_6.png')" />菜单6</template><el-menu-item index="6-1"></el-menu-item><el-menu-item index="6-2"></el-menu-item><el-menu-item index="6-3"></el-menu-item></el-submenu><el-menu-item index="7"><img :src="require('~@assets/imgs/menu_logo_7.png')" />菜单7</el-menu-item></el-menu>

页面中加了scoped,使用穿透样式修改el-menu样式

/* menu子菜单区域 */
.el-menu--popup {/* 菜单偏上一点 */margin-top: 18px !important;border-radius: 6px !important;background-image: linear-gradient(0deg, #eafefc 0%, #a8e9e2 100%);padding: 10px 0px !important;.el-menu-item {color: #333333 !important;background-color: transparent !important;margin: 5px 10px;border-radius: 4px;transition-duration: 0s;}.el-menu-item:hover {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}.el-menu-item.is-active {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}
}/* menu子菜单区域添加箭头 */
.el-menu--popup.el-menu--popup-bottom-start::before {content: '';position: absolute;top: -15px; /* 控制箭头的位置 */left: 50%;transform: translateX(-50%);border-width: 8px;border-style: solid;border-color: transparent transparent #a7e9e1 transparent;
}

相关文章:

覆盖element-ui的el-menu样式记录:背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

页面中修改el-menu 设置background-color"transparent"&#xff0c;menu菜单下的背景图片则能正常显示了 <el-menuclass"el-menu-demo"mode"horizontal"background-color"transparent"><el-menu-item index"1">…...

接口自动化测试从入门到高级实战!

接口测试背景和必要性 接口测试是测试系统组件间接口&#xff08;API&#xff09;的一种测试&#xff0c;主要用于检测内部与外部系统、内部子系统之间的交互质量&#xff0c;其测试重点是检查数据交换、传递的准确性&#xff0c;控制和交互管理过程&#xff0c;以及系统间相互…...

【STC8A8K64D4开发板】第2-14讲:I2C总线的应用

第2-14讲&#xff1a;I2C总线的应用 学习目的了解I2C总线的特点。掌握I2C地址的定义&#xff0c;对I2C地址要有深刻的了解&#xff0c;之后再看到I2C接口设备中描述的7位地址或8位地址&#xff0c;不会再有疑惑。掌握STC8A8K64D4系列单片机I2C的特点以及编程方法。掌握通过I2C读…...

前端框架的发展史

随着互联网技术的飞速发展和用户需求的日益增长&#xff0c;前端开发作为构建用户界面和交互体验的关键环节&#xff0c;经历了从简单到复杂、从静态到动态的演变过程。在这个过程中&#xff0c;前端框架作为提升开发效率和代码质量的重要工具&#xff0c;也经历了多个阶段的发…...

Unity Hololens2开发|(二)MRTK3导入和配置

目录 1.从 MRTK3 模板项目开始2.从新项目开始2.1 创建新的 Unity 项目2.2 使用混合现实功能工具导入所需的依赖项和 MRTK3 包2.3 打开 Unity 项目2.4 在导入后配置 MRTK 配置文件2.5 配置 OpenXR 相关设置2.6 使用模板项目资源1.从 MRTK3 模板项目开始 获取并试用 MRTK3 最简单…...

VMware下载与安装

准备一个Linux的系统&#xff0c;成本最低的方式就是在本地安装一台虚拟机&#xff0c;VMware是业界最好用的虚拟机软件之一 官网&#xff1a;https://www.vmware.com/ 下载页面&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html …...

9、Linux-安装JDK、Tomcat和MySql

目录 一、安装JDK 1、传输JDK文件&#xff08;.tar.gz&#xff09; 2、解压 3、备份环境变量 4、配置环境变量 5、重新加载环境变量 6、验证&#xff08;java -version&#xff09; 二、安装Tomcat 1、传输文件&#xff0c;解压到/usr/local 2、进入Tomcat的bin目录 …...

深度学习图像算法工程师--面试准备(2)

深度学习面试准备 深度学习图像算法工程师–面试准备&#xff08;1&#xff09; 深度学习图像算法工程师–面试准备&#xff08;2&#xff09; 文章目录 深度学习面试准备前言一、Batch Normalization(批归一化)1.1 具体步骤1.2 BN一般用在网络的哪个部分 二、Layer Normaliza…...

解锁安卓开发利器:深度探析ADB【安卓开发】

引言 在安卓开发与维护过程中&#xff0c;我们经常会遇到一些限制&#xff0c;比如无法直接访问某些系统功能&#xff0c;或者在某些定制系统中 受到限制 。为了解决这些问题&#xff0c;我们需要一种有效的工具来管理和调试安卓设备&#xff0c;而这时候ADB&#xff08;Andro…...

【Python】FTP库的介绍及用法

目录 1、应用场景 2、FTP-标准库 1、应用场景 FTP库&#xff08;ftplib&#xff09;在Python中的应用场景主要包括&#xff1a; 文件上传和下载&#xff1a; 通过FTP服务器&#xff0c;可以提供用于上传和下载文件的功能。这在需要在服务器和客户端之间共享数据的情况下非常…...

C++——string模拟实现

前言&#xff1a;上篇文章我们对string类及其常用的接口方法的使用进行了分享&#xff0c;这篇文章将着重进行对这些常用的接口方法的内部细节进行分享和模拟实现。 目录 一.基础框架 二.遍历字符串 1.[]运算符重载 2.迭代器 3.范围for 三.常用方法 1.增加 2.删除 3.调…...

从零开始:神经网络(2)——MP模型

声明&#xff1a;本文章是根据网上资料&#xff0c;加上自己整理和理解而成&#xff0c;仅为记录自己学习的点点滴滴。可能有错误&#xff0c;欢迎大家指正。 神经元相关知识&#xff0c;详见从零开始&#xff1a;神经网络——神经元和梯度下降-CSDN博客 1、什么是M-P 模型 人…...

Python调用edge-tts实现在线文字转语音

edge-tts是一个 Python 模块&#xff0c;允许通过Python代码或命令的方式使用 Microsoft Edge 的在线文本转语音服务。 项目源码 GitHub - rany2/edge-tts: Use Microsoft Edges online text-to-speech service from Python WITHOUT needing Microsoft Edge or Windows or an…...

植物病害识别:YOLO甘蔗叶片病害识别分类数据集

YOLO甘蔗叶片病害识别数据集, 包含尾孢菌叶斑病&#xff0c;眼斑病&#xff0c;健康&#xff0c;红腐病&#xff0c;锈病&#xff0c;黄叶病6个常见病类别&#xff0c;3300多张图像&#xff0c;yolo标注完整&#xff0c;全部原始图像&#xff0c;未应用增强。 适用于CV项目&…...

pyqt QTextEdit 捕获enter按键

参考&#xff1a; https://blog.csdn.net/qq_27061049/article/details/101550616 方法一&#xff1a; 在PyQt中&#xff0c;可以通过重写QTextEdit的keyPressEvent()函数来捕获Enter按键。下面是示例代码&#xff1a; from PyQt5.QtWidgets import QApplication, QMainWindo…...

一劳永逸的方法解决:LNK1168无法打开 xxx.exe 进行写入 报错问题

这种错误的产生原因&#xff1a; 运行程序退出不是按正常流退出&#xff0c;是按窗口右上角的 “X” 来关闭程序&#xff0c;但是后台的xxx.exe控制台程序还在运行&#xff1b;修改程序的代码后再运行&#xff0c;就会报LNK1168的错误&#xff1b; 报错示例&#xff1a; 解决方…...

程序员的金三银四求职宝典:面试技巧分享

​​​​​​​随着春天的到来,程序员们迎来了求职的旺季——金三银四。在这个时期,各大公司纷纷开放招聘,为求职者提供了丰富的选择机会。然而,如何在众多的面试中脱颖而出,成功获得心仪的职位,就需要掌握一些有效的面试技巧。下面,就让我们一起来探讨一下金三银四求职…...

【DevOps基础篇之k8s】如何应用Kubernetes中的Role Based Access Control(RBAC)

【DevOps基础篇之k8s】如何应用Kubernetes中的Role Based Access Control(RBAC) 目录 【DevOps基础篇之k8s】如何应用Kubernetes中的Role Based Access Control(RBAC)背景Kubernetes身份验证和授权基于角色的访问控制(RBAC)用户账户 vs. 服务账户角色 vs. 集群角色RoleBi…...

python知网爬虫论文pdf下载+立即可用(动态爬虫)

文章目录 使用代码 使用 自己工作需要&#xff0c;分享出来&#xff0c;刚刚修改完。 知需要修改keyword就可以完成自动搜索和下载同时翻页。 但是需要安装Chrome&#xff0c;也支持linux爬虫&#xff0c;也要安装linux Chrome非可视化版。 代码 import selenium.webdriver …...

DataFunSummit 2023:洞察现代数据栈技术的创新与发展(附大会核心PPT下载)

随着数字化浪潮的推进&#xff0c;数据已成为企业竞争的核心要素。为了应对日益增长的数据挑战&#xff0c;现代数据栈技术日益受到业界的关注。DataFunSummit 2023年现代数据栈技术峰会正是在这样的背景下应运而生&#xff0c;汇聚了全球数据领域的精英&#xff0c;共同探讨现…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...