diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 65c6bef06..22ca6891a 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -179,6 +179,21 @@ td .nz-icon-gear:before{ box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color; border-radius: 2px; } +.el-popover { + box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color !important; +} +.el-input__count-inner { + background-color: $--input-background-color !important; +} +.el-textarea { + .el-textarea__inner { + background-color: $--input-background-color !important; + } + .el-input__count { + background-color: $--input-background-color !important; + } +} + .icon { width: 5rem; height: 5rem; @@ -193,3 +208,6 @@ td .nz-icon-gear:before{ font-family: NotoSans !important; font-size: 12px !important; } +.el-tree { + background-color: $--background-color-empty !important; +} diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss index e0aafb4f1..8384fb92e 100644 --- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss +++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss @@ -7,7 +7,7 @@ padding: 0; height: calc(100% - 50px); width: 700px; - box-shadow: 0 0 5px #ccc; + box-shadow: $--right-box-shadow; background-color: $--background-color-empty; z-index: 410; @@ -127,10 +127,10 @@ } .el-input__inner:hover { - border-color: darken($--border-color-light, 10%); + border-color: $--border-color-light-hover; } .el-input__inner:focus { - border-color: darken($--border-color-light, 20%); + border-color: $--border-color-light-focus; } } .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, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus { @@ -146,7 +146,8 @@ font-size: 14px; font-weight: bold; color: $--color-text-primary; - background-color: $--background-color-base; + background-color: $--right-box-sub-title-background-color; + border: 1px solid $--right-box-sub-title-border-color; } /* 虚线框类型的form-item */ .form__dotted-item { diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss index 5184cc4f7..b0d5fd9df 100644 --- a/nezha-fronted/src/assets/css/common/tableCommon.scss +++ b/nezha-fronted/src/assets/css/common/tableCommon.scss @@ -102,7 +102,7 @@ } .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus { background-color: $--button-icon-active-background-color; - border: 1px solid $--button-icon-active-border-color; + border: 1px solid $--button-icon-active-border-color !important; color: $--button-icon-active-color; i { @@ -111,7 +111,7 @@ } .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) { background-color: $--button-icon-hover-background-color; - border-color: #FFC4B9; + border: 1px solid #FFC4B9 !important; i { color: #F0745A; } diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss index 0f105ec59..27630fe98 100644 --- a/nezha-fronted/src/assets/css/components/charts/chart.scss +++ b/nezha-fronted/src/assets/css/components/charts/chart.scss @@ -201,7 +201,7 @@ position: relative; } .resize-box { - border: 1px solid $--border-color-light; + border: 1px solid $--chart-box-border-color; position: absolute; box-sizing: border-box; width: 100%; @@ -306,7 +306,7 @@ position: relative; background-color: $--background-color-empty; .chartTitle:hover { - background-color: $--background-color-1; + background-color: $--chart-title-hover-background-color; } .chartTitle { text-align: center; @@ -361,7 +361,7 @@ } } .chart-sub-title { - background-color: $--background-color-1; + background-color: $--chart-title-hover-background-color; font-size: 13px; color: $--color-text-regular; padding-left: 5px; @@ -524,7 +524,7 @@ position: relative; background-color: $--background-color-empty; .chartTitle:hover { - background-color: $--background-color-1; + background-color: $--chart-title-hover-background-color; } .chartTitle { text-align: center; diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss index 043e22377..112c9d910 100644 --- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss +++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss @@ -4,7 +4,7 @@ z-index: 3000; padding: 10px; border-radius: 4px; - box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); + box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color; .alert-label-info{ border-bottom: none; @@ -62,7 +62,7 @@ line-height: 0; border: 5px; border-style: dashed solid dashed dashed; - border-color: transparent #fff transparent transparent; + border-color: transparent $--popover-background-color transparent transparent; position: absolute; top: 20px; left: 0; diff --git a/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss b/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss index c0bad4e9e..65f6afcde 100644 --- a/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss +++ b/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss @@ -46,7 +46,7 @@ } } .selected{ - background: #FFFBF6; + background: $--background-color-base; } .colorEF7458{ color: $--color-danger; diff --git a/nezha-fronted/src/assets/css/components/layout/leftMenu.scss b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss index e53f2ff15..5433b5461 100644 --- a/nezha-fronted/src/assets/css/components/layout/leftMenu.scss +++ b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss @@ -79,7 +79,7 @@ height: 50px; border-right: 1px solid $--left-menu-background-color-base; box-sizing: border-box; - background-color: $--left-menu-background-color-open !important; + background-color: $--left-menu-background-color-base !important; .logo { display: flex; diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss index 204128c21..a0cf34b77 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss @@ -2,6 +2,29 @@ height: calc(100% - 20px) !important; padding: 0 10px; background-color: $--background-color-base; + + .el-carousel--horizontal{ + height: 100%; + } + .el-carousel__container{ + height: calc(100% - 36px); + } + .el-carousel__item .project-name { + font-size: 18px; + margin: 0; + position: absolute; + z-index: 1; + } + .el-carousel__indicator--horizontal .el-carousel__button{ + background-color: #C0C4CC; + opacity: .24; + height: 10px; + width: 10px; + border-radius: 50%; + } + .el-carousel__indicator--horizontal.is-active .el-carousel__button{ + opacity: 1; + } } .overview-content-header{ display: flex; @@ -103,7 +126,7 @@ background-color: $--background-color-empty; flex: 1; border-radius: 5px; - border: 1px solid $--dashboard-card-border-color; + border: 1px solid $--chart-box-border-color; } .content-col-title { height: 2rem; @@ -658,22 +681,6 @@ height: 1px; background-color: transparent; } -.leaflet-bottom{ - z-index: 409; -} -.el-carousel--horizontal{ - height: 100%; -} -.el-carousel__container{ - height: calc(100% - 36px); -} -.el-carousel__item .project-name { - font-size: 18px; - margin: 0; - position: absolute; - z-index: 1; -} - .maskLayer{ width: 100%; height: 100%; @@ -684,14 +691,6 @@ z-index: 10; cursor: pointer; } -.el-carousel__indicator--horizontal .el-carousel__button{ - background-color: #C0C4CC; - opacity: .24; - height: 10px; - width: 10px; - border-radius: 50%; +.leaflet-bottom{ + z-index: 409; } -.el-carousel__indicator--horizontal.is-active .el-carousel__button{ - opacity: 1; -} - diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss index fa2d24833..f99735a47 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss @@ -1,7 +1,3 @@ -.border-t-1-de{ - border-top: 1px solid $--border-color-base; - padding-top: 10px; -} .border-t-1-tr{ border-top: 1px solid transparent; } @@ -22,11 +18,12 @@ height: calc(100% - 50px); flex: 1; background-color: $--dashboard-background-color-empty; - &>div { - background-color: $--dashboard-background-color-empty; - } } - +.table-list-box { + border-top: 1px solid $--background-color-base; + padding: 10px 0 0 10px; + background-color: $--background-color-empty; +} .box-content { position: relative; height: 100%; diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss index 6f2e349fa..9128c7878 100644 --- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss +++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss @@ -3,14 +3,20 @@ height: 100%; width: 100%; display: flex; - background: $--background-color-base; + background-color: $--background-color-base; + overflow-x: auto; .projectList{ flex: 1; + width: calc(50% - 10px); margin-right: 10px; + min-width: 745px; } .projectTopo{ flex: 1; + width: calc(50% - 10px); margin-right: 10px; + min-width: 435px; + } .hide{ display: none; diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 81b652351..0dfb832d7 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -14,13 +14,13 @@ $--background-color-1: #444440; $--background-color-2: #000; // 左侧菜单背景色 -$--left-menu-background-color-base: $--background-color-empty; +$--left-menu-background-color-base: #2D2E35; // 左侧菜单激活背景色 -$--left-menu-background-color-active: #191A1E; +$--left-menu-background-color-active: #1D1D22; // 左侧菜单展开背景色 -$--left-menu-background-color-open: #191A1E; +$--left-menu-background-color-open: #26262c; // 左侧菜单hover背景色 -$--menu-item-hover-fill: #191A1E; +$--menu-item-hover-fill: #1D1D22; /* 3.字色 */ // 标题字色 @@ -35,10 +35,15 @@ $--color-text-link: #3C92F1; /* 4.边框色 */ // 普通边框色 $--border-color-base: transparent; -// 浅边框色 -$--border-color-light: #2e2e2e; // 普通边框色focus $--border-color-base-focus: #C7C7C7; +// 浅边框色 +$--border-color-light: #454545; +// 浅边框色hover +$--border-color-light-hover: lighten($--border-color-light, 10%); +// 浅边框色focus +$--border-color-light-focus: lighten($--border-color-light, 20%); + /* 5.提示色 */ // 正常绿色 @@ -69,7 +74,7 @@ $--table-body-background-color: $--background-color-empty; /* 7.checkbox */ // 背景色 $--checkbox-background-color: $--background-color-empty; -$--checkbox-border-color: #454545; +$--checkbox-border-color: $--border-color-light; /* 8.滚动条 */ // 背景色 @@ -101,7 +106,7 @@ $--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮fo $--button-gray-background-color: $--background-color-empty; // 灰色按钮背景色 $--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色 $--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色 -$--button-gray-border-color: #454545; // 灰色按钮边框色 +$--button-gray-border-color: $--border-color-light; // 灰色按钮边框色 $--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色 @@ -112,10 +117,22 @@ $--button-icon-active-color: $--color-text-primary; // focus字色 $--button-icon-background-color: $--background-color-base; // 背景色 $--button-icon-hover-background-color: $--background-color-empty; // hover背景色 $--button-icon-active-background-color: $--background-color-empty; // focus背景色 -$--button-icon-border-color: #454545; // 边框色 +$--button-icon-border-color: $--border-color-light; // 边框色 $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框色 $--button-icon-active-border-color: $--color-text-primary; // focus边框色 +/* 13.panel */ +$--chart-title-hover-background-color: #323238; +$--chart-box-border-color: $--border-color-light; + +/* 14.popover */ +$--popover-background-color: $--background-color-empty; +$--popover-border-color: none; + +/* 15.侧滑 */ +$--right-box-shadow: -3px 0 8px -3px rgba(17,17,17,0.77); +$--right-box-sub-title-background-color: #323238; +$--right-box-sub-title-border-color: $--border-color-light; /*** themes/common.scss是与主题切换无关的变量 ***/ diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index f68977b34..2a64db7f4 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -35,10 +35,14 @@ $--color-text-link: #3C92F1; /* 4.边框色 */ // 普通边框色(覆盖element-ui内置变量) $--border-color-base: #DEDEDE; -// 浅边框色(覆盖element-ui内置变量) -$--border-color-light: #E7EAED; // 普通边框色focus $--border-color-base-focus: #C7C7C7; +// 浅边框色(覆盖element-ui内置变量) +$--border-color-light: #E7EAED; +// 浅边框色hover +$--border-color-light-hover: darken($--border-color-light, 10%); +// 浅边框色focus +$--border-color-light-focus: darken($--border-color-light, 20%); /* 5.提示色 */ // 正常绿色(覆盖element-ui内置变量) @@ -116,6 +120,18 @@ $--button-icon-border-color: $--border-color-base; // 边框色 $--button-icon-hover-border-color: $--border-color-base; // hover边框色 $--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色 +/* 13.panel */ +$--chart-title-hover-background-color: $--background-color-1; +$--chart-box-border-color: $--border-color-light; + +/* 14.popover */ +$--popover-background-color: $--background-color-empty; + +/* 15.侧滑 */ +$--right-box-shadow: -3px 0 8px -3px #ccc; +$--right-box-sub-title-background-color: $--background-color-base; +$--right-box-sub-title-border-color: $--right-box-sub-title-background-color; + /*** themes/common.scss是与主题切换无关的变量 ***/ @import './src/common/var.scss'; diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 1375edbe9..c25b25734 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -291,21 +291,6 @@ li { height: calc(100% - 50px); } -/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/ -/*.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet, -.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type, -.right-box-asset-state , .right-box-credential{ - width: 850px; -}*/ -.right-box-chart .el-input__inner, .right-box-chart input { - background-color: $--background-color-empty; -} -/*.right-box-add-endpoint { - width: 850px; -} -.right-box-add-endpoint.right-box-add-endpoint-snmp { - width: 850px; -}*/ .snmp-form { .el-form-item__content { margin-left: 10px !important; @@ -361,7 +346,7 @@ li { /* begin--右侧弹框--内容*/ .nz-pop { /*小弹框*/ padding-top: 0; - box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); + box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color; z-index: 2951 !important; border-radius: 5px; } @@ -377,7 +362,6 @@ li { } .nz-pop-select-area, .nz-pop-select-panel { padding: 0 !important; - box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important; } .nz-pop-select-walk .pop-item-wider { position: relative; diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index c0ec6157e..a4778841c 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -6,7 +6,7 @@
-
+
@@ -80,7 +80,7 @@
-
+
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue index 8be6b9bb6..828d7ae51 100644 --- a/nezha-fronted/src/components/page/monitor/project/index.vue +++ b/nezha-fronted/src/components/page/monitor/project/index.vue @@ -45,34 +45,3 @@ export default { methods: {} } - -