.component-search-table {
  font-family: PingFangSC-Regular;
  padding: 24px;
  .component-search-table-container {
    .component-search-table-nav-title {
      color: #333841;
      font-size: 20px;
      font-weight: 500;
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 28px;
    }
    .component-search-table-form {
      background: #FFFFFF;
      border-radius: 8px;
      padding: 24px;
      margin-top: 16px;
      .el-form-item {
        margin-bottom: 0px;

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }

        .el-date-editor {
          display: block;
          width: 100%;
          height: 34px;
        }
      }
      .component-search-table-btn-wrap {
        display: flex;
        .component-search-table-button {
          border-radius: 4px;
          display: block;
          height: 32px;
          padding: 0px 16px;

          &.clear {
            border: 1px solid #DCDFE6;
            color: #999999;
            margin-left: 8px;
          }
          .component-search-table-icon-clear {
            background: url(./assets/ico_clear.svg) 100%;
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-bottom: -2px;
          }
        }
      }
    }
    .component-search-table-table {
      background: #FFFFFF;
      border-radius: 8px;
      margin-top: 12px;
      padding: 20px 24px 24px;
      .component-search-table-action-bar {
        align-items: center;
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 16px;
          font-weight: 500;
          font-family: PingFangSC-Medium;
          color: #212026;
        }
        .action-bar {
          .el-button {
            border-radius: 4px;
            height: 32px;
            padding: 0px 16px;
          }
        }
      }
      .el-table {
        margin-top: 12px;
        th.el-table__cell {
          background: #F7F8FA;
          color: #494B53;
          font-weight: 500;
          font-family: PingFangSC-Medium;
        }
        .el-button--text {
          color: #2A68FF;
        }
        .cell {
          padding: 0 10px;
        }
      }
      .el-pagination {
        text-align: right;
        margin-top: 16px;
        .btn-prev, .btn-next, .el-pagination__total, .el-input__inner {
          color: #1D2129;
          font-size: 14px;
          height: 32px;
          line-height: 32px;
        }
        .el-pagination__total {
          margin-right: 20px;
        }
        .el-input__inner {
          background: #F2F3F5;
          border: 0px;
        }
        .el-pager {
          .number {
            border-radius: 2px;
            color: #4E5969;
            font-size: 14px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            min-width: 32px;
            margin-left: 8px;
            &.active {
              background-color: rgba(42, 104, 255, 0.1);
              color: #2A68FF;
            }
            &:hover {
              background-color: #F7F8FA;
            }
          }
        }
      }
    }
  }
}