diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 968a93e..be38882 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -185,4 +185,20 @@ aside { .multiselect--active { z-index: 1000 !important; +} + +/**滚动条的宽度*/ +::-webkit-scrollbar { + width: 8px; +} + +//滚动条的滑块 +::-webkit-scrollbar-thumb { + background-color: #c1c1c1; + border-radius: 3px; +} + +// 设置loading-mask +.el-loading-mask{ + background-color: rgba(0,0,0,0.2); } \ No newline at end of file diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 880f7e5..486ab95 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -12,7 +12,7 @@ $panGreen: #30B08F; $menuText:#359AFC; $menuActiveText:#fff; $menuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0.3) 0% 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); -$subMenuActiveText:#339CFF; // https://github.com/ElemeFE/element/issues/12951 +$subMenuActiveText:#339CFF; $subMenuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); $menuBg:#031435; @@ -28,8 +28,6 @@ $mainContainerBorder: 1px solid #113D72; $inputBorder: #339CFF; -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { menuText: $menuText; menuActiveText: $menuActiveText; diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index 931cf39..b725ba2 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/src/assets/styles/yxk-admin.scss @@ -22,9 +22,27 @@ line-height: 30.5px; padding: 0 7px 0 7px; } - .el-button+.el-button { - margin-left: 0 !important; + // xu + .el-button { + font-size: 14px; + color: #fff; + border-color: #339CFF; + background-color: transparent; + // margin-left: 0 !important; + } + .el-button.is-disabled, + .el-button.is-disabled:hover, + .el-button.is-disabled:focus{ + border-color: #339CFF; + background-color: transparent; + color: #339CFF; } + + .el-button:hover, + .el-button:focus{ + background-color: #02255F; + } + .el-select__caret.el-input__icon.el-icon-arrow-up{ line-height: 30.5px; } @@ -123,6 +141,7 @@ // xu // 四角边线 +// 有左右分区时 .container-main{ display: flex; justify-content: space-between; @@ -133,20 +152,23 @@ margin-right: 30px; } .container-left, -.container-right{ +.container-right, +.container-wrap, +.el-card, +.header-container-wrap{ position: relative; min-height: 100%; padding: 0 !important; background-color: $mainContainerBg; border: $mainContainerBorder; - height: calc(100vh - 210px); + min-height: calc(100vh - 210px); &::before, &::after{ content: ""; position: absolute; width: 17px; height: 17px; - z-index: 999; + z-index: 99; } &::before{ top: -1px; @@ -162,13 +184,64 @@ } } +.el-card{ + background-color: transparent; + min-height: auto; + border-radius: 0; + overflow: visible; + .el-card__header{ + background-color: #02255F; + border-bottom: none; + .role-span{ + color: #fff; + } + } + .el-card__body{ + padding: 0; + .head-container{ + padding: 0; + } + .crud-opts{ + padding: 20px; + border-bottom: 1px solid #113D72; + } + } + .el-button { + font-size: 14px; + color: #fff; + border-color: #339CFF; + background-color: transparent; + // margin-left: 0 !important; + } + .el-button--mini{ + padding: 7px 12px; + } + .el-button.is-disabled, + .el-button.is-disabled:hover, + .el-button.is-disabled:focus{ + border-color: #339CFF; + background-color: transparent; + color: #339CFF; + } + .el-tree{ + margin: 20px 0; + } +} + +.header-container-wrap{ + min-height: auto; +} + +// 无左右分区时 +.container-wrap{} + .right-top-line, .left-bottom-line{ display: block; position: absolute; width: 17px; height: 17px; - z-index: 999; + z-index: 99; } .left-bottom-line{ @@ -186,7 +259,47 @@ } .el-tree{ - background: transparent; + background: transparent !important; + .el-tree-node:focus>.el-tree-node__content { + background-color: transparent !important; + } + .is-current>.el-tree-node__content { + background-image: $subMenuActiveBg !important; + color: #fff; + } + .el-tree-node__content{ + padding: 0 30px !important; + height: 40px; + color: $subMenuActiveText; + background-color: transparent; + .el-tree-node__label{ + font-size: 16px; + font-weight: 600; + } + &:hover{ + background-color: transparent !important; + background-image: $subMenuActiveBg; + } + } + .el-tree-node__expand-icon{ + font-size: 16px; + color: $subMenuActiveText; + } + .el-tree-node__children{ + padding: 0 18px; + .el-tree-node__content{ + height: 30px; + } + .el-tree-node__label{ + font-size: 14px; + font-weight: normal; + } + } + +} +.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ + background-color: transparent; + background-image: $subMenuActiveBg; } .el-date-editor .el-range-input{ @@ -194,12 +307,112 @@ color: #fff; } +// table .el-table{ background: transparent; tr{ background: transparent; .el-table__cell{ + height: 60px; background-color: transparent; } } -} \ No newline at end of file + + .el-table__header-wrapper, + .el-table__header{ + th.el-table__cell{ + background-color: #02255F; + border-top: 1px solid #113D72; + border-bottom: none; + &>.cell{ + font-size: 16px; + color: #339CFF; + } + } + } + + .el-table__body-wrapper, + .el-table__fixed-right{ + td.el-table__cell{ + color: #339CFF; + font-size: 14px; + border-bottom: 1px dashed #113D72; + } + } + &::before, + .el-table--group::after, + .el-table--border::after, + .el-table__fixed::before, + .el-table__fixed-right::before{ + background-color: transparent; + } + + .el-checkbox__input.is-checked .el-checkbox__inner, + .el-checkbox__input.is-disabled .el-checkbox__inner{ + border-color: #339CFF; + background: transparent; + &::after{ + border-color: #339CFF; + } + } + + .el-table__body tr.hover-row > td, + .el-table__body tr.hover-row.current-row > td, + .el-table__body tr.hover-row.el-table__row--striped > td, + .el-table__body tr.hover-row.el-table__row--striped.current-row > td { + color: #fff; + background-color: #13439E; + .el-checkbox__input.is-checked .el-checkbox__inner{ + background: #fff; + border-color: #fff; + } + } +} +.el-table__body tr.el-table__row:hover>td.el-table__cell, +.el-table__body tr.el-table__row:focus>td.el-table__cell, +.el-table__body tr.current-row:hover>td.el-table__cell, +.el-table__body tr.current-row:focus>td.el-table__cell{ + color: #fff; + background-color: #13439E; + .el-checkbox__input.is-checked .el-checkbox__inner{ + background: #fff; + border-color: #fff; + } +} + +.el-table__body tr.current-row>td.el-table__cell{ + background-color: transparent; +} + +.el-checkbox__inner{ + background: transparent; + border-color: #339CFF; +} + +.el-icon-arrow-right:before{ + color: #fff; +} + + +// 分页 +.el-pagination{ + padding: 2px 10px; + margin: 10px 0 !important; + .el-pagination__total{ + color: #fff; + } + button{ + background-color: transparent; + &:disabled{ + background-color: transparent; + } + } + .el-pager li.active{ + color: #fff; + background-color: transparent; + } + .el-select .el-input .el-input__inner{ + background-color: transparent; + color: #fff; + } +} diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue index 873991b..c351580 100644 --- a/src/components/Crud/CRUD.operation.vue +++ b/src/components/Crud/CRUD.operation.vue @@ -3,35 +3,32 @@ + 新增 + 修改 + 删除 + 导出 diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 1af5877..f4208e4 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -28,12 +28,16 @@ export default {