From 4b74f3de5a20713e430eae3671a3b0325f193216 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Fri, 21 Jan 2022 13:07:11 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E5=AF=B9panel=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E8=BF=9B=E8=A1=8C=E5=8D=95?= =?UTF-8?q?=E7=8B=ACscss=E6=96=87=E4=BB=B6=E7=9A=84=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/components/index.scss | 9 +- .../views/charts/chartAppBasicInfo.scss | 110 +++ .../charts/chartCryptocurrencyEventList.scss | 74 ++ .../views/charts/chartDomainDnsRecord.scss | 38 + .../views/charts/chartDomainWhois.scss | 13 + ...enPortBar.scss => chartIpOpenPortBar.scss} | 0 .../views/charts/chartSingleValue.scss | 223 ++++++ .../components/views/charts/chartTable.scss | 81 ++ .../css/components/views/charts/panel.scss | 691 ++---------------- src/views/charts/Chart2.vue | 56 +- .../charts/charts/ChartActiveIpTable.vue | 4 +- src/views/charts/charts/ChartAppBasicInfo.vue | 28 +- src/views/charts/charts/ChartDomainWhois.vue | 1 - src/views/charts/charts/ChartTable.vue | 8 +- 14 files changed, 642 insertions(+), 694 deletions(-) create mode 100644 src/assets/css/components/views/charts/chartAppBasicInfo.scss create mode 100644 src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss create mode 100644 src/assets/css/components/views/charts/chartDomainDnsRecord.scss create mode 100644 src/assets/css/components/views/charts/chartDomainWhois.scss rename src/assets/css/components/views/charts/{ChartIpOpenPortBar.scss => chartIpOpenPortBar.scss} (100%) create mode 100644 src/assets/css/components/views/charts/chartSingleValue.scss create mode 100644 src/assets/css/components/views/charts/chartTable.scss diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index 348545dc..5c1e6d4b 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -19,5 +19,12 @@ @import './views/entityExplorer/entityList/row'; @import 'views/entityExplorer/entityList/detail-overview'; @import './views/charts/panel'; -@import 'views/charts/ChartIpOpenPortBar'; +@import 'views/charts/chartIpOpenPortBar'; +@import './views/charts/chartTable'; +@import './views/charts/chartSingleValue'; +@import './views/charts/chartCryptocurrencyEventList'; +@import './views/charts/chartAppBasicInfo'; +@import './views/charts/chartDomainDnsRecord'; +@import './views/charts/chartDomainWhois'; + //@import '../chart'; diff --git a/src/assets/css/components/views/charts/chartAppBasicInfo.scss b/src/assets/css/components/views/charts/chartAppBasicInfo.scss new file mode 100644 index 00000000..36acb01a --- /dev/null +++ b/src/assets/css/components/views/charts/chartAppBasicInfo.scss @@ -0,0 +1,110 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + height: 100% !important; + .cn-chart__app-basic { + display: flex; + flex-direction: column; + .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__body-single { + display: flex; + .cn-chart__body-single-table { + display: flex; + width: 250px; + 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-color-g.single-value__icon { + background-color: limegreen; + i { + color: green; + } + } + .single-value-color-y.single-value__icon { + background-color: yellow; + i { + color: darkorange; + } + } + .single-value__content { + display: flex; + flex-direction: column; + max-width: 60%; + padding-left: 10px; + + div:nth-of-type(1) { + margin-bottom: 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; + } + } + } + } + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss new file mode 100644 index 00000000..e7d344e1 --- /dev/null +++ b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss @@ -0,0 +1,74 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + .cn-chart__table.eventList { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + .cn-chart__body { + flex: auto; + display: flex; + height: 100%; + width: 100%; + .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; + } + .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: 15px 10px; + .record_second{ + color:#7e8088; + font-size:12px; + } + .circle-red { + color: #EC7F66; + font-size: 28px; + } + } + .record__table-cell:first-of-type { + padding-left:30px; + } + } + } + } + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss new file mode 100644 index 00000000..ca99b284 --- /dev/null +++ b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss @@ -0,0 +1,38 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + height: 100% !important; + cn-chart__dns-record { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + .cn-chart__body { + flex: auto; + display: flex; + height: 100%; + width: 100%; + .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; + } + } + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/chartDomainWhois.scss b/src/assets/css/components/views/charts/chartDomainWhois.scss new file mode 100644 index 00000000..708438a4 --- /dev/null +++ b/src/assets/css/components/views/charts/chartDomainWhois.scss @@ -0,0 +1,13 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + height: 100% !important; + .cn-chart__whois { + overflow: auto; + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/ChartIpOpenPortBar.scss b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss similarity index 100% rename from src/assets/css/components/views/charts/ChartIpOpenPortBar.scss rename to src/assets/css/components/views/charts/chartIpOpenPortBar.scss diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss new file mode 100644 index 00000000..401436ce --- /dev/null +++ b/src/assets/css/components/views/charts/chartSingleValue.scss @@ -0,0 +1,223 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + height: 100% !important; + .cn-chart__single-value { + &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left { + .single-value__icon { + width: 38px; + height: 38px; + i { + font-size: 15px; + } + } + .single-value__content { + .content__data { + font-size: 14px; + } + .content__title { + font-size: 12px; + } + } + } + &.cn-chart__single-value--icon-left { + display: flex; + align-items: center; + height: 100%; + width: 100%; + .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--icon-right { + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + .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--icon-right--color { + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + .single-value__content { + display: flex; + height: 100%; + width: 100%; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + .single-value-icon__box { + padding-right: 30px; + .single-value__icon { + border-radius: 50%; + position: relative; + margin-right: 7.5%; + margin-top: 30%; + .cn-icon-svg { + width: 50px; + height: 50px; + vertical-align: middle; + fill: currentColor; + overflow: hidden; + } + i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 24px; + } + } + } + .single-value__data{ + display: flex; + height: 100%; + flex-direction: column; + padding-left: 20px; + .content__title { + display: flex; + align-items: end; + height: 50%; + font-size: 16px; + color: #666666; + padding-bottom: 5px; + } + .content__data { + display: flex; + padding-top: 5%; + height: 50%; + flex: auto; + font-size: 24px; + color: #333333; + font-weight: bold; + } + } + } + } + &.cn-chart__single-value--chart { + display: flex; + padding: 13px 20px; + height: 100%; + width: 100%; + .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 + } + } + } + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss new file mode 100644 index 00000000..d7d68894 --- /dev/null +++ b/src/assets/css/components/views/charts/chartTable.scss @@ -0,0 +1,81 @@ +.cn-panel2 { + position: relative; + .chart-list { + .vue-grid-layout>.vue-grid-item { + .cn-chart { + height: 100% !important; + .active-ip.cn-chart__table { + height: calc(100% - 47px) !important; + } + .cn-chart__table{ + display: flex; + flex-direction: column; + height: 100%; + .cn-chart__body { + flex: auto; + overflow-y: auto; + height: 100%; + width: 100%; + + .el-table { + padding: 0 10px; + .el-table__body-wrapper.is-scrolling-none { + height: 100%; + overflow-y: auto; + } + + &:before { + height: 0; + } + thead { + color: #333; + } + th.is-leaf, td { + border-bottom: none; + } + th { + padding-bottom: 5px; + } + td { + padding: 4px 0; + color: #333; + } + } + .active-ip__icon { + overflow: hidden; + position: absolute; + top: 8px; + left: 6px; + display: flex; + justify-content: center; + justify-items: center; + align-items: center; + width: 23px; + height: 23px; + border-radius: 50%; + background: #e8fbf9; + border: 2px solid #e8fbf9; + } + .ip-green { + color: #23BF9A; + } + .active-ip__content { + position: absolute; + top: 7px; + left: 35px; + overflow: hidden; + } + } + .chart-table-pagination.el-pagination { + padding: 12px 0 9px 0; + text-align: center; + + .el-pagination__jump { + margin-left: 10px; + } + } + } + } + } + } +} diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss index 29c690b2..2d7b7f3b 100644 --- a/src/assets/css/components/views/charts/panel.scss +++ b/src/assets/css/components/views/charts/panel.scss @@ -1,13 +1,11 @@ .cn-panel2 { position: relative; - .panel__time { position: absolute; right: 10px; top: 10px; z-index: 1; display: flex; - &>div { margin-left: 10px; } @@ -22,7 +20,6 @@ display: flex; position: relative; flex-direction: column; - &.panel-chart--title-chart { border: none; background-color: transparent; @@ -201,437 +198,11 @@ border-radius: 2px; height: calc(100% - 47px); width: 100%; - .chart-drawing { height: 100%; width: 100%; } - &>.cn-chart__single-value { - &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left { - .single-value__icon { - width: 38px; - height: 38px; - - i { - font-size: 15px; - } - } - .single-value__content { - .content__data { - font-size: 14px; - } - .content__title { - font-size: 12px; - } - } - } - &.cn-chart__single-value--icon-left { - display: flex; - align-items: center; - height: 100%; - width: 100%; - - .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--icon-right { - display: flex; - flex-direction: row-reverse; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - - .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--icon-right--color { - display: flex; - flex-direction: row-reverse; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - - .single-value__content { - display: flex; - height: 100%; - width: 100%; - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - - .single-value-icon__box { - padding-right: 30px; - .single-value__icon { - border-radius: 50%; - position: relative; - margin-right: 7.5%; - margin-top: 30%; - - .cn-icon-svg { - width: 50px; - height: 50px; - vertical-align: middle; - fill: currentColor; - overflow: hidden; - } - - i { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - font-size: 24px; - } - } - } - - .single-value__data{ - display: flex; - height: 100%; - flex-direction: column; - padding-left: 20px; - - .content__title { - display: flex; - align-items: end; - height: 50%; - font-size: 16px; - color: #666666; - padding-bottom: 5px; - } - .content__data { - display: flex; - padding-top: 5%; - height: 50%; - flex: auto; - font-size: 24px; - color: #333333; - font-weight: bold; - } - } - - } - } - &.cn-chart__single-value--chart { - display: flex; - padding: 13px 20px; - height: 100%; - width: 100%; - - .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 - } - } - } - } - &>.cn-chart__whois { - overflow: auto; - } - &>.cn-chart__ip-basic { - 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__block { - .cn-chart { - border: 1px solid #E7EAED; - } - /* detail页面block下的五连图的标题样式改变 */ - .cn-chart__group .cn-chart__echarts { - .cn-chart__header { - border-bottom: none !important; - - .header__title { - font-size: 14px !important; - color: #3976CB !important; - } - } - } - } - &>.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{ - height: 100%; - width: 100%; - .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; - height: 100%; - width: 100%; - - .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; - } - } - .active-ip__icon { - overflow: hidden; - position: absolute; - top: 8px; - left: 6px; - display: flex; - justify-content: center; - justify-items: center; - align-items: center; - width: 23px; - height: 23px; - border-radius: 50%; - background: #e8fbf9; - border: 2px solid #e8fbf9; - } - .ip-green { - color: #23BF9A; - } - .active-ip__content { - position: absolute; - top: 7px; - left: 35px; - overflow: hidden; - } - } - } - &>.cn-chart__echarts { + &>.cn-chart__echarts,&>.cn-chart__table { .cn-chart__header { border-bottom: 1px solid $--content-right-background-color; .header__operations { @@ -709,6 +280,66 @@ } } } + } + &>.cn-chart__ip-basic { + 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__block { + .cn-chart { + border: 1px solid #E7EAED; + } + /* detail页面block下的五连图的标题样式改变 */ + .cn-chart__group .cn-chart__echarts { + .cn-chart__header { + border-bottom: none !important; + + .header__title { + font-size: 14px !important; + color: #3976CB !important; + } + } + } + } + &>.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__echarts { .cn-chart__body { overflow: hidden auto; @@ -767,7 +398,6 @@ } } } - .chart-table-pagination.el-pagination { padding: 12px 0 9px 0; text-align: center; @@ -778,205 +408,6 @@ margin-left: 10px; } } - &>.cn-chart__app-basic { - display: flex; - flex-direction: column; - .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__body-single { - display: flex; - .cn-chart__body-single-table { - display: flex; - width: 250px; - 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-color-g.single-value__icon { - background-color: limegreen; - i { - color: green; - } - } - .single-value-color-y.single-value__icon { - background-color: yellow; - i { - color: darkorange; - } - } - .single-value__content { - display: flex; - flex-direction: column; - max-width: 60%; - padding-left: 10px; - - div:nth-of-type(1) { - margin-bottom: 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__dns-record { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - .cn-chart__body { - flex: auto; - display: flex; - height: 100%; - width: 100%; - .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__table.eventList { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - .cn-chart__body { - flex: auto; - display: flex; - height: 100%; - width: 100%; - .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; - } - .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; - } - } - } - } - } } .chart__legend { width: calc(100% - 40px); diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue index 1f1fdff5..448d1453 100644 --- a/src/views/charts/Chart2.vue +++ b/src/views/charts/Chart2.vue @@ -70,12 +70,12 @@ > diff --git a/src/views/charts/charts/ChartActiveIpTable.vue b/src/views/charts/charts/ChartActiveIpTable.vue index b774f2ca..ef841198 100644 --- a/src/views/charts/charts/ChartActiveIpTable.vue +++ b/src/views/charts/charts/ChartActiveIpTable.vue @@ -1,8 +1,8 @@ diff --git a/src/views/charts/charts/ChartDomainWhois.vue b/src/views/charts/charts/ChartDomainWhois.vue index 4eaf299c..1220ba8e 100644 --- a/src/views/charts/charts/ChartDomainWhois.vue +++ b/src/views/charts/charts/ChartDomainWhois.vue @@ -1,5 +1,4 @@