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

CN-1594 feat: 部分css重构内容：npm第一个tab

Browse Source
This commit is contained in:
chenjinsong
2024-03-28 19:35:44 +08:00
parent 80c555940c
commit a0b44806bd
9 changed files with 99 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/common/cover-element-plus.scss
View File

@@ -14,7 +14,7 @@
height: 0 !important; height: 0 !important;
}*/ }*/
.el-select__wrapper { /*.el-select__wrapper {
min-height: 28px !important; min-height: 28px !important;
} }
.el-input__wrapper { .el-input__wrapper {
@@ -26,7 +26,7 @@
} }
.el-table td.el-table__cell div { .el-table td.el-table__cell div {
margin-left: -1px; margin-left: -1px;
} }*/
.el-table .sort-caret.ascending { .el-table .sort-caret.ascending {
border-bottom-color: #c0c4cc !important; border-bottom-color: #c0c4cc !important;
} }

13
src/assets/css/components/components/common/TimeRange/date-time-range.scss
View File

@@ -63,24 +63,22 @@
.date-range-title { .date-range-title {
font-size: 14px; font-size: 14px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
font-weight: 600; font-weight: bold;
padding: 14px 0 7px 8px; padding: 14px 0 7px 8px;
} }
.calendar-popover-text.calendar-popover__small {
i {
font-weight: 300;
color: #575757;
}
}
.calendar-popover-text { .calendar-popover-text {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
.cn-icon-Data { .cn-icon-Data {
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
} }
.cn-icon-dropdown {
color: var(--el-text-color-placeholder);
}
} }
.calendar-popover-text:first-of-type { .calendar-popover-text:first-of-type {
@@ -108,7 +106,6 @@
.content-title { .content-title {
font-size: 14px; font-size: 14px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
font-weight: 400;
margin-bottom: 12px; margin-bottom: 12px;
} }

8
src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
View File

@@ -1,9 +1,9 @@
.el-popper.analysis-popper { .el-popper.analysis-popper {
margin-top: -5px !important; margin-top: -5px !important;
padding: 0; padding: 0;
border: 1px solid var(--el-border-color-light); border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base); // 4px border-radius: var(--el-border-radius-base); // 4px
box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85); box-shadow: var(--el-box-shadow-light);
.el-popper__arrow { .el-popper__arrow {
display: none; display: none;
@@ -79,7 +79,7 @@
width: 100%; width: 100%;
margin-top: 21px; margin-top: 21px;
//background-color: #EFF2F5; //background-color: #EFF2F5;
background-color: var(--el-border-color); background-color: var(--el-bg-color-page);
} }
.entity-type { .entity-type {
@@ -111,7 +111,7 @@
width: 28px; width: 28px;
border-radius: 50%; border-radius: 50%;
//background-color: #EFF1F4; //background-color: #EFF1F4;
background-color: var(--el-color-info-light-9); background-color: var(--el-bg-color-page);
cursor: pointer; cursor: pointer;
i { i {

17
src/assets/css/components/views/charts2/entityDetailTabs.scss
View File

@@ -10,7 +10,7 @@
top: 1px; top: 1px;
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
border-radius: $tab-border-radius $tab-border-radius 0 0; border-radius: $tab-border-radius $tab-border-radius 0 0;
transition: all linear var(--el-transition-duration); transition: all linear var(--el-transition-duration-fast);
z-index: 3; z-index: 3;
} }
@@ -70,7 +70,7 @@
.tab-pane-warn--icon { .tab-pane-warn--icon {
width: 16px; width: 16px;
color: #E48F3E; color: var(--el-color-warning);
margin-left: 10px; margin-left: 10px;
margin-right: 0 !important; margin-right: 0 !important;
} }
@@ -116,7 +116,6 @@
.legend-name { .legend-name {
width: 180px; width: 180px;
font-weight: 400;
} }
.legend-value { .legend-value {
@@ -124,7 +123,6 @@
justify-content: left; justify-content: left;
margin-left: 20px; margin-left: 20px;
width: 90px; width: 90px;
font-weight: 500;
} }
.legend-percent { .legend-percent {
@@ -132,7 +130,6 @@
width: 70px; width: 70px;
justify-content: left; justify-content: left;
display: flex; display: flex;
font-weight: 500;
} }
} }
} }
@@ -147,7 +144,7 @@
position: absolute; position: absolute;
height: 0; height: 0;
width: 195px; width: 195px;
border-bottom: 1px dashed #d3d3d3; border-bottom: 1px dashed var(--el-border-color-light);
top: 319px; top: 319px;
left: 575px; left: 575px;
} }
@@ -156,7 +153,7 @@
position: absolute; position: absolute;
height: 0; height: 0;
width: 195px; width: 195px;
border-bottom: 1px dashed #d3d3d3; border-bottom: 1px dashed var(--el-border-color-light);
top: 319px; top: 319px;
left: 830px; left: 830px;
} }
@@ -169,11 +166,11 @@
} }
.entity-subscriber-detail-error { .entity-subscriber-detail-error {
margin-top: 0px; margin-top: 0;
margin-left: 0px; margin-left: 0;
.error-block { .error-block {
margin: 0px; margin: 0;
} }
} }

10
src/assets/css/components/views/charts2/networkOverviewTabs.scss
View File

@@ -166,7 +166,6 @@
align-items: center; align-items: center;
margin-top: 2px; margin-top: 2px;
border-radius: 10px; border-radius: 10px;
font-weight:500;
padding: 0 9px; padding: 0 9px;
span { span {
@@ -174,8 +173,8 @@
} }
} }
.data-total-trend-black { .data-total-trend-black {
background-color: rgba(113,113,113,0.12); background-color: var(--el-fill-color-dark);
color: #717171; color: var(--el-text-color-regular);
height: 20px; height: 20px;
} }
.data-total-trend-green { .data-total-trend-green {
@@ -220,7 +219,7 @@
.data-score { .data-score {
border-radius: 10px; border-radius: 10px;
font-size: 12px; font-size: 12px;
color: #FFFFFF; color: var(--el-color-white);
height: 20px; height: 20px;
width: 34px; width: 34px;
line-height: 20px; line-height: 20px;
@@ -271,7 +270,8 @@
} }
.el-tabs__content { .el-tabs__content {
height: calc(100% - 40px); height: calc(100% - 40px);
border:none; border: none;
.el-table__body-wrapper { .el-table__body-wrapper {
height: calc(100% - 45px) !important; height: calc(100% - 45px) !important;
} }

71
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
View File

@@ -1,13 +1,14 @@
.npm-app { .npm-app {
$grey:#353636;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
.npm-app-left { .npm-app-left {
position: relative; position: relative;
height: 100%; height: 100%;
display: flex; display: flex;
flex: 1; flex: 1;
.npm-app-letter-no-data.npm-app-letter { .npm-app-letter-no-data.npm-app-letter {
min-width: 500px; min-width: 500px;
} }
@@ -15,6 +16,7 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: space-between; justify-content: space-between;
div { div {
width: 40px; width: 40px;
height: 40px; height: 40px;
@@ -22,8 +24,7 @@
text-align: center; text-align: center;
margin: 0 5px 12.3px 0; margin: 0 5px 12.3px 0;
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 500;
} }
div:nth-of-type(1) { div:nth-of-type(1) {
height: 25px; height: 25px;
@@ -32,24 +33,26 @@
} }
.npm-app-body { .npm-app-body {
display: flex; display: flex;
.npm-app-body-patch { .npm-app-body-patch {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
.npm-app-body-color { .npm-app-body-color {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 0 36px 12.3px 0; margin: 0 36px 12.3px 0;
background: #EFEFEF; background: var(--el-fill-color-dark);
border-radius: 4px;; border-radius: 4px;;
} }
.npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) { .npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
background: #E26154; background: var(--el-color-error);
} }
.npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) { .npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
background: #E5A219; background: var(--el-color-warning);
} }
.npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) { .npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
background: #749F4D; background: var(--el-color-success);
} }
.npm-app-body-icon { .npm-app-body-icon {
width: 40px; width: 40px;
@@ -57,6 +60,7 @@
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
margin-right: 36px; margin-right: 36px;
span { span {
i { i {
font-size: 20px; font-size: 20px;
@@ -67,15 +71,17 @@
} }
} }
.app-table.el-table { .app-table.el-table {
border: 1px solid #E2E5EC; border: 1px solid var(--el-border-color-light);
border-bottom: none; border-bottom: none;
.el-table__header-wrapper { .el-table__header-wrapper {
tr th { tr th {
padding: 5px 0; padding: 5px 0;
.data-column__span { .data-column__span {
font-size: 12px; font-size: 12px;
color: $--text-color-1; color: var(--el-text-color-primary);
font-weight: 600; font-weight: bold;
} }
} }
} }
@@ -89,11 +95,13 @@
} }
.el-table__body-wrapper.is-scrolling-none { .el-table__body-wrapper.is-scrolling-none {
height: 306px !important; height: 306px !important;
tr td { tr td {
padding: 13px 0 !important; padding: 13px 0 !important;
} }
tr td:nth-last-child(-n+3) { tr td:nth-last-child(-n+3) {
text-align: center; text-align: center;
.data-total { .data-total {
justify-content: center; justify-content: center;
} }
@@ -102,25 +110,25 @@
} }
.data-total { .data-total {
display: flex !important; display: flex !important;
.data-total-category-icon { .data-total-category-icon {
margin-left: -2px; margin-left: -2px;
i { i {
font-size: 16px; font-size: 16px;
margin-right: 12px; margin-right: 12px;
color: #717171; color: var(--el-text-color-regular);
} }
} }
.data-total-category-value { .data-total-category-value {
font-size: 12px; font-size: 12px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 400;
cursor: pointer; cursor: pointer;
} }
.data-score { .data-score {
border-radius: 10px; border-radius: 10px;
font-size: 12px; font-size: 12px;
color: #FFFFFF; color: var(--el-color-white);
font-weight: 500;
height: 20px; height: 20px;
width: 34px; width: 34px;
line-height: 20px; line-height: 20px;
@@ -128,13 +136,13 @@
margin-left: -2px; margin-left: -2px;
} }
.data-score.data-score-red { .data-score.data-score-red {
background: #E26154; background: var(--el-color-danger);
} }
.data-score.data-score-yellow { .data-score.data-score-yellow {
background: #E5A219; background: var(--el-color-warning);
} }
.data-score.data-score-green { .data-score.data-score-green {
background: #749F4D; background: var(--el-color-success);
} }
.data-score-no-data { .data-score-no-data {
width: 34px; width: 34px;
@@ -147,8 +155,7 @@
justify-content: right; justify-content: right;
width: 50%; width: 50%;
font-size: 12px; font-size: 12px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 400;
} }
.data-trend{ .data-trend{
display: flex; display: flex;
@@ -156,40 +163,38 @@
} }
.data-total-trend { .data-total-trend {
display: flex; display: flex;
justify-content: left;
margin-left: 6px; margin-left: 6px;
font-size: 12px;
justify-content: center; justify-content: center;
margin-top: 2px; margin-top: 2px;
border-radius: 10px; border-radius: 10px;
font-weight: 500;
font-size: 12px; font-size: 12px;
height: 20px; height: 20px;
padding: 0 5px; padding: 0 5px;
} }
.data-total-trend-black { .data-total-trend-black {
background-color: rgba(113,113,113,0.12); background-color: var(--el-fill-color-dark);
color: #717171; color: var(--el-text-color-regular);
width: 36px; width: 36px;
} }
.data-total-trend-green { .data-total-trend-green {
background-color: rgba(126,159,84,0.12); background-color: rgba(var(--el-color-success-rgb),0.12);
color: #7E9F54; color: var(--el-color-success);
} }
.data-total-trend-red { .data-total-trend-red {
background-color: rgba(226,97,84,0.12); background-color: rgba(var(--el-color-error-rgb),0.12);
color: #E26154; color: var(--el-color-error);
.cn-icon-rise1{ .cn-icon-rise1{
color: #E44D3E; color: var(--el-color-error);
} }
} }
.el-table--group::after,.el-table--border::after, .el-table::before { .el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px; height: 0;
} }
.el-table thead { .el-table thead {
color: $grey; color: var(--el-text-color-primary);
} }
} }
.npm-app-border { .npm-app-border {
border: 1px solid #E2E5EC; border: 1px solid var(--el-border-color-light);
} }

34
src/assets/css/components/views/charts2/npmNetworkQuantity.scss
View File

@@ -1,9 +1,10 @@
.npm-network-quantity { .npm-network-quantity {
display: flex; display: flex;
border: 1px solid #E2E5EC; border: 1px solid var(--el-border-color-light);
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
.single-value:nth-of-type(1) { .single-value:nth-of-type(1) {
border-left: none; border-left: none;
} }
@@ -12,24 +13,25 @@
padding-left: 20px; padding-left: 20px;
height: calc(100% - 48px); height: calc(100% - 48px);
margin: auto; margin: auto;
border-left: 1px solid #E2E5EC; border-left: 1px solid var(--el-border-color-light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.single-value__title { .single-value__title {
font-size: 14px; font-size: 14px;
color: #575757; color: var(--el-text-color-regular);
font-weight: 400;
} }
.single-value__content { .single-value__content {
margin: 10px 0 12px 0; margin: 10px 0 12px 0;
display: flex; display: flex;
align-items: center; align-items: center;
.single-value__content-number { .single-value__content-number {
font-family: Helvetica-Bold; font-family: Helvetica-Bold;
font-size: 24px; font-size: 24px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 700; font-weight: bold;
margin-right: 12px; margin-right: 12px;
} }
.single-value__content-trend { .single-value__content-trend {
@@ -39,33 +41,33 @@
justify-content: center; justify-content: center;
margin-top: 2px; margin-top: 2px;
border-radius: 10px; border-radius: 10px;
font-weight:500;
font-size: 12px; font-size: 12px;
height: 20px; height: 20px;
padding: 0 5px; padding: 0 5px;
} }
.single-value__content-trend-black { .single-value__content-trend-black {
background-color: rgba(113,113,113,0.12); background-color: var(--el-fill-color-dark);
color: #717171; color: var(--el-text-color-regular);
width: 36px; width: 36px;
} }
.single-value__content-trend-green { .single-value__content-trend-green {
background-color: rgba(126,159,84,0.12); background-color: rgba(var(--el-color-success-rgb),0.12);
color:#7E9F54; color: var(--el-color-success);
} }
.single-value__content-trend-red { .single-value__content-trend-red {
background-color: rgba(226,97,84,0.12); background-color: rgba(var(--el-color-error-rgb),0.12);
color:#E26154; color: var(--el-color-error);
.cn-icon-rise1 { .cn-icon-rise1 {
color: #E44D3E; color: var(--el-color-error);
} }
} }
} }
.single-value__circle { .single-value__circle {
display: flex; display: flex;
font-size: 12px; font-size: 12px;
color: #717171; color: var(--el-text-color-regular);
font-weight: 400;
.single-value__circle-p95 { .single-value__circle-p95 {
margin-right: 10px; margin-right: 10px;
} }

31
src/assets/css/components/views/charts2/npmTrafficLine.scss
View File

@@ -1,13 +1,15 @@
.npm-traffic-line { .npm-traffic-line {
height: 100%; height: 100%;
width: 100%; width: 100%;
.npm-traffic-line-header { .npm-traffic-line-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.npm-traffic-line-title { .npm-traffic-line-title {
font-size: 14px; font-size: 14px;
color: #353636; color: var(--el-text-color-primary);
font-weight: 600; font-weight: bold;
height: 32px; height: 32px;
} }
.line-select-metric { .line-select-metric {
@@ -16,8 +18,7 @@
&>span { &>span {
font-size: 12px; font-size: 12px;
color: #575757; color: var(--el-text-color-regular);
font-weight: 400;
margin-right: 3px; margin-right: 3px;
} }
.line-select__operation { .line-select__operation {
@@ -26,6 +27,7 @@
margin-left: 3px; margin-left: 3px;
box-shadow: none; box-shadow: none;
border-radius: 2px; border-radius: 2px;
.el-select__wrapper { .el-select__wrapper {
width: 225px; width: 225px;
height: 24px !important; height: 24px !important;
@@ -33,9 +35,9 @@
padding-left: 4px; padding-left: 4px;
line-height: 24px; line-height: 24px;
font-size: 12px; font-size: 12px;
font-weight: 400;
.el-select__placeholder { .el-select__placeholder {
color: #2C72C6; color: var(--el-color-primary);
margin-left: 1px; margin-left: 1px;
} }
.el-input__inner { .el-input__inner {
@@ -44,23 +46,24 @@
padding-left: 4px; padding-left: 4px;
line-height: 24px; line-height: 24px;
font-size: 12px; font-size: 12px;
color: #2C72C6; color: var(--el-color-primary);
font-weight: 400;
} }
.el-select__suffix { .el-select__suffix {
i { i {
color: #575757 !important; color: var(--el-color-primary) !important;
} }
} }
} }
.el-input__suffix { .el-input__suffix {
display: flex; display: flex;
.el-input__suffix-inner { .el-input__suffix-inner {
line-height: 24px; line-height: 24px;
.el-select__caret { .el-select__caret {
line-height: 24px; line-height: 24px;
width: 16px; width: 16px;
color: #575757; color: var(--el-color-primary);
} }
} }
} }
@@ -68,23 +71,27 @@
} }
} }
.npm-traffic-line-body { .npm-traffic-line-body {
border: 1px solid #E2E5EC; border: 1px solid var(--el-border-color-light);
border-radius: 4px; border-radius: 4px;
height: calc(100% - 32px); height: calc(100% - 32px);
width: 100%; width: 100%;
.panel-chart__no-data { .panel-chart__no-data {
height: calc(100% - 32px); height: calc(100% - 32px);
} }
.chart-drawing { .chart-drawing {
height: 100%; height: 100%;
width: 100%; width: 100%;
.echarts-tooltip.echarts-tooltip-dark { .echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body { .cn-chart-body {
display: flex; display: flex;
.cn-chart-tooltip { .cn-chart-tooltip {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
.cn-chart-tooltip-box { .cn-chart-tooltip-box {
margin-right: 10px; margin-right: 10px;
} }
@@ -92,7 +99,7 @@
font-size: 12px; font-size: 12px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
line-height: 21px; line-height: 21px;
font-weight: 600; font-weight: bold;
} }
} }
} }

4
src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
View File

@@ -10,9 +10,7 @@
<template #label> <template #label>
<!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>--> <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
<i :class="tab.icon"></i>{{$t(tab.label)}} <i :class="tab.icon"></i>{{$t(tab.label)}}
<el-tag size="small" class="margin-l-6" :color="tab.name === activeTab ? 'var(--el-color-primary-light-9)' : 'var(--el-fill-color-dark)'" round> <el-tag :type="tab.name === activeTab ? 'primary' : 'info'" size="small" class="margin-l-6" round>{{ tab.tag }}</el-tag>
<span :style="{color: tab.name === activeTab ? 'var(--el-color-primary)' : 'var(--el-text-color-regular)'}">{{ tab.tag }}</span>
</el-tag>
</template> </template>
<information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></information-aggregation> <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></information-aggregation>
<domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></domain-name-resolution> <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></domain-name-resolution>