gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: statisticslegend样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-07-10 11:07:54 +08:00
parent ac7f3b6280
commit 37c29e02cb
2 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/charts/StatisticsLegend.vue
View File

@@ -1,17 +1,15 @@
<template> <template>
<div class="chart__legend"> <div class="chart__legend">
<div class="chart__table-top"> <div class="chart__table-top">
<div class="chart__table-box"> <div>Average</div>
<div>Average</div> <div>Maximum</div>
<div>Maximum</div>
</div>
</div> </div>
<div class="chart__table-below"> <div class="chart__table-below">
<div v-for="(item,index) in data" :key="index" class="table-below-box"> <div v-for="(item,index) in data" :key="index" class="table-below-box">
<div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div> <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
<div class="table__below-title" :title="item.legend">{{item.legend}}</div> <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
<div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div> <div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div>
<div class="table__below-statistics table__below-statistics-2" :title="item.aggregation.avg">{{item.aggregation.avg}}</div> <div class="table__below-statistics" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -45,31 +43,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chart__legend { .chart__legend {
width: 455px; width: calc(100% - 60px);
height: 95px; height: 105px;
border: 1px solid #E7EAED; border: 1px solid #E7EAED;
color:#5f6368; color: #5f6368;
margin: auto; margin: auto;
} }
.chart__table-top { .chart__table-top {
width: 455px; width: 100%;
height: 30px; height: 30px;
border-bottom: #E7EAED 0.96px solid; border-bottom: #E7EAED 1px solid;
display: flex; display: flex;
flex-direction:row-reverse; justify-content: flex-end;
.chart__table-box { padding-right: 15px;
width: 185px;
height: 30px; div {
display: flex; width: 80px;
align-items: center; font-size: 13px;
font-size: 14px; line-height: 28px;
color: #0091FF; color: $--color-primary;
font-weight: 400;
justify-content: space-around;
} }
} }
.chart__table-below { .chart__table-below {
width: 455px; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
font-size: 13px; font-size: 13px;
@@ -106,14 +102,11 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.table__below-statistics { .table__below-statistics {
width: 86px; width: 80px;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.table__below-statistics-2 {
width: 70px;
}
} }
</style> </style>

1
src/components/charts/panel.scss
View File

@@ -168,7 +168,6 @@
} }
&>.cn-chart__tabs { &>.cn-chart__tabs {
padding: 10px 25px 10px 15px; padding: 10px 25px 10px 15px;
overflow: auto;
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
height: 1px; height: 1px;