fix: dns加密协议样式调整

This commit is contained in:
@changcode
2022-03-31 15:27:00 +08:00
parent ce133cf0aa
commit d4cece5c9e
2 changed files with 13 additions and 11 deletions

View File

@@ -347,17 +347,19 @@
}
&.cn-chart__single-value--protocol {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
flex-direction: column;
.single-value__content {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
.content__data {
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.content__data-protocol:nth-of-type(1) {
margin-bottom: 50px;
@@ -378,7 +380,8 @@
display: flex;
height: 68px;
width: 100%;
text-align: center;
text-align: left;
justify-content: center;
.content__data-protocol-icon {
flex-shrink: 0;
display: flex;
@@ -387,15 +390,13 @@
height: 100%;
line-height: 68px;
border-radius: 100%;
margin-right: 8px;
}
.content__data-protocol-value {
flex-shrink: 0;
display: flex;
flex: 1;
justify-content: center;
flex-direction: column;
text-align: left;
margin-right: 20px;
padding-left: 5%;
.content__data-protocol-value-title {
flex-shrink: 0;
display: flex;
@@ -407,7 +408,7 @@
.content__data-protocol-value-num {
flex-shrink: 0;
display: flex;
font-size: 28px;
font-size: 26px;
color: #333333;
font-weight: 500;
}
@@ -415,6 +416,7 @@
.content__data-protocol-percent {
flex-shrink: 0;
display: flex;
height: 68px;
font-size: 14px;
color: #666666;
font-weight: 400;

View File

@@ -132,7 +132,7 @@
<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">占比&nbsp;&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ')+'%' }}</span></div>
<div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
</div>
<div class="content__data-protocol">
<div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
@@ -142,7 +142,7 @@
<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">占比&nbsp;&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ')+'%' }}</span></div>
<div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
</div>
</div>
</div>