176 lines
3.9 KiB
SCSS
176 lines
3.9 KiB
SCSS
.entity-detail-tabs {
|
||
position: relative;
|
||
$tab-border-color: #E2E5EC;
|
||
$tab-border-radius: 4px;
|
||
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;
|
||
z-index: 3;
|
||
}
|
||
|
||
.cn-chart__tabs--border-card {
|
||
height: 100%;
|
||
border: none;
|
||
box-shadow: none;
|
||
|
||
& > .el-tabs__header {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid $tab-border-color;
|
||
|
||
.el-tabs__item {
|
||
color: #353636;
|
||
user-select: none; // 避免鼠标框选文字
|
||
|
||
i {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
}
|
||
|
||
.el-tabs__item:not(.is-disabled):not(.is-active):hover {
|
||
color: #353636;
|
||
}
|
||
|
||
.el-tabs__item.is-active {
|
||
color: #046ECA;
|
||
background-color: #FFFFFF;
|
||
border-right-color: $tab-border-color;
|
||
border-left-color: $tab-border-color;
|
||
border-radius: 4px 4px 0 0;
|
||
box-shadow: 0 1px $tab-border-color inset;
|
||
|
||
&:hover {
|
||
color: #046ECA;
|
||
}
|
||
}
|
||
|
||
.el-tabs__item:first-of-type.is-active {
|
||
box-shadow: 1px 1px $tab-border-color inset;
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
height: calc(100% - 39px);
|
||
border: 1px solid $tab-border-color;
|
||
border-top: none;
|
||
padding: 30px 20px 20px 20px; // 根据原型调整上边距为30px，但20px更协调
|
||
}
|
||
|
||
.tab-pane--border-card {
|
||
position: relative;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
.tab-pane-warn--icon {
|
||
width: 16px;
|
||
color: #E48F3E;
|
||
margin-left: 10px;
|
||
margin-right: 0 !important;
|
||
}
|
||
}
|
||
|
||
.entity-detail-event-border {
|
||
border: 1px solid #E2E5EC;
|
||
border-radius: $tab-border-radius;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.entity-detail-event-block {
|
||
width: calc(100% - 2px);
|
||
.behavior-pattern {
|
||
height:100% ;
|
||
position: relative;
|
||
display:flex;
|
||
flex-direction: row;
|
||
.behavior-pattern-legend {
|
||
display:flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding:10px 18px 10px 18px;
|
||
width:400px;
|
||
.behavior-pattern-legend__item {
|
||
display:flex;
|
||
flex-direction: row;
|
||
font-size: 12px;
|
||
color: #353636;
|
||
line-height: 12px;
|
||
margin-bottom:11px;
|
||
.legend-icon {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin: 3px 8px 0 0;
|
||
border-radius: 1px;;
|
||
}
|
||
.legend-name {
|
||
width:180px;
|
||
font-weight: 400;
|
||
}
|
||
.legend-value{
|
||
display: flex;
|
||
justify-content: left;
|
||
margin-left:20px;
|
||
width:90px;
|
||
font-weight: 500;
|
||
}
|
||
.legend-percent {
|
||
margin-left:20px;
|
||
width:70px;
|
||
justify-content: left;
|
||
display: flex;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.behavior-pattern-chart{
|
||
height: calc(100% - 50px);
|
||
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;
|
||
}
|
||
.chart-bottom-dot__right {
|
||
position: absolute;
|
||
height: 0;
|
||
width: 195px;
|
||
border-bottom: 1px dashed #d3d3d3;
|
||
top: 319px;left: 830px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.entity-detail-event-error {
|
||
margin-top: 18px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.entity-subscriber-detail-error {
|
||
margin-top: 0px;
|
||
margin-left: 0px;
|
||
.error-block {
|
||
margin:0px;
|
||
}
|
||
}
|
||
|
||
.entity-detail-performance {
|
||
height: 46px;
|
||
border-radius: $tab-border-radius;
|
||
}
|
||
|
||
.entity-detail-security {
|
||
height: 70px;
|
||
border-radius: $tab-border-radius;
|
||
}
|
||
}
|