_map.scss

@import "component";
//body 使用的z-index值
.z0 {
    z-index: 0;
}

.z1 {
    z-index: 10;
}

.z2 {
    z-index: 20;
}

//面板使用的z-index值
.z3 {
    z-index: 30;
}

.zMaxTop {
    z-index: 1000;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    @extend .z0;
    background-image: url("../imgs/main-bg.png");
}

.head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 32;
    height: $head-height;
    @extend .z3;
    &_title {
        width: 50.875rem;
        height: 100%;
        background-image: url("../imgs/head-bg.png");
        background-size: cover;
        float: left;
    }
    &_classify {
        float: left;
        margin-left: 0.9375;
        margin-top: 0.625rem;
        width: calc((100% - 50.875rem) * 0.5 - 0.9375rem);
        &_title {
            display: inline-block;
            margin-left: 0.625rem;
        }
        &_img {
            width: 2.5rem;
            position: relative;
            left:0.625rem;
        }
    }
    &_home {
        cursor: pointer;
        float: right;
        margin-top: 0.875rem;
        margin-right: 0.9375rem;
        width: 2.8125rem;
        height: 2.8125rem;
    }
    .title {
        &_text {
            font-size: 1.625rem;
            font-weight: bold;
            color: #fff;
        }
        &_subText {
            font-size: 0.875rem;
            color: #999;
        }
    }
}

@mixin main {
    @extend .z3;
    position: absolute;
    height: $main-height;
    top: $head-height
}

.main {
    &-left {
        @include main;
        width: $main-lr-width;
        left: 0.625rem;
    }
    &-right {
        @include main;
        width: $main-lr-width;
        right: 0.625rem;
    }
    &-center {
        position: absolute;
        width: $main-center-width;
        left: calc(25% + 0.625rem);
    }
}

@mixin card {
    position: relative;
    @extend .z3;
    background-color: $card-bgc;
    margin-top: 2.1875rem;
    margin-bottom: 0.9375rem;
    border: 1px solid $card-border;
    box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.3) inset;
}

.card {
    &-side {
        @include card;
        width: $card-width;
        height: $card-height;
    }
}

.hidden_hr {
    height: 0;
    border: 0;
    overflow: hidden;
}

.tooltip {
    color: #000;
    position: relative;
}

.tooltip:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #b3fdfc;
    border-width: 0.375rem;
    top: -1.0625rem;
    margin-left: calc(50% - 0.1875rem);
}

.ol-zoom .ol-zoom-out {
    display: none;
}

.ol-zoom .ol-zoom-in {
    display: none;
}