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 14:20:48 +08:00
parent 6c65730848
commit 591e80c9f3
2 changed files with 15 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -355,14 +355,13 @@
width: 100%;
.single-value__content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
flex-direction: column;
.single-value__data {
display: flex;
flex-direction: column;
padding: 10px 20px 10px 18px;
.content__title {
font-size: 16px;
color: #333333;
@@ -372,7 +371,6 @@
width: 100%;
height: 100%;
display: flex;
margin: auto;
flex-direction: column;
justify-content: center;
}
@@ -394,60 +392,42 @@
.content__data-protocol {
display: flex;
height: 68px;
width: 100%;
text-align: left;
justify-content: space-evenly;
.content__data-protocol-all {
display: flex;
width: 180px;
justify-content: space-between;
flex: 1.5;
}
.content__data-protocol-icon {
flex-shrink: 0;
display: flex;
justify-content: center;
width: 68px;
height: 100%;
margin: auto;
line-height: 68px;
border-radius: 100%;
justify-content: center;
i {
font-size: 26px;
}
}
.content__data-protocol-value {
display: flex;
flex-direction: column;
width: 110px;
flex: 2;
justify-content: space-around;
.content__data-protocol-value-title {
flex-shrink: 0;
display: flex;
margin-bottom: 7px;
font-size: 14px;
color: #666666;
font-weight: 400;
}
.content__data-protocol-values {
display: flex;
flex-direction: column;
justify-content: center;
}
.content__data-protocol-value-num {
flex-shrink: 0;
display: flex;
font-size: 26px;
color: #333333;
font-weight: 500;
}
}
.content__data-protocol-percent {
flex-shrink: 0;
display: flex;
flex: 2;
height: 68px;
width: 130px;
justify-content: center;
text-align: left;
font-size: 14px;
font-size: 12px;
color: #666666;
font-weight: 400;
line-height: 95px;

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

@@ -200,10 +200,10 @@
<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"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent'), unitTypes.percent).join('')}}</span></div>
</div>
@@ -212,10 +212,10 @@
<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"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'countPercent'), unitTypes.percent).join('')}}</span></div>
</div>