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

metric样式修改

Browse Source
This commit is contained in:
wujiawen
2020-01-20 20:32:53 +08:00
parent a1ceade767
commit f7619c96ea
3 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,6 +107,9 @@ li{
.nz-btn-min-width-120 { .nz-btn-min-width-120 {
min-width: 120px; min-width: 120px;
} }
.nz-btn-min-width-140 {
min-width: 120px;
}
.nz-btn { .nz-btn {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@@ -118,11 +121,24 @@ li{
line-height: 16px; line-height: 16px;
position: relative; position: relative;
} }
.nz-btn-metricbtn{
height: 32px;
}
.nz-btn-metric-bottom{ .nz-btn-metric-bottom{
position: absolute; position: fixed;
left:50%; left:52%;
bottom: -70%; bottom:30px;
}
.nz-btn-metricset-left{
margin: 0 20px 30px 515px;
}
.nz-btn-metric-bottom-left{
margin-right:30px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
text-align: center;
line-height: 14px;
} }
.nz-btn.nz-btn-size-normal { .nz-btn.nz-btn-size-normal {
font-size: 12px; font-size: 12px;
@@ -251,7 +267,8 @@ li{
} }
.nz-input-append { .nz-input-append {
position: absolute; position: absolute;
right: 5px; right: 8px;
line-height: 38px;
color: #666; color: #666;
} }
/* end--el-input扩展 */ /* end--el-input扩展 */

2
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -18,7 +18,7 @@
// overflow: auto; // overflow: auto;
} }
.operate-area { .operate-area {
border-top: 1px solid #dfe7f2; // border-top: 1px solid #dfe7f2;
border-bottom: 1px solid #dfe7f2; border-bottom: 1px solid #dfe7f2;
padding: 5px 0; padding: 5px 0;
margin-left:3px; margin-left:3px;

33
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -1,5 +1,21 @@
<style lang="scss"> <style lang="scss">
@import 'metricSet'; @import 'metricSet';
// .el-checkbox__input.is-checked+.el-checkbox__label{
// color:$global-text-color-active;
// }
.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner,.el-checkbox-button.is-checked .el-checkbox-button__inner{
border: 1px solid $header-text-color-active;
color:#666;
font-size: 14px;
margin-left:-15px;
background-color: transparent;
}
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{
border-left-color: $header-text-color-active;
}
.common-middle{
margin:-20px auto;
}
</style> </style>
<template> <template>
<div class="metric-set" > <div class="metric-set" >
@@ -13,24 +29,24 @@
></chart-metric> ></chart-metric>
</el-row> </el-row>
<el-row class="pt-5 pb-5 ml-3"> <el-row class="pt-5 pb-5 ml-3 operate-area">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button> <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-metricset-left nz-btn-metricbtn">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row> </el-row>
<el-row class="operate-area nz-btn-metric-bottom"> <el-row class=" nz-btn-metric-bottom">
<!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> --> <!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
<button :disabled="saveDisabled" type="primary" @click="createNew" <button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-120 nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-light' : !saveDisabled}" :class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}"
>{{$t('dashboard.metric.createPanel')}}</button> >{{$t('dashboard.metric.createPanel')}}</button>
<button :disabled="saveDisabled" type="primary" @click="selectPanel" <button :disabled="saveDisabled" type="primary" @click="selectPanel"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal nz-btn-min-width-120' : !saveDisabled}"
>{{$t('dashboard.metric.selectPanel')}}</button> >{{$t('dashboard.metric.selectPanel')}}</button>
<!-- <button :disabled="saveDisabled" type="primary" @click="createNew" <!-- <button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
@@ -42,7 +58,8 @@
</el-row> </el-row>
<!-- options --> <!-- options -->
<el-row class="mt-10"> <el-row class="mt-10">
<el-checkbox :disabled="saveDisabled" v-model="isSave">options</el-checkbox> <el-checkbox-button :disabled="saveDisabled" v-model="isSave" checked >Options</el-checkbox-button>
<!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
</el-row> </el-row>
<el-form :model="chartInfo" ref="chartInfo" v-show="isSave"> <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
<el-row> <el-row>
@@ -59,7 +76,7 @@
</el-row> </el-row>
<el-row> <el-row>
<div class="common-float-left"> <div class="common-float-left common-middle">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height" <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
:rules="{ required: true, type: 'number', trigger: 'change' }"> :rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input> <el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input>