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

界面规范2-列表上

1、表格线外边使用粗线,内部使用细线,颜色采用灰色

    规定如下:

    外边:border: 2px solid #d0e0e0

    内部:border-right: 1px solid #d0e0e0

    elementui实现如下,其他框架自行定义:

/* 修改表格边框颜色 */

.el-table--border,

.el-table--group {

  border: 2px solid #d0e0e0 !important;

}

/* 修改表格内部竖线颜色 */

.el-table--border td,

.el-table--border th,

.el-table__body-wrapper.el-table--border.is-scrolling-left~.el-table__fixed {

  border-right: 1px solid #d0e0e0 !important;

}

/* 修改表格内行线颜色 */

.el-table td,

.el-table th.is-leaf {

  border-bottom: 1px solid #d0e0e0 !important;

}

2、表头使用粗体,背景灰色

     规定如下:

    font-family:Microsoft YaHei;

    font-size:16px;

    color: #34b6a4;

    font-weight: 700;

    background-color: #f2f2f2

   elementui实现如下,其他框架自行定义:

.el-table th.el-table__cell{

  color: #34b6a4 !important;

  font-weight: 700 !important;

  background-color: #f2f2f2 !important;

}

3、内部背景色采用斑马纹效果,鼠标滑过行时着重显示

规定如下

鼠标滑过行:background-color: #D9E1E6

偶数行:background-color: #f2f2f2

elementui实现如下,其他框架自行定义:

.el-table tbody tr:hover > td {

  background:#D9E1E6 !important;

}

.el-table__body tr:nth-child(even) > td{

  background-color: #f2f2f2 !important;

}

http://www.dtcms.com/a/300215.html

相关文章:

  • NTLite Ent Version
  • 文件IO——bmp图像处理
  • GRE、MGRE实验
  • 机器学习(重学版)基础篇(概念与评估)
  • 算子推理是什么
  • GStreamer中Pipeline(管道)
  • 速通python加密之base64
  • 《C++》模板详解
  • odoo代码分析(二)
  • 一键实现推送服务:Docker部署ntfy开源通知系统指南
  • STM32-定时器的基本定时/计数功能实现配置教程(寄存器版)
  • 数据结构习题--删除排序数组中的重复项
  • Linux内核设计与实现 - 第13章 虚拟文件系统(VFS)
  • TCP如何解决网络切换问题
  • Flutter开发实战之原生平台集成
  • FROM stakater/java8-alpine 构建cocker镜像
  • React入门学习——指北指南(第三节)
  • 【星野AI】minimax非活动时间充值优惠漏洞
  • 数据存储:OLAP vs OLTP
  • java基础(day16)set-map
  • 从0到1学Pandas(七):Pandas 在机器学习中的应用
  • AI Agent开发学习系列 - langchain之LCEL(5):如何创建一个Agent?
  • React入门学习——指北指南(第五节)
  • java集合框架面试点(2)
  • [2025CVPR-图象合成、生成方向]ODA-GAN:由弱监督学习辅助的正交解耦比对GAN 虚拟免疫组织化学染色
  • 《每日AI-人工智能-编程日报》--2025年7月26日
  • 四大主流AI Agent框架选型梳理
  • 零基础学习性能测试第三章:jmeter性能组件应用(事件,并发,定时器)
  • DriverManager在rt.jar里,凭什么能加载到classpath下的驱动?
  • CPA战略-4.1-公司战略与组织结构