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

style: dns加密样式调整

Browse Source
This commit is contained in:
@changcode
2022-04-07 13:47:12 +08:00
parent e2a8ad9678
commit 6c65730848
2 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -369,7 +369,7 @@
}
}
.content__data {
width: 90%;
width: 100%;
height: 100%;
display: flex;
margin: auto;
@@ -378,15 +378,15 @@
}
.content__data-protocol:nth-of-type(1) {
margin-bottom: 50px;
span {
font-size: 14px;
span:nth-of-type(2) {
font-size: 12px;
color: #FC8157;
font-weight: 500;
}
}
.content__data-protocol:nth-of-type(2) {
span {
font-size: 14px;
span:nth-of-type(2) {
font-size: 12px;
color: #FBA342;
font-weight: 500;
}
@@ -396,7 +396,12 @@
height: 68px;
width: 100%;
text-align: left;
justify-content: center;
justify-content: space-evenly;
.content__data-protocol-all {
display: flex;
width: 180px;
justify-content: space-between;
}
.content__data-protocol-icon {
flex-shrink: 0;
display: flex;
@@ -411,14 +416,12 @@
}
.content__data-protocol-value {
display: flex;
flex: 1;
flex-direction: column;
width: 110px;
justify-content: space-around;
.content__data-protocol-value-title {
flex-shrink: 0;
display: flex;
width: 125px;
padding-left: 10%;
margin-bottom: 7px;
font-size: 14px;
color: #666666;
@@ -432,7 +435,6 @@
.content__data-protocol-value-num {
flex-shrink: 0;
display: flex;
padding-left: 10%;
font-size: 26px;
color: #333333;
font-weight: 500;
@@ -442,6 +444,9 @@
flex-shrink: 0;
display: flex;
height: 68px;
width: 130px;
justify-content: center;
text-align: left;
font-size: 14px;
color: #666666;
font-weight: 400;

32
src/views/charts/charts/ChartSingleValue.vue
View File

@@ -196,24 +196,28 @@
</div>
<div class="content__data">
<div class="content__data-protocol">
<div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
<i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
<div class="content__data-protocol-all">
<div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
<i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
</div>
<div class="content__data-protocol-value">
<div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
<div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join('')}}</div>
</div>
</div>
<div class="content__data-protocol-value">
<div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
<div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
</div>
<div class="content__data-protocol-percent">{{$t('protocol.proportion')}}&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join('')}}</span></div>
<div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent'), unitTypes.percent).join('')}}</span></div>
</div>
<div class="content__data-protocol">
<div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
<i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
<div class="content__data-protocol-all">
<div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
<i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
</div>
<div class="content__data-protocol-value">
<div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
<div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join('')}}</div>
</div>
</div>
<div class="content__data-protocol-value">
<div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
<div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
</div>
<div class="content__data-protocol-percent">{{$t('protocol.proportion')}}&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join('')}}</span></div>
<div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'countPercent'), unitTypes.percent).join('')}}</span></div>
</div>
</div>
</div>