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 {
position: relative;
.chart-list {
.vue-grid-layout>.vue-grid-item {
.cn-chart {
height: 100% !important;
.cn-chart__app-basic {
.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;
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%;
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;
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;
}
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;
}
}
}
.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;
}
}
}
}

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

@@ -1,72 +1,63 @@
.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%;
.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;
}
}
}
.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;
}
}
}

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

@@ -1,38 +1,29 @@
.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;
}
}
}
}
.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;
}
}
}

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

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

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

@@ -1,223 +1,214 @@
.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 {
&.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;
}
&.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
}
}
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
}
}
}
}

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

@@ -1,81 +1,71 @@
.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%;
.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;
}
}
}
.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;
}
}
}

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

@@ -1,29 +1,20 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout>.vue-grid-item {
.cn-chart {
height: 100% !important;
.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__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;
}
}

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

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