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

CN-708 feat: 色块图开发

Browse Source
This commit is contained in:
chenjinsong
2022-09-10 23:13:42 +08:00
parent 503315b8ad
commit 9bc4fa8fdb
15 changed files with 363 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/index.scss
View File

@@ -62,4 +62,7 @@
@import './views/charts2/npmAppEventTable';
@import './views/charts2/npmRelatedSessions';
@import './views/charts2/npmTrafficLine';
@import './views/charts2/linkBlock';
@import './views/charts2/linkTrafficSankey';
@import './views/charts2/linkDirectionGrid';
//@import '../chart';

85
src/assets/css/components/views/charts2/linkBlock.scss Normal file
View File

@@ -0,0 +1,85 @@
.link-blocks {
$blue: #046ECA;
$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;
}
}
}
.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;
}
.popper-content__link-info {
display: flex;
font-size: 12px;
.info__label {
color: #D8D8D8;
flex-basis: 110px;
}
.info__value {
color: white;
}
}
}
}

3
src/assets/css/components/views/charts2/linkDirectionGrid.scss Normal file
View File

@@ -0,0 +1,3 @@
.link-direction-grid {
}

42
src/assets/css/components/views/charts2/linkTrafficSankey.scss Normal file
View File

@@ -0,0 +1,42 @@
.link-traffic-sankey {
$blue: #046ECA;
$grey: #353636;
border: 1px solid #E2E5EC;
height: 100%;
width: 100%;
border-radius: 4px;
.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;
}
}
}
}
}

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

@@ -1,5 +1,5 @@
.tabs {
$blue: #2C72C6;
$blue: #046ECA;
$grey: #353636;
height:calc(100% - 64px);
font-size:12px;
@@ -84,7 +84,7 @@
}
}
.el-tabs__header {
margin-bottom: 3px;
margin-bottom: 10px;
width: calc(100% - 272px);
}
.el-tabs__nav-wrap::after {
@@ -92,24 +92,25 @@
background-color: transparent ;
}
.el-tabs__nav.is-top {
height: 33px;
.el-tabs__active-bar {
display: none;
background-color: $blue;
}
.el-tabs__item {
margin: 0 20px 0 0;
padding:0px;
font-weight: 400;
color:$grey;
font-size:14px;
}
.el-tabs__item.is-top.is-active {
border-bottom: 2px solid $blue;
color:$blue;
padding: 0 10px;
height: 33px;
margin:0 20px 7px 0;
padding:0px;
font-weight:400;
color: $grey;
font-size: 14px;
&.el-tabs__item.is-top.is-active {
color:$blue;
}
&:nth-child(2) {
padding-left: 0;
}
}
}
.el-tabs__content {
height: calc(100% - 40px);
@@ -326,4 +327,4 @@
}
.btn-up{
margin-top:40px;
}
}