feat: entity列表（部分）、css架构更改
This commit is contained in:
chenjinsong
@@ -0,0 +1,73 @@
|
||||
.advanced-search {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 66px;
|
||||
|
||||
.el-input__suffix {
|
||||
right: 0;
|
||||
}
|
||||
&.advanced-search--show-list {
|
||||
max-height: 40px;
|
||||
|
||||
.el-input__inner {
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #CECECE;
|
||||
border-radius: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.search__suffixes, .search__suffixes--show-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.search__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.search__suffixes {
|
||||
justify-content: space-evenly;
|
||||
width: 100px;
|
||||
|
||||
.search__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: #3976CB;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search__suffixes--show-list {
|
||||
.search__suffix {
|
||||
padding: 0 12px;
|
||||
|
||||
&:last-of-type {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
846
src/assets/css/components/components/charts/panel.scss
Normal file
846
src/assets/css/components/components/charts/panel.scss
Normal file
@@ -0,0 +1,846 @@
|
||||
.entity-detail-tool {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 20px 10px 0;
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
||||
border-radius: 2px;
|
||||
|
||||
.cn-icon-arrow-left-circle {
|
||||
color: $--color-primary;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-error-popper{
|
||||
word-wrap:break-word;
|
||||
word-break:break-word;
|
||||
border: 1px solid #e02f44;
|
||||
min-width: 180px !important;
|
||||
max-width: 280px !important;
|
||||
}
|
||||
|
||||
.chart-header-position{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-error-popper.el-popper.is-light {
|
||||
background: #e02f44;
|
||||
border: 1px solid #e02f44;
|
||||
}
|
||||
.chart-error-popper.el-popover.el-popper {
|
||||
color:white;
|
||||
}
|
||||
|
||||
.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
|
||||
border-color: #e02f44;
|
||||
background: #e02f44;
|
||||
bottom:0px;
|
||||
}
|
||||
|
||||
.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
|
||||
border-color: #e02f44;
|
||||
background: #e02f44;
|
||||
}
|
||||
|
||||
.chart-info-corner {
|
||||
color: #767980;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
}
|
||||
.chart-info-corner--error {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
.chart-info-corner--error .chart-info-corner-inner {
|
||||
border-left: 28px solid #e02f44;
|
||||
border-right: none;
|
||||
border-bottom: 28px solid rgba(0,0,0,0);
|
||||
}
|
||||
.chart-info-corner-inner {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.chart-info-corner .fa {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 6px;
|
||||
font-size: 65%;
|
||||
z-index: 3;
|
||||
font-style: normal;
|
||||
}
|
||||
.cn-chart-icon-warning:before {
|
||||
content: "!";
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
.cn-chart__crypto-header{
|
||||
font-size:15px;
|
||||
font-family: SimHei;
|
||||
}
|
||||
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(30, 1fr);
|
||||
grid-auto-flow: row;
|
||||
grid-gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding-right: 20px;
|
||||
position: relative;
|
||||
|
||||
.panel__time {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&>.cn-chart {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&>.cn-chart__whois>.cn-chart__body {
|
||||
overflow: auto;
|
||||
}
|
||||
&>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map, &>.cn-chart__group, &>.cn-chart__whois, &>.cn-chart__dns-record, &>.cn-chart__app-basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.cn-chart__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 10px 20px 10px 18px;
|
||||
height: 47px;
|
||||
|
||||
.cn-chart__title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header__operations {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
.el-descriptions {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&>.el-descriptions {
|
||||
flex: 0 0 350px;
|
||||
padding: 30px 36px;
|
||||
}
|
||||
.chart-location {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.cn-chart__group {
|
||||
.cn-chart__header {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
&>.cn-chart__body {
|
||||
display: grid !important;
|
||||
padding: 0 20px;
|
||||
.cn-chart {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.cn-chart__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
&>.cn-chart__tabs {
|
||||
padding: 10px 25px 10px 15px;
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
}
|
||||
&>.el-tabs__header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&>.el-tabs__content {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&>.cn-chart__table {
|
||||
.cn-chart__header {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
.header__operations {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
.header__operation.header__operation--table {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
margin-left: 10px;
|
||||
color: $--color-primary;
|
||||
border: 1px solid $--color-primary;
|
||||
border-radius: $--border-radius-primary;
|
||||
|
||||
.option__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
transition: all linear .2s;
|
||||
}
|
||||
.option__button:hover {
|
||||
background-color: #EFF2F5;
|
||||
}
|
||||
.option__button.icon-group-item:first-of-type:not(:last-of-type) {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
.option__button.icon-group-item:last-of-type:not(:first-of-type) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
.option__select {
|
||||
.el-input__inner {
|
||||
width: 80px;
|
||||
padding-right: 20px;
|
||||
border: none;
|
||||
height: 100%;
|
||||
line-height: 20px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
.el-input__prefix > div {
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
.el-input__suffix-inner {
|
||||
line-height: 14px;
|
||||
.el-select__caret {
|
||||
line-height: 14px;
|
||||
width: 16px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.option__select.select-column {
|
||||
.el-input__inner {
|
||||
width: 86px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.icon-group-divide {
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
th.is-leaf, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
th {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
td {
|
||||
padding: 4px 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.cn-chart__echarts {
|
||||
.cn-chart__header {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
.header__operations {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
.header__operation.header__operation--echarts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
margin-left: 10px;
|
||||
color: $--color-primary;
|
||||
border: 1px solid $--color-primary;
|
||||
border-radius: $--border-radius-primary;
|
||||
|
||||
.option__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
transition: all linear .2s;
|
||||
}
|
||||
.option__button:hover {
|
||||
background-color: #EFF2F5;
|
||||
}
|
||||
.option__button.icon-group-item:first-of-type:not(:last-of-type) {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
.option__button.icon-group-item:last-of-type:not(:first-of-type) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
.option__select {
|
||||
.el-input__inner {
|
||||
width: 120px;
|
||||
padding-right: 20px;
|
||||
border: none;
|
||||
height: 100%;
|
||||
line-height: 20px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
.el-input__prefix > div {
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
.el-input__suffix-inner {
|
||||
line-height: 14px;
|
||||
.el-select__caret {
|
||||
line-height: 14px;
|
||||
width: 16px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.option__select.select-column {
|
||||
.el-input__inner {
|
||||
width: 86px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.icon-group-divide {
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__body {
|
||||
overflow: hidden auto;
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
th.is-leaf, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
th {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
td {
|
||||
padding: 4px 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__body.pie-with-table {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
.cn-chart__footer.pie-with-table {
|
||||
flex-basis: 60%;
|
||||
padding: 10px 30px 30px;
|
||||
}
|
||||
}
|
||||
.pie-table {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.cell {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.el-table__expanded-cell[class*=cell] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expand-table .el-table__body .el-table__row:last-of-type td {
|
||||
border: none;
|
||||
}
|
||||
.expand-table {
|
||||
font-weight: 400;
|
||||
color: #606266;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart__legend {
|
||||
width: calc(100% - 40px);
|
||||
border: 1px solid #E7EAED;
|
||||
color: #5f6368;
|
||||
margin: auto;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.chart__table-top {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-bottom: #E7EAED 1px solid;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
font-size: 13px;
|
||||
line-height: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
.chart__table-below {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-below-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
.table-below-box:hover {
|
||||
background-color: #f9f9f9;
|
||||
border: 0;
|
||||
color: #383838;
|
||||
}
|
||||
.table__below-color {
|
||||
width: 27px;
|
||||
height: 7px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 24%;
|
||||
}
|
||||
}
|
||||
.table__below-title {
|
||||
padding: 0 6px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table__below-statistics {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-below-box:not(.chart__table-top) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.table-below-box.table-below-box--inactivated {
|
||||
color: #ccc;
|
||||
.table__below-color div {
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 10px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 25px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 1224px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 30px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 1824px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 2424px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 55px;
|
||||
}
|
||||
}
|
||||
.cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane>.cn-chart {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
.cn-chart__header {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-entity-detail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.entity-detail__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
padding-right: 20px;
|
||||
background-color: #F7F9FB;
|
||||
|
||||
.detail-header__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
|
||||
.title__icon-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: 50%;
|
||||
background-color: #B8C1D1;
|
||||
|
||||
i {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.title__name {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.detail-header__operation {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.panel__time {
|
||||
display: flex;
|
||||
padding: 0 30px 10px 0;
|
||||
}
|
||||
|
||||
& > .el-tabs > .el-tabs__header { // header背景色
|
||||
margin: 0 0 -1px 0;
|
||||
|
||||
& > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {
|
||||
& > .el-tabs__item {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
& > .el-tabs__item.is-active { // 激活的tab上边框和背景色
|
||||
background-color: white;
|
||||
border-top: 2px solid #0091ff;
|
||||
}
|
||||
& > .el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
& > div:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
& > div:nth-of-type(2) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap::after { // 去掉tabs下方边框
|
||||
height: 0 !important;
|
||||
}
|
||||
&>.el-tabs { // 底部对齐
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entity-detail__body {
|
||||
height: calc(100% - 70px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
&>div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(30, 1fr);
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: var(--chart-height-unit);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
.cn-panel {
|
||||
padding: 20px;
|
||||
grid-gap: 10px;
|
||||
|
||||
&>.cn-chart>.cn-chart__header {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
.header__title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.cn-chart__header {
|
||||
border-bottom: none;
|
||||
.header__title {
|
||||
color: #3976CB;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-overlay {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.entity-detail__dialog {
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.option-popper {
|
||||
.el-select-dropdown__item {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.header__operation-btn {
|
||||
margin-left: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ip-detail-as {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
//.cn-chart-select{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: 22px;
|
||||
// margin-left: 10px;
|
||||
// color: #0091ff;
|
||||
// border: 1px solid #0091ff;
|
||||
// border-radius: 2px;
|
||||
//}
|
||||
.cn-chart__single-value.cn-chart__single-value--icon-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.single-value-icon__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
.content__data {
|
||||
padding-bottom: 7%;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content__title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
&.single-value__content--with-chart {
|
||||
.content__title {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
}
|
||||
.single-value__unit {
|
||||
font-weight: normal;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--icon-right {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.single-value__icon {
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 7.5%;
|
||||
margin-bottom: 6%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
font-size: 24px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--chart {
|
||||
display: flex;
|
||||
padding: 13px 20px;
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.content__data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25%;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content__chart {
|
||||
flex: auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-table-pagination.el-pagination {
|
||||
padding: 12px 0 9px 0;
|
||||
text-align: center;
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
.date-range-box {
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
|
||||
.date-range-refresh {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.date-time-range {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date-range-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.panel-time-picker-hidden {
|
||||
visibility: hidden !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.date-range-text {
|
||||
font-size: 14px;
|
||||
min-width: 150px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 26px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
line-height: 26px;
|
||||
transition: width .3s;
|
||||
|
||||
.cn-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down {
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
padding: 14px 0 7px 8px;
|
||||
}
|
||||
|
||||
.calendar-popover-text {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.calendar-popover-text:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.calendar-popover-text:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.date-range-panel {
|
||||
height: 410px;
|
||||
width: 500px;
|
||||
background: #FFFFFF;
|
||||
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);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
z-index: 1;
|
||||
|
||||
.date-range-panel-content-left {
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-input {
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
padding: 0 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
outline: #169AFF;
|
||||
}
|
||||
|
||||
.content-input:focus {
|
||||
border: 1px solid #169AFF;
|
||||
}
|
||||
|
||||
.date-range-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.date-range-history-item {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-range-history-item:hover {
|
||||
/*font-weight: 600;*/
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-content-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
|
||||
.cn-icon-check {
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-top {
|
||||
height: 364px;
|
||||
}
|
||||
|
||||
.date-range-panel-bottom {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.09);
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.utc-str {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.cn-refresh-box{
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
|
||||
.cn-icon-refresh{
|
||||
font-size: 14px;
|
||||
}
|
||||
.cn-icon-dropdown{
|
||||
font-size: 14px;
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
.cn-icon-dropdown.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.refresh-list{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
|
||||
border-radius: 2px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
.refresh-list-item{
|
||||
width: 82px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 8px 0 8px 12px;
|
||||
}
|
||||
.refresh-list-item.active{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
.cn-icon-check{
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
.refresh-list-item:hover{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
.el-button--mini{
|
||||
padding: 4px 6px !important;
|
||||
min-height: 26px !important;
|
||||
}
|
||||
}
|
||||
68
src/assets/css/components/components/common/pagination.scss
Normal file
68
src/assets/css/components/components/common/pagination.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.pagination {
|
||||
padding-top: 8px;
|
||||
text-align: center;
|
||||
max-height: 42px;
|
||||
|
||||
.el-pagination {
|
||||
max-height: 42px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.pagination-size-select .el-input--mini .el-input__inner{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
margin:5px 5px 0 5px;
|
||||
padding: 0 4px;
|
||||
font-size: 13px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more {
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.btn-next, .btn-prev {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
input {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
.el-pager li.number {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.el-pager li.number.active {
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
}
|
||||
338
src/assets/css/components/components/entities/entities.scss
Normal file
338
src/assets/css/components/components/entities/entities.scss
Normal file
@@ -0,0 +1,338 @@
|
||||
.cn-entities {
|
||||
display: grid;
|
||||
grid-template-rows: 40px auto;
|
||||
grid-template-columns: 250px auto;
|
||||
grid-gap: 10px 20px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.entity-list {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.entity__loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: calc(50% - 15px);
|
||||
top: calc(50% - 15px);
|
||||
font-size: 30px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.entity-list__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 67px);
|
||||
margin: 10px 0 0 10px;
|
||||
width: calc(100% - 10px);
|
||||
overflow: hidden auto;
|
||||
|
||||
.cn-entity:hover{
|
||||
box-shadow: 0 0 10px #ccc;
|
||||
.content__title{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.cn-entity__header{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.header__icon{
|
||||
background: #8FA1BE;
|
||||
border: 2px solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
.cn-entity {
|
||||
box-sizing: border-box;
|
||||
margin: 0 10px 30px;
|
||||
width: 328px;
|
||||
height: 329px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
transition: all .2s;
|
||||
|
||||
&:hover .cn-entity__header .header__content {
|
||||
|
||||
}
|
||||
.cn-entity__header {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
width: 328px;
|
||||
height: 89px;
|
||||
box-sizing: border-box;
|
||||
transition: all .2s;
|
||||
|
||||
.header__bottom__line {
|
||||
width:288px;
|
||||
height:1px;
|
||||
border-top:solid 1px #eff2f5;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
}
|
||||
|
||||
.header__icon {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #e8fbf9;
|
||||
border: 2px solid #e8fbf9;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #23bf9a;
|
||||
}
|
||||
}
|
||||
.header__content {
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.content__desc{
|
||||
color: #999999;
|
||||
width: 200px;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 82px;
|
||||
}
|
||||
|
||||
.content__name {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
left: 82px;
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-entity__body {
|
||||
overflow: hidden;
|
||||
padding-top:10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
height:240px;
|
||||
|
||||
.body__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 30px;
|
||||
color: #666666;
|
||||
padding: 5px 0;
|
||||
justify-content: left;
|
||||
}
|
||||
.body__drawing-box {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
.chart__loading {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.body__drawing {
|
||||
position: absolute;
|
||||
padding: 10px 30px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body__row-label {
|
||||
padding-right: 0px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
color:#8FA1BE;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.body__row-value {
|
||||
width: calc(100% - 69px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
.body__statics {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
.entity-statics-down{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;
|
||||
|
||||
i {
|
||||
color:#5881B7;
|
||||
font-size:14px;
|
||||
padding-right:6px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-statics-up{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;;
|
||||
i {
|
||||
color: #62B16C;
|
||||
font-size: 14px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
.body__detail {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #8FA1BE;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.entity-list__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
margin-top: 23px;
|
||||
|
||||
.el-pager {
|
||||
.btn-quicknext + li {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ip-green {
|
||||
color: #23BF9A;
|
||||
}
|
||||
.domain-blue {
|
||||
color: #0290FF;
|
||||
}
|
||||
.app-orange {
|
||||
color: #FFA200;
|
||||
}
|
||||
|
||||
.entity-left-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border: 1px solid $--right-box-border-color;
|
||||
overflow: auto;
|
||||
|
||||
.filter__header {
|
||||
background-color: #E1E6ED;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.filter__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.filter__collapse {
|
||||
.el-collapse-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-collapse-item__header {
|
||||
padding-left: 15px;
|
||||
padding-top: 8px;
|
||||
color: #8FA1BE;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.collapse-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
.collapse-header__icon {
|
||||
padding-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
padding-top: 14px !important;
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 15px;
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
background-color: $--tree-node-hover-background-color;
|
||||
}
|
||||
.el-tree-node.is-expanded, .el-tree-node.is-current {
|
||||
&>.el-tree-node__content>.filter-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
height: 30px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
.filter-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 6px;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.filter__more {
|
||||
padding-left: 24px;
|
||||
line-height: 36px;
|
||||
color: #8FA1BE;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter__more.filter__more--disabled {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
237
src/assets/css/components/components/layout/layout.scss
Normal file
237
src/assets/css/components/components/layout/layout.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
.cn-container {
|
||||
height: calc(100% - 50px);
|
||||
background-color: $--content-right-background-color;
|
||||
width: 100%;
|
||||
&>div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-header {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
|
||||
.header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
.shrink-button {
|
||||
margin-left: 20px;
|
||||
color: #A4ADB5;
|
||||
cursor: pointer;
|
||||
transition: all linear .4s;
|
||||
|
||||
&.shrink-button--collapse {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
|
||||
.el-dropdown {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 50px;
|
||||
.el-dialog{
|
||||
width: 1000px;
|
||||
height: 70px;
|
||||
.el-dialog__header{
|
||||
.el-dialog__title{
|
||||
color: #fff;
|
||||
}
|
||||
.el-dialog__close{
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu--item {
|
||||
color: #778391;
|
||||
cursor: pointer;
|
||||
transition: color linear .2s;
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.header-menu--item:hover {
|
||||
color: #313336;
|
||||
}
|
||||
.personal {
|
||||
display: flex;
|
||||
.el-dropdown {
|
||||
margin: 0 10px 0 30px;
|
||||
height: 36px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-user {
|
||||
color: #333;
|
||||
i {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
.left-menu--pin-normal{
|
||||
}
|
||||
.left-menu--pin-reverse{
|
||||
}
|
||||
}
|
||||
.link-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cn-breakcrumb {
|
||||
padding-left: 15px;
|
||||
line-height: 50px;
|
||||
|
||||
.el-breadcrumb__item .el-breadcrumb__inner {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.entity-selector {
|
||||
.el-input__prefix {
|
||||
left: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-home {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: all .2s;
|
||||
.cn-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 240px);
|
||||
transition: all .2s;
|
||||
}
|
||||
}
|
||||
|
||||
// el-submenu active字色
|
||||
.el-submenu.is-active .el-submenu__title,
|
||||
.el-submenu.is-active .el-submenu__title>i,
|
||||
.el-menu-item.is-active {
|
||||
color: white !important;
|
||||
}
|
||||
// el-submenu active且open背景色
|
||||
.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
|
||||
background-color: mix($--color-white, $--menu-background-color, 7%) !important;
|
||||
}
|
||||
.is-active.is-opened {
|
||||
.el-submenu__title, .el-menu-item:not(.is-active) {
|
||||
background-color: $--menu-hover-background-color !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.is-active {
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: $--menu-background-color;
|
||||
|
||||
.el-menu-item .cn-icon, .el-submenu .cn-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
>.el-menu:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
}
|
||||
>.el-menu.menu-list {
|
||||
height: calc(100% - 110px);
|
||||
border-right: none;
|
||||
overflow: auto;
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
/*---滚动条默认显示样式--*/
|
||||
>.el-menu::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255,255,255,.4);
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
/*---鼠标点击滚动条显示样式--*/
|
||||
>.el-menu::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255,255,255,.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
/*---滚动条大小--*/
|
||||
>.el-menu::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
}
|
||||
/*---顶部logo---*/
|
||||
>.el-menu.header-logo {
|
||||
border-right: none;
|
||||
>.el-menu-item {
|
||||
padding: 13px 0 0 18px !important;
|
||||
height: 50px;
|
||||
border-right: 1px solid #202F3F;
|
||||
background-color: #182534 !important;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
|
||||
}
|
||||
|
||||
.system-name {
|
||||
padding-left: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
line-height: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--popup {
|
||||
.el-menu-item {
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.my-editor {
|
||||
margin-top: 4px;
|
||||
border: 1px solid $--right-box-border-color;
|
||||
|
||||
.prism-editor__textarea {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
.proxy-debug__dialog {
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.debug-wrapper{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 25% auto;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
padding:25px;
|
||||
|
||||
.item{
|
||||
border:1px solid #bbbbbb;
|
||||
color: #000C18;
|
||||
line-height: 60px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
background-color: #ffffff;
|
||||
border: 0;
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0;
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
color: #606266;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-send{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100px auto 80px;
|
||||
grid-template-rows: 60px;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
background-color: #ffffff;
|
||||
.el-input__inner{
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:hover {
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border: 1px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table__header, .el-table__body{
|
||||
witdh:100% !important;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.el-table__empty-block{
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.el-table th.is-leaf, .el-table td {
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-left: 1px solid #bbbbbb;
|
||||
border-right: 0px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.el-table{
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-right: 0px solid #bbbbbb;
|
||||
border-left: 0px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 23px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-table__body tr:hover >td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.el-table__body tr:focus >td {
|
||||
background-color: cadetblue;
|
||||
}
|
||||
.debug__params-delete:hover{
|
||||
color:#0091FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
background-color: #ffffff;
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 60px minmax(100px, 1fr) 60px minmax(100px, 2fr);
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
|
||||
pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
|
||||
.color-pre__style{
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
}
|
||||
.request-header {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.request-header-content{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
overflow:scroll;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-header {
|
||||
border-right:1px solid #bbbbbb;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-header-content {
|
||||
border-right:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-body {
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-body-content {
|
||||
padding-left: 5px;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-params{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
justify-items: center;
|
||||
|
||||
}
|
||||
|
||||
.sub-grid-params-add{
|
||||
width: 96%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows:100%;
|
||||
grid-row-gap: 0;
|
||||
grid-column-gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner{
|
||||
height: 60px;
|
||||
border-radius: 0;
|
||||
border:1px solid #bbbbbb;
|
||||
}
|
||||
.el-select .el-input .el-select__caret {
|
||||
line-height:60px;
|
||||
font-weight: bolder;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-color: #bbbbbb;
|
||||
}
|
||||
|
||||
.sub-grid-params-add .el-button {
|
||||
height: 38px;
|
||||
margin-top: 11px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
84
src/assets/css/components/components/table/common.scss
Normal file
84
src/assets/css/components/components/table/common.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.pop-title{
|
||||
margin-top: 7px;
|
||||
}
|
||||
.pop-custom {
|
||||
padding: 0 12px 12px 12px;
|
||||
border: 1px solid #EBEEF5;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 20px;
|
||||
width: 200px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
z-index: 999999;
|
||||
box-shadow: 0 0 10px #CCC;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-button--mini{
|
||||
padding: 5px 7px;
|
||||
}
|
||||
}
|
||||
.pop-custom-explore {
|
||||
top: 33px;
|
||||
}
|
||||
.relative-position .pop-custom {
|
||||
top: 33px;
|
||||
}
|
||||
.custom-labels {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.custom-labels i {
|
||||
color: #04b330;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
}
|
||||
.custom-label {
|
||||
padding: 2px 0 2px 25px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
}
|
||||
.custom-label:hover{
|
||||
color: #cccccc;
|
||||
background-color: #DCDFE6;
|
||||
}
|
||||
.custom-title{
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
.custom-label-disabled {
|
||||
cursor: not-allowed;
|
||||
background: #f1f3f4;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.custom-bottom-btns {
|
||||
margin-top: 7px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.unshow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-page .top-tools .top-tool-btn {
|
||||
height: 32.5px;
|
||||
width: 36px;
|
||||
border: 1px solid #DEDEDE;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background-color: #F9F9F9;
|
||||
transition: background-color linear .1s;
|
||||
}
|
||||
|
||||
.list-page {
|
||||
.el-input--small .el-input__inner {
|
||||
height: 32.4px;
|
||||
line-height: 32px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.galaxy-proxy-table {
|
||||
.js-code-highlight {
|
||||
height: 250px;
|
||||
|
||||
.highlight-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.highlight-box__copy-btn {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
pre code.hljs {
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
17
src/assets/css/components/index.scss
Normal file
17
src/assets/css/components/index.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@import './components/advancedSearch/advancedSearch';
|
||||
@import './components/charts/panel';
|
||||
@import './components/common/TimeRange/dateTimeRange';
|
||||
@import './components/common/TimeRange/timeRefresh';
|
||||
@import './components/common/pagination';
|
||||
// @import './components/entities/entities';
|
||||
@import './components/layout/layout';
|
||||
@import './components/rightBox/settings/chartBox';
|
||||
@import './components/setting/galaxyProxyDebug';
|
||||
@import './components/table/settings/galaxyProxyTable';
|
||||
@import './components/table/common';
|
||||
@import './views/charts/chart';
|
||||
@import './views/entityExplorer/entityExplorer';
|
||||
@import './views/entityExplorer/search/explorerSearch';
|
||||
@import './views/entityExplorer/entityFilter';
|
||||
@import './views/entityExplorer/entityList/entityList';
|
||||
@import './views/entityExplorer/entityList/card';
|
||||
342
src/assets/css/components/views/charts/chart.scss
Normal file
342
src/assets/css/components/views/charts/chart.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
.ip-detail__open-port {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.open-port__table {
|
||||
flex: 1;
|
||||
display: table;
|
||||
height: 100%;
|
||||
border-right: 1px solid $--right-box-border-color;
|
||||
|
||||
.open-port__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.open-port__table-row.open-port__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.open-port__table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 13px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.open-port__chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 30%;
|
||||
height: 100%;
|
||||
|
||||
.open-port__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
.open-port__chart-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ip-detail__hosted-domain, .app-detail__related-domain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hosted-domain__list, .related-domain__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 25%;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.hosted-domain__list-title, .related-domain__list-title {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.hosted-domain__list-body, .related-domain__list-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
.hosted-domain__list-row, .related-domain__list-row {
|
||||
padding: 5px 30px;
|
||||
color: #3976CB;
|
||||
i {
|
||||
color: #B8C1D1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hosted-domain__chart, .related-domain__chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
&>div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hosted-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.domain-detail-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.domain-detail-list__row {
|
||||
display: table-row;
|
||||
|
||||
.domain-detail-list__label {
|
||||
display: table-cell;
|
||||
padding: 13px 30px;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
width: 170px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.domain-detail-list__content {
|
||||
display: table-cell;
|
||||
padding: 13px 0 ;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
.crypto-eventList__record {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.record__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.record__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.record__table-row.record__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.record__table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.record_second{
|
||||
color:#7e8088;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.circle-red {
|
||||
color: #EC7F66;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
.record__table-cell:first-of-type {
|
||||
padding-left:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-detail__dns-record {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.dns-record__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.dns-record__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.dns-record__table-row.dns-record__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.dns-record__table-cell {
|
||||
display: table-cell;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
vertical-align: middle;
|
||||
padding: 13px 30px;
|
||||
}
|
||||
.dns-record__table-row:not(.dns-record__table-row--header) .dns-record__table-cell:last-of-type {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-detail__related-domain {
|
||||
flex-direction: row;
|
||||
.related-domain__list {
|
||||
border-bottom: none;
|
||||
}
|
||||
.related-domain__chart {
|
||||
flex-direction: row;
|
||||
border-left: 1px solid $--right-box-border-color;
|
||||
padding: 3vh 5vw;
|
||||
&>div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.related-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
color: #3976CB;
|
||||
}
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sankey-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.sankey__label {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
bottom: 50px;
|
||||
font-weight: bold;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.sankey__tooltip {
|
||||
width: 270px;
|
||||
height: 170px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sankey__tooltip-row {
|
||||
display: flex;
|
||||
padding: 2px 0;
|
||||
|
||||
.sankey__row-label {
|
||||
flex: 0 0 98px;
|
||||
color: #666;
|
||||
}
|
||||
.sankey__row-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.sankey__tooltip-table {
|
||||
padding: 2px 0 2px 22px;
|
||||
display: table;
|
||||
|
||||
.sankey__table-row {
|
||||
display: table-row;
|
||||
padding: 1px 0 4px 0;
|
||||
|
||||
.sankey__table-cell {
|
||||
display: table-cell;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
.sankey__table-cell:first-of-type {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.map-tooltip__title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.map-tooltip__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
line-height: 35px;
|
||||
}
|
||||
span:first-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position-icon {
|
||||
font-size: 24px;
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.circle1{
|
||||
position: relative;
|
||||
width:28px;
|
||||
height:28px;
|
||||
line-height: 28px;
|
||||
border:1px solid #dd674d;
|
||||
background:#FFFFFF;
|
||||
border-radius:50%;
|
||||
-moz-border-radius:50%;
|
||||
margin:auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.circle1::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: #dd674d;
|
||||
bottom: 3px;
|
||||
right: 3px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
z-index: 5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
background-color: #aeaeae;
|
||||
&.arrow-hor {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
&.arrow-hor.right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -8px;
|
||||
border: 5px solid transparent;
|
||||
border-left: 5px solid #aeaeae;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
.entity-explorer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
margin: 20px;
|
||||
height: calc(100% - 40px) !important;
|
||||
justify-content: center;
|
||||
transition: all linear .2s;
|
||||
|
||||
&.entity-explorer--show-list {
|
||||
background-color: unset;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.explorer-top-tools {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
|
||||
&>div {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.el-button--mini{
|
||||
padding: 4px 6px !important;
|
||||
min-height: 26px !important;
|
||||
&.active i {
|
||||
color: $--color-primary;
|
||||
}
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.explorer-foot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 17vh;
|
||||
|
||||
&>div {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.el-divider {
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background-color: #cecece;
|
||||
}
|
||||
.entity-overview {
|
||||
display: flex;
|
||||
|
||||
.overview-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
|
||||
span:first-of-type {
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:last-of-type {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.overview-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30px;
|
||||
|
||||
.right-row {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
|
||||
.right-label {
|
||||
width: 55px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.right-value {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
i {
|
||||
padding-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.cn-icon-increase {
|
||||
color: #23BF9A;
|
||||
}
|
||||
.cn-icon-active {
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.entity-filter-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
padding-top: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
.filter-case__header {
|
||||
background-color: #E1E6ED;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.entity-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #E7EAED;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 15px;
|
||||
background-color: white;
|
||||
|
||||
.filter__header {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
border-bottom: 1px solid #EFF2F5;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.filter__body {
|
||||
padding: 11px 0 21px 0;
|
||||
|
||||
.filter__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all linear .2s;
|
||||
|
||||
&:hover, &.filter__row--active {
|
||||
background-color: #F3F7FA;
|
||||
}
|
||||
.row__label {
|
||||
font-size: 14px;
|
||||
i {
|
||||
color: #8FA1BE;
|
||||
}
|
||||
span {
|
||||
padding-left: 6px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.row__value {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
.cn-entity--block {
|
||||
box-sizing: border-box;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 321px;
|
||||
height: 329px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
transition: all .2s;
|
||||
|
||||
&:hover .cn-entity__header .header__content {
|
||||
|
||||
}
|
||||
.cn-entity__header {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 89px;
|
||||
box-sizing: border-box;
|
||||
transition: all .2s;
|
||||
|
||||
.header__bottom__line {
|
||||
width:288px;
|
||||
height:1px;
|
||||
border-top:solid 1px #eff2f5;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
}
|
||||
|
||||
.header__icon {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #e8fbf9;
|
||||
border: 2px solid #e8fbf9;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #23bf9a;
|
||||
}
|
||||
}
|
||||
.header__content {
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.content__desc{
|
||||
color: #999999;
|
||||
width: 200px;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 82px;
|
||||
}
|
||||
|
||||
.content__name {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
left: 82px;
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-entity__body {
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
height:240px;
|
||||
|
||||
.body__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 30px;
|
||||
color: #666666;
|
||||
padding: 4px 0;
|
||||
justify-content: left;
|
||||
}
|
||||
.body__drawing-box {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
.chart__loading {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.body__drawing {
|
||||
position: absolute;
|
||||
padding: 10px 30px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body__row-label {
|
||||
padding-right: 0px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
color:#8FA1BE;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.body__row-value {
|
||||
width: calc(100% - 69px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
.body__statics {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
.entity-statics-down{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;
|
||||
|
||||
i {
|
||||
color:#5881B7;
|
||||
font-size:14px;
|
||||
padding-right:6px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-statics-up{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;;
|
||||
i {
|
||||
color: #62B16C;
|
||||
font-size: 14px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
.body__detail {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #8FA1BE;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.entity-list {
|
||||
width: calc(100% - 290px);
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
|
||||
.entity-list__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.entity-list--block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 67px);
|
||||
width: calc(100% - 10px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.explorer-search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
background-image: url('~@/assets/img/cn-explore-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%;
|
||||
|
||||
&.explorer-search--show-list {
|
||||
flex: 0 0 40px;
|
||||
background-image: none;
|
||||
}
|
||||
.explorer-search__title {
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
font-size: 42px;
|
||||
color: #3976CB;
|
||||
}
|
||||
.explorer-search__input-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
&.explorer-search__input-case--question-mark-in-line {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
|
||||
.explorer-search__input {
|
||||
height: 40px;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
.search-symbol-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.explorer-search__input {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 66px;
|
||||
}
|
||||
.explorer-search__foot {
|
||||
display: flex;
|
||||
padding-top: 18px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.foot__item {
|
||||
font-size: 14px;
|
||||
color: #3976CB;
|
||||
|
||||
.el-divider {
|
||||
background-color: #3976CB;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user