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

style：修改metric的样式 以及输入框自动撑开，高度未撑开的问题

Browse Source
This commit is contained in:
zhangyu
2021-03-19 11:12:09 +08:00
parent 9f597b172c
commit 397800eec5
6 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,8 @@ $btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色
$btn-normal-txt-color: #fff; //橙色按钮字体颜色
$btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
$btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮背景颜色
$btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //灰色按钮hover背景颜色
$btn-light-background-color: linear-gradient(rgb(247, 248, 250) 0%, rgb(231, 234, 240) 100%); //灰色按钮背景颜色
$btn-light-background-color-hover: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%); //灰色按钮hover背景颜色
$btn-light-txt-color: #666; //灰色按钮字体颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影

1
nezha-fronted/src/components/common/alert/selectAlertSilence.vue
View File

@@ -8,7 +8,6 @@
<div class="select-panel-tree">
<el-tree
:data="silenceData"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}"
@node-click="selectSilence"

4
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1598,8 +1598,8 @@
</style>
<style lang="scss" scoped>
.legend-title{
width: 110px;
padding-right: 10px;
width: 100px;
margin-right: 10px;
text-align: left;
padding-left:10px;
margin-left: 10px;

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

@@ -20,7 +20,7 @@
<el-form-item :label='$t("alert.config.name")' prop="alertName">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small" id="alert-box-input-name"></el-input>
</el-form-item>
<el-form-item style="width: calc(100% - 15px);margin-left: 15px" :label-width="'0'" prop="expr">
<el-form-item style="width: calc(100% - 15px);margin-left: 15px" :label='$t("alert.config.expr")' prop="expr">
<promql-input
ref="promql"
:expression-list.sync="expressions"
@@ -28,7 +28,7 @@
:styleType="2"
:required="true"
@change="metricChange"
:plugins="['metric-input']"
:plugins="['metric-selector','metric-input']"
id="alert-box-input-promql"
></promql-input>
</el-form-item>
@@ -332,4 +332,7 @@
.rule-severity-remark .nz-icon-info-normal{
margin-right: 10px;
}
/deep/ .metric-selector-title{
margin-left: 0 !important;
}
</style>

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

@@ -44,11 +44,11 @@
}
.right-box-form .element-item.form-row-item{
width: calc(100% - 60px);
padding: 5px 20px 0px 0;
padding: 10px 10px 5px 0;
}
.legend-title{
width: 110px;
padding-right: 10px;
width: 100px;
margin-right: 10px;
text-align: left;
padding-left:10px;
margin-left: 10px;

19
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'auto','margin-bottom':required?'0':'18px'}">
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'auto':'auto','margin-bottom':required?'0':'18px'}">
<div class="query-row">
<div class="query-input">
<!--explore页面的样式-->
@@ -59,8 +59,6 @@
</el-cascader-panel>
</el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}<sup v-if="required"
style="color: #f56c6c">*</sup></label>
</el-col>
<el-col
:class="plugins.indexOf('metric-selector') > -1 ?'metric-selector-input-box':'metric-null-input-box'"
@@ -207,6 +205,7 @@
datacenterOption:[],
projectOption:[],
filterSilence:'',
tempBoxId:{},
}
},
created(){
@@ -362,7 +361,7 @@
let returnFlag=false
let errorStr=""
this.tempBox.vars.forEach((item)=>{
params.varsVal[item]=this.tempBox[item];
params.varsVal[item]=this.tempBoxId[item]?this.tempBoxId[item]:this.tempBox[item];
if(!this.tempBox[item]){
errorStr+=item + ","
returnFlag=true;
@@ -503,6 +502,7 @@
},
silenceChange(val,key){
this.tempBox[key]=val.name;
this.tempBoxId[key]=val.id;
},
clearValue(key){
this.tempBox[key]='';
@@ -574,7 +574,7 @@
}
.query-options .option:focus, .query-options .option:hover {
background-color: #CCD7E4;
background-color: rgb(247, 248, 250);
}
.query-input .metric-btn {
@@ -594,7 +594,7 @@
}
.metric-btn:hover, .metric-btn:focus {
background-color: #CCD7E4;
background-image: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);
color: #606266;
}
@@ -627,8 +627,9 @@
/*'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ',*/
/*'text-align':'left', 'color': '#666',*/
/*'font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold',*/
width:110px;
width:100px;
margin-left: 10px;
margin-right: 10px;
height: 33px;
text-align: left;
padding: 0 0 0 10px;
@@ -652,7 +653,7 @@
letter-spacing: 0;
}
.nz-cascade {
padding: 0 10px 0 18px;
padding: 0 10px 0 25px;
position: relative;
}
.nz-cascade .nz-icon-moban {
@@ -662,7 +663,7 @@
.nz-cascade-temp .nz-icon-moban{
display: inline-block;
position: absolute;
left: 2px;
left: 5px;
/*background: #F8F9FB;*/
}