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

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

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

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

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

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

@@ -46,7 +46,7 @@
</template> </template>
</export-excel> </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>
</div> </div>

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

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

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

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

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

@@ -24,7 +24,7 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></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"> id="model-add">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
@@ -251,6 +251,9 @@
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val); localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData(); this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
}, },
search: function (searchObj) { search: function (searchObj) {
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
@@ -284,6 +287,7 @@
this.getTableData(); this.getTableData();
this.$nextTick(() => { this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮 //绑定滚动条事件，控制top按钮
let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {

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

@@ -24,7 +24,7 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></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"> id="prom-add">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
@@ -563,6 +563,9 @@
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val); localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData(); this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
}, },
search: function (searchObj) { search: function (searchObj) {
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
@@ -655,6 +658,7 @@
this.getIdcData(); this.getIdcData();
this.getUserData(); this.getUserData();
this.$nextTick(() => { this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮 //绑定滚动条事件，控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { 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">--> <!-- <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>--> <!-- <i class="nz-icon-create-square nz-icon"></i>-->
<!-- </button>--> <!-- </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>
</div> </div>
<el-table <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() { created() {
this.currentProject = this.$store.state.currentProject; this.currentProject = this.$store.state.currentProject;
@@ -1945,7 +1935,7 @@
} }
.dropdownBtn .el-dropdown__caret-button{ .dropdownBtn .el-dropdown__caret-button{
top:0px !important; top:0px !important;
left:2px; left: -1px;
} }
.endpoint-query-table .el-loading-spinner .circular{ .endpoint-query-table .el-loading-spinner .circular{
width: 42px; width: 42px;

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

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