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

perf: 侧滑框整体样式调整

Browse Source 
1.侧滑框的label、标题字色和字体大小统一；
2.修复chart侧滑框内部分下拉框无法显示的问题
This commit is contained in:
陈劲松
2020-02-10 20:28:29 +08:00
parent d87c10af16
commit 2698ed668f
7 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@ $btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴
$pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
$box-title-color: #333; //弹框标题字体颜色
$box-label-color: #666; //弹框label字色
$content-left-text-color: #666; //左侧菜单默认字色

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

@@ -1,6 +1,6 @@
[v-cloak] {
display: none;
display: none !important;
}
body {
height: 100%;
@@ -606,6 +606,9 @@ li{
.right-box-add-asset, .right-box-add-chart {
width: 550px;
}
.right-box-chart .el-input__inner, .right-box-chart input {
background-color: white;
}
.right-box-add-endpoint {
width: 840px;
}
@@ -730,9 +733,12 @@ li{
position: absolute;
right: 0;
}
.config-dropdown, .chart-box-dropdown {
.config-dropdown, .chart-box-dropdown, .metric-dropdown {
z-index: 2950 !important;
}
.chart-box-dropdown {
width: 519px;
}
.config-dropdown-btn i {
font-size: 12px;
}
@@ -764,13 +770,13 @@ li{
}
.right-box-form .el-form-item .el-form-item__label {
padding: 0;
font-size: 16px;
color: black;
font-size: 14px;
color: #666;
}
.right-box-form .el-form-item.metric-title-position .el-form-item__label {
padding: 0;
font-size: 14px;
color: #666;
color: $box-label-color;
}
.pop-item-wider .right-box-form .el-form-item .el-form-item__label {
font-size: 14px;
@@ -779,9 +785,13 @@ li{
.right-box-form-left.right-box-form .el-form-item .el-form-item__label {
padding: 0 20px 0 0;
font-size: 14px;
color: black;
color: $box-label-color;
line-height: 34px;
}
.right-child-box-title, .asset-sub-title, .label-center, .metric-title-label {
font-size: 14px;
color: $box-label-color;
}
.right-box-form .el-form-item__content {
line-height: 32px;
}
@@ -867,6 +877,7 @@ li{
}
.right-box-form-content .right-box-row-with-btn {
width: calc(100% - 37px);
vertical-align: middle;
}
.right-box-form-content .right-box-row-with-btn.el-select--mini, .right-box-form-content .right-box-row-with-btn.el-cascader--mini {
width: calc(100% - 33px);

4
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -32,10 +32,10 @@
</div>
</div>-->
</div>
<div class="mt-10">
<div class="mt-10" v-cloak>
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light" v-cloak>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>

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

@@ -25,7 +25,7 @@
</el-submenu>
<el-submenu index="1" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('dashboard')" :class ="(activeIndex == 'dashboard' || activeIndex == 'panel' || activeIndex == 'metricPreview') ? 'menu-active' :'' " >
<div @click="jumpTo('panel')" :class ="(activeIndex == 'panel' || activeIndex == 'metricPreview') ? 'menu-active' :'' " >
{{$t('overall.dashboard')}}
</div>
</template>

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

@@ -56,7 +56,7 @@
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<transition name="right-box">
<div class="right-box right-box-add-chart z-top" v-if="rightBox.show" >
<div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -75,7 +75,7 @@
<el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')">
<div class="right-box-form-content">
<el-select class="right-box-row-with-btn" popper-class="config-dropdown"
<el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
<el-option v-for="item in panelData" :key="item.id" :label="item.name"
:value="item.id" :id="'chart-box-panel-'+item.id">

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

@@ -107,8 +107,7 @@
<el-form :model="elementInfo" ref="elementInfo" >
<el-row >
<el-col :span="16">
<!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}}
<span class="label-center">{{$t('dashboard.panel.chartForm.metric')}}</span>
</el-col>
<el-col :span="8">
@@ -133,7 +132,7 @@
</template>
<template v-if="tableShow == 1">
<el-form-item class="right-box-form-content" label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-cascader ref="metricSelect" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="" size="small"
<el-cascader ref="metricSelect" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="chart-box-dropdown" size="small"
v-model="elementInfo.metric"
:options="metricCascaderList"
:props="{ expandTrigger: 'hover' }"
@@ -172,6 +171,7 @@
<el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder=""
collapse-tags
popper-class="metric-dropdown"
filterable
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>

4
nezha-fronted/src/router/index.js
View File

@@ -32,10 +32,6 @@ export default new Router({
path: '/',
component: resolve => require(['../components/common/home.vue'], resolve),
children: [
{
path: '/dashboard',
component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),
},
{
path: '/panel',
component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),