ElementUI样式优化：el-input修改样式、el-table 修改表头样式、斑马格样式、修改滚动条样式、

效果图： 

1、改变日期时间组件的字体颜色背景

.form-class ::v-deep .el-date-editor {

    border: 1px solid #326AFF;

    background: #04308D !important;

  }

  .form-class ::v-deep .el-date-editor.el-input__wrapper {

    box-shadow: 0 0 0 0px #326AFF inset;

  }

// 输入框

  .form-class ::v-deep .el-date-editor .el-range-input{

    background: #04308D !important;

    font-size: 14px;

    font-family: PingFang SC, PingFang SC;

    font-weight: 400;

    color: #FFFFFF;

  }

//   中间的至字

  .form-class ::v-deep  .el-date-editor .el-range-separator{

    background: #04308D !important;

    color: #FFFFFF;

  }

.form-class ::v-deep   .el-range__close-icon{

    background: #04308D !important;

    color: #FFFFFF;

  }

修改element-ui日期下拉框datetimePicker的背景色样式-CSDN博客 弹窗样式在这里

2、修改input的字体颜色背景

   // 输入框

  .form-class ::v-deep .el-input__wrapper {

    border: 1px solid #326AFF;

    box-shadow: 0 0 0 0px #326AFF inset;

    background: #04308D !important;

  }    

     // 输入框

   ::v-deep  .el-input__inner{

        background: #04308D !important;

        font-size: 14px;

        font-weight: 400;

        color: #FFFFFF;

      }  

3、修改按钮颜色

.blue-button{

  background-color: #326aff;

  border: 1px solid #326AFF;

}

4、去表格的白线

.el-table{

    // 去掉白线

    --el-table-border-color:#063570;

}

不写就会有如下白线 

 5、设置表格行高度

 // 设置表格行高度

::v-deep .el-table__body tr,

::v-deep .el-table__body td {

  padding: 0;

  height: 40px;

}

6、表格内背景颜色

// 表格内背景颜色

::v-deep .el-table th,

::v-deep .el-table tr,

::v-deep .el-table td {

  background-color:#063570;  

  border: 0px;

  color: #fff;  // 修改字体颜色

  font-size: 24px;

  height: 5px;

  font-weight: Normal;

}

7、 修改表头样式-加边框 和背景色

  // 修改表头样式-加边框

::v-deep .el-table__header-wrapper {

    border: solid 1px #00429c;

    // box-sizing: border-box;

  }

   // 修改表头样式-背景色

  ::v-deep .el-table__header thead tr th{

    border: #002C69 0px solid;  

    background: linear-gradient(to top, #0085FB, #002C69)!important;

    color: #FFFFFF;

  }

8、 表格斑马自定义颜色 

表格部分 

<el-table :data="tableData" height="55vh" :row-class-name="tableRowClassName"

js部分添加 

const tableRowClassName = ({ row, rowIndex }) => {

  if (rowIndex % 2 == 0) {

    return "warning-row1";

  } else {

    return "warning-row2";

  }

}

  // 表格斑马自定义颜色

::v-deep .el-table__row.warning-row1 {

    background: #03367c;

    border: #002C69 0px solid;

    color: #FFFFFF;

}

  ::v-deep .el-table__row.warning-row2 {

    background: #002C69;

    border: #002C69 0px solid;

    color: #FFFFFF;

}

9、鼠标悬停行颜色改变

<style>

/* 用来设置当前页面element全局table 选中某行时的背景色*/

/*鼠标移入某行时的背景色*/

.el-table--enable-row-hover .el-table__body tr:hover>td {

  background-color: #0873fd !important;

  /* 设置鼠标悬停时的背景色 */

  color: black !important;

  /* 设置文字颜色 */

}

</style>

补充：暂无数据时的表格背景颜色

::v-deep .el-table__empty-block{

    background-color: #063570;

    color: #fff; // 修改字体颜色

}

10、滚动条的样式

  // 滚动条样式

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {

    background-color: #063570;

  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {

    width: 10px;

    opacity: 0.5;

  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {

    border-radius: 15px;

    background-color: #0257aa;

  }

11、分页样式


//   分页
::v-deep .pagination-container{
    background: #063570!important;

}
    //这是123454   
::v-deep .el-pager li{
    border: 1px solid #326AFF;
    background: #04308D !important;
    color: #FFFFFF;
}
::v-deep .el-pager li.is-active{
    background: #0873fd !important;
}
// <这个
::v-deep .btn-prev {
    // border: 1px solid #326AFF;
    background-color: #04308D !important;
    color: #FFFFFF;
}
//  >这个
::v-deep .btn-next {
    // border: 1px solid #326AFF;
    background-color: #04308D !important;
    color: #FFFFFF;
}
// 前往
::v-deep .el-pagination__jump .el-pagination__goto{
    color: #FFFFFF;
    
}
// 页码筛选的input

::v-deep .el-pagination__jump .el-input{
    border: 1px solid #326AFF;
    background: #04308D !important;
    color: #FFFFFF;
    
} 
::v-deep .el-pagination__jump .el-input .el-input__wrapper{
    // border: 1px solid #326AFF;
    background: #04308D !important;
    box-shadow: 0 0 0 0px #326AFF inset;
    color: #FFFFFF;
    
}
// 页
::v-deep .el-pagination__jump .el-pagination__classifier{
    color: #FFFFFF;
    
}

// el-input el-input--default el-pagination__editor is-in-pagination

 12、总代码 

 <el-dialog class="blue-dialog" v-model="dialogVisible" title="工单列表" width="80%" custom-class="openAnimAbcd" draggable>
    <el-form :inline="true" :model="queryParams" ref="queryParamsRef" class="demo-form-inline form-class"
      label-width="68px">

      <el-form-item label="时间筛选" prop="time">
        <el-date-picker class="custom-timeselect" v-model="time" type="datetimerange" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" style="width: 380px" value-format="YYYY-MM-DD HH:mm:ss"
          :shortcuts="shortcuts" @change="changetime" :default-time="defaultTime" />
      </el-form-item>
      <el-form-item label="输入框" prop="time">
        <el-input style="width: 70px" v-model="queryParams.number1" placeholder="请输入"  :error="durationInputError(queryParams.number1)"
          @input="handleDurationInput1(queryParams.number1)"></el-input>&nbsp;
        <span style=" color: #FFFFFF">至</span>
        &nbsp;
        <el-input style="width: 70px" v-model="queryParams.number2" placeholder="请输入"
          :error="durationInputError(queryParams.number2)"
          @input="handleDurationInput2(queryParams.number2)"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="blue-button" size="Small" @click="handleExport">导出</el-button>
        <el-button type="primary" class="blue-button" @click="resetQuery" size="Small">重置</el-button>
        <el-button type="primary" size="Small" class="blue-button" @click="getecharstData">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" height="55vh" :row-class-name="tableRowClassName" key='xqtable'
      :highlight-current-row="false">
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      <el-table-column prop="name" label="名字" min-width="80" />
      
    </el-table>
    <pagination :page-sizes="[100, 200, 500, 1000, 2000, 5000]" v-show="total > 0" :total="total" class="paginationyhd"
      v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="openTable" />
  
  </el-dialog>

 js部分

const tableRowClassName = ({ row, rowIndex }) => {

  if (rowIndex % 2 == 0) {

    return "warning-row1";

  } else {

    return "warning-row2";

  }

}

样式引入

<style src="@/assets/styles/dialog.scss" scoped />

<style>

.el-table--enable-row-hover .el-table__body tr:hover>td {

  background-color: #0873fd !important;

  /* 设置鼠标悬停时的背景色 */

  color: black !important;

  /* 设置文字颜色 */

}

</style>

css页面：


/* 改变整个输入框的字体颜色背景 */
::v-deep  .el-form-item__label {
    color: #FFFFFF;
}
.form-class ::v-deep .el-date-editor {
    border: 1px solid #326AFF;
    background: #04308D !important;
  }
  .form-class ::v-deep .el-date-editor.el-input__wrapper {
    box-shadow: 0 0 0 0px #326AFF inset;
  }
// 输入框
  .form-class ::v-deep .el-date-editor .el-range-input{
    background: #04308D !important;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
//   中间的至字
  .form-class ::v-deep  .el-date-editor .el-range-separator{
    background: #04308D !important;
    color: #FFFFFF;
  }
.form-class ::v-deep   .el-range__close-icon{
    background: #04308D !important;
    color: #FFFFFF;
  }

  
   // 输入框
  .form-class ::v-deep .el-input__wrapper {
    border: 1px solid #326AFF;
    box-shadow: 0 0 0 0px #326AFF inset;
    background: #04308D !important;
  
  }    
     // 输入框
   ::v-deep  .el-input__inner{
        background: #04308D !important;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
      }                    
.blue-button{
  background-color: #326aff;
  border: 1px solid #326AFF;

}


.el-table{
    // 去掉白线
    --el-table-border-color:#063570;

}
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 40px;
}
// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color:#063570;  
  border: 0px;
  color: #fff;  // 修改字体颜色
  font-size: 24px;
  height: 5px;
  font-weight: Normal;
}
  // 修改表头样式-加边框
::v-deep .el-table__header-wrapper {
    border: solid 1px #00429c;
    // box-sizing: border-box;
  }
   // 修改表头样式-背景色
  ::v-deep .el-table__header thead tr th{
    border: #002C69 0px solid;  
    background: linear-gradient(to top, #0085FB, #002C69)!important;
    color: #FFFFFF;
  }
  // 表格斑马自定义颜色
::v-deep .el-table__row.warning-row1 {
    background: #03367c;
    border: #002C69 0px solid;
    color: #FFFFFF;
}
  ::v-deep .el-table__row.warning-row2 {
    background: #002C69;
    border: #002C69 0px solid;
    color: #FFFFFF;
}

.el-table .el-table__body tr:hover {
    background-color: #0873fd !important; /* 设置鼠标悬停时的背景色 */
    color: black !important; /* 设置文字颜色 */
  }


  // 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #063570;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #0257aa;
  }

 希望对你有帮助

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/764095.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

喜讯｜华院计算认知智能引擎算法平台荣登BPAA大赛创新组TOP50

喜讯｜华院计算认知智能引擎算法平台荣登BPAA大赛创新组TOP50

6月25日&#xff0c;备受瞩目的BPAA第四届全球应用算法模型典范大赛&#xff08;以下简称“BPAA大赛”&#xff09;正式揭晓了《第四届全球应用算法模型典范大赛创业组TOP50榜单》和《第四届全球应用算法模型典范大赛创新组TOP50榜单》。其中&#xff0c;华院计算技术&#xff…
阅读更多...
智能技术【机器学习】总结

智能技术【机器学习】总结

文章目录 第一部分 优化第二部分 模型第一章 神经网络&#xff08;MLP, BP, CNN, GNN, and Attention&#xff09;1.1 神经网络基础1.1.1 高次非线性函数1.1.2 感知器与神经网络1.1.3 联结主义模型1.1.4 动机——为什么每个人都在谈论深度学习&#xff1f;1.1.5 背景1.1.6 神经…
阅读更多...
Keysight 是德 EXR104A 实时示波器

Keysight 是德 EXR104A 实时示波器

Keysight 是德 EXR104A 实时示波器 全部 4 个通道均可提供 1 GHz 的带宽&#xff0c;强大的 8 合 1 仪器&#xff0c;出色的硬件加速绘图功能&#xff0c;可以全面升级到 2.5 GHz 带宽和 8 个通道 全部 4 个模拟通道上均可提供 1 GHz 带宽通过 ASIC 技术实现更快的测试速度有…
阅读更多...
项目范围管理（信息系统项目管理师）

项目范围管理（信息系统项目管理师）

需求管理计划是对项目的需求进行定义、确定、记载、核实管理和控制的行动指南。制定需求管理计划&#xff0c;规划如何分析、记录和管理需求&#xff0c;这样才是较为稳妥的方法在信息系统集成项目中&#xff0c;需求管理贯穿于整个过程&#xff0c;他的最基本的任务就是明确需…
阅读更多...
破解电脑卡顿难题，将数据优化，5分钟提升运行速度

破解电脑卡顿难题，将数据优化，5分钟提升运行速度

当电脑变得缓慢且反应迟钝时&#xff0c;工作效率和娱乐体验都会大打折扣。而电脑卡顿是由于系统资源占用过多、磁盘空间不足等原因引起的。因此&#xff0c;我们经常需要寻找优化措施&#xff0c;提升电脑的运行速度。文章整理了4个优化方法&#xff0c;帮助你破解卡顿难题&am…
阅读更多...
Linux下编程之内存检查

Linux下编程之内存检查

前言 我们在进行编程时&#xff0c;有时不免会无意中写出一些容易导致内存问题&#xff08;可能一时表象上正常&#xff09;的代码&#xff0c;导致的后果肯定是不好的&#xff0c;就像一颗颗“哑弹”&#xff0c;令人心慌。网上推荐的辅助工具很多&#xff0c;此篇文章…
阅读更多...
机器学习——强化学习中的“策略π”的个人思考

机器学习——强化学习中的“策略π”的个人思考

这两天回顾了《西瓜书》中的最后一章——“强化学习”&#xff0c;但是忽然发现之前对于本章中的“策略π”的理解有些偏差&#xff0c;导致我在看值函数公式时有些看不明白。对此&#xff0c;我在网上查了一些资料&#xff0c;但是大部分人都是一笔带过&#xff0c;或者是照本…
阅读更多...
Day8: 232.用栈实现队列 225. 用队列实现栈 20. 有效的括号 1047. 删除字符串中的所有相邻重复项

Day8: 232.用栈实现队列 225. 用队列实现栈 20. 有效的括号 1047. 删除字符串中的所有相邻重复项

题目232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; class MyQueue { public:MyQueue() {}void push(int x) { // 出栈input.push(x);}int pop() {// 如果出栈为空&#xff0c;把入栈元素全都转移到出栈if (output.empty()) {while (!input.empty()) {int itop i…
阅读更多...
基于小波同步压缩变换与集成深度学习的情绪识别

基于小波同步压缩变换与集成深度学习的情绪识别

摘要 本研究设计了一种基于小波同步压缩变换(WSST)驱动优化集成深度学习(DL)的自动多类情绪识别(AMER)系统&#xff0c;用于识别样本依赖(subject-dependent)和样本独立(subject-independent)两种模式下的人类情感。使用WSST方法将1-D脑电(EEG)信号转换为2-D时频表征(TFR)&…
阅读更多...
2024年6月总结及随笔之打卡网红点

2024年6月总结及随笔之打卡网红点

1. 回头看 日更坚持了547天。 读《人工智能时代与人类未来》更新完成读《AI未来进行式》开更并更新完成读《AI新生&#xff1a;破解人机共存密码》开更并持续更新 2023年至2024年6月底累计码字1267912字&#xff0c;累计日均码字2317字。 2024年6月码字90659字&#xff0c;…
阅读更多...
hadoop分布式云笔记系统-计算机毕业设计源码15725

hadoop分布式云笔记系统-计算机毕业设计源码15725

摘 要 随着信息技术的飞速发展&#xff0c;人们对于数据的存储、管理和共享需求日益增长。传统的集中式存储系统在处理大规模数据时面临着性能瓶颈和扩展性问题。而 Hadoop 作为一种分布式计算框架&#xff0c;为解决这些问题提供了有效的解决方案。 本研究旨在设计并实现一种…
阅读更多...
昇思25天学习打卡营第6天|关于函数与神经网络梯度相关技术探讨

昇思25天学习打卡营第6天|关于函数与神经网络梯度相关技术探讨

目录 Python 库及 MindSpore 相关模块和类的导入 函数与计算图 微分函数与梯度计算 Stop Gradient Auxiliary data 神经网络梯度计算 Python 库及 MindSpore 相关模块和类的导入 Python 中的 numpy 库被成功导入&#xff0c;并简称为 np。numpy 在科学计算领域应用广泛&#x…
阅读更多...
2、SSD基本技术

2、SSD基本技术

发展史 上文中说SSD是以闪存为介质的存储设备&#xff0c;这只能算是现代SSD的特点&#xff0c;而不能算是定义。 HDD是磁存储&#xff0c;SSD是电存储&#xff1b;HDD的特点导致寻址到不同扇区其性能存在明显差异&#xff0c;比如寻址下个扇区和上个扇区&#xff1b;而SSD寻…
阅读更多...
SpringBoot学习06-[SpringBoot与AOP、SpringBoot自定义starter]

SpringBoot学习06-[SpringBoot与AOP、SpringBoot自定义starter]

SpringBoot自定义starter SpringBoot与AOP SpringBoot与AOP 使用AOP实现用户接口访问日志功能 添加AOP场景启动器 <!--添加AOP场景启动器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</…
阅读更多...
第十四届蓝桥杯省赛C++A组F题【买瓜】题解（AC）

第十四届蓝桥杯省赛C++A组F题【买瓜】题解（AC）

70pts 题目要求我们在给定的瓜中选择一些瓜&#xff0c;可以选择将瓜劈成两半&#xff0c;使得最后的总重量恰好等于 m m m。我们的目标是求出至少需要劈多少个瓜。 首先&#xff0c;我们注意到每个瓜的重量最多为 1 0 9 10^9 109&#xff0c;而求和的重量 m m m 也最多为…
阅读更多...
3.2ui功能讲解之graph页面

3.2ui功能讲解之graph页面

本节重点介绍 : graph页面target页面flags页面status页面tsdb-status页面 访问地址 $ip:9090 graph页面 autocomplete 可以补全metrics tag信息或者 内置的关键字 &#xff0c;如sum聚合函数table查询 instante查询&#xff0c; 一个点的查询graph查询调整分辨率 resolutio…
阅读更多...
中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致，且看！

中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致，且看！

中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致&#xff0c;且看&#xff01; 《神探狄仁杰》之使团喋血记是一部深入人心的历史侦探剧&#xff0c;不仅以其曲折离奇的案情和狄仁杰的睿智形象吸引观众&#xff0c;更以其对唐代文化的精准再现而备受赞誉。#李秘书讲写…
阅读更多...
云计算【第一阶段（23）】Linux系统安全及应用

云计算【第一阶段（23）】Linux系统安全及应用

一、账号安全控制 1.1、账号安全基本措施 1.1.1、系统账号清理 将非登录用户的shell设为/sbin/nologin锁定长期不使用的账号删除无用的账号 1.1.1.1、实验1 用于匹配以/sbin/nologin结尾的字符串&#xff0c;$ 表示行的末尾。 &#xff08;一般是程序用户改为nologin&…
阅读更多...
JavaScript——对象的创建

JavaScript——对象的创建

目录 任务描述 相关知识 对象的定义 对象字面量 通过关键字new创建对象 通过工厂方法创建对象 使用构造函数创建对象 使用原型(prototype)创建对象 编程要求 任务描述 本关任务&#xff1a;创建你的第一个 JavaScript 对象。 相关知识 JavaScript 是一种基于对象&a…
阅读更多...
Spring Boot配置文件properties/yml/yaml

Spring Boot配置文件properties/yml/yaml

一、Spring Boot配置文件简介 &#xff08;1&#xff09;名字必须为application,否则无法识别。后缀有三种文件类型&#xff1a; properties/yml/yaml&#xff0c;但是yml和yaml使用方法相同 &#xff08;2&#xff09; Spring Boot 项⽬默认的配置文件为 properties &#xff…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站