From c32c756725f0753a8a5207b66c45a93da752bfde Mon Sep 17 00:00:00 2001 From: zsvg <8680782@qq.com> Date: Mon, 21 Nov 2022 16:47:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/Activiti/modeler/modeler.css | 1 + src/comps/Activiti/modeler2/modeler.css | 4 + src/comps/bpm/tmpl/edit.vue | 4 + src/comps/bpm/view.vue | 2 +- src/comps/sys/OrgModal.vue | 25 +- src/layout/navBars/breadcrumb/breadcrumb.vue | 9 +- src/layout/navBars/breadcrumb/setings.vue | 10 +- src/layout/navBars/breadcrumb/userNews.vue | 2 +- src/layout/navBars/tagsView/tagsView.vue | 21 +- src/main.ts | 1 + src/pages/home/personal.vue | 14 +- src/pages/oa/flow/main/FlowModal.vue | 14 +- src/pages/sys/org/dept/index.vue | 4 +- src/pages/sys/org/dept/tree.vue | 6 +- src/pages/sys/org/group/cate_tree.vue | 6 +- src/theme/dark-vxe.scss | 96 ++++++++ src/theme/dark2.scss | 245 +++++++++++++++++++ src/theme/index.scss | 3 +- src/theme/vboot.scss | 62 ++++- 19 files changed, 507 insertions(+), 22 deletions(-) create mode 100644 src/theme/dark-vxe.scss create mode 100644 src/theme/dark2.scss diff --git a/src/comps/Activiti/modeler/modeler.css b/src/comps/Activiti/modeler/modeler.css index 51000cc..34aa6fd 100644 --- a/src/comps/Activiti/modeler/modeler.css +++ b/src/comps/Activiti/modeler/modeler.css @@ -21,3 +21,4 @@ } + diff --git a/src/comps/Activiti/modeler2/modeler.css b/src/comps/Activiti/modeler2/modeler.css index 51000cc..face5ff 100644 --- a/src/comps/Activiti/modeler2/modeler.css +++ b/src/comps/Activiti/modeler2/modeler.css @@ -13,6 +13,10 @@ background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat !important; } +.dark #modeler-container { + background-color: #666 !important; +} + .djs-palette { border: none !important; background-color: #fff !important; diff --git a/src/comps/bpm/tmpl/edit.vue b/src/comps/bpm/tmpl/edit.vue index 92e5278..28d9c59 100644 --- a/src/comps/bpm/tmpl/edit.vue +++ b/src/comps/bpm/tmpl/edit.vue @@ -322,6 +322,10 @@ const codeShow=async ()=>{ background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat !important; } +.dark .containers{ + background-color: #666 !important; +} + .canvas { width: 100%; height: 100%; diff --git a/src/comps/bpm/view.vue b/src/comps/bpm/view.vue index b11cc11..d15428d 100644 --- a/src/comps/bpm/view.vue +++ b/src/comps/bpm/view.vue @@ -80,7 +80,7 @@ 流程图
-
+
diff --git a/src/comps/sys/OrgModal.vue b/src/comps/sys/OrgModal.vue index 5dd7fdc..a95d7b9 100644 --- a/src/comps/sys/OrgModal.vue +++ b/src/comps/sys/OrgModal.vue @@ -13,7 +13,7 @@
-
+
@@ -680,13 +680,29 @@ export default defineComponent({ diff --git a/src/pages/oa/flow/main/FlowModal.vue b/src/pages/oa/flow/main/FlowModal.vue index caa9338..93fe534 100644 --- a/src/pages/oa/flow/main/FlowModal.vue +++ b/src/pages/oa/flow/main/FlowModal.vue @@ -12,7 +12,7 @@
  • - + {{ item.name }} {{ item.catna }}
    • @@ -31,7 +31,7 @@
    • - + {{ item.name }} {{ item.catna }}
      • @@ -58,6 +58,7 @@ import { defineExpose, reactive, ref, toRaw, toRefs } from 'vue'; import request from '/@/utils/request'; import CateTree from '/@/comps/gen/GenTree.vue'; import { ElMessage } from 'element-plus'; +import vbootPng from '/@/assets/vboot.png'; let p_flow_type = -1;// let p_tab_key = 'k1'; @@ -273,6 +274,11 @@ const clearAndcloseModal = () => { background-color: #f7efec; } +.dark .z-flow-search li:hover { + background-color: #1f1f1f; +} + + /*流程分类树*/ .z-cate-tree li { margin: 3px; @@ -284,4 +290,8 @@ const clearAndcloseModal = () => { .z-cate-tree li:hover { background-color: #f7efec; } + +.z-cate-tree .z-flow-search li:hover { + background-color: #1f1f1f; +} diff --git a/src/pages/sys/org/dept/index.vue b/src/pages/sys/org/dept/index.vue index 0790249..f2e6103 100644 --- a/src/pages/sys/org/dept/index.vue +++ b/src/pages/sys/org/dept/index.vue @@ -11,8 +11,8 @@
      - 查询 - + 查询 + 切换维护方式
      diff --git a/src/pages/sys/org/dept/tree.vue b/src/pages/sys/org/dept/tree.vue index 2fa3177..1f04aae 100644 --- a/src/pages/sys/org/dept/tree.vue +++ b/src/pages/sys/org/dept/tree.vue @@ -38,7 +38,7 @@ draggable :allow-drop='allowDrop' :allow-drag='allowDrag' @node-drag-start='handleDragStart' @node-drag-enter='handleDragEnter' @node-drag-leave='handleDragLeave' @node-drag-over='handleDragOver' @node-drag-end='handleDragEnd' @node-drop='handleDrop' /> -
      +
      新增部门 修改部门 删除部门 @@ -280,4 +280,8 @@ const deleteCate =async () => { font-size: 10px; border-radius: 0; } + +.op-group{ + background-color: #1f1f1f; +} diff --git a/src/pages/sys/org/group/cate_tree.vue b/src/pages/sys/org/group/cate_tree.vue index 4ddd9f5..d0f5f19 100644 --- a/src/pages/sys/org/group/cate_tree.vue +++ b/src/pages/sys/org/group/cate_tree.vue @@ -38,7 +38,7 @@ @node-drag-start='handleDragStart' @node-drag-enter='handleDragEnter' @node-drag-leave='handleDragLeave' @node-drag-over='handleDragOver' @node-drag-end='handleDragEnd' @node-drop='handleDrop' /> -
      新增群组分类 修改群组分类 @@ -281,4 +281,8 @@ const deleteCate =async () => { font-size: 10px; border-radius: 0; } + +.op-group{ + background-color: #1f1f1f; +} diff --git a/src/theme/dark-vxe.scss b/src/theme/dark-vxe.scss new file mode 100644 index 0000000..30c98cb --- /dev/null +++ b/src/theme/dark-vxe.scss @@ -0,0 +1,96 @@ +.dark .vxe-table--render-default .vxe-table--body-wrapper { + background-color: #171717; +} + +.dark .vxe-table--render-default .vxe-body--row.row--current { + background-color: #11273B; +} + +.dark .vxe-table--render-default .vxe-body--row.row--hover { + background-color: #242424; +} + +.dark .vxe-table--render-default .vxe-body--row.row--hover.row--current { + background-color: #11273B; +} + + +//.dark .vxe-table--render-default .vxe-body--row.row--hover .row--current{ +// background-color:#11273B; +//} +//.dark .vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper{ +.dark .vxe-table--render-default.border--full .vxe-table--header-wrapper { + background-color: #0B0B0B; +} + +.dark .vxe-table--render-default.border--full .vxe-table--footer-wrapper { + background-color: #0B0B0B; +} + +.dark .vxe-table--render-default { + color: #C9D1D9; +} + +.dark .vxe-table .vxe-table--header-wrapper { + color: #B0B0B0; +} + +.dark .vxe-table .vxe-table--footer-wrapper { + color: #B0B0B0; +} + +.dark .vxe-toolbar { + background-color: #151515; +} + +.dark .vxe-button { + background-color: #151515; +} + +.dark .vxe-pager { + background-color: #151515; +} + + +.dark .vxe-input--inner { + background-color: #151515; +} + +.dark .vxe-pager .vxe-pager--jump .vxe-pager--goto { + background-color: #151515; +} + +.dark .vxe-pager .vxe-pager--next-btn { + background-color: #151515; +} + +.dark .vxe-pager .vxe-pager--prev-btn { + background-color: #151515; +} + +.dark .vxe-pager .vxe-pager--jump-prev { + background-color: #151515; +} + +.dark .vxe-pager .vxe-pager--jump-next { + background-color: #151515; +} + +.dark .vxe-table--render-default .vxe-body--row.row--checked { + background-color: #11273B; +} + +.dark .vxe-custom--option .vxe-checkbox--icon:before, +.dark .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before, +.dark .vxe-table--filter-option .vxe-checkbox--icon:before, +.dark .vxe-export--panel-column-option .vxe-checkbox--icon:before { + background-color: #151515; +} + + +.dark .vxe-custom--option .vxe-checkbox--icon:before, +.dark .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before, +.dark .vxe-table--filter-option .vxe-checkbox--icon:before, +.dark .vxe-export--panel-column-option .vxe-checkbox--icon:before { + //border: 1px solid #dcdfe6; +} diff --git a/src/theme/dark2.scss b/src/theme/dark2.scss new file mode 100644 index 0000000..69b5493 --- /dev/null +++ b/src/theme/dark2.scss @@ -0,0 +1,245 @@ +/* 深色模式样式 +------------------------------- */ +.dark { + // 变量(自定义时，只需修改这里的值) + --next-bg-main: #1f1f1f; + --next-color-white: #ffffff; + --next-color-disabled: #191919; + --next-color-bar: #dadada; + --next-color-primary: #303030; + --next-border-color: #424242; + --next-border-black: #333333; + --next-border-columns: #2a2a2a; + --next-color-seting: #505050; + --next-text-color-regular: #9b9da1; + --next-text-color-placeholder: #7a7a7a; + --next-color-hover: #3c3c3c; + --next-color-hover-rgba: rgba(0, 0, 0, 0.3); + + // root + --next-bg-main-color: var(--next-bg-main) !important; + --next-bg-topBar: var(--next-color-disabled) !important; + --next-bg-topBarColor: var(--next-color-bar) !important; + --next-bg-menuBar: var(--next-color-disabled) !important; + --next-bg-menuBarColor: var(--next-color-bar) !important; + --next-bg-columnsMenuBar: var(--next-color-disabled) !important; + --next-bg-columnsMenuBarColor: var(--next-color-bar) !important; + --next-border-color-light: var(--next-border-black) !important; + --next-color-primary-lighter: var(--next-color-primary) !important; + --next-color-success-lighter: var(--next-color-primary) !important; + --next-color-warning-lighter: var(--next-color-primary) !important; + --next-color-danger-lighter: var(--next-color-primary) !important; + --next-bg-color: var(--next-color-primary) !important; + --next-color-dark-hover: var(--next-color-hover) !important; + --next-color-menu-hover: var(--next-color-hover-rgba) !important; + --next-color-user-hover: var(--next-color-hover-rgba) !important; + --next-color-seting-main: var(--next-color-seting) !important; + --next-color-seting-aside: var(--next-color-hover) !important; + --next-color-seting-header: var(--next-color-primary) !important; + + // element plus + --el-color-white: var(--next-color-disabled) !important; + ////--el-text-color-primary: var(--next-color-bar) !important; + //--el-border-color: var(--next-border-black) !important; + //--el-border-color-light: var(--next-border-black) !important; + //--el-border-color-lighter: var(--next-border-black) !important; + //--el-border-color-extra-light: var(--el-color-primary-light-8) !important; + //--el-text-color-regular: var(--next-text-color-regular) !important; + //--el-bg-color: var(--next-color-disabled) !important; + --el-color-primary-light-9: var(--next-color-hover) !important; + //--el-text-color-disabled: var(--next-text-color-placeholder) !important; + //--el-text-color-disabled-base: var(--el-color-primary) !important; + //--el-text-color-placeholder: var(--next-text-color-placeholder) !important; + //--el-disabled-bg-color: var(--next-color-disabled) !important; + //--el-fill-base: var(--next-color-white) !important; + //--el-fill-colo: var(--next-color-hover-rgba) !important; + //--el-fill-color: var(--next-color-hover-rgba) !important; + //--el-fill-color-blank: var(--next-color-disabled) !important; + //--el-fill-color-light: var(--next-color-hover-rgba) !important; + //--el-bg-color-overlay: var(--el-color-primary-light-9) !important; + //--el-mask-color: rgb(42 42 42 / 80%); + + // button + //.el-button { + // &:hover { + // border-color: var(--next-border-color) !important; + // } + //} + //.el-button--primary, + //.el-button--info, + //.el-button--danger, + //.el-button--success, + //.el-button--warning { + // --el-button-text-color: var(--next-color-white) !important; + // --el-button-hover-text-color: var(--next-color-white) !important; + // --el-button-disabled-text-color: var(--next-color-white) !important; + // &:hover { + // border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important; + // } + //} + + // drawer + //.el-divider__text { + // background-color: var(--el-color-white) !important; + //} + //.el-drawer { + // border-left: 1px solid var(--next-border-color-light) !important; + //} + // + // tabs + //.el-tabs--border-card { + // background-color: var(--el-color-white) !important; + //} + //.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { + // background: var(--next-color-primary-lighter); + //} + + // alert / notice-bar + .home-card-item { + border: 1px solid var(--next-border-color-light) !important; + } + .el-alert, + .notice-bar { + border: 1px solid var(--next-border-color) !important; + background-color: var(--next-color-disabled) !important; + } + + // menu + .layout-aside { + border-right: 1px solid var(--next-border-color-light) !important; + } + + // colorPicker + //.el-color-picker__mask { + // background: unset !important; + //} + //.el-color-picker__trigger { + // border: 1px solid var(--next-border-color-light) !important; + //} + + // popper / dropdown + //.el-popper { + // border: 1px solid var(--next-border-color) !important; + // color: var(--el-text-color-primary) !important; + // .el-popper__arrow:before { + // background: var(--el-color-white) !important; + // border: 1px solid var(--next-border-color); + // } + // a { + // color: var(--el-text-color-primary) !important; + // } + //} + //.el-popper, + //.el-dropdown-menu { + // background: var(--el-color-white) !important; + //} + //.el-dropdown-menu__item:hover:not(.is-disabled) { + // background: var(--el-bg-color) !important; + //} + //.el-dropdown-menu__item.is-disabled { + // font-weight: 700 !important; + //} + + // input + //.el-input-group__append, + //.el-input-group__prepend { + // border: var(--el-input-border) !important; + // border-right: none !important; + // background: var(--next-color-disabled) !important; + // border-left: 0 !important; + //} + //.el-input-number__decrease, + //.el-input-number__increase { + // background: var(--next-color-disabled) !important; + //} + + // tag + //.el-select .el-select__tags .el-tag { + // background-color: var(--next-bg-color) !important; + //} + // + //// pagination + //.el-pagination.is-background .el-pager li:not(.disabled).active { + // color: var(--next-color-white) !important; + //} + //.el-pagination.is-background .btn-next, + //.el-pagination.is-background .btn-prev, + //.el-pagination.is-background .el-pager li { + // background-color: var(--next-bg-color); + //} + + // radio + //.el-radio-button:not(.is-active) .el-radio-button__inner { + // border: 1px solid var(--next-border-color-light) !important; + // border-left: 0 !important; + //} + //.el-radio-button.is-active .el-radio-button__inner { + // color: var(--next-color-white) !important; + //} + + // countup + .countup-card-item-flex { + color: var(--el-text-color-primary) !important; + } + + // editor + .editor-container { + .w-e-toolbar { + background: var(--el-color-white) !important; + border: 1px solid var(--next-border-color-light) !important; + .w-e-menu:hover { + background: var(--next-color-user-hover) !important; + i { + color: var(--el-text-color-primary) !important; + } + } + } + .w-e-text-container { + border: 1px solid var(--next-border-color-light) !important; + border-top: none !important; + .w-e-text { + background: var(--el-color-white) !important; + } + } + } + + // date-picker + //.el-picker-panel { + // background: var(--el-color-white) !important; + //} + + // dialog + //.el-dialog { + // border: 1px solid var(--el-border-color-lighter); + // .el-dialog__header { + // color: var(--el-text-color-primary) !important; + // } + //} + + // columns + .layout-columns-aside ul .layout-columns-active { + color: var(--next-color-white) !important; + } + .layout-columns-aside { + border-right: 1px solid var(--next-border-columns); + } + + // tagsView + .tags-style-one { + .is-active { + color: var(--el-text-color-primary) !important; + } + .layout-navbars-tagsview-ul-li:hover { + border-color: var(--el-border-color-lighter) !important; + } + } + + // loading + //.el-loading-mask { + // background-color: var(--next-bg-main) !important; + //} + + + + +} diff --git a/src/theme/index.scss b/src/theme/index.scss index 49fb6a6..c1c629a 100644 --- a/src/theme/index.scss +++ b/src/theme/index.scss @@ -5,5 +5,6 @@ @import './iconSelector.scss'; @import './media/media.scss'; @import './waves.scss'; -@import './dark.scss'; +@import './dark2.scss'; +@import './dark-vxe.scss'; @import './vboot.scss'; diff --git a/src/theme/vboot.scss b/src/theme/vboot.scss index db9d749..a17aa10 100644 --- a/src/theme/vboot.scss +++ b/src/theme/vboot.scss @@ -106,7 +106,7 @@ .more-button { border: 1px dashed #409EFF; - background-color: #ecf5ff !important; + //background-color: #ecf5ff !important; color: #409eff; width: 38px; padding-left: 20px; @@ -183,6 +183,11 @@ border-right: 1px solid #d2d2d2 } +.dark .zform .zform-div{ + border-top: 0; + border-right: 0; +} + .zform .el-form-item--default { margin: 0; padding: 0; @@ -190,11 +195,21 @@ border-bottom: 1px solid #d2d2d2; } +.dark .zform .el-form-item--default { + border-left: 0; + border-bottom: 0; +} + .zform .zform-item{ border-left: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } +.dark .zform .zform-item{ + border-left: 0; + border-bottom: 0; +} + .zform .el-form-item--default .el-form-item__label { height: auto !important; background-color: #f6f6f6; @@ -202,12 +217,21 @@ padding: 0 2px 0 6px; } +.dark .zform .el-form-item--default .el-form-item__label { + background-color: #1d1e1f; +} + .zform .el-form-item--default .el-form-item__content { padding: 4px; background-color: white; border-left: 1px solid #d2d2d2; } +.dark .zform .el-form-item--default .el-form-item__content { + background-color: #1d1e1f; + border-left: 0; +} + .zform .el-form-item__content .zinput{ white-space: nowrap; text-overflow: ellipsis; @@ -236,6 +260,8 @@ width: 100%; } + + //以下为xform样式,没有边框 .xform .el-form-item--default { margin: 0; @@ -433,3 +459,37 @@ background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png'); } + + +//暗黑颜色匹配 +.default-theme .splitpanes__splitter { + background-color: #f8f8f8 !important; +} + +//[data-theme='dark'] .default-theme .splitpanes__pane { +// background-color: #2a2a2a !important; +//} +// +//[data-theme='dark'] .default-theme .splitpanes__splitter { +// background-color: #1f1f1f !important; +// margin-left: 0 !important; +// border: 0!important; +//} +// +//[data-theme='dark'] .splitpanes.default-theme .splitpanes__splitter:before,[data-theme='dark'] .splitpanes.default-theme .splitpanes__splitter:after{ +// background-color: #605858 !important; +//} + +.dark .default-theme .splitpanes__pane { + background-color: #2a2a2a !important; +} + +.dark .default-theme .splitpanes__splitter { + background-color: #1f1f1f !important; + margin-left: 0 !important; + border: 0!important; +} + +.dark .splitpanes.default-theme .splitpanes__splitter:before,.dark .splitpanes.default-theme .splitpanes__splitter:after{ + background-color: #605858 !important; +}