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

CN-1592 feat: 部分css重构内容

Browse Source
This commit is contained in:
chenjinsong
2024-03-26 17:06:32 +08:00
parent 19d50f45c6
commit 2e83fd893e
25 changed files with 600 additions and 1746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,10 @@
@use 'element-plus/theme-chalk/src/select.scss' as *;
.date-range-box {
font-size: 14px;
border-radius: 2px;
//margin-right: 10px;
border-radius: var(--el-border-radius-base);
display: flex;
cursor: pointer;
transition: var(--el-transition-duration);
.date-range-refresh {
margin-left: 10px;
@@ -32,15 +33,18 @@
padding: 0 10px;
display: flex;
justify-content: space-around;
//background: #FFFFFF;
background: var(--el-fill-color-blank);
//border: 1px solid #DEDEDE;
border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
@include mixed-input-border(var(--el-border-color));
border-radius: var(--el-border-radius-base);
height: 28px;
line-height: 28px;
transition: width .3s;
transition: all var(--el-transition-duration);
&:hover {
@include mixed-input-border(var(--el-border-color-hover));
}
&:focus {
@include mixed-input-border(var(--el-color-primary));
}
.cn-icon {
font-size: 14px;
@@ -58,8 +62,7 @@
.date-range-title {
font-size: 14px;
//color: #666666;
color: $--text-color-4;
color: var(--el-text-color-regular);
font-weight: 600;
padding: 14px 0 7px 8px;
}
@@ -74,10 +77,9 @@
white-space: nowrap;
display: inline-block;
margin: 0 5px;
//color: #353636;
color: $--text-color-1;
color: var(--el-text-color-primary);
.cn-icon-Data {
color: #575757;
color: var(--el-text-color-regular);
}
}
@@ -92,9 +94,8 @@
.date-range-panel {
height: 426px;
width: 500px;
//background: #FFFFFF;
background: $--select-bg-color-1;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
background-color: var(--el-fill-color-blank);
box-shadow: var(--el-box-shadow-light);
position: absolute;
right: 10px !important;
z-index: 2;
@@ -106,25 +107,24 @@
.content-title {
font-size: 14px;
//color: #666666;
color: var(--el-text-color-primary);
color: var(--el-text-color-regular);
font-weight: 400;
margin-bottom: 12px;
}
.content-input {
border: 1px solid #E7EAED;
border-radius: 2px;
border: 1px solid var(--el-border-color);
color: var(--el-text-color-primary);
border-radius: var(--el-border-radius-base);
width: 230px;
padding: 0 8px;
height: 30px;
line-height: 30px;
margin-bottom: 12px;
outline: #169AFF;
}
.content-input:focus {
border: 1px solid #169AFF;
border: 1px solid var(--el-border-color-hover);
}
.date-range-history {
@@ -133,14 +133,13 @@
overflow-y: auto;
.date-range-history-item {
color: var(--el-text-color-regular);
padding: 5px 0;
cursor: pointer;
}
.date-range-history-item:hover {
/*font-weight: 600;*/
//background: #f9f9f9;
background: $--select-bg-color-hover-1;
background-color: var(--el-fill-color-light);
}
}
.el-range-editor.el-input__wrapper{
@@ -151,6 +150,7 @@
.date-range-panel-content-right {
display: flex;
flex-direction: column;
border-left: 1px solid var(--el-border-color-light);
ul {
flex: 1;
@@ -165,33 +165,26 @@
display: flex;
flex-direction: column;
justify-content: center;
//color: #333333;
color: var(--el-text-color-primary);
font-weight: 400;
color: var(--el-text-color-regular);
padding: 0 10px;
cursor: pointer;
}
li:hover {
background-color: var(--el-fill-color-light);
color: var(--el-text-color-regular);
}
li.active {
//background: #F2F9FF;
//color: #0091FF;
background: $--select-bg-color-1;
color: var(--el-color-primary);
font-weight: 400;
font-weight: bold;
.cn-icon-check {
color: #0091FF;
color: var(--el-color-primary);
position: absolute;
right: 7px;
}
}
li:hover {
//background: #F2F9FF;
background: var(--el-color-primary-light-9);
//color: #0091FF;
color: var(--el-color-primary);
}
}
}
}
@@ -203,7 +196,7 @@
.date-range-panel-bottom {
height: 44px;
line-height: 44px;
border-top: 1px solid rgba(0, 0, 0, 0.09);
border-top: 1px solid var(--el-border-color-light);
padding: 0 10px;
display: flex;
justify-content: space-between;
@@ -234,6 +227,6 @@
left: -6px !important;
}
.el-popper__arrow::before {
border: 1px solid #E7EAED !important;
border: 1px solid var(--el-border-color-light) !important;
}
}

41
src/assets/css/components/components/common/TimeRange/time-refresh.scss
View File

@@ -2,13 +2,12 @@
position: relative;
font-size: 14px;
.cn-icon-refresh{
.cn-icon-refresh1 {
font-size: 14px;
color: #575757;
}
.cn-icon-dropdown {
font-size: 14px;
transition: all .3s;
transition: all var(--el-transition-duration);
display: inline-block;
}
.cn-icon-dropdown.active{
@@ -17,53 +16,55 @@
.refresh-list{
position: absolute;
z-index: 2;
//background: #FFFFFF;
background: $--select-bg-color-1;
border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
background-color: var(--el-fill-color-blank);
box-shadow: var(--el-box-shadow-light);
border-radius: var(--el-border-radius-base);
top: 30px;
right: 0;
.refresh-list-item{
width: 82px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
color: $--text-color-5;
color: var(--el-text-color-regular);
cursor: pointer;
position: relative;
padding: 8px 0 8px 12px;
}
.refresh-list-item.active{
background: $--select-bg-color-1;
color: #0091FF;
font-weight: 400;
color: var(--el-color-primary);
font-weight: bold;
.cn-icon-check{
color: #0091FF;
color: var(--el-color-primary);
position: absolute;
right: 7px;
}
}
.refresh-list-item:hover{
//background: #F2F9FF;
background: $--select-bg-color-hover-1;
color: #0091FF;
background-color: var(--el-fill-color-light);
}
}
.el-button--small.cn-button {
.el-button--small.el-button--icon {
span {
font-size: 14px;
color: #2C72C6;
font-weight: 400;
.cn-button-label {
color: var(--el-color-primary);
.button-label {
padding: 0 8px 0 3px;
}
i {
font-size: 14px;
color: #575757;
color: var(--el-text-color-regular);
}
}
&:hover span i {
color: var(--el-button-hover-text-color);
}
}
.el-button--small{
padding: 4px 6px !important;

115
src/assets/css/components/components/layout/layout.scss
View File

@@ -37,7 +37,7 @@
color: #F7F7F7;
cursor: pointer;
background-color: transparent;
transition: all linear .2s;
transition: all linear var(--el-transition-duration);
&.shrink-button--collapse {
background-color: #334355;
@@ -50,22 +50,22 @@
display: flex;
align-items: center;
height: 40px;
//background-color: #f7f7f7;
background-color: var(--el-bg-color-overlay);
border-bottom: 1px solid $--border-color;
border-bottom: 1px solid var(--el-border-color-light);
.cn-icon-a-NetworkAnalytics {
margin-left: 20px;
margin-right: 10px;
font-size: 17px;
color: #046ECA;
color: var(--el-color-primary);
}
.header__left-breadcrumb{
display:flex;
align-items:center;
display: flex;
align-items: center;
.route-menu:hover{
cursor: pointer;
color: #2C72C6;
color: var(--el-color-primary);
}
.header__left-breadcrumb-item-select{
display:flex;
@@ -87,17 +87,17 @@
flex: 1;
padding: 12px 10px 10px 20px;
max-width: 290px;
border-right: 1px solid #D8D8D8;
border-right: 1px solid var(--el-border-color);
.left-menu {
padding: 8px 0;
font-size: 14px;
color: #575757;
transition: all linear .2s;
color: var(--el-text-color-regular);
transition: all linear var(--el-transition-duration);
&:hover {
cursor: pointer;
color: #157FF3;
color: var(--el-color-primary);
}
.cn-icon:first-of-type {
font-size: 17px;
@@ -125,7 +125,7 @@
padding: 8px 0;
font-size: 14px;
font-weight: bolder;
color: #353636;
color: var(--el-text-color-primary);
border-bottom: 1px dashed #D8D8D8;
}
.middle-menus__body {
@@ -134,7 +134,7 @@
.middle-menu {
padding: 5px 0;
font-size: 14px;
color: #353636;
color: var(--el-text-color-primary);
&:hover {
cursor: pointer;
@@ -156,6 +156,7 @@
.personal {
display: flex;
.el-dropdown {
color: #fff;
height: 40px;
@@ -170,29 +171,15 @@
font-size: 12px;
}
}
.header-menu--item {
.header-menu__item {
outline-style: initial;
}
}
.left-menu--pin {
width: 20px;
font-size: 20px;
font-weight: 100;
color: #999999;
transition: all .4s;
height: 100%;
line-height: 50px;
margin-left: 10px;
i {
transform: rotateY(0);
transition: transform .4s;
}
i.icon-reverse {
transform: rotateY(180deg);
}
}
}
.personal-dropdown-item.is-active {
color: var(--el-color-primary);
font-weight: bold;
}
.cn-home {
display: flex;
flex-direction: column;
@@ -211,12 +198,10 @@
width:10px;
}
#breadcrumbSelectDropdown::-webkit-scrollbar-track-piece {
background: #ECECEC;
border-radius: 0 0 2px 0;
}
#breadcrumbSelectDropdown::-webkit-scrollbar-thumb {
background-clip: content-box !important;
background: #C5C5C5;
border-radius: 4px;
border: 2px solid transparent;
}
@@ -225,57 +210,52 @@
top: 96px !important;
width: 180px !important;
min-width: 180px;
max-height:206px;
overflow:hidden;
max-height: 206px;
overflow: hidden;
padding: 0 !important;
background: #963131;
border:1px solid #C5C5C5 !important;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
border-radius: 2px !important;
.el-row {
width: 100% !important;
}
.selected {
color: #0091ff;
font-weight: bold;
}
.el-popper {
max-height: 405px;
}
.select-dropdown {
max-height:172px;
width:100%;
margin: 1px 0px;
overflow:auto;
max-height: 172px;
width: 100%;
margin: 1px 0;
overflow: auto;
list-style: none;
padding:4px 0px;
padding: 4px 0;
box-sizing: border-box;
.select-dropdown__item:hover{
background-color: #F5F7FA !important;
}
.select-dropdown__item{
width:100%;
height:30px;
padding:0px 11px;
line-height:30px;
width: 100%;
height: 30px;
padding: 0 11px;
line-height: 30px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666665;
display: list-item;
text-align: -webkit-match-parent;
box-sizing: border-box;
cursor: pointer;
font-size: 12px;
font-weight: 400;
&:hover {
background-color: var(--el-fill-color-light);
}
&.is-active {
color: var(--el-color-primary);
font-weight: bold;
}
}
}
}
.search-input{
width:100%;
padding: 4px 4px 0px 4px;
width: 100%;
padding: 4px 4px 0 4px;
.el-input__inner{
border-radius: 2px;
font-size: 12px;
@@ -289,14 +269,17 @@
height: 24px;
justify-content: center;
line-height: 24px;
padding: 0px 6px;
padding: 0 6px;
span {
margin-right: 6px;
}
i {
font-size: 12px;
}
}
.breadcrumb-button:hover,.breadcrumb-button__active {
cursor:pointer;
background: rgba(113,113,113,0.10);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
cursor: pointer;
background-color: var(--el-fill-color);
border-radius: 2px;
}

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

@@ -13,13 +13,13 @@
.select-prefix {
font-size: 14px;
color: #999;
color: var(--el-text-color-secondary);
padding: 0 6px 0 3px;
}
.el-input__inner {
font-size: 14px;
color: #353636;
color: var(--el-text-color-regular);
}
.common-select {
@@ -41,10 +41,9 @@
min-height: 24px !important;
padding-left: 4px;
font-size: 12px;
font-weight: 400;
border-radius: 2px;
border-radius: var(--el-border-radius-base);
.el-select__placeholder {
color: #2C72C6 !important;
color: var(--el-color-primary) !important;
margin-left: 1px;
}
.el-select__suffix {
@@ -71,7 +70,6 @@
margin-right: 10px;
height: 24px;
line-height: 24px;
border: 1px solid #DCDFE6;
}
}
}

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

@@ -1,7 +1,4 @@
.link-blocks {
$blue: #046ECA;
$grey: #353636;
display: flex;
justify-content: space-between;
height: 100%;
@@ -18,7 +15,7 @@
.block-list__title {
position: absolute;
font-size: 14px;
color: #046ECA;
color: var(--el-color-primary);
top: 16px;
left: 20px;
}
@@ -66,7 +63,7 @@
}
}
/*.link-blocks {
$blue: #046ECA;
$blue: var(--el-color-primary);
$grey: #353636;
border: 1px solid #E2E5EC;

76
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -2,24 +2,29 @@
height: 100%;
width: 100%;
position: relative;
border: 1px solid $--border-color;
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
.chart-drawing {
height: 100%;
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {
display: flex;
.cn-chart-tooltip {
display: flex;
flex-direction: column;
flex: 1;
.cn-chart-tooltip-box {
margin-right: 10px;
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 21px;
font-weight: 600;
}
@@ -31,25 +36,14 @@
display: flex;
justify-content: space-between;
height: 73px;
.line-select.line-header-right {
display: flex;
//flex: 1;
.line-select__operation {
.el-select__wrapper {
height: 24px !important;
min-height: 24px !important;
}
.el-input__inner {
width: 100px;
}
}
.line-select-reference-line {
margin-right: 20px;
.line-select__operation {
.el-select__wrapper {
height: 24px !important;
min-height: 24px !important;
}
.el-input__inner {
width: 127px;
}
@@ -61,47 +55,22 @@
.line-select-metric,.line-select-reference-line {
display: flex;
align-items: center;
.line-select__operation {
min-width: 127px;
height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
.el-select__wrapper {
min-height: 24px !important;
//padding-left: 4px;
line-height: 24px !important;
height: 24px;
font-size: 12px;
color: $--text-color-6;
color: var(--el-color-primary);
font-weight: 400;
padding: 5px 6px 4px 5px !important;
.el-select__placeholder {
color: $--text-color-6;
}
.el-select__suffix {
.el-icon {
color: #575757;
}
}
//.el-input__inner {
// padding-left: 4px;
// line-height: 24px;
// height: 24px;
// font-size: 12px;
// color: #2C72C6;
// font-weight: 400;
//}
}
.el-input__suffix {
display: flex;
.el-input__suffix-inner {
line-height: 24px;
.el-select__caret {
line-height: 24px;
width: 16px;
color: #575757;
}
color: var(--el-color-primary);
}
}
}
@@ -116,43 +85,42 @@
position: absolute;
height: 3px;
border-radius: 4px 0 0 0;
background: #046ECA;
background: var(--el-color-primary);
top: 0;
z-index: 1;
transition: all linear .2s;
}
.line-value {
//position: absolute;
//top: 0;
//left: 0;
display: flex;
.line-value-tabs.mousemove-cursor {
border-top: 4px solid #D3D0D8;
border-top: 4px solid var(--el-border-color-dark);
z-index: 0;
}
.line-value-tabs {
cursor: pointer;
padding: 16px 0 0 20px;
border-top: 4px solid transparent;
.line-value-unit {
.line-value-unit-number {
font-family: Helvetica-Bold;
font-size: 28px;
color: $--text-color-1;
color: var(--el-text-color-primary);
margin-right: 4px;
}
.line-value-unit-number2 {
font-size: 0;
span {
font-size: 12px;
color: $--text-color-2;
font-weight: 400;
color: var(--el-text-color-regular);
}
}
}
.line-value-tabs-name {
position: relative;
display: flex;
.tabs-name {
flex: 1;
padding-left: 19px;

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

@@ -1,22 +1,22 @@
.tabs {
$blue: #046ECA;
$grey: #353636;
height:calc(100% - 64px);
font-size:12px;
.tab-hide{
margin-top:42px;
height: calc(100% - 64px);
font-size: 12px;
.tab-hide {
margin-top: 42px;
}
.cn-chart__tabs {
height:100%;
height: 100%;
.tab-pane {
height:100%;
.title-search {
display:flex;
flex-direction:row;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width:100%;
height:36px;
width: 100%;
height: 36px;
.title-search__span {
margin-right:6px;
}
@@ -38,8 +38,7 @@
align-items: center;
height: 24px;
justify-content: center;
line-height: 24px;
//padding: 0px 7px;
line-height: 27px; // 使搜索图标与header文本齐平
span {
margin-right: 7px;
}
@@ -78,6 +77,7 @@
}
.tab-table {
border: 1px solid #E2E5EC;
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 1px;
@@ -85,13 +85,7 @@
cursor: pointer;
}
.el-table__inner-wrapper {
width: calc(100% + 2px);
}
.el-table__header {
width:100% !important;
}
.el-table__body {
width:100% !important;
width: calc(100% + 2px); // 防止横向出现滚动条
}
}
.dns-in-ex {
@@ -191,9 +185,6 @@
color: #E44D3E;
}
}
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
.el-table thead {
color: $--text-color-1;
}
@@ -240,10 +231,6 @@
.el-table__border-left-patch {
width: 0;
}
.el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
width: 0;
height: 0;
}
}
.el-tabs__header {
margin-bottom: 10px;

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

@@ -90,7 +90,7 @@
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 21px;
font-weight: 600;
}

19
src/assets/css/components/views/charts2/panel.scss
View File

@@ -77,7 +77,7 @@
display: flex;
&>.el-select {
width: 162px !important;
width: 175px !important;
margin-right: 10px;
.select-prefix {
@@ -94,21 +94,8 @@
.panel__time {
display: flex;
}
.el-select__wrapper {
height: 28px !important;
min-height: 20px !important;
padding: 5px 7px 4px 5px !important;
.el-select__prefix {
.select-prefix {
margin-right: -5px !important;
}
}
.el-select__suffix {
.el-icon {
margin-left: -17px !important;
margin-top: -2px !important;
}
}
.el-select__wrapper .el-select__prefix .select-prefix {
margin-right: -5px !important;
}
}
}

2
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -2062,7 +2062,7 @@
}
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 21px;
font-weight: 600;
}