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

style : 根据BEM命名规范修改不符合规范的命名

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-16 14:18:03 +08:00
parent a855a90643
commit aff7a54351
7 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
View File

@@ -1,11 +1,11 @@
.chart-one-situation-statistics{
.cn-chart__one-situation-statistics{
height: 100%;
.situation-statistics-main {
.one-situation-statistics__box {
display: flex;
align-items: center;
margin-left: 33px;
height: 100%;
.situation-statistics-main-left{
.box__progress{
display: block;
width: 76px;
height: 76px;
@@ -13,7 +13,7 @@
font-size: 16px;
}
}
.situation-statistics-main-right{
.box__count{
margin-left: 22px;
:first-child{
font-size: 18px;

8
src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
View File

@@ -1,18 +1,18 @@
.chart-two-situation-statistics{
.cn-chart__two-situation-statistics{
padding-top: 22px;
.chart-two-situation-statistics-top {
.box__body {
display: flex;
align-items: center;
margin-left: 33px;
padding-top: 22px;
.chart-two-situation-statistics-main-left{
.body__progress{
display: block;
.el-progress__text span{
font-size: 16px;
}
}
.chart-two-situation-statistics-main-right{
.body__count{
margin-left: 22px;
:first-child{
font-size: 18px;

32
src/assets/css/components/views/charts/chartAlarmInfo.scss
View File

@@ -1,13 +1,13 @@
.cn-chart-alarm-info {
.cn-chart__alarm-info {
width: 100%;
height: 100%;
position: relative;
.cn-chart-alarm-info-mainContent {
.alarm-info__box {
height: calc(100% - 40px);
width: 100%;
.cn-chart-alarm-content {
.box__body {
display: flex;
margin-left: 30px;
margin-right: 30px;
@@ -16,16 +16,16 @@
height: calc(100% / 9);
border-bottom: 1px solid #E7EAED;
.cn-alarm-info-main {
.body__content {
display: flex;
.cn-alarm-info-main-left {
.content__icon-box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.cn-chart-alarm-info-icon {
.icon-box__icon {
width: 30px;
height: 30px;
border-radius: 50%;
@@ -42,10 +42,10 @@
}
}
.cn-alarm-info-textContent {
.content__text-box {
margin-left: 17px;
.cn-alarm-info-main-title {
.text-box__title {
font-size: 16px;
line-height: 19px;
font-family: Roboto-Regular;
@@ -57,7 +57,7 @@
overflow: hidden;
}
.cn-alarm-info-bottom {
.text-box__text {
font-size: 12px;
line-height: 14px;
text-align: center;
@@ -70,7 +70,7 @@
margin-bottom: 4px;
}
.cn-alarm-info-bottom-middle {
.text__time-box {
display: flex;
margin-left: 20px;
height: 14px;
@@ -82,7 +82,7 @@
font-size: 12px;
}
.cn-alarm-info-bottom-time {
.time-box__start-time {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
@@ -91,7 +91,7 @@
}
}
.cn-alarm-info-bottom-right {
.text__duration-box {
height: 14px;
display: flex;
justify-content: center;
@@ -104,7 +104,7 @@
font-size: 12px;
}
.cn-alarm-info-bottom-time {
.time-box__start-time {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
@@ -113,7 +113,7 @@
}
}
.cn-alarm-info-bottom-type {
.text__type {
width: auto;
font-family: Roboto-Regular;
line-height: 16px;
@@ -129,7 +129,7 @@
word-break: break-all;
}
.cn-alarm-info-bottom-circle {
.duration-box__circle {
display: inline-block;
width: 5px;
height: 5px;
@@ -148,7 +148,7 @@
}
}
.cn-chart-alarm-info-pagination {
.alarm-info__pagination {
height: 40px !important;
width: 100%;
}

8
src/views/charts/Chart.vue
View File

@@ -208,7 +208,7 @@
:query-params="queryParams"
></chart-echart-app-relate-domain>
<chart-one-Situation-Statistics
<chart-one-situation-statistics
v-else-if="isSingleSupportStatistics"
:chart-info="chartInfo"
:chart-data="chartData"
@@ -216,9 +216,9 @@
:time-filter="timeFilter"
:entity="entity"
@showLoading="showLoading"
></chart-one-Situation-Statistics>
></chart-one-situation-statistics>
<chart-two-Situation-Statistics
<chart-two-situation-statistics
v-else-if="isTwoSupportStatistics"
:chart-info="chartInfo"
:chart-data="chartData"
@@ -226,7 +226,7 @@
:query-params="queryParams"
@showLoading="showLoading"
:entity="entity"
></chart-two-Situation-Statistics>
></chart-two-situation-statistics>
<chart-alarm-info
v-else-if="isAlarmInfo"

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

@@ -1,17 +1,17 @@
<template>
<div class="cn-chart-alarm-info">
<div class="cn-chart__alarm-info">
<div class="no-data" v-if="isNoData">No data</div>
<template v-else>
<div class="cn-chart-alarm-info-mainContent">
<div class="alarm-info__box">
<div
class="cn-chart-alarm-content"
class="box__body"
v-for="(value, index) in chartData ? chartData : []"
:key="index"
>
<div class="cn-alarm-info-main">
<div class="cn-alarm-info-main-left">
<div class="body__content">
<div class="content__icon-box">
<div
class="cn-chart-alarm-info-icon"
class="icon-box__icon"
:style="{
background: eventSeverityColor[value.eventSeverity],
opacity: 0.1,
@@ -25,8 +25,8 @@
}"
></i>
</div>
<div class="cn-alarm-info-textContent">
<div class="cn-alarm-info-main-title">
<div class="content__text-box">
<div class="text-box__title">
<div v-if="value.entityType === 'domain'" :title="value.domain">
<span>{{ value.domain }}</span>
</div>
@@ -38,9 +38,9 @@
</div>
</div>
<div class="cn-alarm-info-bottom">
<div class="text-box__text">
<div
class="cn-alarm-info-bottom-type"
class="text__type"
:style="{
color: eventSeverityColor[value.eventSeverity],
'border-color': eventSeverityColor[value.eventSeverity],
@@ -49,10 +49,10 @@
>
{{ value.eventType }}
</div>
<div class="cn-alarm-info-bottom-middle">
<div class="text__time-box">
<i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time">
<div class="time-box__start-time">
&nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
</div>
<div>
@@ -67,14 +67,14 @@
</div>
&nbsp;&nbsp;&nbsp;
<div class="cn-alarm-info-bottom-right">
<div class="text__duration-box">
<i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time">
<div class="time-box__start-time">
&nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
</div>
<div
class="cn-alarm-info-bottom-circle"
class="duration-box__circle"
:style="{
background: eventSeverityColor[value.eventSeverity],
}"
@@ -95,7 +95,7 @@
</div>
<chart-table-pagination
ref="tablePagination"
class="cn-chart-alarm-info-pagination"
class="alarm-info__pagination"
:total="alarmInfoCount.result"
:pageSizeForAlarm="pageSizeForAlarm"
v-model:currentPage="pageNo"

10
src/views/charts/charts/ChartOneSituationStatistics.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="chart-one-situation-statistics">
<div class="situation-statistics-main">
<div class="situation-statistics-main-left">
<div class="cn-chart__one-situation-statistics">
<div class="one-situation-statistics__box">
<div class="box__progress">
<el-progress
type="circle"
:color="chartInfo.params.color"
@@ -9,9 +9,9 @@
:percentage="$_.get(chartData, 'percent', '-') "
/>
</div>
<div class="situation-statistics-main-right">
<div class="box__count">
<div> {{ $_.get(chartData, 'count', '-') }} </div>
<div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div>
<div>{{ $t(`dns.numberOfNodes`) }}</div>
</div>
</div>
</div>

10
src/views/charts/charts/ChartTwoSituationStatistics.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="chart-two-situation-statistics">
<div class="cn-chart__two-situation-statistics">
<div
class="chart-two-situation-statistics-main"
class="two-situation-statistics__box"
v-for="(value, key,index) in result ? result : []"
:key="index"
>
<div class="chart-two-situation-statistics-top">
<div class="chart-two-situation-statistics-main-left">
<div class="box__body">
<div class="body__progress">
<el-progress
type="circle"
:color="chartInfo.params.color[index]"
@@ -14,7 +14,7 @@
:percentage="value.percent ? value.percent : 0"
/>
</div>
<div class="chart-two-situation-statistics-main-right">
<div class="body__count">
<div>{{ value.count ? value.count : '-' }}</div>
<div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
</div>