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

CN-1594 feat: 部分css重构：实体详情basicInfo和tabs

Browse Source
This commit is contained in:
刘洪洪
2024-03-28 18:47:47 +08:00
parent 1c2062cd1c
commit 80c555940c
5 changed files with 96 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/common/table-common.scss
View File

@@ -471,6 +471,9 @@
.margin-r-3{
margin-right: 3px;
}
.margin-l-6 {
margin-left: 6px;
}
.tooltip-column-name {
color: #aeb0b9;
height:40px;

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

@@ -1,13 +1,14 @@
.el-popper.analysis-popper {
margin-top: -5px !important;
padding: 0;
border: 1px solid #C5C5C5 !important;
border-radius: 4px;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-base); // 4px
box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
.el-popper__arrow {
display: none;
}
.analysis-entry {
display: flex;
flex-direction: column;
@@ -15,11 +16,12 @@
.analysis-entry__header {
height: 42px;
line-height: 42px;
background-color: #F7F7F7;
background-color: var(--cn-bg-color-lighter);
padding-left: 20px;
color: #353636;
border-radius: 4px 4px 0 0;
color: var(--el-text-color-primary);
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
}
.analysis-entry__body {
display: flex;
height: 134px;
@@ -35,9 +37,10 @@
&:hover {
div i, span {
color: #046ECA;
color: var(--el-color-primary);
}
}
div {
display: flex;
align-items: center;
@@ -46,37 +49,43 @@
height: 46px;
width: 46px;
border-radius: 50%;
background-color: #F5F6F8;
//background-color: #F5F6F8;
background-color: var(--el-color-info-light-9);
i {
color: #353636;
color: var(--el-text-color-primary);
font-size: 22px;
}
}
span {
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
}
}
}
}
}
.entity-detail-basic-info {
position: relative;
padding: 35px 30px 0 30px;
height: 100%;
border: 1px solid #E2E5EC;
border-radius: 4px;
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-base);
.dividing-line {
height: 1px;
width: 100%;
margin-top: 21px;
background-color: #EFF2F5;
//background-color: #EFF2F5;
background-color: var(--el-border-color);
}
.entity-type {
color: #717171;
color: var(--el-text-color-regular);
}
.entity-basic-info {
display: flex;
align-items: center;
@@ -90,9 +99,10 @@
padding-right: 12px;
font-family: Helvetica-Bold;
font-size: 32px;
color: #353636;
color: var(--el-text-color-primary);
font-weight: bold;
}
div {
display: flex;
justify-content: center;
@@ -100,15 +110,17 @@
height: 28px;
width: 28px;
border-radius: 50%;
background-color: #EFF1F4;
//background-color: #EFF1F4;
background-color: var(--el-color-info-light-9);
cursor: pointer;
i {
color: #717171;
color: var(--el-text-color-regular);
font-size: 12px;
}
}
}
.analysis-btn {
display: flex;
align-items: center;
@@ -116,21 +128,24 @@
height: 24px;
padding: 0 10px;
font-size: 12px;
color: #046ECA;
color: var(--el-color-primary);
cursor: pointer;
background-color: #FFF;
transition: background-color linear .2s;
background-color: var(--el-fill-color-blank);
transition: background-color linear var(--el-transition-duration);
&.analysis-btn--active {
background-color: #EBF7FA;
border-radius: 2px;
//background-color: #EBF7FA;
background-color: var(--el-color-primary-light-9);
border-radius: var(--el-border-radius-small); // 2px
}
i {
padding-right: 4px;
font-size: 14px;
}
}
}
.entity-tags {
display: flex;
flex-wrap: wrap;
@@ -147,6 +162,7 @@
}
}
}
.entity-detail-info {
display: flex;
flex-flow: row wrap;
@@ -162,21 +178,24 @@
i {
font-size: 22px;
color: #353636;
color: var(--el-text-color-primary);
margin-right: 14px;
}
.detail-card__text {
.detail-card__label {
margin-bottom: 6px;
font-size: 12px;
color: #717171;
color: var(--el-text-color-regular);
}
.detail-card__value {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: #222;
//color: #222;
color: var(--el-text-color-primary);
line-height: 18px;
font-size: 14px;
}

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

@@ -1,16 +1,16 @@
.entity-detail-tabs {
position: relative;
$tab-border-color: #E2E5EC;
$tab-border-radius: 4px;
$tab-border-color: var(--el-border-color-light);
$tab-border-radius: var(--el-border-radius-base);
height: 100%;
.entity-detail-tabs__active-bar {
position: absolute;
height: 3px;
top: 1px;
background-color: #046EC9;
border-radius: 4px 4px 0 0;
transition: all linear .2s;
background-color: var(--el-color-primary);
border-radius: $tab-border-radius $tab-border-radius 0 0;
transition: all linear var(--el-transition-duration);
z-index: 3;
}
@@ -20,11 +20,11 @@
box-shadow: none;
& > .el-tabs__header {
background-color: #fff;
background-color: var(--el-fill-color-blank);
border-bottom: 1px solid $tab-border-color;
.el-tabs__item {
color: #353636;
color: var(--el-text-color-primary);
user-select: none; // 避免鼠标框选文字
i {
@@ -34,19 +34,19 @@
}
.el-tabs__item:not(.is-disabled):not(.is-active):hover {
color: #353636;
color: var(--el-text-color-primary);
}
.el-tabs__item.is-active {
color: #046ECA;
background-color: #FFFFFF;
color: var(--el-color-primary);
background-color: var(--el-fill-color-blank);
border-right-color: $tab-border-color;
border-left-color: $tab-border-color;
border-radius: 4px 4px 0 0;
border-radius: $tab-border-radius $tab-border-radius 0 0;
box-shadow: 0 1px $tab-border-color inset;
&:hover {
color: #046ECA;
color: var(--el-color-primary);
}
}
@@ -67,6 +67,7 @@
height: 100%;
overflow: auto;
}
.tab-pane-warn--icon {
width: 16px;
color: #E48F3E;
@@ -76,76 +77,88 @@
}
.entity-detail-event-border {
border: 1px solid #E2E5EC;
border: 1px solid var(--el-border-color-light);
border-radius: $tab-border-radius;
margin-bottom: 10px;
}
.entity-detail-event-block {
width: calc(100% - 2px);
.behavior-pattern {
height:100% ;
height: 100%;
position: relative;
display:flex;
display: flex;
flex-direction: row;
.behavior-pattern-legend {
display:flex;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding:10px 18px 10px 18px;
width:400px;
padding: 10px 18px 10px 18px;
width: 400px;
.behavior-pattern-legend__item {
display:flex;
display: flex;
flex-direction: row;
font-size: 12px;
color: #353636;
color: var(--el-text-color-primary);
line-height: 12px;
margin-bottom:11px;
margin-bottom: 11px;
.legend-icon {
width: 8px;
height: 8px;
margin: 3px 8px 0 0;
border-radius: 1px;;
}
.legend-name {
width:180px;
width: 180px;
font-weight: 400;
}
.legend-value{
.legend-value {
display: flex;
justify-content: left;
margin-left:20px;
width:90px;
margin-left: 20px;
width: 90px;
font-weight: 500;
}
.legend-percent {
margin-left:20px;
width:70px;
margin-left: 20px;
width: 70px;
justify-content: left;
display: flex;
font-weight: 500;
}
}
}
.behavior-pattern-chart{
.behavior-pattern-chart {
height: calc(100% - 50px);
width:calc(100% - 400px);
width: calc(100% - 400px);
position: relative
}
.chart-bottom-dot__left {
position: absolute;
height: 0;
width: 195px;
border-bottom: 1px dashed #d3d3d3;
top: 319px;left: 575px;
top: 319px;
left: 575px;
}
.chart-bottom-dot__right {
position: absolute;
height: 0;
width: 195px;
border-bottom: 1px dashed #d3d3d3;
top: 319px;left: 830px;
top: 319px;
left: 830px;
}
}
}
@@ -158,8 +171,9 @@
.entity-subscriber-detail-error {
margin-top: 0px;
margin-left: 0px;
.error-block {
margin:0px;
margin: 0px;
}
}

2
src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
View File

@@ -50,7 +50,7 @@
<div v-if="card.name==='reputationLevel'"
class="detail-card__value row__tag row__tag__level"
:title="card.value"
:style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? '#fff' : ''}`">
:style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? 'var(--el-color-white)' : ''}`">
{{card.value || '-'}}
</div>
<div v-else class="detail-card__value" :title="card.value">{{card.value || '-'}}</div>

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

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