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

el-select选择器修改背景颜色

<!--* @FilePath: topSearch.vue* @Author: 是十九呐* @Date: 2024-07-18 09:46:03* @LastEditTime: 2024-07-18 10:42:03
-->
<template><div class="topSearch-container"><div class="search-item"><div class="item-name">客户编码</div><div class="item-input"><el-select v-model="value" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div></div><div class="search-item"><div class="item-name">单位</div><div class="item-input"><el-input v-model="input" placeholder="请输入内容"></el-input></div></div><div class="search-item"><div class="item-name">服务站</div><div class="item-input"><el-input v-model="input" placeholder="请输入内容"></el-input></div></div><div class="search-item"><div class="item-name">客户经理</div><div class="item-input"><el-input v-model="input" placeholder="请输入内容"></el-input></div></div></div>
</template><script>
export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',input: ''}}
}
</script><style lang="scss" scope>
.topSearch-container {display: flex;align-items: center;justify-content: space-around;.search-item {display: flex;align-items: center;.item-name {margin-right: 21px;color: #01E6F4;font-size: 14px;}}
}
</style><!-- 修改背景颜色 -->
<style>
.el-input__inner,
.el-input__inner:hover,
.el-input__inner:after {background-color: #03192B !important;border: 1px solid #01E6F4 !important;color: #fff;
}
.el-select-dropdown__item {background-color: #03192B;color: #fff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {color: #0A81FF;
}
.el-select-dropdown__list {padding: 0;border: 1px solid #01E6F4;
}
.el-popper[x-placement^=bottom] .popper__arrow,
.el-popper[x-placement^=bottom] .popper__arrow::after {border-bottom-color: #01E6F4;
}
.el-select-dropdown {border: none;
}
</style>

相关文章:

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…...

Shell程序设计

各位看官&#xff0c;从今天开始&#xff0c;我们进入新的专栏Shell学习&#xff0c;Shell 是操作系统的命令行界面&#xff0c;它允许用户通过输入命令与操作系统交互。常见的 Shell 有 Bash 和 Zsh&#xff0c;它们可以执行用户输入的命令或运行脚本文件。Shell 广泛应用于系…...

PyQT6---环境搭建

1、虚拟环境搭建 创建虚拟环境 create -n pyqt6_39 python3.9 切换虚拟环境 conda activate pyqt6_39 2、安装pyqt6 安装pyqt6和pyqt6-tools pip install PyQt6 -i https://pypi.tuna.tsinghua.edu.cn/simplepip install pyqt6-tools -i https://pypi.tuna.tsinghua.edu.cn/…...

whisper-api语音识别语音翻译高性能兼容openai接口协议的开源项目

whisper-api 介绍 使用openai的开源项目winsper语音识别开源模型封装成openai chatgpt兼容接口 软件架构 使用uvicorn、fastapi、openai-whisper等开源库实现高性能接口 更多介绍 https://blog.csdn.net/weixin_40986713/article/details/138712293 使用说明 下载代码安装…...

面试题:Java中堆内存和栈内存的区别,缓存数据是把数据放到哪里

目录 堆内存&#xff08;Heap&#xff09;栈内存&#xff08;Stack&#xff09;String字符串的hashcode缓存 在Java中&#xff0c;堆内存&#xff08;Heap&#xff09;和栈内存&#xff08;Stack&#xff09;是两种不同类型的内存区域。它们各自扮演着不同的角色&#xff0c;并…...

【开源库学习】libodb库学习(一)

Hello World Example 在本章中&#xff0c;我们将使用传统的“Hello World”示例展示如何创建一个依赖于ODB进行对象持久化的简单C应用程序。特别是&#xff0c;我们将讨论如何声明持久类、生成数据库支持代码以及编译和运行我们的应用程序。我们还将学习如何使对象持久化&…...

Java中SPI机制原理解析

使用SPI机制前后的代码变化 加载MySQL对JDBC的Driver接口实现 在未使用SPI机制之前&#xff0c;使用JDBC操作数据库的时候&#xff0c;一般会写如下的代码&#xff1a;// 通过这行代码手动加载MySql对Driver接口的实现类 Class.forName("com.mysql.jdbc.Driver") Dr…...

数学建模~~~SPSS相关和回归分析

目录 1.双变量相关分析 1.1理论基础 1.2简单散点图的绘制介绍 1.3相关性分析 1.4分析相关性结果 2.简单线性回归分析 2.1简单概括 2.2分析过程 2.3结果分析 3.曲线回归分析 3.1问题介绍 3.2分析过程 3.3结果分析 1.双变量相关分析 1.1理论基础 双变量相关分析并不…...

【Android】常用基础布局

布局是一种可用于放置很多控件的容器&#xff0c;它可以按照一定的规律调整内部控件的位置&#xff0c;从而编写出精美的界面&#xff0c;布局内不单单可以放控件&#xff0c;也可以嵌套布局&#xff0c;这样可以完成一些复杂的界面&#xff0c;下面就来认识一些常用的布局吧。…...

服务攻防-中间件安全(漏洞复现)

一.中间件-IIS-短文件&解析&蓝屏 IIS现在用的也少了&#xff0c;漏洞也基本没啥用 1、短文件&#xff1a;信息收集 2、文件解析&#xff1a;还有点用 3、HTTP.SYS&#xff1a;蓝屏崩溃 没有和权限挂钩 4、CVE-2017-7269 条件过老 windows 2003上面的漏洞 二.中…...

【SD】深入理解Stable Diffusion与ComfyUI的使用

【SD】深入理解Stable Diffusion与ComfyUI的使用 1. Stable Diffusion&#xff08;SD&#xff09;原理概述2. 各部件详解3. SD的工作流程4. ComfyUI与SD的结合5. 总结 1. Stable Diffusion&#xff08;SD&#xff09;原理概述 整体结构&#xff1a;SD不是单一模型&#xff0c;…...

Linux 12:多线程2

1. 生产者消费者模型 生产者消费者模型有三种关系&#xff0c;两个角色&#xff0c;一个交易场所。 三种关系&#xff1a; 生产者之间是什么关系?竞争 - 互斥 消费者和消费者之间?竞争 - 互斥 消费者和消费者之间?互斥和同步 两个角色&#xff1a; 生产者和消费者 一个交…...

Android RSA 加解密

文章目录 一、RSA简介二、RSA 原理介绍三、RSA 秘钥对生成1. 密钥对生成2. 获取公钥3. 获取私钥 四、PublicKey 和PrivateKey 的保存1. 获取公钥十六进制字符串1. 获取私钥十六进制字符串 五、PublicKey 和 PrivateKey 加载1. 加载公钥2. 加载私钥 六、 RSA加解密1. RSA 支持三…...

类与对象-多态-案例3-电脑组装具体实现

#include<iostream> #include<string> using namespace std; //CPU class CPU { public:virtual void calculate() 0; }; //显卡 class GraCard { public:virtual void graphics() 0; }; //存储 class Memory { public:virtual void memory() 0; }; class Compu…...

try-with-resources 语句的用途和优点有哪些,它如何自动管理资源?

在Java编程中&#xff0c;资源管理是一个重要的议题&#xff0c;尤其是当你在代码中使用那些需要显式关闭的资源&#xff0c;比如文件流、数据库连接或者网络套接字等。 如果资源使用完毕后忘记关闭&#xff0c;不仅会导致资源泄露&#xff0c;还可能引起程序性能问题甚至系统…...

GraphRAG参数与使用步骤 | 基于GPT-4o-mini实现更便宜的知识图谱RAG

首先给兄弟朋友们展示一下结论&#xff0c;一个文本18万多字&#xff0c;txt文本大小185K&#xff0c;采用GraphRAG,GPT-4o-mini模型&#xff0c;索引耗时差不多5分钟&#xff0c;消耗API价格0.15美元 GraphRAG介绍 GraphRAG是微软最近开源的一款基于知识图谱技术的框架&#…...

/秋招突击——7/21——复习{堆——数组中的第K大元素}——新作{回溯——全排列、子集、电话号码的字母组合、组合总和、括号生成}

文章目录 引言复习数组中的第K大的最大元素复习实现参考实现 新作回溯模板46 全排列个人实现参考实现 子集个人实现参考实现 电话号码的字母组合复习实现 组合总和个人实现参考实现 括号生成复习实现 总结 引言 昨天的科大讯飞笔试做的稀烂&#xff0c;今天回来好好练习一下&a…...

matlab 异常值检测与处理——Robust Z-score法

目录 一、算法原理1、概述2、主要函数3、参考文献二、代码实现三、结果展示四、相关链接本文由CSDN点云侠翻译,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、概述 Robust Z-score法也被称为中位数绝对偏差法。它类似于Z-sc…...

Ubuntu 20安装JDK17和MySQL8.0

一.jdk 安装JDK 第一步&#xff1a;更新软件包&#xff1a;sudo apt update 第二步&#xff1a;安装JDK&#xff1a;sudo apt install openjdk-17-jdk 第三步&#xff1a;检测JDK: java -version 卸载JDK&#xff1a; 第一步&#xff1a;移除JDK包&#xff1a;apt-get purg…...

DC-1靶场打靶第一次!!!!冲冲冲!

今天打了一下DC-1这个靶场&#xff0c;感觉收获比大&#xff0c;我就来记录一下。 我的思路是下面的这个 我们先把靶机导入&#xff0c;然后与我们的liunx(攻击机)在同一个网段中&#xff0c;这也大大的减低难度。 然后我们先对自己这个网段内存活的主机进行操作&#xff0c;我…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...