From 1f0fc5352689e8d36222fcd18f4bbf5517475d21 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Tue, 30 Nov 2021 14:36:51 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=20switch=20?= =?UTF-8?q?=E5=BC=80=E5=85=B3=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common.scss | 88 +++++++++++-------- .../src/assets/css/common/checkbox.scss | 1 + .../css/components/common/picker/picker.scss | 47 ++++++++++ .../common/v-selectpagenew/selectpage.scss | 6 +- .../src/assets/css/components/index.scss | 4 +- .../css/components/page/config/system.scss | 20 ++--- .../css/components/page/dashboard/panel.scss | 21 +++++ .../src/assets/css/themes/theme-dark.scss | 6 ++ .../src/assets/css/themes/theme-light.scss | 9 +- nezha-fronted/src/assets/stylus/main.scss | 8 +- .../common/bottomBox/tabs/endpointQuery.vue | 2 +- .../bottomBox/tabs/endpointQueryTab.vue | 2 +- .../common/project/L5/CanvasProps.vue | 3 +- .../common/project/L5/topologyTopTool.vue | 6 +- .../rightBox/administration/assetTypeBox.vue | 15 ++-- .../rightBox/administration/userBox.vue | 2 +- .../common/rightBox/asset/assetBox.vue | 2 +- .../common/rightBox/assetMetaBox.vue | 9 +- .../common/rightBox/assetStateBox.vue | 6 +- .../src/components/common/rightBox/dcBox.vue | 3 +- .../common/rightBox/editEndpointBoxNew.vue | 4 +- .../components/common/rightBox/moduleBox.vue | 4 +- .../common/table/alert/alertRuleTable.vue | 3 +- .../src/components/page/config/assetState.vue | 9 +- .../src/components/page/config/system.vue | 6 +- .../page/config/system/notifyMethodTable.vue | 4 +- .../components/page/dashboard/chartBox.vue | 12 ++- .../page/dashboard/explore/logTab.vue | 6 ++ 28 files changed, 214 insertions(+), 94 deletions(-) create mode 100644 nezha-fronted/src/assets/css/components/common/picker/picker.scss diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 32842f96c..dad90b25f 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -190,7 +190,7 @@ td .nz-icon-gear:before{ } .el-textarea { .el-textarea__inner { - background-color: $--input-background-color !important; + background-color: $--background-color-empty !important; } .el-input__count { background-color: $--input-background-color !important; @@ -253,43 +253,6 @@ td .nz-icon-gear:before{ .el-scrollbar { background-color: $--background-color-empty; } -/* el-picker 下拉时间选择器 */ -.el-picker-panel__footer { - border-top: 1px solid $--border-color-light !important; - span { - color: $--color-text-regular !important; - } - .el-button--text { - span { - color: $--color-primary !important; - } - } - .el-button--default { - margin-left: 10px; - color: $--button-primary-color !important; - background: $--picker-page-background-color !important; - border: 1px solid $--border-color-light !important; - } - .el-button.is-plain:hover { - background-color: $--picker-page-background-color !important; - border-color: $--picker-page-btn-border-color !important; - span { - color: $--picker-page-btn-color !important; - } - } -} -.el-date-range-picker__time-header { - border-bottom: 1px solid $--border-color-light; -} -.el-date-range-picker__content.is-left { - border-right: 1px solid $--border-color-light; -} -.el-date-table th { - border-bottom: 1px solid $--border-color-light !important; -} -.el-date-picker__time-header { - border-bottom: 1px solid $--picker-page-border-color !important; -} .el-input-group.el-input-group--prepend,.query-input-inactive.el-input { .el-input-group__prepend { background-color: $--background-color-empty; @@ -311,6 +274,55 @@ td .nz-icon-gear:before{ border-bottom: 1px solid $--border-color-light; } } +.el-dialog__wrapper.nz-dialog { + .el-upload-dragger { + background-color: $--background-color-empty; + border: 1px dashed $--border-color-light; + } + .el-upload-dragger:hover { + border: 1px dashed $--color-primary; + } + .el-message-box__btns { + .el-button { + background-color: $--background-color-empty; + border: 1px solid $--border-color-light; + } + .el-button:hover { + border: 1px solid $--color-primary; + } + .el-button:nth-of-type(3) { + margin-left: 10px; + } + .nz-btn.nz-btn-size-normal { + background-color: $--color-warning; + border: 1px solid $--color-warning; + color: $--button-primary-color; + } + .nz-btn.nz-btn-size-normal:hover { + background-color: #fe9f37; + } + } +} +.el-dialog { + .el-radio-button { + width: 142px; + .el-radio-button__inner { + width: 100%; + background-color: $--popover-background-color; + border-color: $--border-color-light; + } + } + .el-radio-button.is-active .el-radio-button__inner{ + background-color: $--color-warning; + border-color: $--color-warning; + } +} +.switch-open { + background-color: $--color-primary; +} +.switch-shut { + background-color: $--switch-background-color; +} //.editor-core { // p { // color: $--color-text-regular; diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss index af1a7d49e..7bf2ac711 100644 --- a/nezha-fronted/src/assets/css/common/checkbox.scss +++ b/nezha-fronted/src/assets/css/common/checkbox.scss @@ -22,4 +22,5 @@ .el-checkbox__inner, .el-input__inner { border-color: $--checkbox-border-color; + background-color: $--background-color-empty; } diff --git a/nezha-fronted/src/assets/css/components/common/picker/picker.scss b/nezha-fronted/src/assets/css/components/common/picker/picker.scss new file mode 100644 index 000000000..5ab8657e3 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/picker/picker.scss @@ -0,0 +1,47 @@ +/* el-picker 下拉时间选择器 */ +.el-picker-panel { + background-color: $--background-color-empty; +} +.el-picker-panel__footer { + border-top: 1px solid $--border-color-light !important; + background-color: $--background-color-empty; + span { + color: $--color-text-regular !important; + } + .el-button--text { + span { + color: $--color-primary !important; + } + } + .el-button--default { + margin-left: 10px; + color: $--button-primary-color !important; + background: $--picker-page-background-color !important; + border: 1px solid $--border-color-light !important; + } + .el-button.is-plain:hover { + background-color: $--picker-page-background-color !important; + border-color: $--picker-page-btn-border-color !important; + span { + color: $--picker-page-btn-color !important; + } + } +} +.el-date-table td.in-range div { + background-color: $--export-span-background-color; +} +.el-date-table td.in-range div:hover { + background-color: $--export-span-background-color; +} +.el-date-range-picker__time-header { + border-bottom: 1px solid $--border-color-light; +} +.el-date-range-picker__content.is-left { + border-right: 1px solid $--border-color-light; +} +.el-date-table th { + border-bottom: 1px solid $--border-color-light !important; +} +.el-date-picker__time-header { + border-bottom: 1px solid $--picker-page-border-color !important; +} diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss index e8e45396a..4b21f2515 100644 --- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss +++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss @@ -1,5 +1,5 @@ -.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{ - background: $--input-background-color !important; +.sp-base.sp-inputs,.sp-base.sp-input{ + background: $--background-color-empty !important; } .sp-search,.sp-result-area,.sp-pagination { background-color: $--background-color-empty !important; @@ -20,7 +20,7 @@ } .sp-selected-tag { color: $--color-text-regular !important; - background-color: $--select-page-tag-background-color !important; + background-color: $--background-color-base !important; i { color: $--color-text-regular !important; } diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss index e557e7927..a635f8b58 100644 --- a/nezha-fronted/src/assets/css/components/index.scss +++ b/nezha-fronted/src/assets/css/components/index.scss @@ -89,4 +89,6 @@ @import 'common/v-selectpagenew/selectpage.scss'; -@import "common/paramBpx/paramBox"; +@import "common/paramBpx/paramBox.scss"; + +@import "common/picker/picker.scss"; diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss index 06fa6a237..7bac52c0b 100644 --- a/nezha-fronted/src/assets/css/components/page/config/system.scss +++ b/nezha-fronted/src/assets/css/components/page/config/system.scss @@ -9,6 +9,16 @@ background-color: $--background-color-base; } } + .half-form-item.el-form-item { + display: inline-block; + width: 230px; + .el-form-item__content { + width: 230px; + .el-input.el-input--small,.el-input.el-input-group--append { + width: calc(100% - 18px); + } + } + } } .system-config-form{ width: 61.8% !important; @@ -300,13 +310,3 @@ font-size: 12px; line-height: 20px; } -.half-form-item.el-form-item { - display: inline-block; - width: 230px; - .el-form-item__content { - width: 230px; - .el-input.el-input--small,.el-input.el-input-group--append { - width: calc(100% - 18px); - } - } -} 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 648167351..3a5de955e 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss @@ -23,6 +23,27 @@ height: calc(100% - 60px); flex: 1; background-color: $--dashboard-background-color-empty; + .legend--table-cell,.legend-item { + color: $--color-text-regular; + } + .chart__canvas { + div:nth-of-type(2) { + background-color: $--background-color-empty !important; + border-color: $--border-color-light !important; + } + .nz-chart__tooltip { + .row__label,.row__value { + color: $--color-text-regular; + } + } + } + .legend-container { + .legend--table-row.table-header { + .legend--table-cell { + color: #33a2e5; + } + } + } } .table-list-box { border-top: 1px solid $--background-color-base; diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 522c7f547..a68732b83 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -200,6 +200,12 @@ $--guide-icon-color: $--time-picker-hover-color; /* detail */ $--detail-left-background-color: $--background-color-base; +/* Export */ +$--export-span-background-color: $--background-color-base; + +/* switch */ +$--switch-background-color: $--background-color-base; + /* 13.panel */ $--chart-title-hover-background-color: #323238; $--chart-box-border-color: $--border-color-light; diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index 7f649081a..a3639edc1 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -152,7 +152,6 @@ $--picker-page-btn-color: $--color-primary; $--picker-page-btn-border-color: $--color-primary; $--picker-page-btn-background-color: $--color-text-disabled; - // icon 字色 $--nz-icon-color: $--color-primary; //icon $--span-nz-icon-border-color: $--asset-label-btn-border-color; @@ -198,12 +197,18 @@ $--guide-icon-color: $--guide-icon-border-color; /* detail */ $--detail-left-background-color: $--table-row-hover-background-color; +/* Export */ +$--export-span-background-color: $--background-color-base; + +/* switch */ +$--switch-background-color: #dcdfe6; + /* 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; +$--popover-background-color: $--color-text-disabled; /* 15.侧滑 */ $--right-box-shadow: -3px 0 8px -3px #ccc; diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 40633dcd2..0a9ce2def 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -1415,10 +1415,10 @@ li { color: $--color-primary !important;; } } -/deep/ .el-input__inner{ +.el-input__inner{ border-radius: 2px; } -/deep/ .el-input-number .el-input__inner{ +.el-input-number .el-input__inner{ text-align: left; } @@ -1426,11 +1426,11 @@ li { position: fixed !important; visibility: hidden; } -/deep/ .el-tooltip{ +.el-tooltip{ outline: none; } -/deep/ .el-switch.is-checked .el-switch__core{ +.el-switch.is-checked .el-switch__core{ border-color: $--color-primary; background-color: $--color-primary; } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue index 088f3b298..6e891b7cd 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue @@ -42,7 +42,7 @@
{{$t('project.endpoint.hideSameLabels')}} - +
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue index dd2c9ef21..9cea71b09 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue @@ -53,7 +53,7 @@
{{$t('project.endpoint.hideSameLabels')}} - +
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index 4b6b2dbba..e57944393 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -36,7 +36,8 @@ v-model="selection.pen.data.valueMappingShow" :active-value="true" :inactive-value="false" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" /> diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue index d13df133a..41ddeef5f 100644 --- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue +++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue @@ -31,7 +31,8 @@ v-model="option.grid" :active-value="true" :inactive-value="false" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" @change="changeOption('grid')"> @@ -41,7 +42,8 @@ v-model="option.rule" :active-value="true" :inactive-value="false" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" @change="changeOption('rule')"> diff --git a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue index c2e74e2b3..8bfbd57b9 100644 --- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue +++ b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue @@ -17,7 +17,8 @@ @@ -26,7 +27,8 @@ @@ -41,7 +43,8 @@ @@ -50,7 +53,8 @@ @@ -59,7 +63,8 @@ diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue index 695590f15..8fd77fcb7 100644 --- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue +++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue @@ -87,7 +87,7 @@ - diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue index 6026ef01d..5e3de2b63 100644 --- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue +++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue @@ -248,7 +248,7 @@
- +
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue index b8b7f3d4c..8bf0b65c4 100644 --- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue +++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue @@ -28,7 +28,8 @@ @@ -36,7 +37,8 @@ @@ -103,7 +105,8 @@ + active-icon-class="switch-open" + inactive-icon-class="switch-shut"> diff --git a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue index ae85231b1..dc7066105 100644 --- a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue +++ b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue @@ -24,19 +24,19 @@ - - - diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue index ac63c8dcc..78b6c8539 100644 --- a/nezha-fronted/src/components/common/rightBox/dcBox.vue +++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue @@ -45,7 +45,8 @@ v-model="editDc.state" active-value="ON" inactive-value="OFF" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" > diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue index d559d6ff7..a4582df63 100644 --- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue +++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue @@ -105,7 +105,7 @@ {{$t('project.endpoint.metrics')}} - + @@ -346,7 +346,7 @@ {{$t('project.endpoint.logs')}} - +
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue index 6b12023f9..5096490eb 100644 --- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue @@ -86,7 +86,7 @@ {{$t('project.endpoint.metrics')}} - +
@@ -326,7 +326,7 @@ {{$t('project.endpoint.logs')}} - +
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue index fe1099e64..8076825c2 100644 --- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue @@ -75,7 +75,8 @@ style="margin-left: 14px" slot="reference" v-model="scope.row.schedEnable" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" :active-value="1" :inactive-value="0" @change="(val)=>{$emit('statusChange', scope.row)}" diff --git a/nezha-fronted/src/components/page/config/assetState.vue b/nezha-fronted/src/components/page/config/assetState.vue index 228e0a384..0e3d2d2b2 100644 --- a/nezha-fronted/src/components/page/config/assetState.vue +++ b/nezha-fronted/src/components/page/config/assetState.vue @@ -61,7 +61,8 @@ :active-value="1" :disabled="!hasButton('assetState_toEdit')" :inactive-value="0" - active-color="#ee9d3f" + active-icon-class="switch-open" + inactive-icon-class="switch-shut" @change="(val)=>{statusChange(scope.row)}"> {{scope.row[item.prop]}} diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue index 491658537..81fc85c81 100644 --- a/nezha-fronted/src/components/page/config/system.vue +++ b/nezha-fronted/src/components/page/config/system.vue @@ -68,17 +68,17 @@ - +
{{$t('config.system.basic.pinPolicy')}} ({{$t('config.system.basic.pinPolicyValue')}})
- + - + diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue index 24aad0d50..f251035e7 100644 --- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue +++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue @@ -53,11 +53,11 @@ - +