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

perf: 右侧内容边距减小

Browse Source 
1.content-right右padding减小为5px
2.top按钮、顶部工具栏相应调整位置
3.asset列表还未调整
This commit is contained in:
陈劲松
2020-03-13 17:55:56 +08:00
parent b89a5d14ef
commit bc9da07d2c
10 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,7 +146,7 @@ li{
.to-top {
position: fixed;
bottom: 10px;
right: 23px;
right: 5px;
border-radius: 5px;
height: 40px;
width: 40px;
@@ -438,7 +438,7 @@ li{
.content-right {
height: 100%;
margin-left: 201px;
padding: 0 15px;
padding: 0 5px;
background-color: $content-right-background-color;
}
.content-right-option {
@@ -471,7 +471,7 @@ li{
}
.top-tools .top-tool-search {
width: 260px;
margin: -1px 20px 0 0;
margin: -1px 0 0 0;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
@@ -1219,6 +1219,9 @@ li{
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
width: 6px;
}
.ps__thumb-y {
right: 0px;
}
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
height: 6px;
}

5
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -286,6 +286,9 @@
font-size: 12px;
height: 24px;
}
.dropdownBtn .el-button--mini:first-of-type {
right: 3px;
}
.el-dropdown .el-button-group{
display: block;
position: relative;
@@ -296,7 +299,7 @@
padding-right: 5px;
border-left: none;
top:0px;
left:2px;
left: -1px;
}
.footer:before{
/*content: '';*/

6
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -21,7 +21,7 @@
</div>
<div>
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right ">
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
@@ -359,6 +359,9 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -418,6 +421,7 @@
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -46,7 +46,7 @@
</template>
</export-excel>
<div class="top-tool-search float-left"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
<div class="top-tool-search float-left margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
</div>

6
nezha-fronted/src/components/page/config/account.vue
View File

@@ -25,7 +25,7 @@
<div></div>
<div>
<button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="account-add">
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="account-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
@@ -495,6 +495,9 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -524,6 +527,7 @@
this.getTableData();
this.initReceiverData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

8
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -56,7 +56,7 @@
<div></div>
<div>
<button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="dc-add">
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="dc-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
@@ -152,7 +152,7 @@
</div>
<div>
<button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="cab-add">
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
@@ -496,6 +496,9 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.pageObj.pageSize = val;
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -573,6 +576,7 @@
this.getTableData();
this.$nextTick(function(){
this.gutterHandler(".nz-table");
this.getUserData();//绑定滚动条事件，控制top按钮
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

6
nezha-fronted/src/components/page/config/model.vue
View File

@@ -24,7 +24,7 @@
<div class="top-tools">
<div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" :title="$t('overall.createModel')"
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" :title="$t('overall.createModel')"
id="model-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -251,6 +251,9 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.pageObj.pageNo = 1;
@@ -284,6 +287,7 @@
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

6
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -24,7 +24,7 @@
<div class="top-tools">
<div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " :title="$t('overall.createPrometheusServer')"
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" :title="$t('overall.createPrometheusServer')"
id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -563,6 +563,9 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.pageObj.pageNo = 1;
@@ -655,6 +658,7 @@
this.getIdcData();
this.getUserData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

14
nezha-fronted/src/components/page/project/project.vue
View File

@@ -116,7 +116,7 @@
<!-- <button @click="toCreateEndpoint" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">-->
<!-- <i class="nz-icon-create-square nz-icon"></i>-->
<!-- </button>-->
<div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div>
</div>
<el-table
@@ -1563,16 +1563,6 @@
}
}
}
/*gutterHandler() {
setTimeout(() => {
let gutterCol = document.querySelector(".endpoint-table col[name='gutter']");
if (gutterCol.attributes['width'].value != '0') {
gutterCol.attributes['width'].value = '10';
let bb = document.querySelector('.el-table__body');
document.querySelector('.endpoint-table .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
}
}, 10)
}*/
},
created() {
this.currentProject = this.$store.state.currentProject;
@@ -1945,7 +1935,7 @@
}
.dropdownBtn .el-dropdown__caret-button{
top:0px !important;
left:2px;
left: -1px;
}
.endpoint-query-table .el-loading-spinner .circular{
width: 42px;

2
nezha-fronted/src/main.js
View File

@@ -100,7 +100,7 @@ Vue.prototype.gutterHandler = (tableClass) => {
//console.info(gutterCol.attributes['width'].value)
if (gutterCol.attributes['width'].value != '0') {
//console.info(gutterCol)
gutterCol.attributes['width'].value = '10';
gutterCol.attributes['width'].value = '1';
document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
}
}, 1000)