sis_zhfx/src/assets/styles/theme/light/light-jsc.less

// 驾驶舱模块白色主题样式

@import "./setting.less";

#appBody.light {
    color     : @black;
    transition: @transition;

    .gray {
        color      : @black;
        font-weight: 700;
        transition : @transition;
    }

    .green {
        color      : @deepblue;
        font-weight: 700;
        transition : @transition;
    }

    .white {
        color     : @black;
        transition: @transition;
    }

    #app {
        background: rgb(220, 221, 223);
        transition: @transition;
    }

    .panel-title {
        color     : @black;
        transition: @transition;
    }

    .panel-tools {
        color     : @black;
        transition: @transition;
    }

    .weather {
        .other-info {
            .text {
                color     : @black;
                transition: @transition;
            }

            div.svg-icon svg use {
                fill      : @deepblue;
                transition: @transition;
            }
        }
    }

    .security-days {
        .text {
            color     : @black;
            transition: @transition;
        }

        .num {
            color     : @deepblue;
            transition: @transition;
        }
    }

    .tab-box {
        .tab-item {
            span {
                svg {
                    use {
                        fill      : @black;
                        transition: @transition;
                    }
                }
            }
        }
    }

    .header-body {
        border    : 0;
        transition: @transition;

        .header-title {
            svg {
                g:nth-child(1) {

                    path,
                    polygon {
                        fill      : @black;
                        transition: @transition;
                    }
                }
            }
        }
    }

    .weather-info {
        span svg use {
            fill      : @black;
            transition: @transition;
        }
    }

    .map .tab-box .tab-item.active {
        color   : @deepblue;
        position: relative;
        background-image: linear-gradient(to top,
                rgba(57, 54, 143, 0.5),
                rgba(5, 187, 76, 0));
        transition: @transition;
    }

    .map .tab-box .tab-item.active::after {
        border    : 0.093vh solid @deepblue;
        transition: @transition;
    }

    .header-menu .header-menu-list .header-menu-item.active::after {
        border    : 0.093vh solid @deepblue;
        transition: @transition;
    }

    .header-menu .header-menu-list .header-menu-item.active {
        color   : @deepblue;
        position: relative;
        background: linear-gradient(to top,
                rgba(57, 54, 143, 0.5),
                rgba(5, 187, 76, 0));
        border    : 0.093vh solid @deepblue;
        transition: color @transition ease-in-out;
    }

    .home .table-card {
        outline   : none;
        transition: @transition;
        overflow  : hidden;
    }

    .coulometric-analysis {
        .card-1 {
            .card-icon {
                svg use {
                    fill      : @deepblue;
                    filter    : drop-shadow(0 0 6px @deepblue);
                    transition: @transition;
                }
            }
        }
    }

    .map .compass {
        svg g:nth-child(3) {
            g g path {
                fill      : @deepblue;
                transition: @transition;
            }
        }

        svg g:nth-child(4) {
            g g path {
                fill      : @deepblue;
                transition: @transition;
            }
        }

        &::after {
            box-shadow: inset 0px -5px 10px 0px @deepblue;
            transition: @transition;
        }
    }

    .name-box-period-label {
        color     : @black;
        transition: @transition;
    }

    .name-box-period-value {
        color     : @deepblue;
        transition: @transition;
    }

    .svg-map-nx {
        .item-label {
            rect {
                fill      : @deepblue;
                transition: @transition;
            }

            .mapKey {
                fill      : #fff;
                transition: @transition;
            }
        }

        .popup-layer-svg {
            .mapKey {
                fill      : #fff;
                transition: @transition;
            }
        }

        #popup-box-svg rect {
            fill      : @deepblue;
            opacity   : 0.8;
            transition: @transition;
        }

        .esp-1 {
            stroke: @deepblue;
        }

        .esp-6 {
            stroke: @deepblue;
        }

        .esp-c {
            stroke: @deepblue;
        }
    }

    .com-panel-3,
    .com-panel,
    .header-body {
        background: #fff;
        transition: @transition;
    }

    .com-panel-3 .dot,
    .com-panel.line:before {
        background: @black;
        transition: @transition;
    }

    .panel-header {
        background: #fff;
        transition: @transition;
    }

    .fengji-icon {
        svg use {
            fill      : @deepblue;
            transition: @transition;
        }
    }

    .modal.el-dialog {
        background   : rgba(255, 255, 255, 0.85);
        border       : 1px solid rgba(57, 54, 143, 0.5);
        box-shadow   : 0px 8px 17px 1px rgb(57, 54, 143 / 30%);
        border-radius: @borderRaduis;
        transition   : @transition;
    }

    .modal.el-dialog .el-dialog__title {
        color     : rgba(0, 0, 0, 0.75);
        transition: @transition;
    }

    .situation-body {
        .value span:nth-child(2) {
            font-weight: 700;
            transition : @transition;
        }
    }

    .coulometric-analysis .card-title {
        color     : @black;
        transition: @transition;
    }

    .com-panel,
    .panel-header,
    .home .table-card,
    .com-panel-3.situation,
    .el-menu--collapse,
    .el-sub-menu,
    .el-sub-menu__title,
    .el-menu--popup,
    .el-menu-item {
        border-radius: @borderRaduis;
        transition   : @transition;
    }

    .com-panel {
        padding-bottom: 10px;
        transition    : @transition;
    }

    .com-panel.line::before {
        width     : 4px;
        height    : 4px;
        background: @black;
        margin    : 0.85vh 0.556vh 0vh 0.85vh;
        transition: @transition;
    }

    .com-panel.line {
        border-left: 0;
        transition : @transition;
    }

    .lightMenu {
        width        : 0;
        height       : calc(100% - 71px);
        position     : absolute;
        left         : 14px;
        top          : 57px;
        z-index      : 100;
        border-radius: 20px;
        border       : 0;
        overflow     : hidden;
        transition   : @transition;
    }

    .lightMenu.show {
        width     : 54px;
        transition: @transition;
    }

    .main-body {
        margin-left: 66px;
        max-width  : calc(100vw - 54px - 12px);
        transition : @transition;
    }

    .dot.top-left {
        top       : 0.85vh;
        left      : 0.85vh;
        background: @black;
        transition: @transition;
    }

    .dot.bottom-left {
        bottom    : 0.85vh;
        left      : 0.85vh;
        background: @black;
        transition: @transition;
    }

    .dot.top-rignt {
        top       : 0.85vh;
        right     : 0.85vh;
        background: @black;
        transition: @transition;
    }

    .dot.bottom-right {
        bottom    : 0.85vh;
        right     : 0.85vh;
        background: @black;
        transition: @transition;
    }

    .lightMenu .el-menu--collapse {
        width     : 54px;
        transition: @transition;
    }

    .lightMenu .el-menu--collapse {
        height: 100%;
    }

    .lightMenu .el-sub-menu__title {
        text-align    : center;
        vertical-align: middle;
        padding       : 0 20px;
        transition    : @transition;
    }

    .lightMenu .el-sub-menu__title i {
        color     : #fff;
        transition: @transition;
    }

    .com-panel-3 {
        border    : 0;
        transition: @transition;
    }

    .map .return {
        color     : rgba(0, 0, 0, 0.8);
        transition: @transition;

        use {
            fill      : @black;
            transition: @transition;
        }
    }

    .map .return:hover {
        color       : @deepblue;
        border-color: @deepblue;
        transition  : @transition;

        use {
            fill      : @deepblue;
            transition: @transition;
        }
    }

    .name-box {
        .name-box-title {
            color     : @black;
            transition: @transition;
        }
    }

    background: rgb(220, 221, 223);
    transition: @transition;
}