style: 增加 No deta 占位样式,调整主题样式
This commit is contained in:
@@ -84,6 +84,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.nz-panel-chart {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.nz-panel-chart__no-data {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -12px;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
font-family: NotoSans;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.panel-chart.panel-chart--fullscreen {
|
.panel-chart.panel-chart--fullscreen {
|
||||||
border: none;
|
border: none;
|
||||||
@@ -99,6 +113,9 @@
|
|||||||
div:nth-of-type(2) {
|
div:nth-of-type(2) {
|
||||||
background-color: $--background-color-empty !important;
|
background-color: $--background-color-empty !important;
|
||||||
border-color: $--border-color-light !important;
|
border-color: $--border-color-light !important;
|
||||||
|
div div {
|
||||||
|
color: $--color-text-regular;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.nz-chart__tooltip {
|
.nz-chart__tooltip {
|
||||||
.row__label,.row__value {
|
.row__label,.row__value {
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
.multiple-time-box {
|
.multiple-time-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4px;
|
||||||
.loading-font {
|
.loading-font {
|
||||||
color: #232f3e !important;
|
color: #232f3e !important;
|
||||||
}
|
}
|
||||||
@@ -52,12 +56,6 @@
|
|||||||
}
|
}
|
||||||
.calendar-popover-text {
|
.calendar-popover-text {
|
||||||
}
|
}
|
||||||
.multiple-time-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.compare-box .nz-icon-compare {
|
.compare-box .nz-icon-compare {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -717,4 +717,17 @@
|
|||||||
}
|
}
|
||||||
.leaflet-bottom{
|
.leaflet-bottom{
|
||||||
z-index: 409;
|
z-index: 409;
|
||||||
|
.leaflet-control-zoom {
|
||||||
|
a {
|
||||||
|
background-color: $--background-color-base;
|
||||||
|
i {
|
||||||
|
color: $--overview-icon-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.leaflet-disabled {
|
||||||
|
i {
|
||||||
|
color: $--overview-disabled-icon-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,6 +10,16 @@
|
|||||||
.table-list {
|
.table-list {
|
||||||
height: calc(100% - 58px);
|
height: calc(100% - 58px);
|
||||||
}
|
}
|
||||||
|
.no-data {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -54px;
|
||||||
|
.no-data-div {
|
||||||
|
color: $--color-text-regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel .el-table {
|
.panel .el-table {
|
||||||
|
|||||||
@@ -174,6 +174,8 @@ $--overview-project-icon-color: $--time-picker-hover-color;
|
|||||||
$--overview-module-icon-color: $--time-picker-hover-color;
|
$--overview-module-icon-color: $--time-picker-hover-color;
|
||||||
$--overview-endpoint-icon-color: $--time-picker-hover-color;
|
$--overview-endpoint-icon-color: $--time-picker-hover-color;
|
||||||
$--overview-alert-icon-color: $--time-picker-hover-color;
|
$--overview-alert-icon-color: $--time-picker-hover-color;
|
||||||
|
$--overview-disabled-icon-color: $--color-text-disabled;
|
||||||
|
$--overview-icon-color: $--color-text-primary;
|
||||||
// background
|
// background
|
||||||
$--overview-module-icon-background-color: #5F80D5;
|
$--overview-module-icon-background-color: #5F80D5;
|
||||||
$--overview-endpoint-icon-background-color: #7F87EA;
|
$--overview-endpoint-icon-background-color: #7F87EA;
|
||||||
|
|||||||
@@ -171,6 +171,8 @@ $--overview-project-icon-color: #F6B275;
|
|||||||
$--overview-module-icon-color: #7AD0BC;
|
$--overview-module-icon-color: #7AD0BC;
|
||||||
$--overview-endpoint-icon-color: #969DEA;
|
$--overview-endpoint-icon-color: #969DEA;
|
||||||
$--overview-alert-icon-color: #EE9A87;
|
$--overview-alert-icon-color: #EE9A87;
|
||||||
|
$--overview-disabled-icon-color: $--color-text-secondary;
|
||||||
|
$--overview-icon-color: #18171D;
|
||||||
// background
|
// background
|
||||||
$--overview-module-icon-background-color: $--value-color;
|
$--overview-module-icon-background-color: $--value-color;
|
||||||
$--overview-endpoint-icon-background-color: $--value-color;
|
$--overview-endpoint-icon-background-color: $--value-color;
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="nz-chart__no-data"></div>
|
<div class="nz-panel-chart">
|
||||||
|
<div class="nz-panel-chart__no-data">No data</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -7,7 +9,3 @@ export default {
|
|||||||
name: 'chartNoData'
|
name: 'chartNoData'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
></panel-chart>
|
></panel-chart>
|
||||||
</grid-item>
|
</grid-item>
|
||||||
</grid-layout>
|
</grid-layout>
|
||||||
|
<!-- noData -->
|
||||||
<div v-if="noData" class="no-data">
|
<div v-if="noData" class="no-data">
|
||||||
<svg aria-hidden="true" class="icon">
|
<svg aria-hidden="true" class="icon">
|
||||||
<use xlink:href="#nz-icon-no-data-panel"></use>
|
<use xlink:href="#nz-icon-no-data-panel"></use>
|
||||||
|
|||||||
@@ -94,6 +94,7 @@
|
|||||||
@on-refresh-time="refreshTime"
|
@on-refresh-time="refreshTime"
|
||||||
@on-remove-chart="delChart"
|
@on-remove-chart="delChart"
|
||||||
@on-add-group-item-chart="addGroupItem"
|
@on-add-group-item-chart="addGroupItem"
|
||||||
|
:loading="chartListLoading"
|
||||||
></chart-list>
|
></chart-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user