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

CN-65 fix: statistics-legend首列增加标题

Browse Source
This commit is contained in:
chenjinsong
2021-07-22 18:43:12 +08:00
parent 25959b060a
commit fd1bee2ad9
1 changed files with 41 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,10 @@
<template> <template>
<div class="chart__legend"> <div class="chart__legend">
<div class="chart__table-top"> <div class="chart__table-top table-below-box">
<div>Avg</div> <div class="table__below-color"></div>
<div>Max</div> <div class="table__below-title">Name</div>
<div class="table__below-statistics">Avg</div>
<div class="table__below-statistics">Max</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">
@@ -47,10 +49,8 @@ export default {
height: 30px; height: 30px;
border-bottom: #E7EAED 1px solid; border-bottom: #E7EAED 1px solid;
display: flex; display: flex;
justify-content: flex-end;
div { div {
width: 80px;
font-size: 13px; font-size: 13px;
line-height: 28px; line-height: 28px;
color: $--color-primary; color: $--color-primary;
@@ -59,19 +59,19 @@ export default {
.chart__table-below { .chart__table-below {
width: 100%; width: 100%;
font-size: 13px; font-size: 13px;
}
.table-below-box { .table-below-box {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 24px; line-height: 24px;
} }
.table-below-box:hover { .table-below-box:hover {
background-color: #f9f9f9; background-color: #f9f9f9;
border: 0; border: 0;
color: #383838; color: #383838;
} }
.table__below-color { .table__below-color {
width: 27px; width: 27px;
height: 7px; height: 7px;
flex-shrink: 0; flex-shrink: 0;
@@ -82,8 +82,8 @@ export default {
width: 100%; width: 100%;
border-radius: 24%; border-radius: 24%;
} }
} }
.table__below-title { .table__below-title {
padding: 0 6px; padding: 0 6px;
flex-shrink: 1; flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
@@ -91,13 +91,12 @@ export default {
min-width: 200px; min-width: 200px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.table__below-statistics { .table__below-statistics {
width: 80px; width: 80px;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
</style> </style>