gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-11-15 14:00:54 +08:00
parent d5967cc3f0
commit 122a5f9495
15 changed files with 118 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/assets/css/common.scss
View File

@@ -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;
}

9
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -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 {

4
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -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;
}

8
nezha-fronted/src/assets/css/components/charts/chart.scss
View File

@@ -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;

4
nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
View File

@@ -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;

2
nezha-fronted/src/assets/css/components/common/detailView/list/common.scss
View File

@@ -46,7 +46,7 @@
}
}
.selected{
background: #FFFBF6;
background: $--background-color-base;
}
.colorEF7458{
color: $--color-danger;

2
nezha-fronted/src/assets/css/components/layout/leftMenu.scss
View File

@@ -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;

53
nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
View File

@@ -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;
}

11
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
View File

@@ -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%;

8
nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
View File

@@ -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;

35
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -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是与主题切换无关的变量 ***/

20
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -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';

18
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -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;

4
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -6,7 +6,7 @@
<div v-if="isLoading" class="panel-loading"></div>
</transition>
</div>
<div class="main-container" style="padding-right: 0">
<div class="main-container">
<div class="top-tools">
<div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
<button id="panel-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
@@ -80,7 +80,7 @@
</template>
</div>
<div id="tableList" class="table-list">
<div ref="dashboardScrollbar" id="dashboardScrollbar" class="border-t-1-de" style="height: calc(100% - 20px); overflow: auto;">
<div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box" style="height: calc(100% - 20px); overflow: auto;">
<div class="box-content" v-loading="chartListLoading">
<chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" @panel-list-loading="load" @on-add-group-item-chart="addGroupItem"></chart-list>
</div>

31
nezha-fronted/src/components/page/monitor/project/index.vue
View File

@@ -45,34 +45,3 @@ export default {
methods: {}
}
</script>
<style scoped lang="scss">
.main-list{
height: 100%;
width: 100%;
display: flex;
background: #f6f6f6;
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;
}
.ml10{
margin-left: 10px;
}
}
/deep/ .main-container{
padding-right: 0px !important;
}
</style>