.scroll {
    overflow-y: auto;

    &::-webkit-scrollbar {
        /*滚动条整体*/
        width: 10px;
        cursor: pointer;

    }

    &::-webkit-scrollbar-track {
        /*滚动条轨道*/


        background: #013769;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        width: 4px;
        cursor: pointer;
        background: #0294E2;
        border: 3px solid #013769;
    }

    &::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
    }

    &::-webkit-scrollbar-corner {
        /*滚动条边角*/
    }

}
.tips-model{
    padding: 10px;
    .tips-model-title{
        font-size: 18px;
        font-weight: bold;
    }
    .tips-model-text{
        font-size:14px;
        padding: 5px 20px;
    }
    .tips-model-table{
        width: 500px;
        border: 1px solid #eee;
    }
    .tips-model-th,.tips-model-tr{
        width: 500px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 20px;
        >div{
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
    }
}
.mobile-scroll {
    overflow-y: auto;

    &::-webkit-scrollbar {
        /*滚动条整体*/
        width: 0px;
        cursor: pointer;

    }

    &::-webkit-scrollbar-track {
        /*滚动条轨道*/


        background: rgba(0, 0, 0, 0.1);
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        width: 0px;
        cursor: pointer;
        background: #ccc;
        border: 0px solid rgba(0, 0, 0, 0.1);
    }

    &::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
    }

    &::-webkit-scrollbar-corner {
        /*滚动条边角*/
    }

}

.el-popconfirm__main,
.el-date-table td span,
.el-date-range-picker__header div {
    color: #606266 !important;
}

.el-date-table td.end-date div span,
.el-date-table td.start-date div span {
    color: #fff !important;
}

.el-button--text {
    span {
        color: #409EFF !important;
    }
}

.el-dropdown-menu {
    max-height: 300px;
    @extend .scroll;
}
textarea{
    resize: none; 
}
.border-none {
    border: none !important;
}
.formula .page-content{
    position: relative;
    .export{
        position: absolute;
        right: 30px;
        top: 20px;      
        display: flex;
        align-items: center;
        .export-btn{
            height: 44px;
            background: rgba(0, 186, 255, 0.15);
    border: 2px solid rgba(0, 186, 255, 0.4);
    line-height: 42px;
    margin-left: 20px;
    padding: 0 10px;
    cursor: pointer;
        } 
    }
}
.el-collapse-item__header{
    line-height: unset;
}
.collapse {
    .el-collapse {
        border: none;
    }

    .el-collapse-item__header,
    .el-collapse-item__wrap {
        background: transparent;
        border-bottom: 1px solid rgba(168, 182, 200, 0.2);
    }

    .el-collapse-item__header {
        font-size: 16px;
        padding-left: 25px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        align-items: center;

        >.img {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
    }

    .el-collapse-item__content {
        padding: 0;

    }

    .no-list {
        width: 100%;
        height: 76px;
        line-height: 76px;
        padding-left: 25px;
        border-bottom: 1px solid rgba(168, 182, 200, 0.2);
        cursor: pointer;
        color: #A8B6C8;

        &:hover {
            color: #fff;
        }
    }

    .table-ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;

        .table-li {
            display: flex;
            align-items: center;
            padding-left: 31px;
            position: relative;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #A8B6C8;
            width: 200px;
            height: 40px;
            cursor: pointer;

            &:hover {
                color: #fff;

                &::before {
                    background: #fff;
                }
            }

            &.active {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: #fff;

                &::before {
                    background: #fff;
                }
            }

            .status {

                width: 50px;
                height: 22px;
                background: rgba(168, 182, 200, 0.15);
                border: 1px solid rgba(168, 182, 200, 0.5);
                border-radius: 11px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #A8B6C8;
                margin-left: 10px;

                &.online {
                    background: rgba(0, 255, 186, 0.15);
                    border: 1px solid rgba(0, 255, 186, 0.50);

                    color: #00FFBA;
                }
            }

            &::before {
                content: ' ';
                width: 4px;
                height: 4px;
                background: #A8B6C8;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 10px;
            }
        }
    }

    &.set-params {
        .el-collapse-item {
            &.active {
                .el-collapse-item__header {
                    background: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.3);

                    .name {

                        color: #fff !important;
                    }

                }
            }
        }

        .el-collapse-item__header {
            .name {
                color: #A8B6C8;
                // white-space: nowrap;
            }

        }

        .table-ul {
            .table-li {
                width: 100%;
                padding-left: 40px;

                &::before {
                    left: 20px;
                }
            }
        }
    }
}

.warning-btn {
    justify-content: flex-end;
    margin-top: -70px;

    .btn.green {
        opacity: 1;
    }
}

.warning-model {
    padding: 0 30px 25px;

    .input-main {
        margin: 0;

        input {
            width: 300px;
        }
    }

    .input-sel {
        margin-right: 30px;

        >span {
            margin-right: 10px;
        }
    }

    .input-sel .el-dropdown-link {
        width: 200px;
    }

    .vrcode-btn.red-btn {
        margin: 0 !important;
    }
}

.warning-sel {
    width: 200px !important;
}

.table-title {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 !important;

    >img {
        width: 60px;
        height: 60px;
        margin-right: 15px;

    }

    .tips {
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 34px;
        background: rgba(0, 255, 186, 0.15);
        border: 1px solid rgba(0, 255, 186, 0.50);
        border-radius: 17px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00FFBA;
        cursor: pointer;
    }

    .title-text {
        font-size: 16px;
        margin-left: 15px;
        display: flex;
        align-items: center;

        img {
            margin-right: 5px;
        }
    }
}

.index {
    width: 100%;
    height: 100%;
    min-height: 900px;
    overflow: auto;
    background: url(../image/index-background.png) no-repeat;
    background-size: cover;
    background-position: center top;

    .no-list {
        color: #fff;
        display: flex;
        align-items: center;

        >.img {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
    }

    .header {
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-left {
            position: relative;
            width: 373px;
            height: 78px;
            display: flex;
            align-items: center;
            padding: 10px;
            .logo-img{
                position: relative;
                z-index: 2;
                margin-right: 10px;
            }
            .logo-bg {
                width: 373px;
                height: 99px;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            .logo-title{
                position: relative;z-index: 2;
                font-size: 35px;
            }

        }

        .header-center {
            width: calc(100% - 335px - 373px);
            max-width: 1000px;
            height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            >div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                width: 111px;
                height: 78px;

                &.active {
                    background: linear-gradient(0deg, rgba(0, 132, 255, 0.3) 0%, rgba(0, 132, 255, 0) 100%);
                    position: relative;

                    &::before {
                        content: ' ';
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 1px;
                        height: 78px;
                        background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
                        opacity: 0.3;
                    }

                    &::after {
                        content: ' ';
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 1px;
                        height: 78px;
                        background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
                        opacity: 0.3;
                    }

                    .name {
                        color: #fff;
                    }
                }

                .img {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 5px;
                }

                .name {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #8BEAFF;
                    white-space: nowrap;
                }
            }

        }

        .header-warning {
            width: 75px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-right {
            width: 260px;
            display: flex;
            align-items: center;
            padding-right: 20px;
            justify-content: flex-end;

            >img {
                width: 40px;
                height: 40px;
                flex-shrink: 0;
            }

            .user-data {
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 5px 0 10px;
                margin-right: 20px;
                border-right: 1px solid rgba(255, 255, 255, 0.2);

                .name {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #8BEAFF;
                }

                .time {
                    font-size: 14px;
                    font-family: Arial;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }

            .login-out {
                width: 40px;
                height: 40px;
                background: url(../image/login-out.png) no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;
                flex-shrink: 0;

                &:hover {
                    background: url(../image/login-out-hover.png) no-repeat center;
                    background-size: 100% 100%;
                }
            }
        }
    }

    .index-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: calc(100% - 78px);
        position: relative;
        z-index: 2;

        >.left {
            width: 240px;
            height: 100%;
            background: rgba(0, 29, 68, 0.25);
            border-right: 2px solid rgba(0, 180, 255, 0.25);

            @extend .scroll;
        }

        >.right {
            width: calc(100% - 240px);
            height: 100%;
            overflow: auto;

            &.right-page {
                padding: 20px;

                .page-content {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 92, 178, 0.15);
                    border: 2px solid rgba(0, 186, 255, 0.20);
                    padding: 30px 30px 20px;
                    @extend .scroll;
                }
            }
        }
    }
}

.input-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;

    >div {
        flex-shrink: 0;
        margin-right: 20px;
        display: flex;
        align-items: center;
        margin: 7.5px 0;

        >span {
            padding: 0 8px;
        }

    }
}

.input-sel {
    >span {
        padding: 0 10px;
    }

    >.title {
        margin-bottom: 11px;
    }

    &.input-sel-w180 {
        .el-dropdown-link {
            width: 180px;
        }
    }

    &.input-sel-w140 {
        .el-dropdown-link {
            width: 140px;
        }
    }

    .el-dropdown-link {
        width: 300px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.40);
        cursor: pointer;
        position: relative;

        input {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            padding-left: 15px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #00FFBA;

            &::placeholder {

                color: #859BB6;
            }
        }

        .arrow {
            width: 33px;
            height: 24px;
            border-left: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            >img {
                width: 6px;
                height: 4px;
            }
        }
    }
}

.margin-none {
    margin: 0 !important;
}

.padding-none {
    padding: 0 !important;
}

.border-right {
    border-right: 1px solid rgba(2, 148, 226, 0.5);
}

.input-main {
    span {
        padding: 0 10px;
    }

    div {
        margin-bottom: 10px;
    }

    input {
        width: 134px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.40);
        padding-left: 15px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;

        &::placeholder {
            color: #859BB6;
        }
    }

    &.input-main-w120 {
        input {
            width: 120px;
        }
    }

    &.input-disabled {
        input {
            background: transparent;
            border: 2px solid transparent;
            padding-left: 0;
        }
    }

    &.input-main-w260 {
        input {
            width: 260px;
        }
    }

    &.input-main-w80 {
        input {
            width: 80px;
        }
    }

    &.input-main-w100 {
        input {
            width: 100px;
        }
    }
}

.number-view {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 15px 0 0 !important;

    >div {
        width: 30px;
        height: 30px;
        background: #0294E2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }
}

.p-t-31 {
    padding-top: 31px;
}


.input-main-60 {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;

    &.table-input {
        justify-content: center;

        >span {
            color: #FF9191;
        }
    }

    span {
        padding: 0 10px;
        &.tips{
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }
    }
&.h-44{
    input{
        height: 44px;
    }
}
    input {
        width: 60px;
        height: 34px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.40);
        // padding-left: 15px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        margin: 5px 5px;
        text-align: center;

        &::placeholder {
            color: #859BB6;
        }
    }
}

.input-main-one {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;

    &.table-input {
        justify-content: center;

        >span {
            color: #FF9191;
        }
    }

    span {
        padding: 0 10px;
    }

    input {
        width: 300px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.40);
        // padding-left: 15px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        margin: 5px 5px;
        text-align: center;

        &::placeholder {
            color: #859BB6;
        }
    }
}

.outline {
    color: red;
    font-weight: bold;
    font-size: 24px;
}
.popper__arrow {
    display: none!important;
}

.el-dropdown-menu {
    width: 300px;
    border: none;
    background-color: #014781;

    &.input-menu-180 {
        width: 180px;
    }

    .popper__arrow::after {
        border-bottom-color: rgba(0, 186, 255, 0.25) !important;
    }

    .el-dropdown-menu__item {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00C0F7;
        background: transparent;

        &.is-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    .el-dropdown-menu__item--divided {
        border-top: none;
    }

    .el-dropdown-menu__item--divided::before {
        background: #00C0F7;
    }

    .el-dropdown-menu__item:focus,
    .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: rgba(0, 186, 255, 0.25);

        color: #FFFFFF;
    }
}

.page-title {
    width: 100%;
    height: 43px;
    padding-left: 41px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    position: relative;
    line-height: 43px;
    background: url(../image/title-202.png) no-repeat center;
    background-size: 202px 43px;
    background-position: left center;
    min-width: 202px;

    &::before {
        content: ' ';
        width: 32px;
        height: 33px;
        left: 2px;
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
        background: url(../image/page-title.png) no-repeat center;
        background-size: 100% 100%;
    }

    &.title-302 {
        background: url(../image/title-302.png) no-repeat center;
        background-size: 302px 43px;
        background-position: left center;
        min-width: 302px;
    }
    &.title-402 {
        background: url(../image/title-302.png) no-repeat center;
        background-size: 402px 43px;
        background-position: left center;
        min-width:402px;
    }
}

.formula {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .page-content {
        width: calc(100% - 250px);
        height: 100%;
        background: rgba(0, 92, 178, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.20);
        padding: 20px 30px 0;
        @extend .scroll;


    }
}

.table-view {
    background: transparent;
    margin-top: 30px;

    .cell {
        text-align: center;
    }

    .el-table .warning-row {
        background: rgba(0, 180, 255, 0.2);
    }

    .el-table .success-row {
        background: rgba(0, 47, 94, 0.35);

    }

    .el-table::before,
    .el-table--border::after {
        height: 0;
    }

    .el-table,
    .el-table tr,
    .el-table td.el-table__cell {
        border: none;
        background: transparent;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
        border: none;
        background-color: transparent;
    }

    .el-table th.el-table__cell.is-leaf {
        border: none;
        background: rgba(0, 180, 255, 0.2);

        .cell {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
    }

    .table-flex {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-operate {
        height: 30px;
        white-space: nowrap;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        min-width: 66px;
        margin: 0 5px;
        color: #FFFFFF;
        padding: 0 7px;

        &.blue {
            background: #0294E2;
        }

        &.red {
            background: #FF9191;
        }

        >img {
            width: 16px;
            height: auto;
            margin-right: 5px;
        }
    }

    .table-type {
        padding: 0 15px;
        height: 30px;
        background: rgba(0, 186, 255, 0.15);
        border-radius: 3px;
        border: 1px solid rgba(0, 186, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #00FFB9;
    }

    .status {
        width: 100px;
        height: 34px;
        background: #0294E2;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        cursor: pointer;

        &.status1 {

            background: #00BB88;
        }

        &.noSel {
            opacity: 0.5;
        }
    }

    .type0 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF9191;
    }

    .type1 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        white-space: nowrap;

        >div {
            justify-content: center
        }
    }

    .type2 {
        width: 140px;
        height: 34px;
        background: #0294E2;
        border-radius: 3px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
        justify-content: center;

        img {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }

        &.noSel {
            opacity: 0.5;
        }
    }
}

.title-tips {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #8BEAFF;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.text-tips {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    margin-top: 20px;
}

.title-tips-bold {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #8BEAFF;
    margin-top: 20px;
    display: flex;
    align-items: center;
    >img{
        width: 40px;
        height: 40px;
    }
}

.shrink-none {
    >div {
        flex-shrink: unset !important;
        width: auto !important;
    }
}

.flex-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    >div {
        flex-shrink: 0;
        margin: 4.5px 0;
    }
}

.flex-view {
    padding: 12.5px 0;
    border-bottom: 1px solid rgba(0, 180, 255, 0.5);
}

.input-sel-time {
    display: flex;
    align-items: center;

    .el-range-separator {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        padding: 0 8px;
        width: 40px;
    }

    span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        padding: 0 8px;
    }

    .el-input__inner {
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.40);
        cursor: pointer;
        position: relative;

        .el-range-input {
            background: transparent;
            color: #fff;
        }
    }
}

.input-btn {
    display: flex;
    align-items: center;

    >span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        padding-left: 8px;
    }

}

.m-b-20 {
    margin: 10px 8px !important;
}

.flex-warp {
    width: 100%;
    flex-wrap: wrap;
}

.btn {
    margin: 0 8px;
    padding: 0 10px;
    border-radius: 3px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    white-space: nowrap;
    min-width: 120px;

    &.btn-w70 {
        min-width: 70px;
        height: 34px;
    }

    &.btn-tips {
        min-width: 70px;
        width: 70px;
        height: 35px;
    }

    &.btn-w74 {
        width: 74px;
        min-width: unset;
    }

    &.btn-w66 {
        width: 66px;
        min-width: unset;
    }

    >img {
        margin-right: 10px;
        width: 14px;
        height: 14px;
    }

    &.green {
        background: #00BB88;
        opacity: 0.5;
    }

    &.blue {
        background: #0294E2;
    }

    &.off {
        background: #003070;
        border: 1px solid rgba(2, 148, 226, 0.5);
        color: #00C0F7;
    }
}

.irrigateSet {


    .open-btn {
        width: 300px;
        height: 54px;
        background: #003070;
        border: 1px solid rgba(2, 148, 226, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #00C8FF;
        margin: 7.5px 10px;
        cursor: pointer;
        &.w-250{
            width: 250px;
        }
        >img {
            margin-right: 10px;
        }

        &.active {
            color: #FFFFFF;
            background: #0294E2;
            border-color: #0294E2;

        }
    }
}

.PIDSet {
    .flex-view {
        border-bottom: none;
    }

    .PIDSet-view {
        width: 400px;
        height: 470px;
        background: rgba(0, 132, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.35);
        margin: 7.5px 10px;
    }

    .PID-input-content {
        width: 100%;
        height: calc(100% - 43px);
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .PID-input {
        display: flex;
        align-items: center;

        >div {
            width: 114px;
            margin-right: 10px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            text-align: right;
        }

        input {
            width: 240px;
            height: 44px;
            background: rgba(0, 186, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.40);
            padding-left: 15px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;

            &::placeholder {
                color: #859BB6;
            }
        }
    }

    .PID-input-content-full {
        width: 100%;
        height: calc(100% - 43px);
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .PID-input-full {
        >div {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            margin-bottom: 9px;
        }

        input {
            width: 350px;
            height: 44px;
            background: rgba(0, 186, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.40);
            padding-left: 15px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;

            &::placeholder {
                color: #859BB6;
            }
        }
    }
}


.system-tips {
    background: rgba(0, 92, 178, 0.15);
    border: 2px solid rgba(0, 186, 255, 0.20);
    width: 100%;
    padding: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #A8B6C8;
    &.system-textarea{
        padding: 10px;
        height: auto;
        min-height: 101px;
    }
}

.upload {
    .upload-view {
        width: 520px;
        height: 520px;
        margin: 7.5px 10px;
        background: rgba(0, 132, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.35);

        .upload-title {
            background: url(../image/title-172.png) no-repeat center;
            background-size: 172px 43px;
            background-position: left center;
            min-width: 172px;
        }
    }

    .upload-content {
        width: 100%;
        height: calc(100% - 43px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 20px; //纵向间隔
        grid-column-gap: 20px; //横向间隔
        padding: 19px 30px;

        &.upload-content1 {
            height: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            // grid-template-columns: repeat(2, 1fr);
            // grid-row-gap: 20px; //纵向间隔
            // grid-column-gap: 20px; //横向间隔
            padding: 19px 30px;

            >div {

                width: 218px;
                height: 45px;
                margin-bottom: 20px;
            }
        }

        >div {
            display: flex;
            align-items: center;
            cursor: pointer;
            flex-shrink: 0;
            white-space: nowrap;
            max-height: 50px;

        }
    }
}

.sensorSet {
    height: 100%;

    .sensor-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 520px;
        margin-top: 30px;

        .left {
            width: 200px;
            padding: 0 10px;
            height: 100%;
            background: rgba(0, 92, 178, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.20);

            >div {
                cursor: pointer;
                width: 100%;
                height: 73px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid rgba(0, 180, 255, 0.25);


                >div {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #A8B6C8;
                }

                &.active {
                    >div {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 40px;
                        background: rgba(255, 255, 255, 0.1);
                        border: 1px solid rgba(255, 255, 255, 0.3);
                        color: #fff;
                    }
                }
            }
        }

        .right {
            width: calc(100% - 220px);
            height: 100%;
            background: rgba(0, 92, 178, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.20);

            .right-top {
                width: 100%;
                padding: 30px 0px 30px 75px;
                border-bottom: 1px solid rgba(0, 180, 255, 0.35);

                .input-sel {
                    margin: 15px 0 30px;

                    >span {
                        padding: 0 10px;
                    }

                    >.title {

                        margin-bottom: 11px;
                    }
                }

                .right-sel {
                    display: flex;
                    align-items: center;

                    >div {
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        white-space: nowrap;
                        margin-right: 30px;
                        padding: 0 0 15px 0;


                    }
                }
            }

            .right-bottom {
                padding: 40px 0 0 75px;

                >div {
                    display: flex;
                    align-items: center;
                    margin-bottom: 30px;

                    >div {
                        margin-right: 30px;
                    }
                }
            }
        }
    }

    &.sensorSet-con {
        .sensor-view {
            height: calc(100% - 120px);
        }

        .right-sel {
            width: 100%;
            flex-wrap: wrap;

            .sensor-type-div {
                margin-bottom: 0;
                background: unset;
                border: none;
                height: auto;

                .sensor-sel {
                    >div {
                        padding-left: 0;
                    }
                }
            }
        }
    }

    .sensor-type {
        .sensor-title {
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            padding: 20px 0;

            .sensor-sel {
                >div {
                    padding-left: 0;
                }
            }
        }

        .sensor-type-div {
            width: 100%;
            height: 66px;
            background: rgba(0, 186, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.4);
            margin-bottom: 20px;
            display: flex;
            align-items: center;

            .name {
                width: 120px;
                border-right: 1px solid rgba(2, 148, 227, 0.5);
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                flex-wrap: wrap;
            }

            .sensor-sel {
                display: flex;
                align-items: center;
                width: calc(100% - 120px);

                >div {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    flex-shrink: 0;
                    white-space: nowrap;
                    max-height: 50px;
                    padding: 0 20px;


                }
            }
        }
    }
}

.el-dialog__wrapper {
    .el-dialog {
        background: rgba(0, 59, 114, 0.8);
        border: 2px solid rgba(0, 186, 255, 0.35);

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            padding: 0;

            .model-return {
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            .model1-top {
                padding: 20px 15px;
                border-bottom: 1px solid rgba(0, 180, 255, 0.35);
                display: flex;
                align-items: center;
                justify-content: space-between;

                &.model2-top {
                    justify-content: flex-start;
                }

                &.model3-top {
                    .btn {
                        padding: 0 10px;

                        img {
                            width: 26px;
                            height: 22px;
                        }
                    }
                }

                &.model4-top {
                    align-items: flex-start;
                    padding: 20px 0 0;
                    justify-content: flex-start;

                    .btn {
                        padding: 0 10px;

                        img {
                            width: 22px;
                            height: 24px;
                        }
                    }

                    .model-left {
                        display: flex;
                        align-items: center;
                        height: 54px;
                        margin-right: 10px;
                    }
                }

                .btn {
                    img {
                        width: 10px;
                        height: 14px;
                    }
                }

                .model-right {
                    >div {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;

                        .number {
                            width: 30px;
                            margin-right: 10px;
                            height: 30px;
                            background: #0294E2;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                        }

                        .input-main-60 {
                            width: auto;
                        }
                    }
                }
            }

            .model1-bottom {
                padding: 20px 15px;
                border-bottom: 1px solid rgba(0, 180, 255, 0.35);

                &.model3-bottom {
                    .title {
                        padding: 0 4px;
                    }
                }

                .model1-content {
                    >div {
                        display: flex;
                        align-items: center;
                        padding: 10px 0;

                        .number {
                            width: 30px;
                            margin-right: 10px;
                            height: 30px;
                            background: #0294E2;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                        }

                    }

                    .input-main-60 {

                        span {
                            font-size: 20px;

                            &.text {
                                font-size: 16px;
                                padding: 0 4px;
                                flex-shrink: 0;
                            }
                        }

                    }

                    &.model3-content {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;

                        >div {
                            display: block;
                            width: calc(100% / 3);
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
    }
}


.login {
    .login-header {
        position: relative;
        width: 100%;
        height: 76px;
        background: rgba(0, 180, 255, 0.1);
        border-bottom: 2px solid rgba(0, 180, 255, .3);

        >img {
            width: 373px;
            height: 99px;
        }
    }

    .login-view {
        width: 520px;
        height: 570px;
        background: rgba(122, 219, 255, 0.1);
        border: 2px solid rgba(122, 219, 255, 0.66);
        border-radius: 10px;
        position: fixed;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        padding-top: 59px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .login-title {
            width: 344px;
            height: 45px;
            background: url(../image/login-title.png) no-repeat center;
            background-size: 344px 15px;
            background-position: center bottom;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 11px;

            >img {
                width: 30px;
                height: 34px;
                margin-right: 9px;
            }

            span {
                font-size: 30px;
                font-family: Alibaba PuHuiTi;
                font-weight: bold;
                color: #FFFFFF;
                background: linear-gradient(0deg, #FFFFFF 0%, #BFE7FF 19.9951171875%, #FFFFFF 60.009765625%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .login-input {
            width: 450px;
            height: 63px;
            background: rgba(122, 219, 255, 0.05);
            border: 2px solid rgba(134, 214, 255, 0.15);

            border-radius: 7px;
            position: relative;

            &.active {
                background: rgba(122, 219, 255, 0.1);
                border: 2px solid rgba(122, 219, 255, 0.66);
            }

            >img {
                position: absolute;
                left: 25px;
                top: 50%;
                transform: translateY(-50%);
            }

            >input {
                width: 450px;
                height: 63px;
                padding-left: 72px;
                background: transparent;
                border: none;
                font-size: 20px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;

                &::placeholder {
                    color: #FFFFFF;
                }

            }

            &.username {
                margin-top: 53px;
            }

            &.password {
                margin: 38px 0 20px;
            }
        }

        .save {

            width: 450px;

            >div {
                width: 150px;
                display: flex;
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
                color: #FFFFFF;
                align-items: center;
                cursor: pointer;

                >div {
                    width: 20px;
                    height: 20px;
                    border: 2px solid rgba(122, 219, 255, 0.66);
                    margin-right: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 3px;
                }
            }
        }

        .login-btn {
            width: 400px;
            height: 63px;
            background: #0294E2;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #FFFFFF;
            margin-top: 85px;
            cursor: pointer;
        }
    }
}

.dataModel {
    height: 650px;
    .view-new {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 20px 30px 0;

        &.border{
            border-bottom: 1px solid rgba(0, 186, 255, 0.2);
        }
        .list-view {
            flex-shrink: 0;
            display: flex;
            // flex-direction: column;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 20px;
            min-width: 160px;
            img {
                width: 60px;
                height: 60px;

            }

            .text {
                text-align: center;
                margin: 5px 0;
                font-size: 14px;
            }

            .number {
                width: 80px;
                height: 30px;
                background: url(../image/real-time-text.png) no-repeat center;
                background-size: 100% 100%;
                font-size: 16px;
                font-family: Arial;
                font-weight: bold;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;

                &.red {
                    color: rgba(252, 125, 106, 1);
                }
            }
        }
    }
}

.realTime {
    width: 100%;
    height: 100%;
    padding: 20px;
    flex-direction: column;
    justify-content: unset;
    @extend .scroll;

    .new-data {
        margin-bottom: 20px;
    }

    .page-content {
        position: relative;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        background: rgba(0, 92, 178, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.20);
        padding: 30px 20px 20px;

        &.control-page {
            height: auto;
        }

        .control-view {
            display: flex;
            align-items: center;
            position: absolute;
            right: 30px;
            top: 10px;

            .title {
                margin-right: 10px;
            }

            .control-list {
                display: flex;
                align-items: center;

                overflow: hidden;
                max-width: 806px;

                >div {
                    // width: 100%!important;
                    display: flex;
                    overflow: unset !important;

                    >div {
                        display: flex;
                        align-items: center;
                        flex-shrink: 0;
                        margin-right: 100px;
                    }
                }

                .list-view {
                    display: flex;
                    align-items: center;
                    margin-right: 10px;

                    .icon {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
        }

        .timeNow {
            text-align: center;
            // position: absolute;
            // right: 30px;
            // top: 42px;
            padding-left: 75px;
            // width: 240px;
            display: flex;
            align-items: center;
            font-size: 24px;
            font-family: Arial;
            font-weight: bold;
            color: #8BEAFF;

            >span {
                font-size: 24px;
                font-family: Arial;
                font-weight: bold;
                color: #8BEAFF;
                margin-left: 10px;
            }
        }

        .realTime-list {
            width: 100%;
            overflow: hidden;

            .seamless-warp {
                display: flex;
                align-items: center;

                >div {
                    // width: 100%!important;
                    display: flex;
                    overflow: unset !important;

                    >div {
                        display: flex;
                        align-items: center;
                        flex-shrink: 0;
                        margin-right: 100px;
                    }
                }

                .list-view {
                    flex-shrink: 0;
                    display: flex;
                    // flex-direction: column;
                    align-items: center;
                    margin-right: 20px;

                    img {
                        width: 60px;
                        height: 60px;

                    }

                    .text {
                        text-align: center;
                        margin: 5px 0;
                        font-size: 14px;
                    }

                    .number {
                        width: 80px;
                        height: 30px;
                        background: url(../image/real-time-text.png) no-repeat center;
                        background-size: 100% 100%;
                        font-size: 16px;
                        font-family: Arial;
                        font-weight: bold;
                        color: #FFFFFF;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.red {
                            color: rgba(252, 125, 106, 1);
                        }
                    }
                }
            }

        }

        .flex-list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            // flex-wrap: wrap;


        }

        .realTime-bottom {
            height: 350px;
            margin-top: 30px;

            &.videoMonitoring-monitor {
                justify-content: space-between;
                height: calc(100% - 90px);

                .left-view {
                    width: 100%;
                }
            }

            >div {
                flex-shrink: 0;
            }

            &.weather {
                height: 400px;

                .left-view-new {
                    width: 50%;
                    height: 100%;
                    @extend .scroll;
                    display: flex;
                    background: rgba(0, 132, 255, 0.15);
                    border: 2px solid rgba(0, 186, 255, 0.35);
                    padding: 10px;
                    flex-wrap: wrap;
                    align-content: flex-start;

                    >div {
                        height: 60px;
                        min-width: 105px;
                        flex-shrink: 0;
                        margin-right: 10px;
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;

                        >img {
                            width: 60px;
                            height: 60px;
                        }

                        .text {
                            text-align: center;
                            margin: 5px 0;
                            font-size: 14px;
                        }

                        .number {
                            width: 80px;
                            height: 30px;
                            background: url(data:image/png;base64,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) no-repeat center;
                            background-size: 100% 100%;
                            font-size: 16px;
                            font-family: Arial;
                            font-weight: bold;
                            color: #FFFFFF;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }

                .right {
                    width: 50%;
                }
            }

            .left-view {
                width: 35%;
                height: 100%;
                background: rgba(0, 132, 255, 0.15);
                border: 2px solid rgba(0, 186, 255, 0.35);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;

                // overflow: hidden;
                >div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    position: relative;

                    .video-js {
                        width: calc(100% - 400px);
                        height: 100%;
                    }

                    #video-js {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .video-control {
                        width: 400px;
                        display: flex;
                        height: 100%;
                        padding: 60px 0;
                        flex-direction: column;
                        align-items: center;

                        .video-btn-big {
                            width: 230px;
                            height: 230px;
                            background: url(../img/video-control.png) no-repeat center;
                            background-size: 100% 100%;
                            position: relative;
                            overflow: hidden;
                            flex-shrink: 0;

                            >div {
                                width: 230px;
                                height: 230px;
                                position: relative;

                                &:active {
                                    .arrow {
                                        background: url(../img/control-arrow-active.png)no-repeat center;
                                        background-size: 100% 100%;
                                    }
                                }

                                .arrow {
                                    width: 43px;
                                    height: 26px;
                                    transform: rotate(135deg);
                                    background: url(../img/control-arrow.png)no-repeat center;
                                    background-size: 100% 100%;
                                    position: absolute;
                                    top: 16px;
                                    left: 7px;
                                }
                            }

                            .top {
                                transform: rotate(-135deg);
                                position: absolute;
                                bottom: 70.5%;
                            }

                            .bottom {
                                transform: rotate(45deg);
                                position: absolute;
                                top: 71%;
                            }

                            .left {
                                transform: rotate(135deg);
                                position: absolute;
                                right: 70.5%;
                            }

                            .right {
                                transform: rotate(-45deg);
                                position: absolute;
                                left: 70.5%;
                            }
                        }

                        .video-btn {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            grid-row-gap: 30px; //纵向间隔
                            grid-column-gap: 30px; //横向间隔
                            margin-top: 41px;
                            width: 310px;

                            >div {
                                width: 140px;
                                height: 40px;
                                background: #0294E2;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #FFFFFF;
                                border-radius: 3px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;

                                &:active {
                                    background: #22B2FF;
                                }

                                >img {
                                    margin-right: 12px;
                                    width: 22px;
                                    height: auto;
                                }

                                >div {
                                    white-space: nowrap;
                                    width: 40px;
                                }
                            }
                        }
                    }
                }
            }

            .right {
                width: calc(100% - 35%);
                min-width: 230px;
                height: 100%;
            }
        }

        .status-view {
            width: 300px;
            height: 300px;
            background: rgba(0, 132, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.35);
            margin: 7.5px;

            .status-view-top {
                padding: 0 10px 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px solid rgba(0, 180, 255, .35);

                .status-view-top-left {
                    font-size: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    white-space: nowrap;
                }

                .status-view-top-right {
                    cursor: pointer;
                    padding: 0 10px;
                }

            }

            .status-view-content {
                width: 100%;
                height: calc(100% - 51px);

                .status-true {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    .status-fan {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-wrap: wrap;

                        &.status-btn {
                            >div {
                                width: 150px;
                                height: 40px;

                                >img {
                                    width: 20px;
                                    height: 20px;
                                }
                            }
                        }

                        >div {
                            min-width: unset;
                            flex-shrink: 0;
                            font-size: 14px;
                            height: 30px;
                            margin: 10px 8px 0 !important;

                            &.off {
                                span {
                                    color: #00C0F7;
                                }
                            }

                            >span {
                                margin-left: 5px;
                            }

                            >img {
                                width: 16px;
                                height: 16px;
                                margin-right: 0px;

                                &.fan-img {
                                    animation: rotate 5s linear infinite;
                                    /* 持续时间为 5 秒，线性缓动，无限循环 */
                                    /* 定义旋转动画 */
                                }

                                @keyframes rotate {
                                    from {
                                        transform: rotate(0deg);
                                    }

                                    to {
                                        transform: rotate(360deg);
                                    }
                                }
                            }
                        }
                    }

                    .status-true-sel {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        padding: 0 50px;
                        &.text-blue{
                            >div{
                                font-size: 18px;
                            color: #00C0F7;
                            }
                        }
                        >div {
                            display: flex;
                            align-items: center;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;

                            >img {

                                width: 20px;
                                height: 20px;
                                margin-right: 10px;
                            }
                        }
                    }

                    .status-true-charts {
                        width: 100%;
                        height: 153px;
                        position: relative;
                        background: url(../img/status-true-charts.png) no-repeat;
                        background-size: 227px 114px;
                        background-position: center 20px;

                        >img {
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            bottom: 6px;
                            width: 28px;
                            height: 27px;
                        }

                        >div {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .status-true-text {
                        width: 227px;
                        height: 35px;
                        padding: 0 16px;
                        background: url(../img/status-true-text.png) no-repeat;
                        background-size: 100% 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .status-true-text-left {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #8BEAFF;
                        }

                        .status-true-text-right {
                            font-size: 14px;
                            font-family: Arial;
                            font-weight: 400;
                            color: #FFFFFF;
                        }
                    }
                }

                .status-noTrue {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    &.status-add {
                        cursor: pointer;

                        >img {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    >img {
                        width: 40px;
                        height: 35px;
                        margin-bottom: 20px;
                    }

                    >div {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #8BEAFF;
                    }
                }
            }
        }
    }
}

.history {
    .page-content {
        width: 100%;

        .el-table--scrollable-x .el-table__body-wrapper {
            @extend .scroll;

            .el-table__row {
                height: 60px;
            }
        }

        .search-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 20px;

            .search-left {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 15px 0;

                span {}

                >div {
                    display: flex;
                    align-items: center;

                    >div {
                        margin-left: 10px;
                        width: 80px;
                        height: 34px;
                        background: rgba(0, 186, 255, 0.15);
                        border: 2px solid rgba(0, 186, 255, 0.4);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 3px;
                        cursor: pointer;

                        &.active {
                            border: 2px solid #0294E2;
                            background: #0294E2;
                        }
                    }
                }
            }

            .search-right {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 15px 0;

                span {
                    margin-right: 10px;
                }

                .el-input__inner {
                    height: 44px;
                    background: rgba(0, 186, 255, 0.15);
                    border: 2px solid rgba(0, 186, 255, 0.40);
                }

                .el-date-editor .el-range-separator {
                    color: #fff;
                }

                .el-date-editor .el-range-input {
                    background-color: transparent;
                    color: #fff;
                }
            }
        }
    }
}

.wufang {
    .flex-sel {
        display: flex;
        align-items: center;
        padding-right: 10px;
        margin-right: 10px;
    }


}

.no-sel {
    width: 35px;
    height: 35px;
    box-shadow: 0 0 15px rgba(53, 187, 247, 0.50) inset;
    border: 1px solid rgba(0, 204, 255, 0.70);
    border-radius: 50%;
    cursor: pointer;
    margin-right: 9px;
}

.sel {
    width: 35px;
    height: 35px;
    margin-right: 9px;
    background: url(../image/radio.png) no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
}

.dataAnalysis {
    .page-content {
        .search-flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .analysis-charts {
            width: 100%;
            height: 560px;

            >div {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.systemManage {
    .page-content {
        .manage-sel {
            display: flex;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid rgba(0, 180, 255, .35);

            >div {
                margin-right: 20px;
                padding: 0 20px;
                height: 40px;
                background: rgba(0, 186, 255, 0.15);
                border: 2px solid rgba(0, 186, 255, 0.4);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3px;
                cursor: pointer;

                >img {
                    width: 14px;
                    height: auto;
                    margin-right: 5px;
                }

                &.active {
                    border: 2px solid #0294E2;
                    background: #0294E2;
                }
            }
        }

        .manage-content {
            width: 100%;
            height: calc(100% - 160px);

            .manage-input {
                margin-bottom: 25px;

                >div {
                    margin-bottom: 10px;
                }

                >input {
                    width: 500px;
                    height: 44px;
                    background: rgba(0, 186, 255, 0.15);
                    border: 2px solid rgba(0, 186, 255, 0.40);
                    padding: 0 15px;

                    &::placeholder {
                        color: rgba(133, 155, 182, 1);
                    }
                }
            }

            .manage-btn {
                width: 300px;
                height: 60px;
                background: #0294E2;
                border-radius: 10px;
                margin-top: 25px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
            }

            &.manage-content-input {
                height: 400px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

            }

            &.manage-content-form {
                margin-top: 15px;
                display: flex;
                align-items: center;
                flex-direction: column;

                .manage-input {

                    >input {
                        width: 660px;

                    }
                }

                .manage-html {
                    >div {
                        margin-bottom: 10px;
                    }

                    >.html {
                        width: 660px;
                        height: 120px;
                        background: rgba(0, 186, 255, 0.15);
                        border: 2px solid rgba(0, 186, 255, 0.40);

                        >div {}
                    }
                }
            }
        }
    }
}

.input-100-view {
    width: 100%;
    height: 66px;
    background: rgba(0, 186, 255, 0.15);
    border: 2px solid rgba(0, 186, 255, 0.4);
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 30px;

    .title {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
    }

    span {
        padding: 0 10px;
    }

    .line {
        width: 1px;
        height: 40px;
        background: #0294E2;
        opacity: 0.5;
        margin: 0 20px;
    }

    .input-140 {
        width: 140px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.4);
        padding-left: 11px;

        &::placeholder {
            color: rgba(133, 155, 182, 1);
        }
    }

    .input-180 {
        width: 180px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.4);
        padding-left: 11px;

        &::placeholder {
            color: rgba(133, 155, 182, 1);
        }
    }

    .input-100 {
        width: 100px;
        height: 44px;
        background: rgba(0, 48, 112, 0.75);
        border: 1px solid rgba(0, 186, 255, 0.80);
        padding-left: 11px;

        &::placeholder {
            color: rgba(133, 155, 182, 1);
        }
    }
}

.bold-title {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
}

.padding-none {
    padding: 0;
}

.margin-none {
    margin: 0;
}

.skylight {
    .flex-sel {
        display: flex;
        align-items: center;
        padding-right: 10px;
        margin-right: 10px;
    }



    .input-sel {
        margin-right: 20px;

        .el-dropdown-link {
            // width: 260px;
        }
    }

    .flex-view {
        border: none;
    }

    .border-bottom {
        border-bottom: 1px solid rgba(2, 148, 226, 0.5);
    }

    .input-main {

        >input {
            // width: 260px;
        }
    }
}

.fan {
    .bold-title {
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.synthesis-con {
    .synthesis-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-table {
            width: 140px;
            border-top: 1px solid rgba(0, 180, 255, .75);
            border-bottom: 1px solid rgba(0, 180, 255, .75);
            padding-bottom: 17px;

            .table-header {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
            }
        }

        .right-table {
            width: calc(100% - 140px - 10px);
            border-top: 1px solid rgba(0, 180, 255, .75);
            border-bottom: 1px solid rgba(0, 180, 255, .75);
            overflow-x: scroll;

            >div {
                display: inline-block;
                width: auto;
            }

            .table-header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                >div {
                    width: 70px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }
            }

            .table-tr {
                >div {

                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    >div {
                        width: 70px;
                        height: 100%;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }

        .table-tr {
            width: 100%;

            >div {
                height: 60px;
                text-align: center;
                line-height: 60px;
            }

            >div:nth-child(odd) {
                background: rgba(0, 47, 94, .35);
            }

            >div:nth-child(even) {
                background: rgba(0, 180, 255, 0.2);
            }


        }

        .table-header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: rgba(0, 180, 255, 0.2);
            font-size: 16px;
            font-family: Arial;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
}

//二维码部分css
.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;

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

}
.vrcode .el-menu,
.el-submenu__title:hover,
.el-menu-item:hover,
.el-menu-item:focus {
    background: transparent;
}

.vrcode {
    .header {
        .header-right {
            width: 500px;
        }

        .header-center {
            width: calc(100% - 500px - 373px);
        }
    }

    .el-menu {
        border-right: none;
    }

    .el-submenu__icon-arrow {
        font-size: 16px;
        color: #fff;
    }

    .el-submenu .el-menu-item {
        display: flex;
        align-items: center;
        padding-left: 31px;
        position: relative;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #A8B6C8;
        width: 200px;
        height: 40px;
        cursor: pointer;
        margin: 0 auto;

        &::before {
            content: " ";
            width: 4px;
            height: 4px;
            background: #A8B6C8;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }
    }

    .el-submenu__title,
    .el-menu-item {
        display: flex;
        align-items: center;

        .img {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
    }

    .el-submenu .el-menu-item.is-active {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }
}

.vrcode-textarea {
    width: 100%;
    margin-bottom: 15px;

    .title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        margin-bottom: 7px;
    }

    textarea {
        width: calc(100% - 30px);
        height: 160px;
        background: rgba(90, 210, 255, 0.25);
        border: 2px solid rgba(86, 209, 255, 0.5);
        padding: 15px;
        color: #fff;

        &::placeholder {

            color: #92B1D0;
        }
    }
}

.vrcode-table {
    .vrcode-btn {
        margin-bottom: 20px;
    }

    .vrcode-table-view {
        &.table-view {
            background: transparent;
            margin-top: 10px;

            .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                border: none;
                background-color: transparent;
            }

            .cell {
                text-align: center;

            }

            :empty::before {
                content: '--';
                color: #fff;
            }

            .el-table .warning-row {
                background: rgba(0, 180, 255, 0.2);
            }

            .el-table .success-row {
                background: rgba(0, 47, 94, 0.35);

            }

            .el-table .el-table__cell,
            .el-table__row {
                height: 60px;
            }

            .el-table::before,
            .el-table--border::after {
                height: 0;
            }

            .el-table,
            .el-table tr,
            .el-table td.el-table__cell {
                border: none;
                background: transparent;
            }

            .el-table th.el-table__cell.is-leaf {
                border: none;
                background: rgba(0, 180, 255, 0.2);

                .cell {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;

                }
            }

            .vrcode-table-btn {
                display: flex;
                align-items: center;
                justify-content: center
            }

            .table-flex {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }



            .isOpen {
                width: 80px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 15px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;

                &.open-green {
                    background: rgba(0, 255, 186, 0.1);
                    color: #00FFBA;
                    border: 1px solid rgba(0, 255, 186, 0.4);
                }

                &.open-red {
                    background: rgba(245, 108, 108, 0.6);
                    border: 1px solid #F56C6C;
                    color: #FFFFFF;
                }
            }
        }
    }
}

.vrcode-btn {
    min-width: 80px;
    padding: 0 15px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    cursor: pointer;
    margin: 7.5px 10px 7.5px 0 !important;

    >img {
        margin-right: 5px;
    }

    border-radius: 3px;

    &.w-100 {
        width: 100px;
    }

    &.blue-btn {
        background: #00A6FF;

        &:hover {

            background: #0089F2;
        }
    }

    &.red-btn {
        background: #F56C6C;

        &:hover {
            background: #FF5E5E;
        }
    }

    &.save-btn {
        background: #00BB88;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;

        &:hover {
            background: #009E73;
        }
    }

    &.cancle-btn {
        // width: 100px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.4);
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;

        &:hover {
            background: rgba(0, 186, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.6);
        }
    }
}

.manage-input {
    margin-bottom: 15px;

    &.w-400 {
        input {
            width: 400px;
        }
    }

    &.w-350 {
        input {
            width: 350px;
        }
    }

    &.w-160 {
        input {
            width: 160px;
        }
    }

    &.w-180 {
        input {
            width: 180px;
        }
    }

    .search-input {
        margin: 0 10px;
        height: 40px;
    }

    .input-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 10px;
    }

    input {
        width: 240px;
        height: 44px;
        background: rgba(0, 186, 255, 0.15);
        border: 2px solid rgba(0, 186, 255, 0.4);
        padding-left: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

        &::placeholder {
            color: #92B1D0;
        }
    }
}

.vrcode-input-sel {
    margin-right: 30px;
    margin-bottom: 15px;
    &.w-100{
        width: calc(100% - 30px);
        .el-dropdown{
            width: 100%;
        }
        .el-dropdown-link{
            width: 100%;
        }
    }
    >.title {
        margin-bottom: 7px;
    }

    .el-dropdown-link {
        width: 300px;
        height: 44px;
        cursor: pointer;
        position: relative;
       
        input {
            width: 100%;
            height: 100%;

            background: rgba(90, 210, 255, 0.25);
            border: 2px solid rgba(86, 209, 255, 0.5);
            font-size: 16px;
            padding-left: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;

            &::placeholder {
                color: #92B1D0;
            }
        }

        .arrow {
            width: 33px;
            height: 24px;
            border-left: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            >img {
                width: 6px;
                height: 4px;
                &.search{
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
}

.vrcode-input-seltime {
    margin-right: 30px;
    margin-bottom: 15px;

    >.title {
        margin-bottom: 7px;
    }

    .seltime {
        width: 300px;
        height: 44px;
        background: rgba(90, 210, 255, 0.25);
        border: 2px solid rgba(86, 209, 255, 0.5);
        font-size: 16px;
        font-family: Microsoft YaHei;
        position: relative;

        .el-input__prefix {
            display: none;
        }

        input {
            width: 300px;
            height: 40px;
            font-size: 16px;
            padding-left: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            background: transparent;
            border: none;

            &::placeholder {
                color: #92B1D0;
            }
        }

        .seltime-icon {
            width: 38px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #fff;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            >img {
                width: 16px;
                height: auto;
            }
        }
    }
}
.flex-view{
    .vrcode-input-sel .el-dropdown-link{
        height: 40px;
    }
    .vrcode-input-sel{
        margin-right: 10px;
    }
    .vrcode-input{
        margin-right: 10px;
    }
    .vrcode-selimage{
        width: auto;
    }
}
.vrcode-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    position: relative;
    padding-left: 13px;

    &::after {
        content: ' ';
        width: 3px;
        height: 21px;
        background: #0294E2;
        border-radius: 2px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.vrcode-model {
    &.manage-model {
        .el-dialog {
            background: rgba(0, 59, 114, 0.8);
            border: 2px solid rgba(0, 186, 255, 0.35);
        }

        .el-dialog__body {
            .vrcode-content {
                padding: 10px 22px 0 !important;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-row-gap: 0px; //纵向间隔
                grid-column-gap: 20px; //横向间隔
            }
        }

        .el-dialog__footer {
            padding: 15px 22px;
            border-top: 1px solid rgba(0, 180, 255, 0.35);
        }

        .dialog-footer {
            justify-content: flex-start;
        }

        .manage-right {
            .manage-img {
                width: 380px;
                position: relative;
                // height: 290px;
                background: rgba(0, 132, 255, 0.15);
                border: 2px solid rgba(0, 132, 255, 0.35);

                img {
                    width: 360px;
                    height: auto;
                    min-height: 200px;
                }

                padding: 10px;

                #sel-img {
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }

        .manage-text {
            width: 240px;
            height: 160px;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-family: Microsoft YaHei;
            line-height: 28px;
            font-weight: 400;
            font-size: 14px;
            color: #00C0F7;
        }

        .manage-img-small {
            width: 240px;
            height: 160px;
            background: rgba(0, 132, 255, 0.15);
            border: 2px solid rgba(0, 132, 255, 0.35);
            padding: 10px;
            margin-top: 25px;
            position: relative;

            #sel-img {
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 0;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

    }

    .model-return-btn {
        position: absolute;
        right: 30px;
        top: 30px;
        z-index: 999;
    }

    .vrcode-model-title {
        width: 100%;
        height: 43px;
        background: url(../img/vrcode-title.png) no-repeat;
        background-size: 222px 43px;
        background-position: left center;
        padding-left: 46px;
        line-height: 43px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        position: relative;
        font-weight: bold;
        text-align: left;

        &.vrcode-model-title-282 {
            background: url(../img/vrcode-title-282.png) no-repeat;
            background-size: 282px 43px;
        }

        &::after {
            content: ' ';
            width: 32px;
            height: 33px;
            background: url(../img/vrcode-title-icon.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 7px;
            top: 4px;

        }
    }





    .vrcode-radio {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;


        >div {
            margin-right: 30px;
            display: flex;
            align-items: center;

            span {
                margin-left: 8px;
            }
        }
    }

   

    &.confirm-psw {
        .el-dialog__body {
            min-height: unset;
        }

        .el-dialog {
            min-height: unset;
        }
    }

    .el-dialog__body {
        width: 100%;
        min-height: calc(30vh - 70px);

        .vrcode-content {
            width: 100%;
            height: calc(100% - 43px);
            padding: 0 30px;

            
        }
    }

    .el-dialog {
        background: rgba(0, 76, 147, 0.9);
        border: 2px solid rgba(0, 186, 255, 0.6);
        max-height: 90vh;
        min-height: 30vh;
        @extend .scroll;
    }

}
.vrcode-view {
    width: 100%;
    padding: 20px 0 15px 0;
    border-bottom: 1px solid rgba(0, 180, 255, .35);
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    >div {
        flex-shrink: 0;
    }
}
.vrcode-input {
    width: 300px;
    margin-right: 30px;
    margin-bottom: 15px;
    &.w-100{
        width: calc(100% - 30px);
    }
    &.w-50{
        width: calc(50% - 30px);
    }
    .input-title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-bottom: 7px;
    }

    input {
        width:100%;
        height: 44px;
        background: rgba(90, 210, 255, 0.25);
        border: 2px solid rgba(86, 209, 255, 0.5);
        font-size: 16px;
        padding-left: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

        &::placeholder {
            color: #92B1D0;
        }
    }
}

.vrcode-selimage {
    width: 100%;

    >.title {
        margin-bottom: 7px;
    }
    .tips{
        font-size: 16px;
color: #FF9999;
    }
    .sel-image-view {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        #sel-img {
            display: none;
        }

        .sel-div {
            width: 130px;
            height: 130px;
            margin-right: 10px;
            background: rgba(86, 209, 255, 0.25);
            border: 1px dashed #56D1FF;
            cursor: pointer;
            margin-bottom: 15px;
            flex-shrink: 0;

            &.sel-img {
                position: relative;
                padding: 10px;

                &:hover {
                    .del-img {
                        display: flex;
                    }
                }

                .el-image {
                    width: 100%;
                    height: 100%;
                }

                .del-img {

                    width: 110px;
                    height: 110px;
                    background: rgba(0, 0, 0, 0.3);
                    display: none;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 10px;
                    left: 10px;

                    img {
                        width: 44px;
                        height: 44px;
                    }
                }
            }

            &.sel-image-sel {

                display: flex;
                align-items: center;
                justify-content: center;

                >img {
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.plantingPlan {
    width: 100%;
    height: 100%;

    .btn {
        opacity: 1;

        .img {
            height: 20px;
            width: 20px;
        }
    }

    .plan-view {
        width: 440px;
        height: 200px;
        background: url(../img/plan-bg.png) no-repeat center;
        background-size: 100% 100%;
        margin: 7.5px 15px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .plan-view-left {
            width: 180px;
            height: 100%;
        }

        .plan-view-right {
            width: calc(100% - 200px);
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .name {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }
}

.productTraceability {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .productTraceability-title {
        width: 100%;
        max-width: 1182px;
        height: 110px;
        background: url(../img/vrcode-title1.png) no-repeat;
        background-size: 1182px 110px;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: center;

        >span {
            padding: 0 20px;
            font-size: 60px;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            font-style: italic;
            color: #DDF1FF;

            background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(125, 171, 255, 1) 76.7333984375%, rgba(243, 247, 255, 1) 88.0859375%, rgba(243, 247, 255, 1) 92.626953125%, rgba(210, 226, 255, 1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .productTraceability-content {
        margin-top: 135px;
        display: flex;
        align-items: center;
        justify-content: center;

        >div {
            margin: 0 45px;
            cursor: pointer;
        }

        .content-1 {
            width: 200px;
            height: 316px;
            background: url(../img/productTraceability-1.png) no-repeat center;
            background-size: 100% 100%;

            &:hover {
                background: url(../img/productTraceability-1hover.png) no-repeat center;
                background-size: 100% 100%;
            }
        }

        .content-2 {
            width: 240px;
            height: 316px;
            background: url(../img/productTraceability-2.png) no-repeat center;
            background-size: 100% 100%;

            &:hover {
                background: url(../img/productTraceability-2hover.png) no-repeat center;
                background-size: 100% 100%;
            }
        }

        .content-3 {
            width: 200px;
            height: 316px;
            background: url(../img/productTraceability-3.png) no-repeat center;
            background-size: 100% 100%;

            &:hover {
                background: url(../img/productTraceability-3hover.png) no-repeat center;
                background-size: 100% 100%;
            }
        }
    }
}

.model-title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 0;
}

.model-sel {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    min-height: 200px;
    max-height: 700px;
    overflow: auto;
    padding: 0 30px;

    >div {
        width: 33%;
        white-space: nowrap;
        flex-shrink: 0;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }


}

.setsuyuan {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .setsuyuan-page {
        width: 375px;
        height: 736px;
        background: url(../img/setsuyuan-page.png) no-repeat center;
        background-size: 100% 100%;
        padding: 22px 23px 21px 24px;

        .mobile-page {
            width: 100%;
            border-radius: 30px;
            height: 100%;
            overflow: auto;

            >div {
                min-height: 100%;
            }

            .mobile-img {
                width: 100%;
                height: auto;
            }

            .mobile-top {
                width: 100%;
                height: 240px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-size: 100% 100% !important;

                >div {
                    font-family: Microsoft Yahei;
                    font-size: 30px;
                    white-space: nowrap;
                }
            }

            .mobile-content {
                width: 100%;
                min-height: 453px;
                text-align: center;
                padding: 35px 10px 20px;
            }

            .mobile-view {
                position: relative;
                margin-bottom: 30px;

                .mobile-view-content {
                    width: 100%;
                    box-sizing: border-box;
                    background: #fff;
                    border-radius: 8px;
                    padding: 20px 10px 10px 10px;
                    position: relative;
                }

                .mobile-text {
                    font-size: 14px;
                    text-align: left;
                    color: #000;
                }
            }

            .mobile-content-title {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAfCAYAAAA4LFWUAAACiElEQVR4Xu2bvU8UURTFz51Ag6wFauOfIWurnUtoiI2JEEuFkIBKokRpaDYIFmiIBpeSBI2VdkAHLR9/Bo26haPbwL5LZmZn3I+ZjUvyHnOTO+XOzrvnnfvLm5PdXEK3a3t+jLz+52C+DWCg63f1plQHaiA6YHO6ipHl71mboKwb3u6rZWbvpdTdq+7eHSAyK+be0nzak+mgbC+MEeFb76X0CekOcN3cx+hSR+9TQaGdhT0Ad6RvWvVfyIF9LpXvtj/ZCcrms1t0Y+AIlPlWulB1fUiIA8zgH7VhPHp33Ky4gwZva2adr12dFLItlWnBAfr1+5MZX5vKBuXr9CCd9p3geqFgob4uKcWBn77P/Wc38eDjn1hy64nyeeYxgSoYUk6k9NSKzqoPBj/Bw7WNVFBo6+kBiIsKihX75Sxa9QGmQx5/H/x+Fl7/TpQgxPaZo/BTPVHkNNWG0gAUAHzmJaE2ASUMsURRiFVQbNgvZ80GKMSchNoIlDjEeojCiYIip6k2lDZAgUESaiNQ4hAbF1VQbNgvZ80YlOD1Y+qTmPhQCUFJQqyCIqeZNpU2gRKHWkJziFVQbNovZ+1mUMJTBUVqCbEKipxm2lTaBkoQaglfZuc8boTYRnEeKiza1KFr59sBqvot/TcEP+vfY873VlSdTQe4VO7gQkGx6bjQtRUUoY1zLVtBce240HoKitDGuZatoLh2XGg9BUVo41zLVlBcOy60noIitHGuZfcCyl+dDHTdntzUq3GpfKVdjc715KY/uRHyn3M9gV6dFMxN11wL6WlSMBDn7bxeYdAL10K13uU5QKi/NaU3qfPm3ccBo5NlDkBRM8vlNdBy5RqAQ66b1bSZ47j2Odyz15vs+mViAAAAAElFTkSuQmCC)no-repeat center;
                width: 138px;
                height: 31px;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                color: #fff;
                z-index: 2;
                font-size: 15px;
                position: absolute;
                top: -16px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    .page-content {
        width: calc(100% - 400px) !important;
    }

    .vrcode-selimage {
        margin-top: 30px;

        .sel-image-view .sel-div {
            width: 200px;
            height: 160px;
        }

        .sel-image-view .sel-div.sel-img .del-img {
            width: 178px;
            height: 138px;
        }
    }

    .setsuyuan-tips {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF9999;
        margin: 0px 0 30px;
    }

    .vrcode-input {
        width: 100%;
        margin-right: 0;

        input {
            width: 100%;
            max-width: 800px;
        }
    }

    .setsuyuan-input {
        display: flex;
        margin-bottom: 15px;

        .setsuyuan-input-name {
            width: 120px;
            padding-right: 20px;
            text-align: right;
            line-height: 40px;
            white-space: nowrap;
        }

        .el-color-picker__trigger {
            background: rgba(90, 210, 255, 0.25);
            border: 2px solid rgba(86, 209, 255, 0.5);
        }

    }

    .save-btn {
        width: 100px;
        height: 40px;
        background: #19ABFF;
        border-radius: 3px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        cursor: pointer;
    }

    .setsuyuan-input-select {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
        max-height: 50px;
        margin-right: 20px;


    }
}

.systemSet-con {
    width: 100%;
    height: 100%;

    .page-content {}
}

.el-button span {

    color: #606266;
}

.el-button--primary,
.el-button--success {
    &.el-button span {
        color: #fff;
    }

}

.return-btn {
    // width: 120px;
    margin: 0 8px;
    min-width: 120px;
    padding: 0 20px;
    border-radius: 3px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    background: #00BB88;
}

.el-pagination {
    margin-top: 20px;

    .btn-prev,
    .btn-next {
        .el-icon {
            color: #333;
        }
    }

}

.el-pager li {
    color: #333;
}

.el-pager li.active {
    color: #409EFF;
}

.el-select-dropdown__item.selected span {
    color: #409EFF;
    font-weight: 700;
}

.el-pagination__total,
.el-pagination__jump {
    color: #fff;
}

.el-select-dropdown__item span {
    color: #606266;
}

.historyData {
    .table-view {
        .el-table th.el-table__cell.is-leaf .cell {
            font-size: 14px !important;
        }

        .table-title {
            width: 100%;
            display: flex;
            align-items: center;
            padding-bottom: 5px;
            justify-content: space-between;
            border-bottom: 2px solid rgba(0, 180, 255, 0.5);
        }

        .image-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            >div {
                width: 380px;
                height: auto;
                background: rgba(0, 132, 255, 0.15);
                border: 2px solid rgba(0, 186, 255, 0.35);
                margin: 7.5px;
                padding: 10px;
                flex-shrink: 0;

                .el-image {
                    cursor: pointer;
                    min-height: 200px;
                }
            }
        }
    }
}

.manage-btn {
    min-width: 140px;
    height: 40px;

    border-radius: 3px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    background: rgba(0, 186, 255, 0.15);
    border-radius: 3px;
    border: 2px solid rgba(0, 186, 255, 0.4);
    padding: 0 15px;
    margin: 7.5px 20px 7.5px 0 !important;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;

    &.active {
        background: #0294E2;
        border: 2px solid transparent;
    }

    img {
        margin-right: 5px;
        width: 14px;
        height: auto;
    }
}

.manage-page {
    width: 100%;
    height: 100%;
    background: rgba(0, 92, 178, 0.15);
    padding: 20px 30px;
    border: 2px solid rgba(0, 186, 255, 0.2);

    .scroll {
        flex-wrap: nowrap !important;
    }
}

.table-title-btn {
    min-width: 100px;
    height: 40px;
    padding: 0 15px;

    >img {
        width: 14px;
        height: auto;
        margin-right: 9px;
    }

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;

    &.blue {
        background: #0294E2;
    }

    &.red {
        background: #FF9191;
    }

    border-radius: 3px;
}

.videoManage {
    .table-view {
        margin-top: 0;
    }

    .flex-title {
        padding-top: 0;
        justify-content: space-between;
        border-bottom: 1px solid transparent;
    }

    // >.flex-view {
    //     justify-content: space-between;
    // }
}

.el-table {
    .el-table__body-wrapper {
        @extend .scroll;

        &::-webkit-scrollbar {
            /*滚动条整体*/
            width: 17px;
        }

        &::-webkit-scrollbar-thumb {
            /*滚动条里面的滑块*/
            width: 4px;
            cursor: pointer;
            background: #0294E2;
            border: 5px solid #013769;
        }

    }

    .el-table__cell.gutter {
        display: none;
    }
}

.manage-dropdown {
    width: 240px !important;

    &.w-400 {
        width: 400px !important;
    }

    &.w-350 {
        width: 350px !important;
    }
}

.manage-input-sel {
    margin-right: 30px;
    margin-bottom: 15px;

    .input-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 10px;
    }

    &.w-400 {
        .el-dropdown-link {
            width: 400px;
        }
    }

    &.w-350 {
        .el-dropdown-link {
            width: 350px;
        }
    }

    .el-dropdown-link {
        width: 240px;
        height: 44px;
        cursor: pointer;
        position: relative;

        input {
            width: 100%;
            height: 100%;

            background: rgba(0, 186, 255, 0.15);
            border: 2px solid rgba(0, 186, 255, 0.4);
            font-size: 16px;
            padding-left: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;

            &::placeholder {
                color: #92B1D0;
            }
        }

        .arrow {
            width: 33px;
            height: 24px;
            border-left: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            >img {
                width: 6px;
                height: 4px;
                
            }
        }
    }
}