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

news/2024/12/26 10:21:00/

在这里插入图片描述

下拉框代码

<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/news/1558240.html

相关文章

【每日学点鸿蒙知识】大图性能问题、WebView加载网页问题、H5页面数据更新问题、安全控件位置影响数据保存、企业内部应用发布

1、Image大图使用了.blur会有性能问题&#xff0c;有没有平替方案&#xff1f; 参考demo&#xff1a; async aboutToAppear(): Promise<void> {let OutData: http.HttpResponsehttp.createHttp().request("http:myURL.jpg",(error: BusinessError, data: htt…

echarts地图可视化展示

地图可视化展示 获取地图json数据下载json数据代码示例 获取地图json数据 全国各地市json文件下载地址&#xff1a; http://datav.aliyun.com/portal/school/atlas/area_selector#&lat33.521903996156105&lng104.29849999999999&zoom4 https://hxkj.vip/demo/ech…

MySQL三层B+树能存多少条数据

参数 在InnoDB中&#xff0c;数据页的默认大小为16KB&#xff0c;可以通过修改innodb_page_size参数调整&#xff0c;真实数据存贮在聚簇索引中&#xff0c;而聚簇索引有以下的结构&#xff1a; 叶子节点页 叶子节点上存放的是完整的数据行&#xff0c;假设数据行的大小为1K…

网络安全与加密

1.Base64简单说明描述&#xff1a;Base64可以成为密码学的基石&#xff0c;非常重要。特点&#xff1a;可以将任意的二进制数据进行Base64编码结果&#xff1a;所有的数据都能被编码为并只用65个字符就能表示的文本文件。65字符&#xff1a;A~Z a~z 0~9 / 对文件进行base64编码…

记一次前端Vue项目国际化解决方案

背景 有一个vue项目&#xff0c;要实现国际化功能&#xff0c;能够切换中英文显示&#xff0c;因为该项目系统的用户包括了国内和国外用户。 需求 1、页面表单上的所有中文标签要国际化&#xff0c;包括表单属性标签、表格列头标签等&#xff0c; title“数量”&#xff1b;…

pycharm断点调试pydevd_comm.py“, line 306, in _on_run r = r.decode(‘utf-8‘)

最近在远程调试pycharm代码时发现会报错&#xff1a; pydevd_comm.py", line 306, in _on_run r r.decode(utf-8) 网上搜索说是有中文路径&#xff0c;但我的调试的文件就没有中文&#xff0c;这是什么原因呢&#xff1f; &#xff08;已解决&#xff09;pycharm…

基于深度学习(HyperLPR3框架)的中文车牌识别系统-搭建开发环境

本篇内容为搭建开发环境。包括&#xff1a;python开发环境&#xff0c;Qt/C开发环境&#xff0c;以及用到的各个库的安装和配置。 一、Python开发环境搭建与配置 1、下载并安装Anaconda 我没有用最新的版本&#xff0c;安装的是 Anaconda3-2021.05-Windows-x86_64.exe&#…

3GPP R18 MT-SDT

Rel-17 指定MO-SDT允许针对UL方向的数据包进行小数据包传输。对于DL,MT-SDT(即DL触发的小数据)可带来类似的好处,即 通过不转换到 RRC_CONNECTED来减少信令开销和UE功耗,并通过允许快速传输(小而少见的)数据包(例如用于定位)来减少延迟。 在R17中,NR_SmallData_INACTIVE的工…