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

style: 样式调整

Browse Source
This commit is contained in:
@changcode
2022-01-26 14:34:51 +08:00
parent 78e5b7b76d
commit 4f5afe8433
8 changed files with 470 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/assets/css/components/views/charts/chartAppBasicInfo.scss
View File

@@ -1,109 +1,99 @@
.cn-panel2 { .cn-chart__app-basic {
position: relative; display: flex;
.chart-list { flex-direction: column;
.vue-grid-layout>.vue-grid-item { .cn-chart__body {
.cn-chart { flex: auto;
height: 100% !important; display: flex;
.cn-chart__app-basic { .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; display: flex;
flex-direction: column; align-items: center;
.cn-chart__body { font-size: 28px;
flex: auto; color: $--color-primary;
display: flex; }
.el-descriptions { }
padding-top: 30px; .single-value-color-g.single-value__icon {
} background-color: limegreen;
&>.el-descriptions { i {
flex: 0 0 350px; color: green;
padding: 30px 36px; }
} }
.chart-location { .single-value-color-y.single-value__icon {
display: flex; background-color: yellow;
flex: 1; i {
flex-direction: column; color: darkorange;
padding: 0 20px 20px 0; }
} }
.el-descriptions__content { .single-value__content {
color: #3976CB; display: flex;
} flex-direction: column;
.cn-chart__body-single { max-width: 60%;
display: flex; padding-left: 10px;
.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 { div:nth-of-type(1) {
display: flex; margin-bottom: 10px;
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) { .content__data {
margin-bottom: 10px; padding-bottom: 7%;
} font-size: 24px;
color: #333333;
.content__data { font-weight: bold;
padding-bottom: 7%; }
font-size: 24px; .content__title {
color: #333333; overflow: hidden;
font-weight: bold; white-space: nowrap;
} text-overflow: ellipsis;
.content__title { font-size: 16px;
overflow: hidden; color: #666666;
white-space: nowrap; }
text-overflow: ellipsis; &.single-value__content--with-chart {
font-size: 16px; .content__title {
color: #666666; border-bottom: 1px solid $--content-right-background-color;
}
&.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;
}
}
}
} }
} }
.single-value__unit {
font-weight: normal;
padding-left: 10px;
color: #666;
font-size: 20px;
}
} }
} }
} }

125
src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
View File

@@ -1,72 +1,63 @@
.cn-panel2 { .cn-chart__table.eventList {
position: relative; display: flex;
.chart-list { flex-direction: column;
.vue-grid-layout>.vue-grid-item { height: 100%;
.cn-chart { width: 100%;
.cn-chart__table.eventList { .cn-chart__body {
display: flex; flex: auto;
flex-direction: column; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
.cn-chart__body { .el-descriptions {
flex: auto; padding-top: 30px;
display: flex; }
height: 100%; &>.el-descriptions {
width: 100%; flex: 0 0 350px;
.el-descriptions { padding: 30px 36px;
padding-top: 30px; }
} .chart-location {
&>.el-descriptions { display: flex;
flex: 0 0 350px; flex: 1;
padding: 30px 36px; flex-direction: column;
} padding: 0 20px 20px 0;
.chart-location { }
display: flex; .el-descriptions__content {
flex: 1; color: #3976CB;
flex-direction: column; }
padding: 0 20px 20px 0; .crypto-eventList__record {
} display: flex;
.el-descriptions__content { height: 100%;
color: #3976CB; width: 100%;
} .record__table {
.crypto-eventList__record { display: table;
display: flex; height: 100%;
height: 100%; width: 100%;
width: 100%;
.record__table {
display: table;
height: 100%;
width: 100%;
.record__table-row { .record__table-row {
display: table-row; display: table-row;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
.record__table-row.record__table-row--header { .record__table-row.record__table-row--header {
padding: 13px 30px 0; padding: 13px 30px 0;
height: 40px; height: 40px;
color: #6B717B; color: #6B717B;
} }
.record__table-cell { .record__table-cell {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding: 15px 10px; padding: 15px 10px;
.record_second{ .record_second{
color:#7e8088; color:#7e8088;
font-size:12px; font-size:12px;
}
.circle-red {
color: #EC7F66;
font-size: 28px;
}
}
.record__table-cell:first-of-type {
padding-left:30px;
}
}
}
} }
.circle-red {
color: #EC7F66;
font-size: 28px;
}
}
.record__table-cell:first-of-type {
padding-left:30px;
} }
} }
} }

61
src/assets/css/components/views/charts/chartDomainDnsRecord.scss
View File

@@ -1,38 +1,29 @@
.cn-panel2 { .cn-chart__dns-record {
position: relative; display: flex;
.chart-list { flex-direction: column;
.vue-grid-layout>.vue-grid-item { height: 100%;
.cn-chart { width: 100%;
height: 100% !important; .cn-chart__body {
.cn-chart__dns-record { flex: auto;
display: flex; display: flex;
flex-direction: column; height: 100%;
height: 100%; width: 100%;
width: 100%; .el-descriptions {
.cn-chart__body { padding-top: 30px;
flex: auto; }
display: flex; &>.el-descriptions {
height: 100%; flex: 0 0 350px;
width: 100%; padding: 30px 36px;
.el-descriptions { }
padding-top: 30px; .chart-location {
} display: flex;
&>.el-descriptions { flex: 1;
flex: 0 0 350px; flex-direction: column;
padding: 30px 36px; padding: 0 20px 20px 0;
} }
.chart-location { .el-descriptions__content {
display: flex; color: #3976CB;
flex: 1;
flex-direction: column;
padding: 0 20px 20px 0;
}
.el-descriptions__content {
color: #3976CB;
}
}
}
}
} }
} }
} }

15
src/assets/css/components/views/charts/chartDomainWhois.scss
View File

@@ -1,13 +1,4 @@
.cn-panel2 { .cn-chart__whois {
position: relative; overflow: auto;
.chart-list {
.vue-grid-layout>.vue-grid-item {
.cn-chart {
height: 100% !important;
.cn-chart__whois {
overflow: auto;
}
}
}
}
} }

423
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -1,223 +1,214 @@
.cn-panel2 { .cn-chart__single-value {
position: relative; &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
.chart-list { .single-value__icon {
.vue-grid-layout>.vue-grid-item { width: 38px;
.cn-chart { height: 38px;
height: 100% !important; i {
.cn-chart__single-value { font-size: 15px;
&.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left { }
.single-value__icon { }
width: 38px; .single-value__content {
height: 38px; .content__data {
i { font-size: 14px;
font-size: 15px; }
} .content__title {
} font-size: 12px;
.single-value__content { }
.content__data { }
font-size: 14px; }
} &.cn-chart__single-value--icon-left {
.content__title { display: flex;
font-size: 12px; 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;
} }
&.cn-chart__single-value--icon-left { i {
display: flex; position: absolute;
align-items: center; top: 50%;
height: 100%; left: 50%;
width: 100%; transform: translate(-50%,-50%);
.single-value-icon__box { font-size: 24px;
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
}
}
} }
} }
} }
.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
}
} }
} }
} }

142
src/assets/css/components/views/charts/chartTable.scss
View File

@@ -1,81 +1,71 @@
.cn-panel2 { .active-ip.cn-chart__table {
position: relative; height: calc(100% - 47px) !important;
.chart-list { }
.vue-grid-layout>.vue-grid-item { .cn-chart__table{
.cn-chart { display: flex;
height: 100% !important; flex-direction: column;
.active-ip.cn-chart__table { height: 100%;
height: calc(100% - 47px) !important; .cn-chart__body {
} flex: auto;
.cn-chart__table{ overflow-y: auto;
display: flex; height: 100%;
flex-direction: column; width: 100%;
height: 100%;
.cn-chart__body {
flex: auto;
overflow-y: auto;
height: 100%;
width: 100%;
.el-table { .el-table {
padding: 0 10px; padding: 0 10px;
.el-table__body-wrapper.is-scrolling-none { .el-table__body-wrapper.is-scrolling-none {
height: 100%; height: 100%;
overflow-y: auto; 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;
}
}
}
} }
&: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;
} }
} }
} }

45
src/assets/css/components/views/charts/ipBasicInfo.scss
View File

@@ -1,29 +1,20 @@
.cn-panel2 { .cn-chart__ip-basic {
position: relative; display: flex;
.chart-list { .el-descriptions {
.vue-grid-layout>.vue-grid-item { padding-top: 30px;
.cn-chart { }
height: 100% !important; &>.el-descriptions {
.cn-chart__ip-basic { flex: 0 0 350px;
display: flex; padding: 30px 36px;
.el-descriptions { }
padding-top: 30px; .chart-location {
} display: flex;
&>.el-descriptions { flex: 1;
flex: 0 0 350px; flex-direction: column;
padding: 30px 36px; padding: 0 20px 20px 0;
} }
.chart-location { .el-descriptions__content {
display: flex; color: #3976CB;
flex: 1;
flex-direction: column;
padding: 0 20px 20px 0;
}
.el-descriptions__content {
color: #3976CB;
}
}
}
}
} }
} }

2
src/assets/css/components/views/charts/panel.scss
View File

@@ -196,7 +196,7 @@
&>.cn-chart { &>.cn-chart {
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
height: calc(100% - 47px); height: 100%;
width: 100%; width: 100%;
.chart-drawing { .chart-drawing {
height: 100%; height: 100%;