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

CN-1594 feat: npm tab

Browse Source
This commit is contained in:
chenjinsong
2024-04-08 18:08:58 +08:00
parent b81a114631
commit 5a89b47496
4 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/assets/css/components/views/charts2/npmRelatedSessions.scss
View File

@@ -1,37 +1,38 @@
.npm-sessions {
height: 100%;
width: 100%;
.npm-sessions-title {
display: flex;
font-size: 14px;
color: #353636;
font-weight: 500;
color: var(--el-text-color-primary);
}
.npm-sessions-div {
display: flex;
margin: 10px 0 10px 0;
width: 100%;
height: 12px;
.npm-sessions-div-red {
height: 100%;
background: #E26154;
border: 1px solid #E26154;
background: var(--el-color-error);
border: 1px solid var(--el-color-error);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-left: none;
}
.npm-sessions-div-green {
height: 100%;
background: #7E9F54;
border: 1px solid #7E9F54;
background: var(--el-color-success);
border: 1px solid var(--el-color-success);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
}
.npm-sessions-div-gray {
height: 100%;
background: rgba(113,113,113,0.30);
border: 1px solid rgba(113,113,113,0.30);
background: var(--el-color-info-light-7);
border: 1px solid var(--el-color-info-light-7);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
@@ -41,8 +42,10 @@
.npm-sessions-body {
display: flex;
justify-content: space-between;
.npm-sessions-body-left {
display: flex;
.npm-sessions-as-clients.right {
margin-right: 45px;
}
@@ -50,13 +53,14 @@
display: flex;
flex-direction: column;
align-items: center;
.npm-sessions-as-client {
display: flex;
align-items: center;
.npm-sessions-as-client-i18n {
font-size: 12px;
color: #717171;
font-weight: 400;
color: var(--el-text-color-regular);
}
.npm-sessions-as-client-green,.npm-sessions-as-client-red {
width: 8px;
@@ -64,32 +68,31 @@
border-radius: 50%;
}
.npm-sessions-as-client-green {
background: green;
background: var(--el-color-success);
}
.npm-sessions-as-client-red {
background: red;
background: var(--el-color-error);
}
}
.npm-sessions-as-client-percent {
font-size: 18px;
color: #353636;
font-weight: 700;
color: var(--el-text-color-primary);
font-weight: bold;
}
}
}
.npm-sessions-body-right {
text-align: right;
.npm-sessions-Progress-number {
font-size: 14px;
color: #353636;
font-weight: 700;
color: var(--el-text-color-primary);
font-weight: bold;
}
.npm-sessions-Progress-unit {
font-size: 12px;
color: #717171;
font-weight: 400;
color: var(--el-text-color-regular);
}
}
}
}

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

@@ -5,7 +5,7 @@
position: absolute;
height: 3px;
top: 0;
background-color: #046EC9;
background-color: var(--el-color-primary);
border-radius: 5px 5px 0 0;
transition: all linear .2s;
}
@@ -17,15 +17,14 @@
box-shadow: none;
&>.el-tabs__header {
background-color: white;
//background-color: #f00;
border-color: #E2E5EC;
background-color: var(--el-fill-color-blank);
border-color: var(--el-border-color-light);
.el-tabs__nav-wrap {
padding-left: 27px;
}
.el-tabs__item:first-child {
margin-left: 0;
margin-left: 0;
}
}
.el-tabs__content {
@@ -38,7 +37,7 @@
line-height: 35px;
.npm-tab__label {
color: #353636;
color: var(--el-text-color-primary);
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
@@ -51,10 +50,10 @@
}
&.is-active {
.npm-tab__label {
color: #353636;
color: var(--el-text-color-primary);
i {
color: #046EC9;
color: var(--el-color-primary);
}
}
}