样式

liuyg

2021-07-15 777b2b2408d250ecc947a3b83def1e68fc2896fc

样式

 src/styles/element-ui.scss

@@ -25,7 +25,6 @@
  display: none;
}


.el-message__icon,
.el-message__content {
  display: inline-block;
@@ -49,12 +48,19 @@
  padding: 0 !important;
}

.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: transparent;
}


.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: transparent !important;
}

@@ -69,3 +75,285 @@
.el-divider--horizontal {
  margin: 12px 0 !important;
}

@import "./ourBackgroundColor.scss";
//部分全局颜色设置
.el-card__body {
  background-color: $mainB !important;
  // border:1px solid $mainB !important;
  //padding: 16px !important;
}

.el-divider--horizontal {
  margin: 12px 0 !important;
}

.avue-group .el-collapse,
.avue-group .el-collapse-item__wrap {
  border-color: $mainB !important;
  background-color: $mainB !important;
}
.el-form-item__label {
  color: $fontColor !important;
}
.avue-crud__menu {
  background-color: $mainB !important;
}
.el-table {
  background-color: $mainB !important;
  color: $fontColor !important;
}

.el-table th,
.el-table tr {
  background-color: $mainB !important;
  color: $fontColor !important;
}
.el-table__body tr.hover-row > td {
  background-color: $mainBhover !important;
}
.el-button--text {
  color: $fontColor !important;
}
.el-card {
  background-color: $mainB !important;
}
.el-tabs__item {
  color: $fontColor !important;
}
//标签栏活动按钮
.el-tabs__item.is-active {
  color: $fontColorActive1 !important;
}
.el-input.is-disabled .el-input__inner {
  color: $fontColor !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  color: $fontColor !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: $mainB !important;
}
.el-pagination__jump,
.el-pagination__total {
  color: $fontColor !important;
}
.avue-sidebar .el-menu-item i,
.avue-sidebar .el-menu-item span,
.avue-sidebar .el-submenu__title i,
.avue-sidebar .el-submenu__title span {
  color: $fontColor !important;
}
.el-menu-item:hover {
  // background-color: $mainBhover !important;
  color: red !important;
}
.el-input__inner {
  background-color: $inputB !important;
  color: $fontColor !important;
}
.el-tree-node__content {
  background-color: $mainB !important;
  color: $fontColor !important;
}
.el-tree-node__content:hover {
  background-color: $mainBhover !important;
}
//el按钮
.el-button {
  background-color: $mainBhover !important;
  color: $fontColor !important;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: $inputB !important;
  color: $fontColor !important;
}
.el-tree {
  background-color: $inputB !important;
  color: $fontColor !important;
}
.el-table th {
  background-color: $inputB1 !important;
}

//弹窗
.el-dialog__header {
  background-color: $mainB !important;
}
.avue-dialog .el-dialog__title,
.avue-dialog .el-drawer__header,
.el-dialog__title {
  color: $fontColor !important;
}
.el-dialog__body {
  background-color: $mainB !important;
  color: $fontColor !important;
}
.w-e-toolbar {
  background-color: $inputB !important;
  color: $fontColor !important;
}
.el-collapse-item__content {
  color: $fontColor !important;
}

//表格等待
.el-loading-mask {
  background-color: $inputB1 !important;
}

//附件上传弹窗中心
.el-upload-dragger {
  background-color: $inputB1 !important;
}
.el-upload-dragger .el-upload__text,
.el-upload-dragger .el-icon-upload {
  color: $fontColor !important;
}
//单选
.el-radio {
  color: $fontColor !important;
}

//多行输入
.el-textarea__inner {
  background-color: $inputB1 !important;
}

// 数字type input
.el-input-number__decrease,
.el-input-number__increase {
  background-color: $inputB1 !important;
}
//菜单图标
.el-input-group__append,
.el-input-group__prepend {
  background-color: $inputB1 !important;
  color: $fontColor !important;
}
//登入表单 恢复按钮
.login-border .el-input__inner {
  background-color: #fff !important;
  color: #606266 !important;
}
//菜单编辑删除按钮
.el-button + .el-button {
  padding-left: 8px;
  padding-right: 8px;
}
//菜单自定义按钮

.el-button--text,
.el-button--text.is-disabled,
.el-button--text.is-disabled:focus,
.el-button--text.is-disabled:hover,
.el-button--text:active {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
//菜单按钮
.login-border .el-button {
  background-color: $buttonB !important;
  color: #fff !important;
}

//bug窗口
.el-dialog,
.el-pager li {
  background-color: $mainB !important;
}

//导航搜索 下拉
.el-autocomplete-suggestion__wrap {
  background-color: $mainB !important;
}

.el-autocomplete-suggestion li {
  color: $fontColor !important;
}
.el-autocomplete-suggestion li:hover {
  background-color: $inputB1 !important;
}

//总标签栏 更多 下拉框
.el-dropdown-menu {
  background-color: $mainB !important;
}
.el-dropdown-menu__item {
  color: $fontColor !important;
}
.el-dropdown-menu__item:hover {
  background-color: $inputB1 !important;
  color: $fontColor !important;
}
//总标签栏
.avue-tags {
  background-color: $mainBx1 !important;
  color: $fontColor !important;
}

//通知弹窗
.el-popover {
  background-color: $mainB !important;
}

.avue-notice__subtitle,
.avue-notice__title {
  color: $fontColor !important;
}

//左侧导航栏
.avue-logo {
  background-color: $mainB !important;
}
.avue-sidebar {
  background-color: $mainB !important;
}

//表格搜索 下拉
.el-scrollbar__view,
.el-select-dropdown__list {
  background-color: $mainB !important;
}
.el-select-dropdown__item {
  color: $fontColor !important;
}
// .el-select-dropdown__item:hover {
//   background-color: $inputB1 !important;
//   color: $fontColor !important;
// }
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: $inputB1 !important;
  color: $fontColor !important;
}
//弹框消息
.el-message-box {
  background-color: $mainB !important;
}
.el-message-box__content {
  color: $fontColor !important;
}
//用户头像边上的下拉 字体颜色
.el-dropdown-menu__item a {
  color: $fontColor !important;
}

//时间弹窗
.el-picker-panel,
.el-picker-panel__footer {
  background-color: $mainB !important;
}
.el-date-table th,
.el-picker-panel {
  color: $fontColor !important;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: $inputB1 !important;
}

 src/styles/ourBackgroundColor.scss

New file
@@ -0,0 +1,22 @@
$black: #03277c;

$leftMenuB: #1446dd;

$leftMenuTop: #1446dd;

$fontColor: #fff;

$mainB2: #0048e5;
$mainB: #004ca7;
$mainBx1: #013e8a;

$mainBhover: #1d5ce4;

$fontColorActive: #2f96ff;
$fontColorActive1: #52a9ff;

$inputB: #0246e1;

$buttonB: #7cbdff;

$inputB1: rgb(25, 88, 233);