cbjsxt-front-master/src/styles/element-style-custom.scss

/* 改变系统主题色变量 ——*/
$--theme-color: #2761ff;
/*主题颜色（即首页导航栏颜色）——#2761ff*/
$--theme-color-active: #1f4ecc;
/*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/

/* 改变element组件主题色变量 ——*/
$--color-primary: #1677ff;
/*主题颜色 默认——#409EFF*/
$--color-primary-light-3: #4096ff !default;
/* mix($--color-white, $--color-primary, 30%) */
$--color-primary-light-5: #bbdaff !default;
/* mix($--color-white, $--color-primary, 50%) */
$--color-primary-light-7: #cce3ff !default;
/* mix($--color-white, $--color-primary, 70%) */
$--color-primary-light-8: #ddecff !default;
/* mix($--color-white, $--color-primary, 80%) */
$--color-primary-light-9: #f0f7ff !default;
/* mix($--color-white, $--color-primary, 90%) */
$--color-success: #08b767;
/*成功颜色——#67c23a*/
$--color-warning: #faad14;
/*警告颜色——#e6a23c*/
$--color-danger: #ff4d4f;
/*危险颜色——#f56c6c*/
$--color-info: #595959;
/*信息颜色——#909399*/
$--color-text-primary: rgba(0, 0, 0, 0.88);
/*主要文字颜色——#303133*/
$--color-text-regular: rgba(0, 0, 0, 0.65);
/*常规文字颜色——#606266*/
$--color-text-secondary: rgba(0, 0, 0, 0.45);
/*次要文字颜色——#909399*/
$--color-text-placeholder: rgba(0, 0, 0, 0.25);
/*占位文字颜色——#c0c4cc*/
$--input-disabled-color: rgba(0, 0, 0, 0.55);
/*占位文字颜色——#c0c4cc*/
$--border-color-base: #e8e8ea;
/*一级边框颜色——#dcdfe6*/
$--border-color-light: #eeeef0;
/*二级边框颜色——#e4e7ed*/
$--border-color-lighter: #f0f1f3;
/*三级边框颜色——#ebeef5*/
$--border-color-extra-light: #f4f4f4;
/*四级边框颜色——#f2f6fc*/
$--color-white: #ffffff;
/*基础白色——#FFFFFF*/
$--color-black: #000000;
/*基础黑色——#000000*/
$--fill-base: #f0f1f3 !default;
$--background-color-base: #f2f3f5;
/*基础背景色——#F5F7FA*/
$--background-color-secondary: #f0f2f5;
/*第二基础背景色——#F0F2F5*/
$--color-secondary: #dfebfc;
$--purple-color: rgb(169, 102, 245);
$--pink-color: rgb(255, 119, 119);
/* 左侧树宽度设置 */
$--aside-width: 230px;
$--border-color-hover: #4096ff !default; // 悬浮边框颜色 --#C0C4CC
$--select-option-hover-background: #e6f4ff !default; // 悬浮选项背景色 --#f5f7fa
$--input-placeholder-color: rgba(0,
    0,
    0,
    0.25) !default; // 输入框占位符颜色 --#C0C4CC
$--box-shadow-light: 0px 2px 8px 0px rgba(0, 0, 0, 0.06) !default; // 轻微阴影
$--box-shadow-hover-light: 0px 2px 8px 0px rgba(22, 119, 255, 0.2) !default; // 选中阴影

$--border-radius-base: 4px !default;
$--input-border-radius: $--border-radius-base !default;

$--pagination-button-height: 32px !default;

/* 自定义主题色变量 */
.primaryColor {
  background-color: $--color-primary;
}

//主要的一步：
:export {
  aside_width: $--aside-width;
}

// 表单设计页面主题颜色
$--form-design-active-color: #409eff;
$base-color-black: $--color-black;
$base-color-white: $--color-white;
$base-color-blue: $--color-primary;
$base-color-green: #67c23a !default;
$base-color-gray: #909399 !default;
$base-color-orange: #cf9236 !default;
$base-color-red: #dd6161 !default;
$base-color: #333333;
$base-border-color: #ebebeb;

//顶部导航高
$base-header-height: 60px;
$base-collapse-bg: #f6f6f6;

// 表格相关配置
$--table-border-color: #eeeef0 !default; // 表格边框颜色
$--table-border: 1px solid $--table-border-color !default; // 表格边框
$--table-header-background-color: #f9f9f9 !default; // 表格表头背景颜色
$--table-header-font-color: rgba(0, 0, 0, 0.85) !default; // 表格表头字体颜色
$--table-font-color: rgba(0, 0, 0, 0.65) !default; // 表格字体颜色

// 输入框相关配置
$--input-focus-border: #4096ff !default; // 输入框聚焦边框颜色

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import '~element-ui/packages/theme-chalk/src/index';

@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}

//弹窗样式
.manage-dialog__wrap {
  overflow: unset !important;

  .el-dialog {
    width: 70%;
    height: 72%;

    .el-dialog__header {
      height: 24px;
      padding: 10px 0;
      margin: 0 20px;
      line-height: 24px;
      border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__title {
      font-size: 16px;
      color: #333;
    }

    .el-dialog__headerbtn {
      top: 14px;
    }

    .el-dialog__body {
      height: calc(100% - 120px);
      padding-top: 10px;
      padding-bottom: 10px;
      overflow: auto;
      font-size: 12px;

      .el-main {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    .el-input__inner {
      font-size: 12px;
    }
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .dialog-footer {
    text-align: center;
  }
}

@include b(input) {
  @include when(disabled) {
    .el-input__inner {
      &::placeholder {
        color: $--input-disabled-color;
      }
    }
  }
}

.manage-dialog__wrap {
  @media (max-width: 1024px) {
    .el-dialog {
      width: 100%;
      height: 90%;
      margin-top: 4vh !important;
    }
  }

  @media (min-width: 1152px) and (max-width: 1400px) {
    .el-dialog {
      width: 90%;
    }
  }
}

.el-dialog__footer {
  text-align: center;
}

// htTable顶部按钮样式
.ht-table {
  .el-radio {
    .el-radio__label {
      display: none;
    }
  }
}

.tooltip-wrapper {
  position: relative;
  top: 10px;
  display: inline-block;
  padding: 4px 6px;
}

.tooltip-wrapper::before {
  position: absolute;
  top: -10px;
  left: 50%;
  content: '';
  border-color: transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  border-top-color: black;
  opacity: 1;
  transform: translateX(-50%);
}

.msg-log-icon {
  position: relative;
}

.log-id {
  padding-top: 10px;
  color: #333;
}

.msg-log-content {
  position: absolute;
  top: -5px;
  left: 50%;
  min-width: 80px;
  padding: 4px 2px;
  color: #fff;
  text-align: center;
  pointer-events: auto;
  background: black;
  border-radius: 5px;
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
}

.tooltip-wrapper:hover::after,
.tooltip-wrapper:hover::before {
  opacity: 1;
}

/* 右侧 */
.tooltip-wrapper:hover[position='right']::before {
  top: 15%;
  left: 8%;
  margin-left: -3px;
  transform: translateY(-50%) rotate(-90deg);
}

.tooltip-wrapper[position='right']>.msg-log-content {
  top: 50%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
}

.import-export__wrap {
  .el-dropdown {
    padding-right: 14px;
    font-size: 14px;
  }
}

.table-header-btn__wrap {
  .clear-all-btn {
    margin-top: 4px;
  }
}

//无数据时显示图片样式
.el-tree__empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .no-data-text {
    margin: 0;
  }

  .el-image__inner {
    width: 380px;
  }
}

//全局表格样式
.el-table__fixed {
  z-index: 998;
}

.el-table {

  // border: 0;
  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    .el-table__cell {
      z-index: auto;
      padding: 16px 0;
      background: $--table-header-background-color;

      .cell {
        font-size: 14px;
        font-weight: bold;
        color: $--table-header-font-color;
      }
    }
  }

  .el-table__body {
    .el-table__cell {
      padding: 16px 0;

      .cell {
        font-size: 14px;
        color: $--table-font-color;

        .el-button {
          font-size: 14px;
        }
      }
    }

    .el-table__row:nth-child(2n) {
      background: $--table-header-background-color;
    }
  }

  th.el-table__cell {
    font-size: 14px;
    color: #333;
    background: #f4f4f4;
  }
}

p,
ul,
li {
  padding: 0;
  margin: 0;
}

// 子表中 radio和checkbox对齐样式
.xh_table {
  .ht-form-inputs__block {

    .el-checkbox-group,
    .el-radio-group {
      text-align: left;
    }
  }
}

.ht-selector__table {
  &::before {
    height: 0;
  }
}

.follow-theme-background-color {
  background-color: #409eff !important;
}

.follow-theme-color {
  color: #409eff !important;
}

//表格校验样式
.form-table__container {
  .form-table_box {
    .xh_table {
      .inputs {
        div[aria-invalid='true'] {
          padding: 8px 0;
        }

        div[aria-invalid='true']+.field-tail__wrap {
          position: absolute;
          left: 10px;
          margin-top: 36px;
          text-align: left;
        }
      }
    }
  }
}

.button-theme-style {
  .el-select-dropdown__item.selected {
    color: unset;
  }

  .el-select-dropdown__item:nth-child(2) {
    color: $--color-primary;
  }

  .el-select-dropdown__item:nth-child(3) {
    color: $--color-success;
  }

  .el-select-dropdown__item:nth-child(4) {
    color: #ccc;
  }

  .el-select-dropdown__item:nth-child(5) {
    color: $--color-warning;
  }

  .el-select-dropdown__item:nth-child(6) {
    color: $--color-danger;
  }
}

.el-table__fixed {
  z-index: 999;
}

// 全局下拉更多
.template-opterate-item {
  display: inline-block;

  span {
    padding: 0;
    margin-right: 6px;
    color: $--color-primary;
    text-decoration: none;
    cursor: pointer;
  }

  span:hover {
    border-bottom: 1px solid $--color-primary;
  }
}

.template-opterate-dropdown {
  border: 0.8px solid $--border-color-base;
  border-color: $--border-color-base;
  border-radius: 4px;

  .el-dropdown__caret-button.el-button--default::before {
    background: none;
  }

  .el-dropdown__caret-button {
    padding-left: 0px;
  }

  .template-dropdown-item {
    color: $--color-text-regular;
    background: transparent;
    border-radius: 4px;
  }

  .template-dropdown-item span {
    padding: 7px 4px 7px 6px !important;
  }

  .el-button {
    color: $--color-text-regular;
    background: transparent;
    border: none;
  }
}

.template-opterate-dropdown:hover {
  border: 0.8px solid $--color-primary;
  border-radius: 4px;

  .template-dropdown-item {
    color: $--color-primary;
    cursor: default;
    background: $--select-option-hover-background;
  }

  .el-button {
    color: $--color-primary;
    background: $--select-option-hover-background;
  }

  .template-dropdown .template-dropdown-item span {
    padding: 7px;
  }
}

.el-collapse-item__header {
  height: auto;
}

.preview-form-container,
.custom-form {

  // 全局栅格布局
  .el-row--flex {
    margin-bottom: 0 !important;
  }

  // 全局表格布局
  .el-main {
    padding: 0px 20px !important;
  }

  // 全局折叠面板
  .el-collapse .el-collapse-item__header {
    margin-bottom: 0 !important;
  }

  // 全局金额和比率
  .ht-form-inputs__block.has-company-box {
    line-height: 32px !important;
  }

  .ht-form-inputs__block.has-company-box>.el-input-number+span {
    margin-left: 6px;
  }
}

// 全局下拉列表
.el-dropdown-menu--mini .el-dropdown-menu__item {
  line-height: 32px;
}

.el-dropdown-menu.el-dropdown-menu--mini {
  .el-dropdown-menu__item::after {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    content: '';
    border-bottom: 1px solid #e6e6e6;
  }

  .el-dropdown-menu__item:last-of-type::after {
    display: none;
    content: '';
  }
}

// 表单相关
.el-input__inner {
  padding-left: 11px;
  cursor: text;

  // &:focus {
  //   box-shadow: 0px 0px 0px 1px rgba(22, 119, 255, 0.2);
  // }
}

.el-input-group {
  .el-input__inner {
    border-radius: $--input-border-radius 0 0 $--input-border-radius;
  }

  .el-input-group__append {
    border-radius: 0 $--input-border-radius $--input-border-radius 0;
  }
}

.el-upload-list__item {
  &:hover {
    background-color: #e6f4ff;
  }
}

// 文本域
@include b(textarea) {
  @include e(inner) {
    &::placeholder {
      font-family: 'Arial';
    }
  }
}

// 步骤条
@include b(step) {
  @include e(head) {
    @include when(process) {
      color: $--color-white;
      border-color: $--color-primary;

      @include e(icon) {
        background-color: $--color-primary;
      }
    }
  }

  @include e(title) {
    @include when(process) {
      font-weight: bold;
      color: $--color-primary;
    }
  }
}

// 按钮
@mixin button-plain($color) {
  color: $color;
  background: $--color-white;
  border-color: $color;

  &:hover,
  &:focus {
    color: $color;
    background: mix($--color-white, $color, 90%);
    border-color: mix($--color-white, $color, 60%);
  }

  &:active {
    color: $color;
    background: mix($--color-white, $color, 90%);
    border-color: mix($--color-white, $color, 60%);
    outline: none;
  }
}

@include b(button) {
  &+& {
    margin-left: 10px;
  }

  @include m(primary) {
    @include button-variant($--button-primary-font-color,
      $--button-primary-background-color,
      $--button-primary-border-color );
  }

  @include m(success) {
    @include button-variant($--button-success-font-color,
      $--button-success-background-color,
      $--button-success-border-color );
  }

  @include m(warning) {
    @include button-variant($--button-warning-font-color,
      $--button-warning-background-color,
      $--button-warning-border-color );
  }

  @include m(danger) {
    @include button-variant($--button-danger-font-color,
      $--button-danger-background-color,
      $--button-danger-border-color );
  }

  @include m(info) {
    @include button-variant($--button-info-font-color,
      $--button-info-background-color,
      $--button-info-border-color );
  }
}

// 分页

@include b(pagination) {
  .el-select .el-input {
    .el-input__inner {
      height: 32px !important;
      padding-right: 25px;
      border-radius: $--pagination-border-radius;
    }
  }

  // .btn-prev,
  // .btn-next,
  // .el-pager li {
  //   min-width: 32px;
  //   height: 32px;
  //   margin: 0 4px;
  //   color: $--color-text-primary;
  //   background-color: $--color-white;
  //   border: 1px solid #d9d9d9;
  //   border-radius: $--border-radius-base;
  // }
  // .el-pager li.active + li {
  //   border-left: 1px;
  // }

  // .el-pager li:not(.disabled) {
  //   &:hover {
  //     color: $--color-primary;
  //     border-color: $--color-primary;
  //   }

  //   &.active {
  //     color: $--color-primary;
  //     background-color: $--color-white;
  //     border-color: $--color-primary;
  //   }
  // }
  @include when(background) {

    .btn-prev,
    .btn-next,
    .el-pager li {
      min-width: 32px;
      height: 32px;
      margin: 0 4px;
      color: $--color-text-primary;
      background-color: $--color-white;
      border: 1px solid #d9d9d9;
      border-radius: $--border-radius-base;
    }

    .el-pager li:not(.disabled) {
      &:hover {
        color: $--color-primary;
        border-color: $--color-primary;
      }

      &.active {
        color: $--color-primary;
        background-color: $--color-white;
        border-color: $--color-primary;
      }
    }
  }
}

//树组件
.treeCont .el-tree,
.el-tree {
  color: $--color-text-primary;
  background: transparent;

  &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: $--select-option-hover-background;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: $--color-primary !important;
    border-color: $--color-primary !important;
  }

  .el-checkbox__inner:hover {
    border-color: $--color-primary !important;
  }

  .el-checkbox__inner::after {
    border-color: #fff;
  }

  .el-tree-node__children {
    .el-tree-node {
      //&:not(:last-child)::after{
      //  content: '';
      //  display: block;
      //  width: 1px;
      //  height: calc(100% - 7px);
      //  background: $--border-color-light;
      //  position: absolute;
      //  left: 31px;
      //  top: 19px;
      //}
      //&::after{
      //  content: '';
      //  display: block;
      //  width: 1px;
      //  height: calc(100% - 7px);
      //  background: $--border-color-light;
      //  position: absolute;
      //  left: 31px;
      //  top: 19px;
      //}
      //&:has(.el-tree-node__children):empty{
      //  &::after{
      //    content: '';
      //    display: block;
      //    width: 1px;
      //    height: calc(100% - 7px);
      //    background: $--border-color-light;
      //    position: absolute;
      //    left: 31px;
      //    top: 19px;
      //  }
      //}
      //&:has(.el-tree-node__children):not(.el-tree-node__children .el-tree-node){
      //  &::after{
      //    display: none;
      //  }
      //}

      //&:first-child{
      //  label.el-checkbox::after{
      //    display: none;
      //  }
      //}
      //label.el-checkbox::after{
      //  content: '';
      //  display: block;
      //  width: 1px;
      //  height: calc(100% - 7px);
      //  background: $--border-color-light;
      //  position: absolute;
      //  left: 50%;
      //  top: -11px;
      //}
      //label.el-checkbox.hideLine{
      //  &::after{
      //    content: '';
      //    display: none  !important;
      //  }
      //}
      //&:last-child{
      //  .el-tree-node__children{
      //    .el-tree-node{
      //      label.el-checkbox::after{
      //        content: '';
      //        display: block;
      //        width: 1px;
      //        height: 12px;
      //        background: $--border-color-light;
      //        position: absolute;
      //        left: 50%;
      //      }
      //      //&:last-child{
      //      //  label.el-checkbox::after{
      //      //    content: '';
      //      //    display: none;
      //      //  }
      //      //}
      //    }
      //  }
      //  label.el-checkbox::after{
      //    content: '';
      //    display: none;
      //  }
      //}
    }
  }

  /* 树形结构节点添加连线 */
  .el-tree-node {
    position: relative;

    .el-tree-node__content {
      height: 32px;
      padding-left: 0 !important;

      &>.el-tree-node__expand-icon {
        flex-shrink: 0;
        padding: 0;
      }

      .el-tree-node__expand-icon {
        display: inline-block;
        width: 24px;
        height: 32px;
        padding: 0;
        background: url(~@/assets/images/t-open.png) no-repeat;
        background-size: contain;

        &.expanded {
          background: url(~@/assets/images/t-close.png) no-repeat;
          background-size: contain;
          transform: none;
        }

        &::before {
          display: none;
          content: '';
        }

        &.is-leaf {
          background: none;
        }
      }

      .el-tree-node__label {
        margin-left: 10px;
      }
    }

    &:last-child:before {
      height: 50px;
    }

    &.is-expanded {
      .el-tree-node__children {
        &:not(:empty):before {
          position: absolute;
          top: 22px;
          right: auto;
          bottom: 0px;
          left: 12px;
          width: 1px;
          height: calc(100% - 22px);
          content: '';
          border-width: 1px;
          border-left: 1px solid $--border-color-light;
        }
      }
    }

    //&:after {
    //  content: "";
    //  left: -4px;
    //  position: absolute;
    //  right: auto;
    //  border-width: 1px;
    //  border-top: 1px solid #BBBBBB;
    //  height: 20px;
    //  top: 24px;
    //  width: 18px;
    //}
  }

  //&>.el-tree-node {
  //  &>.el-tree-node__content{
  //    .el-tree-node__expand-icon{
  //      background: url(~@/assets/img/t-open.png);
  //      background-size: contain;
  //    }
  //  }
  //
  //  &::after {
  //    border: 0px solid;
  //  }
  //}
  .custom-tree-node {
    box-sizing: border-box;
    width: calc(100% - 50px);

    img {
      height: 10px;
      margin-right: 5px;
      object-fit: contain;
    }

    i {
      margin-right: 5px;
      font-size: 10px;
    }

    .tree-node {
      display: flex;
      align-items: center;
    }

    .no-ellipsis {
      box-sizing: border-box;
      width: 100%;
      padding-right: 5px;

      .tree-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .show-ellipsis {
      box-sizing: border-box;
      width: calc(100% - 29px);
      padding-right: 5px;

      &:not(:has(.tree-node)) {
        display: flex;
        align-items: center;
      }

      .tree-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .tree-btn {
      font-weight: bold;
      visibility: hidden;

      .t-edit {
        width: 14px;
        height: 14px;
        margin-right: 5px;
      }

      .t-more {
        width: 14px;
        height: 14px;
      }
    }

    &:hover .tree-btn {
      visibility: visible;
    }
  }

  .el-tree-node__children {
    padding-left: 12px;
  }
}

.el-container.content-layout .el-header.content-layout__header {
  height: 46px !important;
  padding: 0;
}

//tabs组件
.el-tabs.el-tabs--border-card,
.el-tabs {
  &>.el-tabs__header.is-top {
    height: 46px !important;
    line-height: 46px !important;
    background: transparent;
  }

  .el-tabs__nav-wrap {
    padding: 0 20px;

    .el-tabs__active-bar.is-top {
      display: none;
    }

    .el-tabs__nav.is-top {
      display: flex;
      align-items: center;
      border: none;
    }

    .el-tabs__item.is-top {
      box-sizing: border-box;
      height: 46px;
      padding: 0 15px;
      line-height: 46px;
      border-right: none;
      border-left: none;

      &.is-active {
        color: $--color-primary;
        border-bottom: 3px solid $--color-primary;

        .el-link {
          color: $--color-primary;
        }
      }
    }

    .el-tabs__nav.is-left {
      .el-tabs__active-bar {
        width: 3px;
        background-color: $--color-primary;
      }
    }

    .el-tabs__item.is-left {
      box-sizing: border-box;
      height: 46px;
      padding: 0 15px;
      line-height: 46px;

      &.is-active {
        color: $--color-primary;
      }
    }
  }
}

//侧边树
.content-layout__aside.el-aside .process-classify .ht-tree {
  .el-tree {
    color: $--color-text-primary;
  }

  .expanded {
    color: $--color-text-primary;
  }

  .el-tree-node__content {
    &:hover {
      color: $--color-text-primary;
      background: $--background-color-base;
    }

    svg {
      width: 12px;
      height: 10px;
    }
  }

  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: $--select-option-hover-background;
    border-radius: 0;

    .span-ellipsis {

      span,
      i {
        color: $--color-text-primary;
      }
    }
  }
}

//卡片布局
html body .card-mode .card-content .card-item__wrap {
  &:hover {
    border: 1px solid $--color-primary;
    box-shadow: 0px 0px 4px $--color-primary;
  }
}

.card-todo .card-todo__wrap .card-content .card-item__wrap .card-item-content .item-bottom .copy-id {
  color: $--color-primary !important;
}

.top_btn_col {
  .el-dropdown .el-button-group {
    display: flex !important;
    align-items: baseline;

    .el-button {
      padding: 7px 0 !important;
    }

    .el-upload.el-upload--text {
      span {
        height: auto !important;
        line-height: 0px !important;
      }
    }
  }
}