@import '../../style/index.less';

.jzlj-gcxm-base {
    display: flex;
    height: 100%;
    padding: 6px 16px 16px 16px;
    gap: 16px;
    height: 700px;

    &-left {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 25%;

        &-top {
            height: 100%;

            .label {
                color: var(--base-label-color);
            }

            .value {
                color: var(--info-color);
            }

            .ssxx-map {
                height: 160px;
                margin-bottom: 16px;

                .ol-map-container {
                    border-radius: 8px !important;
                }
                .ol-viewport {
                    border-radius: 8px !important;
                }
            }
        }
    }

    .num {
        font-size: 18px;
        color: #1677ff;
        font-weight: 500;

        .unit {
            font-size: 12px;
            font-weight: normal;
            margin-left: 4px;
        }
    }

    .name {
        font-size: 14px;
        color: var(--info-color);
    }

    &-right {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 75%;

        &-top {
            height: 40%;
            display: flex;
            gap: 16px;

            &-left {
                width: 50%;
            }

            &-right {
                width: 50%;

                .jzlj-gcxm-ctl-pie {
                    height: 100%;
                }
            }

            .czz {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .czz-item {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                }
            }
        }

        &-bottom {
            height: 60%;

            .ldxx {
                .ldxx-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    padding-bottom: 24px;
                }
            }
        }
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
