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

ops/2024/12/26 13:35:26/

在这里插入图片描述

下拉框代码

<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/ops/145136.html

相关文章

VBA技术资料MF245:创建嵌入式条形图

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

Max AI prompt1

1&#xff0c;内容/要点逻辑链&#xff0c;层次结构可视化 请提取其中的主要内容以及观点&#xff0c;以及对应的逻辑链&#xff0c;以图示化、层次结构通俗易懂地展现&#xff0c;要求使用中文 #我目前常用的文献阅读prompt提示词&#xff0c;主要是内容、逻辑链2者兼备2&…

贪心算法(三)

目录 一、k次取反后最大化的数组和 二、优势洗牌 三、最长回文串 四、增减字符串匹配 一、k次取反后最大化的数组和 k次取反后最大化的数组和 贪心策略&#xff1a; 解题代码&#xff1a; class Solution { public:int largestSumAfterKNegations(vector<int>&am…

Flink Data Source详解

注意在高版本中SourceFunction以及其子类RichSourceFunction、ParallelSourceFunction等已经被标记为废弃,所以我们要看数据源的实现只需要关注Source接口(org.apache.flink.api.connector.source.Source)。了解Source背后的架构和运行原理有助于我们更好的使用Source,或者…

LLM大语言模型私有化部署-使用Dify的工作流编排打造专属AI搜索引擎

背景 上一篇文章介绍了如何使用 Ollama 和 Dify 搭建个人 AI 助手。首先通过 Ollama 私有化部署了 Qwen2.5 (7B) 模型&#xff0c;然后使用 Docker Compose 一键部署了 Dify 社区版平台。在 Dify 平台上&#xff0c;通过普通编排的方式&#xff0c;创建了基于 Qwen2.5 模型的聊…

Docker安装Neo4j

拉取镜像源 docker pull neo4j(:版本号) //缺省 “:版本号” 时默认安装latest版本的编写运行脚本 docker run --name neo4j -d \ -p 27474:7474 -p 27687:7687 \ -v /usr/local/docker/neo4j/data:/data \ -v /usr/local/docker/neo4j/logs:/logs \ -v /usr/local/docker/…

GitLab 停止为中国区用户提供 GitLab.com 账号服务

GitLab 通知中国区用户将停止提供 GitLab.com 账号服务&#xff0c;建议现有用户迁移到极狐。 中国 IP 地址现在访问 GitLab.com 会跳转到 about.gitlab.com&#xff0c;推荐用户访问极狐。 Gundaz Aghayev 写道&#xff1a;GitLab 在发送中国地区用户的电子邮件通知中称&…

【知识科普】认识正则表达式

文章目录 概览正则表达式的基本组成正则表达式的基本语法示例 常见表达式手机号码1. 通用手机号正则表达式2. 匹配特定号段的手机号正则表达式3. 注意事项4. 示例代码 电子邮箱1. 基本邮箱正则表达式2. 更严格的邮箱正则表达式3. Python中的邮箱正则表达式4. 注意事项 身份证年…