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

CN-1594 feat: 清理过时scss文件、link相关组件css重构

Browse Source
This commit is contained in:
chenjinsong
2024-04-09 16:33:56 +08:00
parent 3aabab73bd
commit b87b3227a9
127 changed files with 46 additions and 14150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/assets/css/components/views/charts2/linkBlock.scss
View File

@@ -8,9 +8,9 @@
display: flex;
position: relative;
width: calc(50% - 10px);
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
background-color: #F7F7F7;
background-color: var(--el-fill-color-lighter);
.block-list__title {
position: absolute;
@@ -33,7 +33,7 @@
&:hover {
.block-hex-in {
box-shadow: 0 1px 3px 0 #046ECA, 0 1px 3px 0 rgba(0,0,0,0.50);
box-shadow: 0 1px 3px 0 var(--el-color-primary);
}
}
.block-hex {
@@ -62,124 +62,23 @@
}
}
}
/*.link-blocks {
$blue: var(--el-color-primary);
$grey: #353636;
border: 1px solid #E2E5EC;
height: 100%;
width: 100%;
border-radius: 4px;
background-color: #F7F7F7;
.el-tabs {
margin-left: 20px;
.el-tabs__nav-wrap {
padding-top: 5px;
&::after {
height: 1px;
background-color: transparent ;
}
}
.el-tabs__nav.is-top {
height: 33px;
.el-tabs__active-bar {
background-color: $blue;
}
.el-tabs__item {
padding: 0 10px;
height: 33px;
color: $grey;
font-size: 14px;
&.el-tabs__item.is-top.is-active {
color: $blue;
}
&:nth-child(2) {
padding-left: 0;
}
}
}
}
.block-list {
display: flex;
flex-wrap: wrap;
padding: 8px 14px 0 20px;
.link-block {
height: 30px;
width: 30px;
border-radius: 2px;
margin: 0 6px 6px 0;
cursor: pointer;
&:hover {
box-shadow: 0 1px 4px 0 #046eca;
border: 1px solid #046eca;
}
}
}
.block-heat-legend {
display: flex;
padding-right: 20px;
justify-content: flex-end;
padding-top: 10px;
.legend__box {
display: flex;
flex-direction: column;
flex-basis: 220px;
.legend__value {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 5px;
font-size: 12px;
color: #353636;
}
.legend__color-piece {
width: 100%;
height: 13px;
background-image: linear-gradient(to right, #40537E, #FF005C);
}
.legend__desc {
font-size: 12px;
color: #353636;
padding-top: 5px;
}
}
}
}*/
.link-block__popper {
background-color: #1F2B33 !important;
border-color: #F7F7F7 !important;
.el-popper__arrow::before {
background-color: #1F2B33 !important;
// border-color: #F7F7F7 !important;
}
.popper-content {
.popper-content__link-id {
padding-bottom: 4px;
font-size: 14px;
color: white;
color: var(--el-color-white);
}
.popper-content__link-info {
display: flex;
font-size: 12px;
.info__label {
color: #D8D8D8;
color: var(--el-color-info-light-7);
flex-basis: 110px;
}
.info__value {
color: white;
color: var(--el-color-white);
}
}
}

33
src/assets/css/components/views/charts2/linkDirectionGrid.scss
View File

@@ -1,6 +1,6 @@
.link-direction-grid {
display: flex;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
height: 100%;
width: 100%;
border-radius: 4px;
@@ -11,7 +11,7 @@
.dimension-title {
font-size: 14px;
color: #046ECA;
color: var(--el-color-primary);
}
.link-block-error {
position: absolute;
@@ -21,6 +21,7 @@
}
.data-grid {
height: 100px;
.egress-row {
padding-left: 190px;
height: 100%;
@@ -33,7 +34,7 @@
height: 100%;
margin-right: 8px;
transform: rotate(-45deg) translate(-5px,-15px);
color: #353636;
color: var(--el-text-color-primary);
font-size: 12px;
}
}
@@ -48,7 +49,7 @@
height: 50px;
margin-bottom: 10px;
padding-right: 12px;
color: #353636;
color: var(--el-text-color-primary);
font-size: 12px;
}
.data-item, .data-item-no-data {
@@ -58,40 +59,39 @@
height: 50px;
width: 50px;
margin: 0 8px 8px 0;
border: 1px solid #DEDEDE;
border: 1px solid var(--el-color-info-light-7);
border-radius: 4px;
.data-item__point, .data-item__point-red {
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #749F4D;
background-color: var(--el-color-success);
&:first-of-type {
margin-right: 6px;
}
}
.data-item__point-red {
background-color: #E26154;
background-color: var(--el-color-error);
}
}
.data-item-no-data {
background: rgb(247, 247, 247);
background: var(--el-color-info-light-9);
}
}
}
}
}
$blue: #046ECA;
.item-popover-header {
display: flex;
align-items: center;
padding: 10px 0;
line-height: 14px;
font-size: 14px;
font-weight: 600;
font-weight: bold;
.item-popover-header-icon {
font-size: 20px;
@@ -103,7 +103,7 @@ $blue: #046ECA;
.item-popover-block-title {
line-height: 24px;
font-size: 13px;
color: $blue;
color: var(--el-color-primary);
font-weight: 600;
}
@@ -125,7 +125,7 @@ $blue: #046ECA;
display: flex;
min-width: 75px;
width: 150px;
font-weight: 600;
font-weight: bold;
}
}
}
@@ -139,14 +139,14 @@ $blue: #046ECA;
width: 7px;
height: 7px;
border-radius: 50%;
background: #749F4D;
background: var(--el-color-success);
}
.red-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #E26154;
background: var(--el-color-error);
}
}
@@ -157,7 +157,6 @@ $blue: #046ECA;
.data-item__hover:hover {
transition: background 0.2s, box-shadow 0.2s;
background: #F4F9FD;
border: 2px $blue solid !important;
box-shadow: 1px 1px 5px #a1a1a1 !important;
background: var(--el-fill-color-light);
border: 1px var(--el-color-primary) solid !important;
}

15
src/assets/css/components/views/charts2/linkTrafficLine.scss
View File

@@ -2,10 +2,12 @@
height: 100%;
width: 100%;
display: flex;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
.line.network.link-traffic {
border: none;
flex: 6.5;
.line-select-metric {
margin-right: 20px;
}
@@ -16,7 +18,8 @@
flex: 1;
position: relative;
padding: 20px 20px 0 20px;
border-right: 1px solid #E2E5EC;
border-right: 1px solid var(--el-border-color-light);
.link-traffic-list-center:nth-of-type(1) {
margin-top: 0;
}
@@ -24,16 +27,16 @@
display: flex;
flex-direction: column;
margin-top: 5px;
.link-traffic-list-center-label {
margin-bottom: 2px;
font-size: 12px;
color: #717171;
font-weight: 400;
color: var(--el-text-color-regular);
}
.link-traffic-list-center-value {
font-size: 14px;
color: #046ECA;
font-weight: 600;
color: var(--el-color-primary);
font-weight: bold;
}
}
}

29
src/assets/css/components/views/charts2/linkTrafficSankey.scss
View File

@@ -1,8 +1,5 @@
.link-traffic-sankey {
$blue: #046ECA;
$grey: #353636;
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
height: 100%;
width: 100%;
border-radius: 4px;
@@ -10,10 +7,9 @@
.sankey__label {
position: absolute;
color: #333;
color: var(--el-text-color-primary);
bottom: 50px;
font-size: 12px;
font-weight: 500;
transform: translateX(-50%);
}
.el-tabs {
@@ -32,16 +28,16 @@
margin-left: 20px;
.el-tabs__active-bar {
background-color: $blue;
background-color: var(--el-color-primary);
}
.el-tabs__item {
padding: 0 10px;
height: 33px;
color: $grey;
color: var(--el-text-color-primary);
font-size: 14px;
&.el-tabs__item.is-top.is-active {
color: $blue;
color: var(--el-color-primary);
}
&:nth-child(2) {
padding-left: 0;
@@ -51,40 +47,43 @@
.el-tabs__content {
height: calc(100% - 52px);
width: 100%;
.el-tab-pane {
height: 100%;
width: 100%;
.chart-drawing {
height: 100%;
width: 100%;
.traffic-sankey {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
.traffic-sankey-row-header {
.traffic-sankey__row-value {
font-size: 12px;
color: $blue;
font-weight: 500;
color: var(--el-color-primary);
}
}
.traffic-sankey-row-body {
display: flex;
.traffic-sankey__tooltip-right {
.traffic-sankey__row-value {
font-size: 12px;
color: #353636;
font-weight: 600;
color: var(--el-text-color-primary);
font-weight: bold;
}
}
.traffic-sankey__tooltip-left {
.traffic-sankey__row-label {
margin-right: 20px;
font-size: 12px;
color: #575757;
font-weight: 400;
color: var(--el-text-color-regular);
}
}
}