Vue3 +Element-Plus el-select下拉菜单样式(局部生效)

embedded/2024/12/30 16:01:20/

在这里插入图片描述

下拉框代码

<el-selectclass="buttons-switch-group select-hub":teleported="false"style="width: 120px"v-model="queryParam.type"placeholder="请选择"size="mini"@change="loadData"><el-option label="客运站" value="客运站"></el-option><el-option label="高铁站" value="高铁站"></el-option><el-option label="码头" value="码头"></el-option><el-option label="火车站" value="火车站"></el-option><el-option label="机场" value="机场"></el-option></el-select>

样式穿透

.buttons-switch-group {--el-fill-color-blank: rgba(8, 20, 65, 0.3);--el-border: 1px solid #073f97;--el-text-color-regular: #dedfe4;
}
.select-hub:deep(.el-select__wrapper) {min-height: 0.875rem !important;min-width: 2rem !important;box-shadow: 0 0 0 1px #008cffff inset;border-image: linear-gradient(180deg, rgba(28, 173, 255, 1), rgba(0, 140, 255, 1)) 1 1;
}
.select-hub:deep(.el-popper.is-light .el-popper__arrow::before) {border: 1px solid #01194d !important;background: #01194d !important;
}.select-hub:deep(.el-popper.is-light) {background: #01194d;//border: 1px solid #273f70;
}
.select-hub:deep(.el-select-dropdown__item) {text-align: left;background: #01194d;border: none;color: #fff;
}

http://www.ppmy.cn/embedded/149723.html

相关文章

<packaging>jar</packaging>和<packaging>pom</packaging>的区别

在Maven项目中&#xff0c;<packaging> 元素在 pom.xml 文件中定义了项目打包的方式。<packaging> 的值决定了构建过程中生成的构件类型。以下是 <packaging>jar</packaging> 和 <packaging>pom</packaging> 两种最常见的打包类型的区别&a…

Mooncake:kimi后端推理服务的架构设计

前言 本文依托论文《Mooncake: A KVCache-centric Disaggregated Architecture for LLM Serving》来讲解kimi的后端服务架构Mooncake,并按照自己的思路来梳理论文中的一些关键信息。 背景 服务端面临的问题 随着大模型技术越来越强,很多应用都是以Maas(Model as a Service…

如何使用 Firewalld 设置 Linux 防火墙

简介 在 Linux 中&#xff0c;防火墙是一个应用程序或服务&#xff0c;它使用预定的规则集来过滤或控制进出 Linux 服务器的网络流量。通常将防火墙配置为允许所需的流量通过&#xff0c;同时阻止其余的外部流量。 Firewalld 是一个用于 Linux 系统的防火墙管理解决方案。它是…

vulhub-wordpress靶场

一.主题上传漏洞 来到靶场点击主题选择add new 这里有一个上传主题的地方 我们可以去网上找到wordpress主题下载一个 wordpress模板 网页设计模板 免费 免费下载 - 爱给网 下载完成后对我们有用的东西只有这一个目录&#xff0c;把它拖出来 点开moban目录后&#xff0c;创建…

不用swipe插件,用<component>组件实现H5的swipe切换

不引入 swipe 插件&#xff0c;使用vue自带组件实现swipe滑动切换页面功能 需求场景1. 引入组件2. 动态加载页面组件3. 使用component组件4. 组件属性及相关事件5. 触摸事件处理6. 动画和过渡控制7. 节流功能 完整代码 需求场景 不引入 swipe 插件&#xff0c;使用vue自带comp…

详细讲解axios封装与api接口封装管理

一、axios封装 axios是基于promise的http客户端&#xff0c;用于浏览器和nodejs发送http请求 &#xff0c;对它进行封装主要是为了统一管理请求配置和处理请求和响应的通用逻辑等。以下是常用的封装逻辑和要点 1&#xff1a;引入axios相关依赖 首先引用项目中的axios库&…

【JavaEE】Spring Web MVC

目录 一、Spring Web MVC简介 1.1 MVC简介1.2 Spring MVC1.3 RequestMapping注解1.3.1 使用1.3.2 RequestMapping的请求设置 1.3.2.1 方法11.3.2.2 方法2 二、Postman介绍 2.1 创建请求2.2 界面如下&#xff1a;2.3 传参介绍 一、Spring Web MVC简介 官方文档介绍&#xff…

设计模式之模板方法模式:咖啡,茶,和代码

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 一、模板方法模式概述 \quad 在我们的日常生活中,经常会遇到这样的场景:不同的事物,却有着相似的处理流程。比如泡茶和冲咖啡,虽然最终的饮品不同…