.devicemanage {
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(top, #020e38 0%, #04195b 100%);
    background-size: 100% 100%;
    padding: 20px;
    overflow: hidden;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 5.7rem;

        h3 {
            font-size: 3.8rem;
            font-weight: 800;
            color: #84e0f7;
        }
    }

    .seeting {
        .tooltips {
          color: #606266;
          border: 2px solid #1e60a6;
          box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
          background-color: transparent;
    
          :deep(span) {
            color: #5beff9;
          }
    
          margin-left: 10px;
        }
      }

    .layout {
        display: flex;
        margin-top: 20px;

        .sidebar {
            width: 12%;
            height: calc(100vh - 5.7rem - 60px);
            flex-shrink: 0;
            border: 2px solid #1e60a6;
            padding: 10px;
            box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
            margin-right: 1%;
            overflow: scroll;

            .menu {
                text-align: center;
                border-right: none;

                .el-sub-menu {
                    span {
                        font-size: 2.2rem;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .el-menu-item {
                        span {
                            font-size: 1.4rem;
                        }
                    }
                }

                .el-sub-menu:hover,
                .el-menu-item:hover {
                    background-color: transparent !important;
                }
            }
        }

        .main {
            width: 87%;
            border: 2px solid #1e60a6;
            box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);

            :deep(.devicePrt) {
                .deviceImg {
                    position: relative;

                    .deviceImg {
                        width: 100%;
                    }

                    .card {
                        position: absolute;
                        display: inline-block;
                        color: #87e8de;
                        font-size: 1.4rem;
                        padding: 10px 20px;
                        border-radius: 10px;
                        background: rgba(255, 255, 255, 0.1);
                        backdrop-filter: blur(10px);
                        border: 1px solid rgba(255, 255, 255, 0.1);
                        box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
                        z-index: 99;
                        overflow: hidden;

                        .dataInfo {
                            padding: 5px 0;

                            span {
                                display: block;
                            }
                        }
                        .dataFlex{
                            display: flex;
                            .flexItem{
                                margin-right: 15px;
                            }
                            .flexItem:last-child{
                                margin-right: 0;
                            }
                        }
                    }

                    // .dataInfo {
                    //     position: absolute;
                    //     display: inline-block;
                    //     color: #87e8de;
                    //     padding: 10px;
                    //     font-size: 16px;
                    //     // border: 2px solid #39c33c;
                    //     z-index: 99;

                    //     span {
                    //         display: block;
                    //     }
                    // }
                }

                .deviceImgA {
                    .card_a {
                        top: 40%;
                        left: 4%;
                    }
                    .card_b {
                        top: 5%;
                        left: 3%;
                    }
                    .card_c {
                        top: 9%;
                        right: 3%;
                    }
                    .card_f {
                        top: 52%;
                        right: 6%;
                    }
                }
                .deviceImgB {
                    .card_a {
                        top: 42%;
                        left: 8%;
                    }
                    .card_b {
                        top: 10%;
                        left: 9%;
                    }
                    .card_c {
                        top: 1%;
                        right: 21%;
                    }
                    .card_d {
                        top: 32%;
                        right: 18%;
                    }
                    .card_f {
                        top: 62%;
                        right: 11%;
                    }
                }
                .deviceImgC {
                    .card_a {
                        top: 1%;
                        left: 9%;
                    }
                    .card_b {
                        top: 55%;
                        left: 6%;
                    }
                    .card_c {
                        top: 1%;
                        right: 22%;
                    }
                    .card_d {
                        top: 32%;
                        right: 20%;
                    }
                    .card_e {
                        top: 36%;
                        right: 4%;
                    }
                    .card_f {
                        top: 68%;
                        right: 13%;
                    }
                }

                // .deviceImgA {
                //     .dataInfo0 {
                //         top: 7%;
                //         left: 6%;
                //     }

                //     .dataInfo1 {
                //         top: 35%;
                //         left: 9%;
                //     }

                //     .dataInfo2 {
                //         top: 0%;
                //         left: 18%;
                //     }

                //     .dataInfo3 {
                //         top: 0%;
                //         left: 25%;
                //     }

                //     .dataInfo4 {
                //         top: 15%;
                //         left: 17.5%;
                //     }

                //     .dataInfo5 {
                //         top: 26%;
                //         left: 17.5%;
                //     }

                //     .dataInfo6 {
                //         top: 0%;
                //         right: 20%;
                //     }

                //     .dataInfo7 {
                //         top: 10%;
                //         right: 20%;
                //     }
                // }
                // .deviceImgB {
                //     .dataInfo0 {
                //         top: 23%;
                //         left: 10.5%;
                //     }

                //     .dataInfo1 {
                //         top: 55%;
                //         left: 12%;
                //     }

                //     .dataInfo2 {
                //         top: 0%;
                //         left: 23%;
                //     }

                //     .dataInfo3 {
                //         top: 0%;
                //         left: 30%;
                //     }

                //     .dataInfo4 {
                //         top: 10%;
                //         left: 23%;
                //     }

                //     .dataInfo5 {
                //         top: 20%;
                //         left: 23%;
                //     }

                //     .dataInfo6 {
                //         top: 0%;
                //         right: 36%;
                //     }

                //     .dataInfo7 {
                //         top: 10%;
                //         right: 36%;
                //     }
                //     .dataInfo8 {
                //         top: 26%;
                //         right: 31%;
                //     }

                //     .dataInfo9 {
                //         top: 36%;
                //         right: 31%;
                //     }
                // }
                // .deviceImgC {
                //     .dataInfo0 {
                //         bottom: 38%;
                //         left: 8.5%;
                //     }

                //     .dataInfo1 {
                //         bottom: 1%;
                //         left: 11%;
                //     }

                //     .dataInfo2 {
                //         top: 0%;
                //         left: 23%;
                //     }

                //     .dataInfo3 {
                //         top: 0%;
                //         left: 30%;
                //     }

                //     .dataInfo4 {
                //         top: 10%;
                //         left: 23%;
                //     }

                //     .dataInfo5 {
                //         top: 20%;
                //         left: 23%;
                //     }

                //     .dataInfo6 {
                //         top: 0%;
                //         right: 36%;
                //     }

                //     .dataInfo7 {
                //         top: 0%;
                //         right: 29%;
                //     }
                //     .dataInfo8 {
                //         top: 22%;
                //         right: 36%;
                //     }

                //     .dataInfo9 {
                //         top: 22%;
                //         right: 29%;
                //     }
                //     .dataInfo10 {
                //         top: 47%;
                //         right: 36%;
                //     }

                //     .dataInfo11 {
                //         top: 47%;
                //         right: 29%;
                //     }
                // }

                .devicInfo {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 20px;
                    margin: 3% 20px 0 20px;
                    // border: 2px solid #292a48;

                    .l_green {
                        color: #39c33c;
                    }

                    .l_blue {
                        color: #41a5d7;
                    }

                    .orange {
                        color: #c15757;
                    }

                    .title {
                        font-size: 16px;
                    }

                    .valves {
                        display: flex;
                        align-items: center;
                        flex-shrink: 0;
                        width: 40%;

                        .title {
                            writing-mode: vertical-rl;
                            // transform: rotate(180deg);
                        }

                        .info {
                            .select {
                                font-weight: 800;

                                .n-button {
                                    margin-right: 5px;
                                    background: linear-gradient(#3370cb, #162f68, #162f68);
                                }
                            }

                            .table {
                                border: 1px solid #39c33c;
                                border-radius: 3px;
                                margin: 10px 0 10px 20px;

                                .item {
                                    display: flex;
                                    align-items: center;
                                    padding: 10px 20px;
                                    line-height: 26px;
                                    border-bottom: 1px solid #39c33c;

                                    .lable {
                                        font-size: 16px;
                                        flex-shrink: 0;
                                    }

                                    .parameters {
                                        display: flex;
                                        flex-wrap: wrap;

                                        .name {
                                            color: #c15757;
                                            margin-left: 15px;
                                        }

                                        .name:nth-child(even) {
                                            color: #41a5d7;
                                        }

                                        .n-radio__label {
                                            color: #41a5d7;
                                        }
                                    }
                                }

                                .item:last-child {
                                    border-bottom: none;
                                }
                            }

                            .switch {
                                display: flex;

                                span {
                                    display: flex;
                                    align-items: center;
                                    margin-right: 5px;
                                }
                            }
                        }
                    }

                    .pump {
                        width: 55%;
                        padding: 5px 10px;
                        border: 1px solid #39c33c;

                        .item {
                            line-height: 28px;

                            .info {
                                display: flex;
                                flex-wrap: wrap;

                                .name {
                                    color: #c15757;
                                    margin-left: 15px;
                                }

                                .name:nth-child(even) {
                                    color: #41a5d7;
                                }
                            }
                        }
                    }
                }
            }
        }

        /*滚动条整体部分*/
        .sidebar::-webkit-scrollbar,
        .tableGrid ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*滚动条的轨道*/
        .sidebar::-webkit-scrollbar-track,
        .tableGrid ::-webkit-scrollbar-track {
            background-color: transparent;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        /*滚动条里面的小方块，能向上向下移动*/
        .sidebar::-webkit-scrollbar-thumb,
        .tableGrid ::-webkit-scrollbar-thumb {
            background-color: rgb(147, 147, 153, 0.5);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover,
        .tableGrid ::-webkit-scrollbar-thumb:hover {
            background-color: #a8a8a8;
        }

        .sidebar::-webkit-scrollbar-thumb:active,
        .tableGrid :-webkit-scrollbar-thumb:active {
            background-color: #787878;
        }

        /*边角，即两个滚动条的交汇处*/
        .sidebar::-webkit-scrollbar-corner,
        .tableGrid ::-webkit-scrollbar-corner {
            background-color: transparent;
        }
    }
}