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

perf: 细节调整

Browse Source
This commit is contained in:
chenjinsong
2021-07-09 21:58:49 +08:00
parent 23e78b0a84
commit ac7f3b6280
8 changed files with 325 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,17 @@
<template>
<div class="chart__legend">
<div class="chart__table-top">
<div class="chart__table-box">
<div>Average</div>
<div>Maximum</div>
</div>
<div class="chart__table-box">
<div>Average</div>
<div>Maximum</div>
</div>
</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" :title="getChartColor(index)"></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>
<div class="table__below-flashback">
<div class="table__below-max qq" :title="item.aggregation.max">{{item.aggregation.max}}</div>
<div class="table__below-avg qq" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
</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>
</div>
</div>
@@ -48,73 +44,76 @@ export default {
</script>
<style lang="scss" scoped>
.chart__legend{
.chart__legend {
width: 455px;
height: 111px;
height: 95px;
border: 1px solid #E7EAED;
font-size: 10px;
color:#5f6368;
margin: auto;
}
.chart__table-top{
.chart__table-top {
width: 455px;
height: 30px;
border-bottom: #E7EAED 0.96px solid;
display: flex;
flex-direction:row-reverse;
.chart__table-box{
.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;
}
}
.chart__table-below{
.chart__table-below {
width: 455px;
height: calc(100% - 30px);
overflow: auto;
.table-below-box{
font-size: 13px;
.table-below-box {
width: 100%;
display: flex;
font-size: 15px;
align-items: center;
.table-below-account{
width: 310px;
display: flex;
align-items: center;
padding-left: 16px;
}
.table__below-flashback{
width: 211px;
display: flex;
flex-direction:row-reverse;
align-items: center;
justify-content: space-around;
}
line-height: 24px;
}
.table-below-box:hover{
.table-below-box:hover {
background-color: #f9f9f9;
border: 0;
color: #383838;
}
.table__below-color{
width: 17px;
.table__below-color {
width: 27px;
height: 7px;
border-radius: 24%;
flex-shrink: 0;
padding-left: 10px;
div {
height: 100%;
width: 100%;
border-radius: 24%;
}
}
.table__below-title{
max-width: 226px;
.table__below-title {
padding: 0 6px;
flex-shrink: 1;
flex-grow: 1;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.qq{
width: 39px;
.table__below-statistics {
width: 86px;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table__below-statistics-2 {
width: 70px;
}
}
</style>