diff --git a/src/assets/images/header/dingbu2.png b/src/assets/images/header/dingbu2.png new file mode 100644 index 0000000..b581873 Binary files /dev/null and b/src/assets/images/header/dingbu2.png differ diff --git a/src/assets/images/header/logo.png b/src/assets/images/header/logo.png new file mode 100644 index 0000000..7f3ab24 Binary files /dev/null and b/src/assets/images/header/logo.png differ diff --git a/src/assets/images/module-title.png b/src/assets/images/module-title.png new file mode 100644 index 0000000..8241013 Binary files /dev/null and b/src/assets/images/module-title.png differ diff --git a/src/assets/images/nav/area.png b/src/assets/images/nav/area.png new file mode 100644 index 0000000..85112ba Binary files /dev/null and b/src/assets/images/nav/area.png differ diff --git a/src/assets/images/nav/data.png b/src/assets/images/nav/data.png new file mode 100644 index 0000000..81f1200 Binary files /dev/null and b/src/assets/images/nav/data.png differ diff --git a/src/assets/images/nav/device.png b/src/assets/images/nav/device.png new file mode 100644 index 0000000..81f1200 Binary files /dev/null and b/src/assets/images/nav/device.png differ diff --git a/src/assets/images/nav/home.png b/src/assets/images/nav/home.png new file mode 100644 index 0000000..793c828 Binary files /dev/null and b/src/assets/images/nav/home.png differ diff --git a/src/assets/images/nav/monitor.png b/src/assets/images/nav/monitor.png new file mode 100644 index 0000000..fde1f8f Binary files /dev/null and b/src/assets/images/nav/monitor.png differ diff --git a/src/assets/images/nav/point.png b/src/assets/images/nav/point.png new file mode 100644 index 0000000..d74ab9e Binary files /dev/null and b/src/assets/images/nav/point.png differ diff --git a/src/assets/images/nav/sidebar-bg.png b/src/assets/images/nav/sidebar-bg.png new file mode 100644 index 0000000..48ee655 Binary files /dev/null and b/src/assets/images/nav/sidebar-bg.png differ diff --git a/src/assets/images/nav/system.png b/src/assets/images/nav/system.png new file mode 100644 index 0000000..d81524e Binary files /dev/null and b/src/assets/images/nav/system.png differ diff --git a/src/assets/images/nav/task.png b/src/assets/images/nav/task.png new file mode 100644 index 0000000..76da924 Binary files /dev/null and b/src/assets/images/nav/task.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 2f3b9ef..88d8352 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -5,12 +5,30 @@ @import './sidebar.scss'; @import './btn.scss'; +:root { + --app-font-family: 'Source Han Sans Heavy', 'Source Han Sans SC Heavy', 'Source Han Sans CN Heavy', + 'Source Han Sans SC', 'Source Han Sans CN', 'HYZhongHeiTi', 'SimHei', 'Microsoft YaHei', + Arial, sans-serif; +} + +@font-face { + font-family: 'Source Han Sans Heavy'; + src: local('Source Han Sans Heavy'), local('Source Han Sans SC Heavy'), + local('Source Han Sans CN Heavy'), local('Source Han Sans SC'), local('Source Han Sans CN'), + local('HYZhongHeiTi'), local('SimHei'); + font-style: normal; + font-weight: 900; + font-display: swap; +} + body { height: 100%; + background-color: $base-page-background; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; + font-family: var(--app-font-family); + font-weight: 900; } label { @@ -19,11 +37,32 @@ label { html { height: 100%; + background-color: $base-page-background; box-sizing: border-box; + font-family: var(--app-font-family); + overflow: hidden; } #app { height: 100%; + background-color: $base-page-background; + font-family: var(--app-font-family); + overflow: hidden; +} + +.app-wrapper, +.main-container, +.app-main { + background-color: $base-page-background; +} + +.app-wrapper, +.app-main { + overflow: hidden; +} + +.main-container { + overflow: visible; } *, @@ -45,6 +84,13 @@ a:active { outline: none; } +button, +input, +textarea, +select { + font-family: inherit; +} + a, a:focus, a:hover { @@ -121,7 +167,28 @@ aside { //main-container全局样式 .app-container { - padding: 20px; + height: 100%; + min-height: 0; + padding: 14px; + overflow: hidden; + color: #dcecff; + background: $base-content-background; + border: 1px solid $base-panel-border; + display: flex; + flex-direction: column; + + > .el-form, + > .mb8, + > .el-row { + flex: 0 0 auto; + } + + > .el-table { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + } } .components-container { @@ -130,7 +197,8 @@ aside { } .pagination-container { - margin-top: 30px; + flex: 0 0 auto; + margin-top: 12px; } .text-center { diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index 7e44513..cba4358 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -68,7 +68,7 @@ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; - font-weight: 500; + font-weight: 900; line-height: 1.1; color: inherit; } @@ -89,21 +89,157 @@ } .el-table { + color: #071025; + background: transparent; + border: 1px solid rgba(64, 146, 255, 0.95); + border-bottom: none; + font-size: 14px; + + &::before, + &::after { + background-color: rgba(64, 146, 255, 0.95); + } + .el-table__header-wrapper, .el-table__fixed-header-wrapper { + flex: 0 0 auto; + th { word-break: break-word; - background-color: #f8f8f9; - color: #515a6e; - height: 40px; - font-size: 13px; + background-color: #06347f; + color: #ffffff; + height: 38px; + font-size: 14px; + font-weight: 700; + border-color: rgba(64, 146, 255, 0.95); } } + th.el-table__cell, + td.el-table__cell { + padding: 7px 0; + border-color: #c7d7f4; + } + .el-table__body-wrapper { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + background: #dbe7fb; + + tr { + background-color: #e4edfc; + } + + tr:nth-child(even) { + background-color: #d7e4f8; + } + + tr:hover > td.el-table__cell { + background-color: #c5d9f6 !important; + } + + td.el-table__cell { + color: #071025; + background-color: transparent; + } + .el-button [class*="el-icon-"] + span { margin-left: 1px; } } + + .el-table__fixed, + .el-table__fixed-right { + background: #dbe7fb; + } + + .el-checkbox__inner { + border-color: #2f7cff; + background-color: transparent; + } + + .el-checkbox__input.is-checked .el-checkbox__inner, + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #2f7cff; + border-color: #2f7cff; + } + + .el-switch__core { + border-color: #2f7cff; + background-color: #2f7cff; + } + + .el-button--text, + .svg-icon, + [class^="el-icon-"], + [class*=" el-icon-"] { + color: #0057d8; + } +} + +.el-table--border, +.el-table--group { + border-color: rgba(64, 146, 255, 0.95); +} + +.el-table--border .el-table__cell { + border-color: #c7d7f4; +} + +.el-table .caret-wrapper .sort-caret.ascending { + border-bottom-color: #ffffff; +} + +.el-table .caret-wrapper .sort-caret.descending { + border-top-color: #ffffff; +} + +.app-container { + .el-form { + color: #ffffff; + } + + .el-form-item__label { + color: #ffffff; + font-weight: 500; + } + + .el-input__inner, + .el-range-input { + color: #dcecff; + background-color: rgba(5, 27, 91, 0.72); + border-color: #6384d8; + } + + .el-input__inner::placeholder, + .el-range-input::placeholder { + color: rgba(220, 236, 255, 0.5); + } + + .el-input__prefix, + .el-input__suffix, + .el-range-separator, + .el-date-editor .el-range__icon, + .el-date-editor .el-range__close-icon { + color: #4ddfff; + } + + .el-button { + border-radius: 2px; + } + + .el-button--primary { + color: #ffffff; + background: linear-gradient(180deg, #2d73ff 0%, #0b42c4 100%); + border-color: #2f80ff; + box-shadow: 0 0 8px rgba(47, 128, 255, 0.35) inset; + } + + .el-button--default { + color: #54ffff; + background: rgba(5, 27, 91, 0.55); + border-color: #1b7fff; + } } /** 表单布局 **/ @@ -118,23 +254,46 @@ /** 表格布局 **/ .pagination-container { position: relative; - height: 32px; - margin-bottom: 10px; - margin-top: 15px; - padding: 10px 20px !important; + min-height: 32px; + margin-bottom: 0; + margin-top: 12px; + padding: 8px 4px !important; + color: #dcecff; + background: transparent !important; } /* tree border */ .tree-border { margin-top: 5px; - border: 1px solid #e5e6e7; - background: #FFFFFF none; - border-radius: 4px; + border: 1px solid #0B2567; + background: #0F124A none; + border-radius: 2px; } .pagination-container .el-pagination { right: 0; position: absolute; + color: #dcecff; +} + +.pagination-container .el-pagination__total, +.pagination-container .el-pagination__jump { + color: #dcecff; +} + +.pagination-container .el-pagination.is-background .btn-prev, +.pagination-container .el-pagination.is-background .btn-next, +.pagination-container .el-pagination.is-background .el-pager li, +.pagination-container .el-pagination .el-select .el-input .el-input__inner { + color: #dcecff; + background: rgba(5, 27, 91, 0.7); + border: 1px solid #2f80ff; +} + +.pagination-container .el-pagination.is-background .el-pager li:not(.disabled).active { + color: #ffffff; + background: #1f6fff; + border-color: #4ddfff; } @media (max-width: 768px) { @@ -292,5 +451,238 @@ /* 分割面板样式 */ .splitpanes.default-theme .splitpanes__pane { - background-color: #fff!important; + background-color: #0F124A!important; +} + +/* 深色业务面板统一主题 */ +.app-container, +.card-page, +.sec-left, +.sec-right, +.box, +.el-card, +.el-tabs, +.el-collapse, +.el-descriptions, +.tree-border, +.splitpanes.default-theme .splitpanes__pane { + color: #dcecff; + background-color: #0F124A !important; + border-color: #0B2567 !important; +} + +.card-page, +.sec-left, +.sec-right, +.box, +.el-card { + border: 1px solid #0B2567; + border-radius: 2px; +} + +.el-card { + box-shadow: none; +} + +.el-card__header, +.el-card__body, +.el-collapse-item__header, +.el-collapse-item__wrap, +.el-descriptions__header, +.el-descriptions__body { + color: #dcecff; + background-color: #0F124A !important; + border-color: #0B2567 !important; +} + +.el-descriptions-item__label, +.el-descriptions-item__content { + color: #dcecff; + background-color: #0F124A !important; + border-color: #0B2567 !important; +} + +.el-tabs__nav-wrap::after, +.el-tabs__active-bar { + background-color: #0B2567; +} + +.el-tabs__item { + color: #a9c6ff; +} + +.el-tabs__item.is-active, +.el-tabs__item:hover { + color: #54ffff; +} + +.el-tree { + color: #dcecff; + background-color: #0F124A !important; +} + +.el-tree-node__content { + color: #dcecff; + background-color: transparent !important; +} + +.el-tree-node__content:hover, +.el-tree-node:focus > .el-tree-node__content, +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + color: #54ffff; + background-color: rgba(11, 37, 103, 0.85) !important; +} + +.el-tree-node__label { + color: inherit; +} + +.el-dialog { + overflow: hidden; + color: #dcecff; + background-color: #0F124A !important; + border: 1px solid #0B2567; + border-radius: 2px; + box-shadow: 0 0 18px rgba(0, 0, 0, 0.45); +} + +.el-dialog__header, +.el-dialog__body, +.el-dialog__footer { + color: #dcecff; + background-color: #0F124A !important; +} + +.el-dialog__header { + border-bottom: 1px solid #0B2567; +} + +.el-dialog__footer { + border-top: 1px solid #0B2567; +} + +.el-dialog__title, +.el-dialog__headerbtn .el-dialog__close { + color: #ffffff; +} + +.v-modal { + background: #101654; + opacity: 0.72; +} + +.el-message-box, +.el-popover, +.el-dropdown-menu, +.el-select-dropdown, +.el-picker-panel, +.el-cascader__dropdown, +.el-autocomplete-suggestion, +.el-tooltip__popper.is-dark { + color: #dcecff; + background-color: #0F124A !important; + border-color: #0B2567 !important; +} + +.el-message-box__title, +.el-message-box__content, +.el-popover__title, +.el-dropdown-menu__item, +.el-select-dropdown__item, +.el-cascader-node, +.el-picker-panel__body, +.el-date-table td, +.el-date-table th { + color: #dcecff; +} + +.el-dropdown-menu__item:hover, +.el-dropdown-menu__item:focus, +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover, +.el-cascader-node:not(.is-disabled):focus, +.el-cascader-node:not(.is-disabled):hover { + color: #54ffff; + background-color: rgba(11, 37, 103, 0.85) !important; +} + +.el-select-dropdown__item.selected, +.el-date-table td.current:not(.disabled) span, +.el-date-table td.today span { + color: #54ffff; +} + +.el-drawer, +.el-drawer__header, +.el-drawer__body { + color: #dcecff; + background-color: #0F124A !important; +} + +.el-drawer { + border-left: 1px solid #0B2567; +} + +.el-dialog, +.el-drawer, +.el-popover, +.el-message-box { + .el-form-item__label { + color: #ffffff; + font-weight: 500; + } + + .el-input__inner, + .el-textarea__inner, + .el-range-input { + color: #dcecff; + background-color: rgba(5, 27, 91, 0.72); + border-color: #6384d8; + } + + .el-input__inner::placeholder, + .el-textarea__inner::placeholder, + .el-range-input::placeholder { + color: rgba(220, 236, 255, 0.5); + } + + .el-input__prefix, + .el-input__suffix, + .el-range-separator, + .el-date-editor .el-range__icon, + .el-date-editor .el-range__close-icon { + color: #4ddfff; + } + + .el-button--primary { + color: #ffffff; + background: linear-gradient(180deg, #2d73ff 0%, #0b42c4 100%); + border-color: #2f80ff; + } + + .el-button--default { + color: #54ffff; + background: rgba(5, 27, 91, 0.55); + border-color: #1b7fff; + } +} + +.splitpanes.default-theme .splitpanes__splitter { + background-color: #0B2567 !important; + border-color: #0B2567 !important; +} + +.el-divider { + background-color: #0B2567; +} + +.el-upload-dragger, +.el-textarea__inner { + color: #dcecff; + background-color: rgba(5, 27, 91, 0.72); + border-color: #0B2567; +} + +.el-textarea__inner::placeholder { + color: rgba(220, 236, 255, 0.5); } diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index abe5b63..33f461e 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -16,10 +16,14 @@ transition: width 0.28s; width: $base-sidebar-width !important; background-color: $base-menu-background; - height: 100%; + background-image: url('~@/assets/images/nav/sidebar-bg.png'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 100%; + height: calc(100% - 68px); position: fixed; font-size: 0px; - top: 0; + top: 68px; bottom: 0; left: 0; z-index: 1001; @@ -64,13 +68,23 @@ margin-right: 16px; } + .menu-icon-img { + width: 16px; + height: 16px; + margin-right: 16px; + vertical-align: -3px; + object-fit: contain; + } + .el-menu { border: none; height: 100%; width: 100% !important; + background-color: transparent !important; } .el-menu-item, .el-submenu__title { + background-color: transparent !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; @@ -99,7 +113,7 @@ & .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .el-submenu .el-menu-item { - background-color: $base-sub-menu-background !important; + background-color: transparent !important; &:hover { background-color: $base-sub-menu-hover !important; @@ -126,6 +140,10 @@ .svg-icon { margin-left: 20px; } + + .menu-icon-img { + margin-left: 20px; + } } } @@ -139,6 +157,10 @@ margin-left: 20px; } + .menu-icon-img { + margin-left: 20px; + } + } } @@ -193,7 +215,8 @@ // when menu collapsed .el-menu--vertical { &>.el-menu { - .svg-icon { + .svg-icon, + .menu-icon-img { margin-right: 16px; } } diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 34484d4..735e9a9 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -7,18 +7,22 @@ $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; +$base-page-background:#101654; +$base-content-background:#0F124A; +$base-panel-border:#0B2567; +$base-navbar-background:#0F124A; // 默认菜单主题风格 -$base-menu-color:#bfcbd9; -$base-menu-color-active:#f4f4f5; -$base-menu-background:#304156; +$base-menu-color:#54FFFF; +$base-menu-color-active:#54FFFF; +$base-menu-background:#0F124A; $base-logo-title-color: #ffffff; -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; +$base-menu-light-color:#54FFFF; +$base-menu-light-background:#0F124A; $base-logo-light-title-color: #001529; -$base-sub-menu-background:#1f2d3d; +$base-sub-menu-background:#0F124A; $base-sub-menu-hover:#001528; // 自定义暗色菜单风格 @@ -49,6 +53,10 @@ $base-sidebar-width: 200px; subMenuBackground: $base-sub-menu-background; subMenuHover: $base-sub-menu-hover; sideBarWidth: $base-sidebar-width; + pageBackground: $base-page-background; + contentBackground: $base-content-background; + panelBorder: $base-panel-border; + navbarBackground: $base-navbar-background; logoTitleColor: $base-logo-title-color; logoLightTitleColor: $base-logo-light-title-color } diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 208ed30..c8e855e 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -131,8 +131,13 @@ export default { font-size: 14px; line-height: 50px; margin-left: 8px; + + a { + color: #54FFFF; + } + .no-redirect { - color: #97a8be; + color: #54FFFF; cursor: text; } } diff --git a/src/components/Crontab/index.vue b/src/components/Crontab/index.vue index 724d955..a11b404 100644 --- a/src/components/Crontab/index.vue +++ b/src/components/Crontab/index.vue @@ -426,7 +426,7 @@ export default { .popup-result table span { display: block; width: 100%; - font-family: arial; + font-family: var(--app-font-family); line-height: 30px; height: 30px; white-space: nowrap; diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 368b002..fd17fd3 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -1,5 +1,5 @@