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 19:12:17 +08:00
parent cdc6f87f00
commit a1ceade767
4 changed files with 90 additions and 25 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,12 @@ li{
line-height: 16px;
position: relative;
}
.nz-btn-metric-bottom{
position: absolute;
left:50%;
bottom: -70%;
}
.nz-btn.nz-btn-size-normal {
font-size: 12px;
padding: 4px 8px;
@@ -151,7 +157,6 @@ li{
border: 0px;
color: $btn-light-txt-color;
box-shadow: $btn-light-shadow;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
@@ -251,6 +256,28 @@ li{
}
/* end--el-input扩展 */
// metric组件
.nz-tab-style {
line-height: 14px;
padding-bottom:6px;
color: #999;
cursor: pointer;
display: inline-block;
margin-bottom:10px;
font-size: 14px;
}
.nz-tab-style-light {
border-bottom: 3px solid $global-text-color-active;
color: #333;
cursor: default;
box-sizing: border-box;
font-weight: 600;
letter-spacing: 0;
}
.nz-tab-style-light-right{
margin-left:30px;
}
/* begin--nz-tab组件*/
.nz-tab {
font-size: 14px;
@@ -273,6 +300,7 @@ li{
color: #333;
cursor: default;
}
/* end--nz-tab组件*/
/* end--通用*/

34
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -72,23 +72,37 @@
</el-col>
<el-col span="8">
<div class="nz-btn-group float-left" v-show="tableShow == 2">
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-tab-item nz-tab-item-active"> -->
<button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div class="nz-tab-item-box" v-show="tableShow == 1">
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
<span>{{$t('dashboard.metric.normal')}}</span>
</button>
<button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
</div>
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button> -->
<div @click="" class="nz-tab-style nz-tab-style-light-right">
<span>{{$t('dashboard.metric.expert')}}</span>
</button>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button> -->
</div>
<div class="nz-btn-group float-left" v-show="tableShow == 1">
<button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<div class="nz-tab-item-box " v-show="tableShow == 2">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> -->
<div @click="" class="nz-tab-style">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button>
<button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button>
</button> -->
</div>
</el-col>
</el-row>

27
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -71,21 +71,36 @@
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
</el-col>
<el-col span="8">
<div class="nz-btn-group float-left" v-show="tableShow == 2">
<button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<div class="nz-tab-item-box" v-show="tableShow == 1">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="" class="nz-tab-style nz-tab-style-light-right">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button>
<button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button>
</button> -->
</div>
<div class="nz-btn-group float-left" v-show="tableShow == 1">
<button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<div class="nz-tab-item-box" v-show="tableShow == 2">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> -->
<div @click="" class="nz-tab-style">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button>
<button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button>
</button> -->
</div>
</el-col>
</el-row>

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

@@ -23,18 +23,24 @@
<!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row>
<el-row class="operate-area">
<div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
<el-row class="operate-area nz-btn-metric-bottom">
<!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
<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}"
>{{$t('dashboard.metric.createPanel')}}</button>
<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}"
>{{$t('dashboard.metric.selectPanel')}}</button>
<!-- <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}"
>{{$t('dashboard.metric.createPanel')}}</button>
<button :disabled="saveDisabled" type="primary" @click="selectPanel"
: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 , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>{{$t('dashboard.metric.selectPanel')}}</button>
>{{$t('dashboard.metric.selectPanel')}}</button> -->
</el-row>
<!-- options -->
<el-row class="mt-10">
<el-checkbox :disabled="saveDisabled" v-model="isSave">options</el-checkbox>
</el-row>
@@ -51,16 +57,18 @@
</el-form-item>
</div>
</el-row>
<el-row>
<div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px
<el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input>
<span class='nz-input-append'>px</span>
<!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px -->
</el-form-item>
</div>
</el-row>
<el-row>
<div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"