.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 {
        /*滚动条边角*/
    }

}

.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;
}

.border-none {
    border: none !important;
}

.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;
            }

        }

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

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

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

    >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;
    }

    .title-text {
        font-size: 16px;
        margin-left: 15px;
    }
}

.index {
    width: 100%;
    height: 100%;
    min-height: 900px;
    overflow: auto;
    background: url(../image/index-background.png) no-repeat;
    background-size: 1920px 1080px;
    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;

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

        }

        .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-right {
            width: 335px;
            display: flex;
            align-items: center;
            padding-right: 20px;
            justify-content: flex-end;

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

            .user-data {
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 20px 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;

                &: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);

            overflow: auto;
        }

        .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 {
    >.title {
        margin-bottom: 11px;
    }

    .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: 180px;
        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-80 {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;

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

        >span {
            color: #FF9191;
        }
    }

    span {
        padding: 0 10px;
    }

    input {
        width: 80px;
        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;
        }
    }
}

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

    .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;
    }
}

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

    .page-content {
        width: calc(100% - 300px);
        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 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;
                }
            }

            .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;
}

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

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

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

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

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

}

.btn {
    margin: 0 8px !important;
    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;
    white-space: nowrap;
    min-width: 120px;

    >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;

        >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;
            }
        }
    }
}

.systemSet {
    .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;
    }
}

.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;

            .no-sel {
                margin-right: 10px;
                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%;
            }

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

.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;

                    >.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;

                        >.no-sel {
                            margin-right: 10px;
                            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%;
                        }

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

            .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;

                    >.no-sel {
                        margin-right: 10px;
                        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%;
                    }

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

.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;

                    .btn {
                        padding: 0 10px;

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

                .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-80 {
                            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-80 {

                        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;
        }
    }
}

.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;
                    }
                }
            }

        }

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


        }

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

            >div {
                flex-shrink: 0;
            }

            .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;

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

                    .video-js {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .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;

                        >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;

                        >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;
    }

    .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;
    }

    .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);
            }

            .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;
            }

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

        .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;

}

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

.vrcode {
    .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: 680px;
        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;
            }

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

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

            .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;

    &.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);
        }
    }
}

.vrcode-model {
    .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;

        &::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-input-sel {
        margin-right: 30px;
        margin-bottom: 15px;

        >.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;
                }
            }
        }
    }

    .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;
                }
            }
        }
    }

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

        .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;
        }

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

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

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

    .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%);
        }
    }

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

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

            .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;
                }
            }
        }
    }

    .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-input {
    width: 300px;
    margin-right: 30px;
    margin-bottom: 15px;

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

    input {
        width: 300px;
        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;
    }

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

        #sel-img {
            display: none;
        }

        .sel-div {
            width: 130px;
            height: 130px;
            margin-right: 30px;
            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;
    align-items: center;
    min-height: 200px;
    max-height: 700px;
    overflow: auto;
    padding: 0 30px;

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

    .no-sel {
        margin-right: 10px;
        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;
    }

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

.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;

        .no-sel {
            margin-right: 10px;
            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%;
        }

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

.el-button span {

    color: #606266;
}