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

style：NEZ-1989 dashboard 变量 样式调整

Browse Source
This commit is contained in:
zhangyu
2022-07-05 15:00:35 +08:00
parent 3115f6d9a6
commit 76ceabe639
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
View File

@@ -10,11 +10,11 @@
margin-right: 15px; margin-right: 15px;
} }
.variable-key{ .variable-key{
margin-right: 5px;
border: 1px solid $--border-color-base; border: 1px solid $--border-color-base;
color: #33a2e5; color: $--color-text-regular;
padding: 3px 5px; background: $--background-color-2;
border-radius: 4px; padding: 3px 10px;
border-radius: 2px 0 0 2px;
} }
.choose-box { .choose-box {
overflow: hidden; overflow: hidden;
@@ -22,8 +22,10 @@
white-space: nowrap; white-space: nowrap;
max-width: 200px; max-width: 200px;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-right: 5px;
height: 30px; height: 30px;
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-left: none;
padding-left: 8px; padding-left: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -39,12 +41,17 @@
width: calc(100% - 24px); width: calc(100% - 24px);
overflow: hidden; overflow: hidden;
min-width: 24px; min-width: 24px;
color: $--color-text-primary;
} }
} }
.panel-variables{ .panel-variables{
min-width: 180px;
max-width: 220px;
.el-dropdown-menu__item { .el-dropdown-menu__item {
padding: 0 5px 0 20px; padding: 0 5px 0 20px;
width: 100%;
box-sizing: border-box;
position: relative; position: relative;
height: 36px; height: 36px;
} }
@@ -55,6 +62,10 @@
width: calc(100% - 20px); width: calc(100% - 20px);
overflow: hidden; overflow: hidden;
min-width: 24px; min-width: 24px;
color: $--color-text-regular;
}
.el-dropdown-menu__item .el-dropdown-menu__item-label.checked {
color: $--color-warning;
} }
.nz-icon-check{ .nz-icon-check{
position: absolute; position: absolute;

4
nezha-fronted/src/components/common/panel/panelVariables.vue
View File

@@ -3,7 +3,6 @@
<div v-for="(item,index) in labelArr" :key="index" v-if="item.show && labelValue[item.name].length" class="panel-variables-content" style="display: flex"> <div v-for="(item,index) in labelArr" :key="index" v-if="item.show && labelValue[item.name].length" class="panel-variables-content" style="display: flex">
<div class="variable-key">{{item.name}}</div> <div class="variable-key">{{item.name}}</div>
<el-popover <el-popover
width="220"
trigger="manual" trigger="manual"
placement="bottom-start" placement="bottom-start"
v-model="item.visible" v-model="item.visible"
@@ -22,10 +21,9 @@
</el-checkbox-group> </el-checkbox-group>
<div v-else> <div v-else>
<li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)"> <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
<div class="el-dropdown-menu__item-label"> <div class="el-dropdown-menu__item-label" :class="value.value === item.checked[0] && !item.checkAll ? 'checked': ''">
{{value.label}} {{value.label}}
</div> </div>
<i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0] && !item.checkAll"/>
</li> </li>
</div> </div>
</ul> </ul>