vue-insagent-pc/src/assets/css/common.css

:root {
  --themeColor: #D42426;
  --themeColorHover: #BB1012;
}

/* flex布局 */
.u-f,
.u-f-ac,
.u-f-ajc,
.u-f-jsb,
.u-f-je,
.u-f1,
.u-f-column,
.u-f-sa {
  display: flex;
}

.u-f-ac,
.u-f-ajc {
  align-items: center;
}

.u-f-ajc {
  justify-content: center;
}

.u-f-jsb {
  justify-content: space-between;
}

.u-f-je {
  justify-content: flex-end;
}

.u-f-sa {
  justify-content: space-around;
}

.u-f1 {
  flex: 1;
}

.u-f-column {
  flex-direction: column;
}

.flex {
  display: flex;

}

.f-wrap {
  flex-wrap: wrap;
}

.j-s {
  justify-content: space-between;
}

.j-c {
  justify-content: center;
}

.j-start {
  justify-content: flex-start;
}

.j-end {
  justify-content: flex-end;
}

.a-c {
  align-items: center;
}

.a-start {
  align-items: flex-start;
}

.a-end {
  align-items: flex-end;
}

.f-c {
  flex-direction: column;
}

.p-1 {
  padding: 10px;
}

.p-2 {
  padding: 20px;
}

.mrgin-1 {
  margin: 10px;
}

.mrgin-2 {
  margin: 20px;
}

.m-top-5 {
  margin-top: 5px;
}

.m-top-10 {
  margin-top: 10px;
}

.m-btn-10 {
  margin-bottom: 10px;
}

.m-btn-15 {
  margin-bottom: 15px;
}

.el-button:hover,
.el-button:focus {
  color: var(--themeColor) ;
}

.el-button--primary,
.el-button--primary:focus {
  background-color: var(--themeColor) !important;
  color: #fff;
  border-color: var(--themeColor) !important;
}

.el-button--primary.is-plain {
  background-color: #EAEDF1 !important;
  color: var(--themeColor);
  border-color: #EAEDF1 !important;
}

.el-button--primary:hover {
  color: #fff;
  background-color: var(--themeColorHover);
  border-color: var(--themeColorHover);
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover {
  background-color: #D2D2D2;
  color: var(--themeColor);
  border-color: #D2D2D2;
}

.el-tabs__active-bar,
.el-date-table td.start-date span,
.el-date-table td.end-date span,
.el-date-table td.current:not(.disabled) span {
  background-color: var(--themeColor)
}

.el-tabs__item:hover,
.el-picker-panel__icon-btn:hover,
.el-date-table td.available:hover,
.el-button--text,
.el-pager li:hover,
.el-dialog__headerbtn:hover .el-dialog__close,
.el-button--text:hover,
.el-button--text:focus {
  color: var(--themeColorHover);
}

.dialog-title {
  font-weight: bold;
  padding-bottom: 10px;
}

.el-pager li.active,
.el-select-dropdown__item.selected,
.el-button--text,
.el-tabs__item.is-active,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-checkbox__input.is-checked+.el-checkbox__label,
.el-button--primary.is-plain:focus {
  color: var(--themeColorHover);
}

.el-range-editor.is-active,
.el-pagination button,
.el-pager li,
.el-pagination__sizes .el-input .el-input__inner:hover,
.el-checkbox__inner:hover,
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: var(--themeColorHover);
}

.el-select .el-input.is-focus .el-input__inner,
.el-input__inner:focus,
.el-select .el-input__inner:focus,
.el-button--primary.is-plain:focus {
  border-color: var(--themeColor);
}

.el-radio__input.is-checked+.el-radio__label {
  color: var(--themeColor) !important;
}

.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: var(--themeColor) !important;
  border-color: var(--themeColor) !important;
}

.el-button--text,
.el-button--text:hover,
.el-button--text:focus {
  border: none;
  background-color: transparent;
}

.el-button--primary.is-plain:focus {
  background-color: #C8CDD9;
}

.themeColor {
  color: var(--themeColor);
}

.el-table .flagRow {
  background: rgba(64, 158, 255, .1) !important;
}