.wr-monitor {
    margin: 6px;
    &-realtime {
        padding: 14px 20px 0 20px;
        background-color: var(--bg-color2);
        border: 1px solid var(--bg-border-color2);

        margin-bottom: 6px;
        .realtime-head {
            display: flex;
            justify-content: space-between;
            align-items: start;
            &-title {
                display: flex;
                justify-content: start;
                align-items: start;
            }
            &-time {
                margin-left: 27px;
                color: var(--info-warnning);
                font-family: PingFang SC;
            }
        }
        .realtime-content {
            margin-top: 12px;
            padding-bottom: 18px;
            &-item {
                &-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 4px;
                    img {
                        width: 36px;
                        height: 36px;
                        margin-right: 14px;
                    }
                    &-name {
                        color: var(--info-color);
                    }
                }
                &-main {
                    width: 100%;
                    height: 80px;
                    background-image: url('../../imgs/realtime_bg.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    color: var(--info-color);
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    &.light {
                        background-image: url('../../imgs/realtime_bg_light.png');
                    }

                    &-line {
                        width: 1px;
                        height: 20px;
                        background: #ffffff;
                        opacity: 0.2;
                    }

                    &-item {
                        width: 76px;
                        text-align: center;
                    }
                }
            }
        }
    }
    &-trend {
        padding: 14px 20px;
        background-color: var(--bg-color2);
        border: 1px solid var(--bg-border-color2);

        &-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
