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

perf: 调整全局table、侧滑按钮样式等

Browse Source 
1.侧滑的按钮大小更改
2.table表头配置放在最后一列
3.table表头高度减小
This commit is contained in:
陈劲松
2020-02-17 17:29:15 +08:00
parent d874854599
commit 28a2795ac8
17 changed files with 66 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,6 +118,9 @@ li{
.nz-btn-min-width-82 { .nz-btn-min-width-82 {
min-width: 82px; min-width: 82px;
} }
.nz-btn-min-width-100 {
min-width: 100px;
}
.nz-btn-min-width-120 { .nz-btn-min-width-120 {
min-width: 120px; min-width: 120px;
} }
@@ -506,8 +509,8 @@ li{
} }
//小信息栏边框 //小信息栏边框
.nz-table.el-table th .cell{ .nz-table.el-table th .cell{
height: 36px; height: 32px;
line-height: 36px; line-height: 32px;
display:flex; display:flex;
background-image: linear-gradient(#f8f8f8, #e6e6e6); background-image: linear-gradient(#f8f8f8, #e6e6e6);
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
@@ -517,9 +520,9 @@ li{
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
} }
.nz-table .el-table__row td:first-of-type { /*.nz-table .el-table__row td:first-of-type {
padding-left: 38px; padding-left: 38px;
} }*/
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { /*覆盖tooltip小三角颜色*/ .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { /*覆盖tooltip小三角颜色*/
border-top-color: #ebeef5; border-top-color: #ebeef5;
} }
@@ -528,22 +531,21 @@ li{
} }
.nz-table-gear { .nz-table-gear {
display: inline-block; display: inline-block;
width: 38px; width: 8px;
text-align: center;
border-right: 2px solid #d4d4d4;
box-sizing: border-box; box-sizing: border-box;
float: left; border-left: 1px solid white;
margin-left: -10px; position: relative;
} }
.nz-table-gear>i { .nz-table-gear>i {
cursor: pointer; cursor: pointer;
position: absolute;
left: 7px;
} }
.nz-table-txt { .nz-table-txt {
border-right: 1px solid #d4d4d4;
width: calc(100% - 19px);
display: inline-block; display: inline-block;
border-left:1px solid #fff;
box-sizing: border-box; box-sizing: border-box;
float: left;
padding-left: 10px;
} }
/* end--内容*/ /* end--内容*/
@@ -1115,3 +1117,7 @@ li{
height: 25px; height: 25px;
line-height: 25px !important; line-height: 25px !important;
} }
.el-textarea textarea {
height: 140px !important;
}

9
nezha-fronted/src/components/common/header.vue
View File

@@ -43,9 +43,9 @@
</template> </template>
<template v-for="(item, index) in projectData"> <template v-for="(item, index) in projectData">
<el-menu-item :index="'2-' + index"> <el-menu-item :index="'2-' + index">
<div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}"> <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span> <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div> <div v-show="hoverItemIndex == '2-' + index" @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
</div> </div>
</el-menu-item> </el-menu-item>
</template> </template>
@@ -56,11 +56,11 @@
</template> </template>
<template v-for="(item, index) in assetData"> <template v-for="(item, index) in assetData">
<el-menu-item :index="'3-' + index"> <el-menu-item :index="'3-' + index">
<div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }"> <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span> <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas"> <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">
<template v-slot:optionZone> <template v-slot:optionZone>
<div @click="closeAllPop" class="menu-edit"> <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">
<i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i> <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
</div> </div>
</template> </template>
@@ -133,6 +133,7 @@
activeIndex:'', activeIndex:'',
activeItemIndex:'', activeItemIndex:'',
activeItemIndexes: [], activeItemIndexes: [],
hoverItemIndex: '',
editPanel:{//新增or编辑的panel editPanel:{//新增or编辑的panel
id:'', id:'',
name: '' name: ''

4
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -194,10 +194,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="ep-add" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

4
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -99,10 +99,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="alert-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="alert-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

4
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -161,10 +161,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

4
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -84,10 +84,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

4
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -26,10 +26,10 @@
<!-- begin--底部按钮--> <!-- begin--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="module-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

4
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -32,10 +32,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="project-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -55,11 +55,11 @@
min-width="110px" min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span>
</template> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

4
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -39,11 +39,11 @@
min-width="110px" min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span>
</template> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

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

@@ -63,11 +63,11 @@
:class-name="item.prop == 'option' ? 'content-right-options' : ''" :class-name="item.prop == 'option' ? 'content-right-options' : ''"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span>
</template> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>

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

@@ -345,10 +345,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click.stop="sendStateData('close')" id="add-asset-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click.stop="sendStateData('close')" id="add-asset-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -387,10 +387,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120" id="asset-edit-cancel"> <button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" id="asset-edit-cancel">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="!tabView" @click.stop="editData('asset')" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" id="asset-edit-save"> <button v-if="!tabView" @click.stop="editData('asset')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" id="asset-edit-save">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -50,11 +50,11 @@
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span>
</template> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
@@ -156,11 +156,11 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="account-esc" <button @click="esc" id="account-esc"
class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save" <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -39,11 +39,11 @@
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label"> :key="`col-${index}`" :label="item.label">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span>
</template> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
@@ -172,11 +172,11 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save" <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -164,10 +164,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

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

@@ -8,9 +8,6 @@
height: 25px !important; height: 25px !important;
border-color: #d8d8d8; border-color: #d8d8d8;
} }
.project .nz-table .el-table__row td:first-of-type {
padding-left: 0;
}
.change-time-height { .change-time-height {
height: 23px; height: 23px;
} }
@@ -126,12 +123,12 @@
min-width="110px" min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0"> <template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> </template>
</span>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>