360 lines
7.1 KiB
SCSS
360 lines
7.1 KiB
SCSS
.overview{
|
|
height: 100%;
|
|
}
|
|
.overview-content-header{
|
|
display: flex;
|
|
padding: 8px 0 2px 0;
|
|
}
|
|
.overview-content-header .header-title{
|
|
flex:13;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700;
|
|
margin-left: 15px;
|
|
}
|
|
.overview-content-header .header-tool{
|
|
flex: 2;
|
|
height: 35px;
|
|
}
|
|
.header-tool .tool-container{
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
.tool-container .time{
|
|
flex: 4;
|
|
font-size: 1rem !important;
|
|
display: inline-block;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #333333;
|
|
vertical-align: middle;
|
|
}
|
|
.tool-container .date{
|
|
flex: 4;
|
|
height: 35px;
|
|
}
|
|
.date .week{
|
|
font-size: 0.7rem;
|
|
line-height: 1.3rem;
|
|
}
|
|
.date .sys-date{
|
|
color: #333333;
|
|
font-size: 0.75rem;
|
|
line-height: 0.75rem;
|
|
}
|
|
.tool-container .operation{
|
|
flex: 2;
|
|
display: inline-block;
|
|
line-height: 35px;
|
|
}
|
|
.operation .screen-icon{
|
|
font-size: 1.35rem !important;
|
|
cursor: pointer;
|
|
color: #666666;
|
|
}
|
|
.overview-content{
|
|
height: calc(100% - 42px);
|
|
width: 100%;
|
|
}
|
|
.overview-content .content-row-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: flex-start;
|
|
}
|
|
.overview-content .content-row-box:first-of-type {
|
|
height: 14%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(2) {
|
|
height: 46%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(3) {
|
|
height: 39%;
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(2) .content-col-box {
|
|
width: calc(50% - 10px);
|
|
}
|
|
.overview-content .content-row-box:nth-of-type(3) .content-col-box {
|
|
width: calc(33.33% - 10px);
|
|
}
|
|
.content-row-box .content-col-box{
|
|
margin: 5px;
|
|
display: inline-block;
|
|
background-color: white;
|
|
flex: 1;
|
|
border-radius: 5px;
|
|
border: 1px solid #edecec;
|
|
}
|
|
.content-col-title {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
color: #333;
|
|
font-size: 0.875rem;
|
|
padding: 0 0.625rem;
|
|
background-color: #efefef;
|
|
border-radius: 5px 5px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content-col-title .el-dropdown {
|
|
font-size: 0.875rem;
|
|
color: #333;
|
|
.el-icon-arrow-down {
|
|
font-size: 0.75rem;
|
|
margin: 0 1.2rem 0 0.8rem;
|
|
}
|
|
}
|
|
|
|
.content-col-title-tools {
|
|
display: flex;
|
|
font-size: 0.85rem;
|
|
}
|
|
.content-col-title-tool {
|
|
cursor: pointer;
|
|
padding-left: 1rem;
|
|
padding-right: 0.8rem;
|
|
border-left: 1px solid #e7eaed;
|
|
position: relative;
|
|
.el-cascader {
|
|
height: 100%;
|
|
line-height: 1.6rem;
|
|
position: absolute;
|
|
top: 0;
|
|
opacity: 0;
|
|
width: 0.8rem;
|
|
.el-input__suffix i {
|
|
color: #606266;
|
|
}
|
|
.el-cascader__tags {
|
|
display: none;
|
|
}
|
|
.el-input {
|
|
height: 100%;
|
|
line-height: 1.6rem;
|
|
padding-right: 0.2rem;
|
|
i {
|
|
line-height: 2rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.el-input__inner {
|
|
height: 100% !important;
|
|
line-height: 1.6rem;
|
|
background-color: #efefef;
|
|
width: 6.688rem;
|
|
padding-left: 0.625rem;
|
|
padding-right: 0.8rem;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.diy-content {
|
|
height: 2rem;
|
|
pointer-event: none;
|
|
color: #333;
|
|
span, i {
|
|
line-height: 2rem;
|
|
}
|
|
span {
|
|
margin-right: 0.3rem;
|
|
}
|
|
i {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
.trend-cascader {
|
|
.el-cascader-panel {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
.no-data-tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
color: #bbb;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1rem;
|
|
}
|
|
.content-col-box .content-col-title .nz-dashboard-picker {
|
|
height: 100%;
|
|
}
|
|
.content-col-box .content-col-title .nz-dashboard-picker .el-icon-arrow-down {
|
|
width: unset !important;
|
|
}
|
|
.content-col-box .content-col-title .calendar-dropdown-title {
|
|
height: 100%;
|
|
line-height: unset;
|
|
border: none;
|
|
}
|
|
.dropdown-btn {
|
|
position: relative;
|
|
}
|
|
.dropdown-btn .el-popper {
|
|
top: 20px;
|
|
left: unset;
|
|
right: 0;
|
|
}
|
|
.dropdown-btn .el-popper::after {
|
|
content: '';
|
|
display: block;
|
|
width:0;
|
|
height:0;
|
|
overflow: hidden;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
border: 5px;
|
|
border-style: dashed dashed solid dashed;
|
|
border-color: transparent transparent #fff transparent;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, -54px);
|
|
}
|
|
.content-col-content {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
justify-content: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0 0 6px 6px;
|
|
position: relative;
|
|
}
|
|
.content-row-box:nth-of-type(2) .content-col-box .content-col-content {
|
|
padding: 0.7rem;
|
|
height: calc(100% - 3rem);
|
|
}
|
|
.content-row-box:nth-of-type(3) .content-col-box .content-col-content {
|
|
height: calc(100% - 2rem);
|
|
}
|
|
.content-row-box:nth-of-type(2) .content-col-box:first-of-type .content-col-title {
|
|
padding-right: 0;
|
|
}
|
|
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
|
|
position: relative;
|
|
}
|
|
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content>span:last-of-type {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
right: 5%;
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
}
|
|
.content-col-content-icon {
|
|
height: 3.75rem;
|
|
width: 3.75rem;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #e5eaef;
|
|
position: relative;
|
|
.nz-icon {
|
|
font-size: 1.75rem !important;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.nz-icon-overview-asset {
|
|
color: #F6B275;
|
|
}
|
|
.nz-icon-overview-project {
|
|
font-size: 1.5rem !important;
|
|
color: #80A7F4;
|
|
}
|
|
.nz-icon-overview-module {
|
|
color: #7AD0BC;
|
|
}
|
|
.nz-icon-overview-endpoint {
|
|
color: #969DEA;
|
|
}
|
|
.nz-icon-overview-alert {
|
|
font-size: 1.25rem !important;
|
|
color: #EE9A87;
|
|
}
|
|
}
|
|
.content-num-box {
|
|
padding-left: 1.25rem;
|
|
}
|
|
.content-alert-num {
|
|
position: absolute;
|
|
color: #666;
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 0.68rem 0.5rem 0;
|
|
}
|
|
.content-num-box .content-col-content-title {
|
|
font-size: 0.875rem;
|
|
color: #666;
|
|
}
|
|
.content-col-content-num {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.overview-tooltip-box {
|
|
display: flex;
|
|
height: 1.8rem;
|
|
}
|
|
.tooltip-item {
|
|
min-width: 2.8rem;
|
|
padding: 0 0.2rem;
|
|
line-height: 1.8rem;
|
|
font-size: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item-status {
|
|
width: 0.625rem;
|
|
height: 0.19rem;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
@media only screen and (min-width: 10px) and (min-height: 10px){
|
|
.content-col-content-num {
|
|
font-size: 1.44rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1020px) and (min-height: 560px){
|
|
.content-col-content-num {
|
|
font-size: 1.44rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1360px) and (min-height: 650px){
|
|
.content-col-content-num {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1700px) and (min-height: 800px){
|
|
.content-col-content-num {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
.hide-div {
|
|
visibility: hidden;
|
|
}
|
|
.axis-tooltip {
|
|
display: none;
|
|
position: fixed;
|
|
transform: translate(-100%, -50%);
|
|
min-width: unset;
|
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
.axis-tooltip::after {
|
|
content: '';
|
|
display: block;
|
|
width:0;
|
|
height:0;
|
|
overflow: hidden;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
border: 5px;
|
|
border-style: dashed dashed dashed solid;
|
|
border-color: transparent transparent transparent #fff ;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(100%, -50%);
|
|
}
|
|
|