.flex-start {
    display: flex;
    justify-content: start;
    align-items: start;
}

.mr-20 {
    margin-right: 20px;
}

.mt-24 {
    margin-top: 24px;
}

.wr-baseContent {
    padding: 6px;

    .base-top {
        &-img {
            width: 370px;
            height: 210px;
            .mr-20();
            img {
                width: 370px;
                height: 210px;
            }
        }

        &--base {
            .flex-start();
            padding: 20px 24px;
            height: 250px;
            background-color: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);

            &-list {
                height: 100%;
                overflow: auto;
            }
        }
        &--right {
            height: 250px;
            padding: 20px 24px;
            background-color: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);
        }

        &--chart {
            .mt-24();
            height: 148px;
            width: 100%;
            position: relative;
            &-bg {
                width: 168px;
                height: 148px;
                position: absolute;
                top: 0;
                left: 9%;
                background-image: url('../../imgs/chart_bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            &-content {
                height: 148px;
            }
        }
    }

    .base-bottom {
        margin-top: 10px;

        &-left {
            height: 358px;
            padding: 20px 24px;
            background-color: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);
        }
        &-situation {
            display: flex;
            flex-flow: wrap;

            &--item {
                width: 50%;
                text-align: top;
                .flex-start();
                align-items: center;
                margin-bottom: 46px;

                img {
                    width: 50px;
                    height: 50px;
                    .mr-20();
                }
                &-name {
                    font-size: 12px;
                    color: var(--title-color);
                }
                &-value {
                    color: var(--info-active);
                    font-size: 12px;
                    span {
                        font-size: 20px;
                        line-height: 25px;
                    }
                }
            }

            &--nodata {
                img {
                    width: 100%;
                }
            }
        }

        &-alarm-detail {
            height: 358px;
            padding: 20px 24px 0 24px;
            background-color: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);

            &-date {
                display: flex;
                justify-content: space-between;
            }
            &-tab {
                .flex-start();
                &-item {
                    font-size: 14px;
                    font-family: HiraginoSansGB-W6, HiraginoSansGB;
                    color: #a7bebb;
                    line-height: 21px;
                    margin-right: 15px;
                    cursor: pointer;

                    &_active {
                        color: var(--info-active);
                    }
                }
            }
        }
    }
}
