github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 09:00:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

add style

Browse Source
This commit is contained in:
Fine 2022-11-02 16:11:06 +08:00
parent 8e7702b09b
commit 4b917bf9d4
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/dashboard/configuration/widget/graph-styles/Line.vue
View File

@ -14,59 +14,61 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="legend"> <div class="legend">
<span class="label">{{ t("legendOptions") }}</span> <span class="label">{{ t("showLegend") }}</span>
<span class="title">{{ t("showLegend") }}</span>
<el-switch <el-switch
v-model="legend.showLegend" v-model="legend.showLegend"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ showLegend: legend.showLegend })" @change="updateLegendConfig({ showLegend: legend.showLegend })"
/> />
<span class="title">{{ t("asTable") }}</span> <span class="label">{{ t("legendOptions") }}</span>
<div class="title mr-5">
{{ t("asTable") }}
</div>
<el-switch <el-switch
v-model="legend.asTable" v-model="legend.asTable"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ asTable: legend.asTable })" @change="updateLegendConfig({ asTable: legend.asTable })"
/> />
<span class="title">{{ t("toTheRight") }}</span> <div class="title ml-20 mr-5">{{ t("toTheRight") }}</div>
<el-switch <el-switch
v-model="legend.toTheRight" v-model="legend.toTheRight"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ toTheRight: legend.toTheRight })" @change="updateLegendConfig({ toTheRight: legend.toTheRight })"
/> />
<span class="title">{{ t("width") }}</span> <div class="title ml-20 mr-5">{{ t("width") }}</div>
<el-input <el-input
v-model="legend.width" v-model="legend.width"
class="input" class="inputs"
size="small" size="small"
placeholder="Please input the width" placeholder="Please input the width"
@change="updateLegendConfig({ toTheRight: legend.width })" @change="updateLegendConfig({ toTheRight: legend.width })"
/> />
<span class="label">{{ t("legendValues") }}</span> <span class="label">{{ t("legendValues") }}</span>
<span class="title">{{ t("min") }}</span> <span class="title mr-5">{{ t("min") }}</span>
<el-switch <el-switch
v-model="legend.min" v-model="legend.min"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ min: legend.min })" @change="updateLegendConfig({ min: legend.min })"
/> />
<span class="title">{{ t("max") }}</span> <span class="title ml-20 mr-5">{{ t("max") }}</span>
<el-switch <el-switch
v-model="legend.max" v-model="legend.max"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ max: legend.max })" @change="updateLegendConfig({ max: legend.max })"
/> />
<span class="title">{{ t("mean") }}</span> <span class="title ml-20 mr-5">{{ t("mean") }}</span>
<el-switch <el-switch
v-model="legend.mean" v-model="legend.mean"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ avg: legend.mean })" @change="updateLegendConfig({ avg: legend.mean })"
/> />
<span class="title">{{ t("total") }}</span> <span class="title ml-20 mr-5">{{ t("total") }}</span>
<el-switch <el-switch
v-model="legend.total" v-model="legend.total"
active-text="Yes" active-text="Yes"
@ -162,9 +164,17 @@ function updateLegendConfig(param: { [key: string]: unknown }) {
.title { .title {
font-size: 12px; font-size: 12px;
display: inline-flex;
height: 32px;
line-height: 34px;
vertical-align: middle;
} }
.legend { .legend {
margin-bottom: 10px; margin-bottom: 10px;
} }
.inputs {
width: 120px;
}
</style> </style>