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