Element UI：修改 element-ui 表格样式

_Tough_Girl

已于 2024-08-28 09:44:30 修改

阅读量79

点赞数

分类专栏： web前端文章标签： css elementui

于 2023-02-09 16:30:21 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/128955386

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

修改 Element-ui 表格样式

在这里插入图片描述

ElementUI el-table 表头错位的解决方案

部分 HTML：

    <!-- 应急监测方案弹窗 -->
    <el-dialog title="应急监测方案" :visible.sync="dialogVisible" width="50%">
      <el-table :data="tableData" style="width: 100%" max-height="500">
        <el-table-column prop="sort" label="优先级" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="correspondingType"
          label="标题"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="correspondingMeasures"
          label="内容"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>

CSS：

// 弹窗样式
::v-deep .el-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
  // background-color: #172a57;
  background: linear-gradient(#172a57, #2c4fa0, #082e88);
  border: 1px solid #4788fb;
  box-shadow: 0 0 10px #2c58a6;
}
::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

// el-table 样式修改
/*最外层透明*/
// ::v-deep .el-table,
// ::v-deep.el-table__expanded-cell {
//   background-color: transparent;
// }

/* 表格内背景颜色透明 */
// ::v-deep .el-table th {
//   background-color: transparent;
//   color: #fff;
//   font-size: 16px;
// }
// ::v-deep .el-table tr,
// ::v-deep.el-table td {
//   background-color: transparent;
//   color: #737781;
// }


::v-deep .el-table {
  color: #fff;
  background-color: #284475;
  box-shadow: 1px 1px 7px 1px #9098a5;
}

::v-deep .el-table {
  color: #fff;
  background-color: #284475;

  // 解决表头错位
  th.gutter, colgroup.gutter {
    width: 6px !important;
  }
}
// 解决表头错位
::v-deep .el-table__header colgroup col[name="gutter"] {
  display: table-cell !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #284475;
  color: #fff;
  border-bottom: 1px solid #ffffff !important;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep .el-table tr {
  background-color: #2f518b;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #3c81d952;
}
// 修改表格鼠标悬浮hover背景色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #284475;
}

// 修改表格最底部边框颜色和高度
::v-deep .el-table::before {
  border-bottom: none;
  height: 0px;
}

// 修改行内线的颜色
::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border-bottom: 1px solid #75a7d6;
}

// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  // height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #9dbce4;
  border-radius: 3px;
}
// 滚动条里面的轨道
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  // background: rgba(26, 68, 133, 0.4);
}

Element-UI 组件样式修改（常用组件）

效果图：
在这里插入图片描述

/* 边角 */
.left-top,
.right-top,
.left-bottom,
.right-bottom {
  position: absolute;
  width: 13px;
  height: 13px;
}

.left-top {
  left: 0;
  top: 0;
  border-left: solid 2px #0c8ef8;
  border-top: solid 2px #0c8ef8;
}

.right-top {
  right: 0;
  top: 0;
  border-right: solid 2px #0c8ef8;
  border-top: solid 2px #0c8ef8;
}

.left-bottom {
  left: 0;
  bottom: 0;
  border-left: solid 2px #0c8ef8;
  border-bottom: solid 2px #0c8ef8;
}

.right-bottom {
  right: 0;
  bottom: 0;
  border-right: solid 2px #0c8ef8;
  border-bottom: solid 2px #0c8ef8;
}

.left-box {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 400px;
  height: calc(100% - 60px - 20px - 20px);
  // background: url("~@/assets/images/integrationAndShare/left-top3.jpg") center
  //   no-repeat;
  // background-size: cover;
  color: #fff;
  background-color: rgba(17, 27, 52, 0.8);
  padding: 10px;
}

.right-top-box {
  position: absolute;
  top: 80px;
  right: 10px;
  width: 400px;
  height: calc(50% - 60px - 20px);
  // background: url("~@/assets/images/integrationAndShare/left-top3.jpg") center
  //   no-repeat;
  // background-size: cover;
  color: #fff;
  background-color: rgba(17, 27, 52, 0.8);
  padding: 10px;
}

.right-bottom-box {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 400px;
  height: calc(50% - 40px);
  // background: url("~@/assets/images/integrationAndShare/left-top3.jpg") center
  //   no-repeat;
  // background-size: cover;
  color: #fff;
  background-color: rgba(17, 27, 52, 0.8);
  padding: 10px;
}

// 弹窗样式修改
::v-deep .el-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // transform: translateX(-50%);
  margin: 0px !important;
  border: 1px solid #0196df;
  // box-shadow: 0 0 2px 2px #0196df;
  background-color: #122a5f;
  color: #fff;
  max-height: 1030px;
  height: auto !important;
}

::v-deep .el-dialogs>.el-dialog {
  top: 6vh;
  left: 0;
  transform: none;
  margin: 0 auto !important;
}

::v-deep .el-dialog__header {
  background-color: #172a57;
}

::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

::v-deep .el-dialog__body {
  background-color: #16213d;
  color: #fff;
  max-height: 960px;
  overflow: auto;

  // 滚动条的宽/高
  &::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 8px; // 纵向滚动条 必写
  }

  // 滚动条的滑块
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
}

::v-deep .el-form-item__label {
  color: #fff;
}

::v-deep .el-upload--picture-card {
  background-color: #0c1932;
  width: 100px;
  height: 100px;
  line-height: 100px;
}

::v-deep .el-textarea__inner {
  background-color: #0c1932;
  border: 2px solid #0f3465;
  color: #bcd8e6;
}

// 按钮样式修改
::v-deep .el-button {
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}

::v-deep .el-button:hover {
  border-color: #0196df;
}

// 主要
::v-deep .el-button--primary {
  color: #fff;
  background-color: #0b5ba7;
  border-color: #1890ff;
  font-size: 12px;
}

::v-deep .el-button--primary:hover {
  color: #fff;
  background-color: #0765bd;
  border-color: #1890ff;
}

// 删除
::v-deep .el-button--danger.is-plain {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--danger.is-plain:hover {
  background-color: transparent;
  border-color: #ff9292;
}

::v-deep .el-button--danger.is-plain.is-disabled {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--danger.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: #ff9292;
}

// 警告
::v-deep .el-button--warning.is-plain {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--warning.is-plain:hover {
  background-color: transparent;
  border-color: #c7b37e;
}

::v-deep .el-button--warning.is-plain.is-disabled {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--warning.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: #c7b37e;
}

// 成功
::v-deep .el-button--success.is-plain {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--success.is-plain:hover {
  background-color: transparent;
  border-color: #67a582;
}

::v-deep .el-button--success.is-plain.is-disabled {
  background-color: transparent;
  border-color: #fff;
}

::v-deep .el-button--success.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: #67a582;
}

// el-form 表单样式修改
::v-deep .el-form-item__label {
  font-size: 12px;
}

::v-deep .el.form-item--small.el-form-item {
  margin-bottom: 15px;
}

// input输入框
::v-deep .el-input__inner {
  background-color: #0c1932;
  border: 2px solid #0f3465;
  color: #bcd8e6;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #0c1932;
  border: 2px solid #0f3465;
  color: #bcd8e6;
}

// 时间选择器样式修改
::v-deep .el-picker-panel {
  background-color: #0b3472 !important;
  color: #fff !important;
}

::v-deep .el-picker-panel__footer {
  background-color: #0b3472 !important;
}

// el-select样式修改
//修改总体选项的样式 最外层
::v-deep .el-select-dropdown {
  // position: static;
  top: auto !important;
  left: auto !important;
  background-color: #0c1932;
  border: 2px solid #174a8d;
  color: #fff;
}

// ::v-deep .el-select-dropdown__list {
//   // background-color: #0c1932 !important;
//   // border: 2px solid #174a8d !important;
//   // color: #fff;
// }

// //修改单个的选项的样式
::v-deep .el-select-dropdown__item {
  background-color: transparent;
  color: #fff;
  font-size: 12px;
}

//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  background-color: #5e93e2;
}

::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #184281;
  color: #fff;
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #427ce0;
}

::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #2e4a85;
}

// ::v-deep .el-popper .popper__arrow,
// .el-popper .popper__arrow::after {
//   // display: none;
//   border-color: #5e93e2;
// }

// el-table 样式修改
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: #172a57;
  color: #ffffff;
}

::v-deep .el-table th {
  background-color: #172a57;
  color: #fff;
}

::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: #07205a;
  color: #ffffff;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #3c81d952;
}

// 修改鼠标经过行时单元格颜色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #4a5c8b;
}

// 修改鼠标选中行
::v-deep .el-table__body tr.hover-row>td.el-table__cell {
  background-color: #4a5c8b !important;
}

// 修改行内线
::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border-bottom: 1px solid #c4cdd1;
}

// 修改表格最底部颜色和高度
// ::v-deep .el-table::before {
//   border-bottom: 1px solid red;
//   height: 4px;
// }

// 修改表格无数据背景，字体颜色
::v-deep .el-table__empty-block {
  background: #07205a;
}

::v-deep .el-table__empty-text {
  color: #fff;
}

// 表格滚动条样式修改
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 8px; // 纵向滚动条 必写
}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

// 分页样式修改
::v-deep .pagination-container {
  background-color: transparent;
  padding: 32px 16px;
}

::v-deep .el-pagination__total {
  color: #fff;
}

::v-deep .el-pagination__jump {
  color: #fff;
}

// el-tag样式修改
::v-deep .el-tag.el-tag--info {
  background-color: #0b3472;
  color: #fff;
}

// el-card 样式修改
::v-deep .el-card {
  background: transparent;
  color: #fff;
}

::v-deep .el-card__body {
  padding: 10px;
}

theme.css

/******************颜色变量区域*****开始*************/
//边框颜色
$border-color: #4d9ef5;


/******************颜色变量区域*****结束*************/

// 弹窗样式修改
::v-deep .el-dialog {
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  // margin: 0px !important;
  border: 1px solid $border-color;
  background-color: #07265d;
  color: #fff;
  max-height: 1030px;
  height: auto !important;
}

::v-deep .el-dialogs > .el-dialog {
  // top: 6vh;
  // left: 0;
  transform: none;
  // margin: 0 auto !important;
}

::v-deep .el-dialog__header {
  background-color: #1662ac;
  padding: 20px !important;
}

::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 25px;
  font-weight: bold;
}

::v-deep .el-dialog__body {
  background-color: #07265d;
  color: #fff;
  max-height: 960px;
  overflow: auto;

  // 滚动条的宽/高
  &::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 8px; // 纵向滚动条 必写
  }

  // 滚动条的滑块
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
}

// 按钮样式修改
::v-deep .el-button {
  color: #7fc0f7;
  background-color: transparent;
  font-size: 12px;
  border-color: $border-color;
}

::v-deep .el-button:hover {
  border-color: $border-color;
}

//文字按钮 样式
::v-deep .el-button--text {
  border: none;
}

// 主要
::v-deep .el-button--primary {
  color: #fff;
  background-color: #1791fe;
  border-color: $border-color;
  font-size: 12px;
}

::v-deep .el-button--primary:hover {
  color: #fff;
  background-color: #0765bd;
  border-color: $border-color;
}

// 删除
::v-deep .el-button--danger.is-plain {
  background-color: transparent;
  border-color: $border-color;
  color: #7fc0f7;
}

::v-deep .el-button--danger.is-plain:hover {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--danger.is-plain.is-disabled {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--danger.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: $border-color;
}

// 警告
::v-deep .el-button--warning.is-plain {
  background-color: transparent;
  border-color: $border-color;
  color: #7fc0f7;
}

::v-deep .el-button--warning.is-plain:hover {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--warning.is-plain.is-disabled {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--warning.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: $border-color;
}

// 成功
::v-deep .el-button--success.is-plain {
  background-color: transparent;
  border-color: $border-color;
  color: #7fc0f7;
}

::v-deep .el-button--success.is-plain:hover {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--success.is-plain.is-disabled {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--success.is-plain.is-disabled:hover {
  background-color: transparent;
  border-color: $border-color;
}

::v-deep .el-button--info.is-plain:hover,
::v-deep .el-button--info.is-plain:focus {
  background: #1791fe;
  border-color: $border-color;
}

// el-form 表单样式修改
::v-deep .el-form-item__label {
  color: #fff;
  font-size: 12px;
}

::v-deep .el-upload--picture-card {
  background-color: #0c1932;
  width: 100px;
  height: 100px;
  line-height: 100px;
}

::v-deep .el-textarea__inner {
  // background-color: #0c1932;
  background-color: transparent;
  border: 1px solid $border-color;
  color: #fff;
}

::v-deep .el.form-item--small.el-form-item {
  margin-bottom: 15px;
}

// input输入框
::v-deep .el-input__inner {
  // background-color: #0c1932;
  background-color: transparent;
  border: 1px solid $border-color;
  color: #fff;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border: 1px solid $border-color;
  color: #fff;
}

// 时间选择器样式修改
::v-deep .el-date-editor {
  .el-range-input {
    background-color: transparent;
    color: #fff;
  }

  .el-range-separator {
    color: #fff;
  }

}

::v-deep .el-picker-panel {
  background-color: #0b3472 !important;
  color: #fff !important;
}

::v-deep .el-picker-panel__footer {
  background-color: #0b3472 !important;
}

// el-select样式修改
//修改总体选项的样式 最外层
::v-deep .el-select-dropdown {
  // position: static;
  top: auto !important;
  left: auto !important;
  background-color: #0c1932;
  border: 2px solid $border-color;
  color: #fff;
}

// //修改单个的选项的样式
::v-deep .el-select-dropdown__item {
  background-color: transparent;
  color: #fff;
  font-size: 12px;
}

//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  background-color: #5e93e2;
}

::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #184281;
  color: #fff;
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: $border-color;
}

::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: $border-color;
}

// 单选框
::v-deep .el-radio {
  color: #fff;
}

// 复选框
::v-deep .el-checkbox {
  color: #fff;
}

::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: transparent;
}

// el-table 样式修改
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  // 最外层透明
  background-color: transparent;
  color: #ffffff;
}

/* 表格内背景颜色透明 */
::v-deep .el-table th {
  background-color: #0c41af;
  color: #fff;
}

::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  color: #ffffff;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #3c81d952;
}

// 修改鼠标经过行时单元格颜色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #135db867;
}

// 修改鼠标选中行
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #135db867 !important;
}

// 当前选中行
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: #135db867;
}

// 修改行内线
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell {
  border: none;
}

::v-deep .el-table td,
::v-deep .building-top .el-table th.is-leaf {
  border: none;
}

// 修改表格最底部颜色和高度
::v-deep .el-table::before {
  border-bottom: 1px solid $border-color;
  // height: 4px;
  height: 0px;
  //border: none;
}

// 修改表格无数据背景，字体颜色
::v-deep .el-table__empty-block {
  background: transparent;
}

::v-deep .el-table__empty-text {
  color: #fff;
}

// 表格复选框
::v-deep .el-checkbox__inner {
  border: 1px solid $border-color;
  background-color: transparent;
}

// 表格滚动条样式修改
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 8px; // 纵向滚动条 必写
}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

//分页样式修改
::v-deep .pagination-container {
  background-color: transparent;
  padding: 32px 16px;
}

::v-deep .el-pagination .btn-prev {
  background: none;
}

::v-deep .el-pagination .btn-next {
  background: none;
}

::v-deep .el-pagination__total {
  color: #fff;
}

::v-deep .el-pagination__jump {
  color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li {
  background: none;
  color: #fff;
}

// el-tag样式修改
::v-deep .el-tag.el-tag--info {
  background-color: #0b3472;
  color: #fff;
}

// el-card 样式修改
::v-deep .el-card {
  background: transparent;
  color: #fff;
  border: 1px solid $border-color;
}

::v-deep .el-card__header {
  border-bottom: 1px solid $border-color;

  .clearfix {
    font-weight: bold;
  }
}

::v-deep .el-card__body {
  padding: 10px;
}

::v-deep .el-step__title.is-process {
  color: #fff;
}

// el-descriptions 描述列表
::v-deep .el-descriptions__body {
  color: #fff;
  background-color: transparent;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  color: #fff;
  font-weight: 700;
  background: transparent;
}

// el-tree 样式修改
::v-deep .el-tree {
  color: #fff;
  background-color: transparent;
  height: calc(100% - 36px - 10px);
  margin-top: 10px;
  overflow: auto;
}

::v-deep .el-tree-node__content:hover {
  // background-color: #4178cb8c;
  background-color: transparent;
  color: #139bc3;
}

::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent;
  color: #139bc3;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
  color: #139bc3;
}

::v-deep .tree-border {
  border: 1px solid $border-color;
}

// vue-treeselect 样式修改
::v-deep .vue-treeselect .vue-treeselect__control {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  font-weight: normal;
  background: transparent;
  border: 1px solid $border-color;
}

::v-deep .vue-treeselect .vue-treeselect__menu {
  background: #0b3472;
}

::v-deep .vue-treeselect .vue-treeselect__option--highlight {
  background: #1662AC;
}

::v-deep .vue-treeselect .vue-treeselect__option--selected {
  background: #1662AC;
}

::v-deep .vue-treeselect .vue-treeselect__label {
  font-size: 12px;
  font-weight: normal;
}

::v-deep .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: center;
  caret-color: #fff;
}

::v-deep .vue-treeselect__single-value {
  color: #fff;
}

::v-deep .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
  border-color: $border-color;
}


// el-tabs 样式修改
::v-deep .el-tabs--border-card {
  background: transparent;
  border: 1px solid $border-color;

  .el-tabs__header {
    background-color: transparent;
    border-bottom: 1px solid $border-color;

    .el-tabs__item.is-active {
      color: #fff;
      background-color: #0c5ca4;
      border-right-color: $border-color;
      border-left-color: $border-color;
    }

    .el-tabs__item:not(.is-disabled):hover {
      color: #fff;
      background-color: #0c5ca4;
    }
  }
}

::v-deep .el-tabs__item {
  color: #fff;
}

::v-deep .el-tabs__item:hover {
  color: #1890ff;
}

::v-deep .el-tabs__item.is-active {
  color: #1890ff;
}

// 滚动条样式修改
::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}

// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

/*级联选择 样式调整********************************/
::v-deep .cascader {
  width: 350px;
  margin-bottom: 10px;
  border: 1px solid $border-color;
  border-radius: 5px;
}