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

perf: dc-area选择框改为与下拉框类似的形式

Browse Source
This commit is contained in:
陈劲松
2020-03-01 18:38:40 +08:00
parent d369d43a63
commit dfc199330f
3 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -694,6 +694,10 @@ li{
.nz-pop2 { .nz-pop2 {
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
} }
.nz-pop-select-area {
padding: 0 !important;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
}
.right-box-title { .right-box-title {
height: 36px; height: 36px;
text-align: left; text-align: left;

22
nezha-fronted/src/components/common/popBox/selectArea.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<el-popover :placement="placement" width="250" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop"> <el-popover :placement="placement" width="487" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
<div> <div>
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="pop-top-btns"> <!--<div class="pop-top-btns">
<button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc"> <button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span> <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span> <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button> </button>
</div> </div>-->
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
<div class="pop-title">{{$t('config.dc.selectArea')}}</div> <!--<div class="pop-title">{{$t('config.dc.selectArea')}}</div>-->
<div class="pop-item-wider"> <div class="pop-item-wider">
<el-scrollbar class="select-area-tree"> <el-scrollbar class="select-area-tree">
<el-tree <el-tree
@@ -92,8 +92,20 @@
} }
</script> </script>
<style> <style lang="scss">
.select-area-tree { .select-area-tree {
height: 350px; height: 350px;
} }
.select-area-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-area-tree .el-tree-node__content:hover {
color: $global-text-color-active;
}
.select-area-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
font-weight: bold;
color: $global-text-color-active;
}
</style> </style>

2
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -51,7 +51,7 @@
<div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div> <div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.dc.area")' prop="area"> <el-form-item :label='$t("config.dc.area")' prop="area">
<select-area ref="selectArea" :areaData="areaData" :placement="'left'" @selectArea="selectArea" :currentArea="currentDc.area.id"> <select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="currentDc.area.id">
<template v-slot:trigger> <template v-slot:trigger>
<el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input> <el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>
</template> </template>