diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss index 2c58aa3..288c6c7 100644 --- a/src/assets/styles/archives-manage.scss +++ b/src/assets/styles/archives-manage.scss @@ -576,10 +576,10 @@ // 借阅管理 .el-dialog .el-dialog__body{ - .el-button{ - background-color: #3A99FD; - border-color: #3A99FD; - } + // .el-button{ + // background-color: #3A99FD; + // border-color: #3A99FD; + // } .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{ @@ -722,15 +722,17 @@ } .el-tag.el-tag--info { - height: 26px; - line-height: 26px; - background-color: #13439E; + margin: 0 0 0 8px; + height: 20px; + line-height: 20px; + font-size: 12px; + background-color: #E8F2FF; border: none; - color: #fff; + color: #0348F3; } .el-tag.el-tag--info .el-tag__close { - background-color: #fff; + background-color: #0348F3; } //出入库 diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 40ee245..10dbbfb 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -360,7 +360,7 @@ } } - +// el-table @mixin elTable-style{ [data-theme="dark"] & { background-color: #02255f; @@ -435,4 +435,77 @@ border-color: #fff; } } +} + +// el-pagination +@mixin pagination-font{ + [data-theme="dark"] & { + color: $mainColor; + } + [data-theme="light"] & { + color: #545B65; + } +} + +@mixin pagination-input{ + @include pagination-font; + [data-theme="dark"] & { + border-color: $mainColor; + } + [data-theme="light"] & { + border-color: #E3E7EE; + } +} + +@mixin pagination-active{ + [data-theme="dark"] & { + background-color: #2072D2; + border-color: #2072D2; + } + [data-theme="light"] & { + background-color:#0348F3; + border-color: #0348F3; + } +} + +@mixin pagination-paper{ + @include pagination-font; + [data-theme="dark"] & { + border: 1px solid $mainColor; + } + [data-theme="light"] & { + border: 1px solid #E3E7EE; + } +} + +@mixin pagination-paper-more{ + [data-theme="dark"] & { + color: $mainColor; + } + [data-theme="light"] & { + color: #E3E7EE; + } +} + +// switch +@mixin switch-style{ + [data-theme="dark"] &{ + border-color: rgb(64, 158, 255); + background-color: rgb(64, 158, 255); + } + [data-theme="light"] & { + border-color: #0348F3 !important; + background-color: #0348F3 !important; + } +} + +@mixin switch-disabled{ + [data-theme="dark"] &{ + border-color: rgb(64, 158, 255); + background-color: rgb(64, 158, 255); + } + [data-theme="light"] & { + border-color: #D6DBE7 !important; + background-color: #D6DBE7 !important; + } } \ No newline at end of file diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index edc1c4b..9e55150 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/src/assets/styles/yxk-admin.scss @@ -344,14 +344,16 @@ .el-pagination{ display: flex; justify-content: flex-end; - // padding: 2px 10px; + padding: 0; margin: 64px 0 10px 0 !important; .el-pagination__total{ - color: $mainColor; + font-size: 12px; + @include pagination-font; } - button{ - height: 24px; - line-height: 24px; + button, + span:not([class*=suffix]){ + height: 24px!important; + line-height: 24px!important; background-color: transparent; &:disabled{ background-color: transparent; @@ -360,224 +362,366 @@ .el-pager li{ min-width: 24px; height: 24px; + margin: 0 4px; line-height: 24px; - color: $mainColor; + border: 1px solid #fff; + font-size: 12px; + @include pagination-input; background-color: transparent; + &.more{ + border: none; + @include pagination-paper-more; + &::before{ + margin-right: 0 !important; + line-height: 24px !important; + } + } } .el-pager li.active{ color: #fff; - background-color: #2072D2; + @include pagination-active; + &+li{ + @include pagination-paper; + } } - .el-select .el-input .el-input__inner{ - background-color: transparent; - color: $mainColor; - border-color: $mainColor; + .el-select .el-input { + width: 70px; + margin: 0 !important; + .el-input__inner{ + height: 24px; + line-height: 24px; + padding-left: 6px; + padding-right: 18px !important; + font-size: 12px; + background-color: transparent; + border-radius: 0; + @include pagination-input; + } } .el-icon-arrow-right:before{ - color: $mainColor; + @include pagination-font; } .btn-prev, .btn-next{ - color: $mainColor; + @include pagination-font; background-color: transparent; } .el-select .el-input .el-select__caret{ - color: $mainColor; + line-height: 24px; + @include pagination-font; } } // 弹框 .el-dialog{ - position: relative; - position: fixed; - width: 620px; - padding: 2px; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - margin-top: 2vh !important; - background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, - linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, - linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, - linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left; - background-size: 50% 50%; - background-repeat: no-repeat; - &::before, - &::after, - .dialog-right-top, - .dialog-left-bottom{ - position: absolute; - content: ""; - width: 134px; - height: 63px; - z-index: 99; - } - &::before{ - left: -6px; - top: -6px; - background: url(~@/assets/images/dialog_left_top.png) no-repeat; - background-size: contain; - } - &::after{ - right: -18px; - bottom: -7px; - background: url(~@/assets/images/dialog_right_bottom.png) no-repeat; - background-size: contain; - } - .dialog-right-top{ - right: -23px; - top: -6px; - background: url(~@/assets/images/dialog_right_top.png) no-repeat; - background-size: contain; - } - .dialog-left-bottom{ - left: -6px; - bottom: -7px; - background: url(~@/assets/images/dialog_left_bottom.png) no-repeat; - background-size: contain; - } + width: 736px; + padding: 0 20px; .el-dialog__header{ - position: absolute; - top: -40px; - left: 50%; - width: 360px; - padding: 0; - transform: translateX(-50%); - &::before{ - position: absolute; - left: -23px; - top: 0; - content: ""; - width: 23px; - height: 42px; - background: url(~@/assets/images/dialog_left.png) no-repeat; - background-size: cover; - } - &::after{ - position: absolute; - right: -23px; - top: 0; - content: ""; - width: 23px; - height: 42px; - background: url(~@/assets/images/dialog_right.png) no-repeat; - background-size: cover; - } + padding: 17px 0; + border-bottom: 1px solid #E6E8ED; .el-dialog__title{ - display: block; - font-size: 18px; - font-weight: bold; - line-height: 38px; - color: #fff; - text-align: center; - background-color: $boxBg; - border-top: 2px solid $mainColor; - border-bottom: 2px solid $mainColor; - } - .el-dialog__headerbtn{ - top: 4px; - right: -160px; + font-size: 16px; } .el-dialog__close{ font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 24px; - color: $mainColor; + font-size: 14px; + color: #545B65; &::before{ - content: "\e60c"; + content: "\e61c"; } } } .el-dialog__body{ - width: 100%; - background-color: $boxBg; - // border: 2px solid $mainColor; - // min-height: 400px; - // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, - // linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, - // linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, - // linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left; - // background-size: 50% 50%; - // background-repeat: no-repeat; - // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6); - } - .dialog-footer{ - margin: 30px auto 0 auto; - text-align: center; - .el-button{ - font-size: 16px; - padding: 8px 28px; - } - .el-button--primary{ - background-color: $desPreviewColor; - } - } -} -.el-dialog, -.right-preview{ - .el-form{ - .el-form-item__label{ - color: $mainColor; - } - .el-input__inner{ - color: #fff; - border: 1px solid $mainColor; - background-color: transparent !important; - } - .vue-treeselect__control, - .vue-treeselect__placeholder, - .vue-treeselect__single-value{ - height: 28px; - // line-height: 28px; - color: #fff; - } - .vue-treeselect__control{ - border: 1px solid $mainColor; - background-color: transparent; - .vue-treeselect__control-arrow{ - color: $mainColor; + padding: 30px 0; + .el-form-item{ + .el-form-item__label{ + color: #0C0E1E; + } + .el-form-item__content{ + width: 225px; + .el-input__inner{ + border-color: #E6E8ED; + &:focus{ + border-color:#0348F3; + } + } + .vue-treeselect__control{ + height: 32px; + border-color: #E6E8ED; + .vue-treeselect__control, + .vue-treeselect__placeholder, + .vue-treeselect__single-value { + height: 32px; + line-height: 32px; + } + } + .el-icon-close{ + border-radius: 0; + font-family: "iconfont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: transparent; + color: #0348F3; + &:before{ + content: "\E61b"; + } + } + .el-radio__inner::after{ + width: 8px; + height: 8px; + } + .el-radio__input.is-checked{ + .el-radio__inner{ + border-color: #0348F3; + background: #0348F3; + } + &+.el-radio__label{ + color: #545B65; + } + } + + } + &.is-error .el-input__inner, + &.is-error .el-input__inner:focus, + &.is-error .el-textarea__inner, + &.is-error .el-textarea__inner:focus{ + border-color:#ED4A41; } } - .el-radio{ - color: #fff; - } - .el-textarea__inner{ - color: #fff; - border: 1px solid $mainColor; - background-color: transparent; + .selecct-dropdown{ + .el-select-dropdown{ + padding: 6px 0; + margin-top: 0; + .el-select-dropdown__item{ + height: 26px; + line-height: 26px; + } + } } - .el-input-number.is-controls-right[class*=small] [class*=increase], - .el-input-number.is-controls-right[class*=small] [class*=decrease]{ + } + .dialog-footer{ + display: flex; + justify-content: flex-end; + margin-top: 60px; + .el-button{ + width: 76px; + height: 32px; + line-height: 32px; + padding: 0; + border-color: #E6E8ED; background-color: transparent; - } - .el-input-number__decrease, - .el-input-number__increase{ - border-left-color: $mainColor; - &>i{ + color: #545B65; + font-weight: normal; + &.el-button--primary{ color: #fff; + background-color: #0348F3; + border-color: #0348F3; } } - .el-input-number__increase{ - border-bottom-color: $mainColor; - } - .el-select .el-input .el-select__caret{ - color: $mainColor; - } - .vue-treeselect .vue-treeselect__control:focus, - .vue-treeselect .vue-treeselect__control:hover{ - border-color: $mainColor !important; - } - .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control, - .el-input.is-disabled .el-input__inner, - .el-textarea.is-disabled .el-textarea__inner{ - color: $desPreviewColor !important; - border: none !important; - background-color: #02255f!important; - } - } + + } + // position: relative; + // position: fixed; + // width: 620px; + // padding: 2px; + // left: 50%; + // top: 50%; + // transform: translate(-50%, -50%); + // margin-top: 2vh !important; + // background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, + // linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, + // linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, + // linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left; + // background-size: 50% 50%; + // background-repeat: no-repeat; + // &::before, + // &::after, + // .dialog-right-top, + // .dialog-left-bottom{ + // position: absolute; + // content: ""; + // width: 134px; + // height: 63px; + // z-index: 99; + // } + // &::before{ + // left: -6px; + // top: -6px; + // background: url(~@/assets/images/dialog_left_top.png) no-repeat; + // background-size: contain; + // } + // &::after{ + // right: -18px; + // bottom: -7px; + // background: url(~@/assets/images/dialog_right_bottom.png) no-repeat; + // background-size: contain; + // } + // .dialog-right-top{ + // right: -23px; + // top: -6px; + // background: url(~@/assets/images/dialog_right_top.png) no-repeat; + // background-size: contain; + // } + // .dialog-left-bottom{ + // left: -6px; + // bottom: -7px; + // background: url(~@/assets/images/dialog_left_bottom.png) no-repeat; + // background-size: contain; + // } + // .el-dialog__header{ + // position: absolute; + // top: -40px; + // left: 50%; + // width: 360px; + // padding: 0; + // transform: translateX(-50%); + // &::before{ + // position: absolute; + // left: -23px; + // top: 0; + // content: ""; + // width: 23px; + // height: 42px; + // background: url(~@/assets/images/dialog_left.png) no-repeat; + // background-size: cover; + // } + // &::after{ + // position: absolute; + // right: -23px; + // top: 0; + // content: ""; + // width: 23px; + // height: 42px; + // background: url(~@/assets/images/dialog_right.png) no-repeat; + // background-size: cover; + // } + // .el-dialog__title{ + // display: block; + // font-size: 18px; + // font-weight: bold; + // line-height: 38px; + // color: #fff; + // text-align: center; + // background-color: $boxBg; + // border-top: 2px solid $mainColor; + // border-bottom: 2px solid $mainColor; + // } + // .el-dialog__headerbtn{ + // top: 4px; + // right: -160px; + // } + // .el-dialog__close{ + // font-family: "iconfont" !important; + // font-style: normal; + // -webkit-font-smoothing: antialiased; + // -moz-osx-font-smoothing: grayscale; + // font-size: 24px; + // color: $mainColor; + // &::before{ + // content: "\e60c"; + // } + // } + // } + // .el-dialog__body{ + // width: 100%; + // // background-color: $boxBg; + // // border: 2px solid $mainColor; + // // min-height: 400px; + // // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, + // // linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, + // // linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, + // // linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left; + // // background-size: 50% 50%; + // // background-repeat: no-repeat; + // // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6); + // } + // .dialog-footer{ + // margin: 30px auto 0 auto; + // text-align: center; + // .el-button{ + // font-size: 16px; + // padding: 8px 28px; + // } + // .el-button--primary{ + // background-color: $desPreviewColor; + // } + // } +} +// .el-dialog, +// .right-preview{ +// .el-form{ +// .el-form-item__label{ +// color: $mainColor; +// } +// .el-input__inner{ +// color: #fff; +// border: 1px solid $mainColor; +// background-color: transparent !important; +// } +// .vue-treeselect__control, +// .vue-treeselect__placeholder, +// .vue-treeselect__single-value{ +// height: 28px; +// // line-height: 28px; +// color: #fff; +// } +// .vue-treeselect__control{ +// border: 1px solid $mainColor; +// background-color: transparent; +// .vue-treeselect__control-arrow{ +// color: $mainColor; +// } +// } +// .el-radio{ +// color: #fff; +// } +// .el-textarea__inner{ +// color: #fff; +// border: 1px solid $mainColor; +// background-color: transparent; +// } +// .el-input-number.is-controls-right[class*=small] [class*=increase], +// .el-input-number.is-controls-right[class*=small] [class*=decrease]{ +// background-color: transparent; +// } +// .el-input-number__decrease, +// .el-input-number__increase{ +// border-left-color: $mainColor; +// &>i{ +// color: #fff; +// } +// } +// .el-input-number__increase{ +// border-bottom-color: $mainColor; +// } +// .el-select .el-input .el-select__caret{ +// color: $mainColor; +// } +// .vue-treeselect .vue-treeselect__control:focus, +// .vue-treeselect .vue-treeselect__control:hover{ +// border-color: $mainColor !important; +// } +// .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control, +// .el-input.is-disabled .el-input__inner, +// .el-textarea.is-disabled .el-textarea__inner{ +// color: $desPreviewColor !important; +// border: none !important; +// background-color: #02255f!important; +// } +// } +// } + +.el-form-item.is-error .el-input__inner, +.el-form-item.is-error .el-input__inner:focus, +.el-form-item.is-error .el-textarea__inner, +.el-form-item.is-error .el-textarea__inner:focus{ + border-color:#ED4A41; } + // el-tree 最终节点不显示箭头 .is-leaf::before { color: transparent; @@ -779,29 +923,29 @@ } } } -.preview-dialog{ - .el-dialog{ - width: 680px !important; - .preview-content{ - max-height: calc(100vh - 330px) !important; - overflow: hidden !important; - overflow-y: auto !important; - border: none !important; - .el-textarea__inner{ - border: 1px solid $mainColor !important; - background-color: transparent !important; - } - } - .el-dialog__header{ - width: 420px !important; - } - } -} -.preview-dialog{ - .el-dialog__body{ - padding: 30px 0 !important; - } -} +// .preview-dialog{ +// .el-dialog{ +// width: 680px !important; +// .preview-content{ +// max-height: calc(100vh - 330px) !important; +// overflow: hidden !important; +// overflow-y: auto !important; +// border: none !important; +// .el-textarea__inner{ +// border: 1px solid $mainColor !important; +// background-color: transparent !important; +// } +// } +// .el-dialog__header{ +// width: 420px !important; +// } +// } +// } +// .preview-dialog{ +// .el-dialog__body{ +// padding: 30px 0 !important; +// } +// } // 去除element ui 中el-input type=“number“的上下箭头 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { @@ -855,14 +999,14 @@ input[type ='number'] { right: -16px; } .el-icon-close{ - font-family: "iconfont" !important; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: 24px; - color: $mainColor; + font-family: "iconfont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 24px; + color: $mainColor; &::before{ - content: "\E60C"; + content: "\E61b"; } } } @@ -923,22 +1067,19 @@ input[type ='number'] { top: 46px !important; } .el-select-dropdown__item{ - // color: $mainColor; @include icon_color; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{ - // background-color: #13439E; @include dropdown_bg_hover; } .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ background-color: transparent; - color: #fff; + @include icon_color; } .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{ - background-color: #13439E; - color: #fff; + @include dropdown_bg_hover; } .el-popper[x-placement^=bottom] .popper__arrow{ @@ -1173,4 +1314,37 @@ input[type ='number'] { transform: translateY(-50%); background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat; } +} + +.el-switch.is-checked .el-switch__core{ + @include switch-style; +} + +.el-switch.is-disabled .el-switch__core{ + @include switch-disabled; +} + +.vue-treeselect--open-below .vue-treeselect__menu{ + padding: 6px 0; + top: 4px !important; + margin-top: 0 !important; + border: none !important; + box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.17) !important; + border-radius: 3px !important; + .vue-treeselect__option{ + height: 26px; + line-height: 26px; + .vue-treeselect__label{ + font-weight: normal; + color: #545B65; + } + &.vue-treeselect__option--highlight, + &.vue-treeselect__option--selected{ + background: #F5F9FC; + .vue-treeselect__label{ + color:#0348F3; + } + } + } + } \ No newline at end of file diff --git a/src/components/Crud/Pagination.vue b/src/components/Crud/Pagination.vue index 8aed184..5b2b29c 100644 --- a/src/components/Crud/Pagination.vue +++ b/src/components/Crud/Pagination.vue @@ -5,7 +5,8 @@ :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" - layout="total, prev, pager, next, sizes" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next" @size-change="crud.sizeChangeHandler($event)" @current-change="crud.pageChangeHandler" /> diff --git a/src/views/archivesManage/archivesSearch/module/detailDialog.vue b/src/views/archivesManage/archivesSearch/module/detailDialog.vue index 4855cb8..a837475 100644 --- a/src/views/archivesManage/archivesSearch/module/detailDialog.vue +++ b/src/views/archivesManage/archivesSearch/module/detailDialog.vue @@ -206,7 +206,6 @@ export default {