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

修改样式

Browse Source
This commit is contained in:
晶晶 张
2021-07-08 16:23:11 +08:00
parent 0be4c5f05a
commit 1fede2e0c8
1 changed files with 58 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,79 +6,17 @@
<div class="char-table-max blue-button">Maximum</div> <div class="char-table-max blue-button">Maximum</div>
</div> </div>
<div class="char__table-bottom"> <div class="char__table-bottom">
<div class="char__table-bottom-box">
<div class="box__color" > <div class="box__color" >
<p v-for="i in chartColor" :style="{'background':i}" :key="i" title="5370C6 <p v-for="i in chartColor" :style="{'background':i}" :key="i" :title="i"></p>
#90CC74
#FAC858
#EE6666
#73BFDE
#3BA172
#FC8452
#9960B4
#E97CCC
#FEA69E
#0F8AB2
#57CBAC
#5888BC
#63B6AC
#EDC6B2
">{{i}}</p>
</div> </div>
<div class="box__text"> <div class="box__text">
<p title="yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001 <p v-for="s in data" :key="s" :title="s.legend">{{s.legend}}</p>
yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.lyf-ssl.handshake.extensions_server_name-baidu
yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.fwh-app-test.yyq-正则-yandex.ru
yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.yyq-twitter-002.yyq-twitter-003
yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.yyq-twitter-003
yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.yyq-youtube-c2s-首包.yyq-skype-001.zw_test.app.abc.
yyq-源or目的IP.yyq-ios-yandex-2.yyq-tcp_dstport.yyq-instagram-001.lyf-s" v-for="s in data" :key="s">{{s.legend}}</p>
</div>
</div> </div>
<div class="char__table-bottom-min"> <div class="char__table-bottom-min">
<p v-for="item in data" :key="item">{{item.aggregation.avg}}</p> <p v-for="item in data" :key="item" :title="item.aggregation.avg">{{item.aggregation.avg}}</p>
</div> </div>
<div class="char__table-bottom-max"> <div class="char__table-bottom-max">
<p v-for="items in data" :key="items" title="16764 <p v-for="items in data" :key="items" :title="items.aggregation.max">{{items.aggregation.max}}</p>
16610
22181
12036
15723
45856
13721
23309
26498
17562">{{items.aggregation.max}}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -97,6 +35,7 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
console.log(n)
} }
} }
}, },
@@ -111,39 +50,45 @@ export default {
<style scoped> <style scoped>
.char__table{ .char__table{
width: 513px; width: 455px;
height: 127px; height: 111px;
border:#cccccc 1px solid; border: 1px solid #E7EAED;
font-size: 10px; font-size: 10px;
color:#5f6368; color:#5f6368;
margin: auto; margin: auto;
} }
.char__table-top{ .char__table-top{
position: relative; position: relative;
width: 513px; width: 455px;
height: 35px; height: 30px;
line-height: 35px; line-height: 35px;
display: flex; display: flex;
border-bottom: #cccccc 1px solid; border-bottom: #E7EAED 1px solid;
} }
.blue-button{ .blue-button{
color: deepskyblue;
position:absolute; position:absolute;
right: 44px; right: 20px;
top: 2px; top: -3px;
font-family: Roboto-Regular;
font-size: 14px;
color: #0091FF;
font-weight: 400;
} }
.blue-top{ .blue-top{
color: deepskyblue;
position:absolute; position:absolute;
right: 143px; right: 125px;
top: 2px; top: -3px;
font-family: Roboto-Regular;
font-size: 14px;
color: #0091FF;
font-weight: 400;
} }
.char__table-bottom{ .char__table-bottom{
position: relative; position: relative;
color: #5f6368; color: #5f6368;
width: 390px; width: 455px;
height: 80px; height: 75px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -151,29 +96,25 @@ color: deepskyblue;
} }
.char__table-bottom-max{ .char__table-bottom-max{
position:absolute; position:absolute;
width: 170px; width: 46px;
height: 100%; height: 100%;
overflow: hidden; right: 122px;
white-space: nowrap; top: -4px;
text-overflow: ellipsis; overflow: scroll;
right: -44px; }
top: 2px; .char__table-bottom-max::-webkit-scrollbar{
display: none;
} }
.char__table-bottom-min{ .char__table-bottom-min{
position:absolute; position:absolute;
width: 170px; width: 66px;
height: 100%; height: 100%;
right: -140px; right: 16px;
top: 2px; top: -4px;
overflow: hidden; overflow: scroll;
white-space: nowrap;
text-overflow: ellipsis;
} }
.char__table-bottom-box{ .char__table-bottom-min::-webkit-scrollbar{
width: 97px; display: none;
height: 100%;
display: flex;
justify-content: space-around;
} }
.box__color{ .box__color{
width: 30px; width: 30px;
@@ -182,19 +123,31 @@ color: deepskyblue;
left: 22px; left: 22px;
top: 2px; top: 2px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 2px; margin-top: -4px;
overflow: hidden; overflow: scroll;
white-space: nowrap; }
text-overflow: ellipsis; .box__color::-webkit-scrollbar{
display: none;
}
.box__color>p{
width: 17px;
height: 7px;
border-radius: 24%;
margin-top: 17px;
} }
.box__text{ .box__text{
position:absolute; position:absolute;
left: 58px; left: 58px;
top: 2px; top: 2px;
width: 47px; width: 106px;
height: 100%; height: 100%;
overflow: hidden; overflow: scroll;
white-space: nowrap; }
text-overflow: ellipsis; .box__text>p{
margin-top: 5px;
width: 115px;
}
.box__text::-webkit-scrollbar{
display: none;
} }
</style> </style>