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

style修改样式：折线图下面的table

Browse Source
This commit is contained in:
晶晶 张
2021-07-09 18:15:15 +08:00
parent abf887b7fa
commit cca3cb3534
1 changed files with 74 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,22 @@
<template> <template>
<div class="chart__legend"> <div class="chart__legend">
<div class="charts__table-top"> <div class="chart__table-top">
<p class="location">Average</p> <div class="chart__table-box">
<p class="locations">Maximum</p> <div>Average</div>
<div>Maximum</div>
</div> </div>
<div class="legend__table"> </div>
<table> <div class="chart__table-below">
<tr v-for="(d, i) in data" :key="i" class="legend__row"> <div v-for="(item,index) in data" :key="index" class="table-below-box">
<td style="width: 40px;"><div :style="{backgroundColor: getChartColor(i)}" class="legend__row-top" :title="getChartColor(i)"></div></td> <div class="table-below-account">
<td><div class="text__show" :title="d.legend">{{d.legend}}</div></td> <div :style="{backgroundColor: getChartColor(index)}" class="table__below-color"></div>
<td style="width: 70px;"><div :title="d.aggregation.avg">{{d.aggregation.avg}}</div></td> <div class="table__below-title">{{item.legend}}</div>
<td style="width: 70px;"><div :title="d.aggregation.max">{{d.aggregation.max}}</div></td> </div>
</tr> <div class="table__below-flashback">
</table> <div class="table__below-max">{{item.aggregation.max}}</div>
<div class="table__below-avg">{{item.aggregation.avg}}</div>
</div>
</div>
</div> </div>
</div> </div>
@@ -53,53 +57,68 @@ export default {
color:#5f6368; color:#5f6368;
margin: auto; margin: auto;
} }
.text__show { .chart__table-top{
max-width: 240px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.charts__table-top{
position: relative;
width: 455px; width: 455px;
height: 30px; height: 30px;
border-bottom: #E7EAED 0.96px solid; border-bottom: #E7EAED 0.96px solid;
} display: flex;
.location{ flex-direction:row-reverse;
position: absolute; .chart__table-box{
right: 110px; width: 185px;
top: -9px; height: 30px;
font-size: 13px; display: flex;
color: #0091FF; align-items: center;
} font-family: Roboto-Regular;
.locations{ font-size: 14px;
position: absolute; color: #0091FF;
right: 25px; font-weight: 400;
top: -8px; justify-content: space-around;
font-size: 13px;
color: #0091FF;
}
.legend__row-top{
width: 17px;
height: 7px;
border-radius: 24%;
margin-left: 15px;
}
.legend__table {
overflow: auto;
height: calc(100% - 30px);
table {
width: 100%;
} }
} }
.legend__row{ .chart__table-below{
font-size: 12px; width: 455px;
box-sizing: border-box; overflow: auto;
} height: calc(100% - 30px);
.legend__row:hover { .table-below-box{
background-color: #f9f9f9; width: 100%;
border: 0; display: flex;
color: #383838; font-size: 15px;
align-items: center;
.table-below-account{
width: 310px;
height: calc(100% - 30px);
display: flex;
align-items: center;
padding-left: 16px;
}
.table__below-flashback{
width: 211px;
height: calc(100% - 30px);
display: flex;
flex-direction:row-reverse;
align-items: center;
justify-content: space-around;
}
}
.table-below-box:hover{
background-color: #f9f9f9;
border: 0;
color: #383838;
}
.table__below-color{
width: 17px;
height: 7px;
border-radius: 24%;
}
.table__below-title{
max-width: 141px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.table__below-avg{
}
} }
.table__below-max{
}
</style> </style>