.devicemanage {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(@/assets/images/screen.png);
  // background-color: var(--tableBg);
  background-size: 100% 100%;
  // background-color: rgba(0, 0, 0, 0.3);
  // background-blend-mode: multiply;
  padding: 0 25px;
  overflow: hidden;

  .layout {
    display: flex;

    .sidebar {
      width: 12%;
      height: calc(100vh - 95px - 30px); //屏幕高度-头部header高度-底部高度
      flex-shrink: 0;
      border: 1px solid #0d55b0;
      padding: 10px 0;
      // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
      margin-right: 1vw;
      position: relative;
      overflow: hidden;
      transition: width 0.28s;
      background-color: rgba(2, 8, 46, 0.8);

      // .menu {
      //     text-align: center;

      //     :deep(.n-submenu) {
      //         --n-item-color-hover: auto;

      //         .n-menu-item {
      //             .n-menu-item-content {
      //                 padding: 0 !important;

      //                 .n-ellipsis {
      //                     font-family: 'AlibabaPuHuiTiBold';
      //                     padding: 0 15px;
      //                 }
      //             }

      //             .n-menu-item-content-header {
      //                 font-size: 2.4rem;
      //                 color: #B1E3FF;
      //             }
      //         }

      //         .n-submenu-children {
      //             .n-menu-item-content-header {
      //                 font-size: 1.8rem;
      //             }

      //             .n-menu-item-content--selected {
      //                 .n-menu-item-content-header {
      //                     color: #fff;

      //                     .n-ellipsis {
      //                         position: relative;

      //                         span {
      //                             padding: 0 10px;
      //                         }

      //                         span::before {
      //                             content: '';
      //                             position: absolute;
      //                             left: 0;
      //                             top: 0.7rem;
      //                             width: 1.8rem;
      //                             height: 1.8rem;
      //                             background: url(../../../assets/images/taps.png) no-repeat;
      //                             background-size: cover;
      //                         }
      //                     }
      //                 }
      //             }

      //             .n-menu-item-content--selected::before {
      //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
      //                 left: 0;
      //                 right: 0;
      //             }

      //             .n-menu-item-content--selected::after {
      //                 content: '';
      //                 position: absolute;
      //                 bottom: 0;
      //                 width: 100%;
      //                 height: 2px;
      //                 background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 100%);
      //             }
      //         }

      //         .n-base-icon {
      //             color: #84e0f7;
      //             right: 10px;
      //         }
      //     }
      // }
    }

    .sidebar::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 18rem;
      background: url(@/assets/images/menu_bg.png) no-repeat;
      background-size: 100% 100%;
    }

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

      :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;
              }
            }
          }
          // .switch {
          //   position: absolute;
          //   z-index: 99;
          //   cursor: pointer;
          //   overflow: hidden;
          // }

          // .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: 5%;
          }

          .card_b {
            top: 5%;
            left: 5%;
          }

          .card_c {
            top: 30%;
            right: 3%;
          }

          .card_f {
            top: 30%;
            right: 20%;
          }
          // .switch_a {
          //   width: 35px;
          //   height: 60px;
          //   background: red;
          //   top: 23%;
          //   left: 16.5%;
          // }
          // .switch_b {
          //   width: 40px;
          //   height: 65px;
          //   background: red;
          //   top: 59%;
          //   left: 15.5%;
          // }
        }

        .deviceImgB {
          .card_a {
            top: 42%;
            left: 5%;
          }

          .card_b {
            top: 8%;
            left: 5%;
          }

          .card_c {
            top: 16%;
            right: 3%;
          }

          .card_d {
            top: 52%;
            right: 3%;
          }

          .card_f {
            top: 30%;
            right: 21%;
          }
        }

        .deviceImgC {
          .card_a {
            top: 6%;
            left: 6%;
          }

          .card_b {
            top: 62%;
            left: 5%;
          }

          .card_c {
            top: 2%;
            right: 2%;
          }

          .card_d {
            top: 35%;
            right: 2%;
          }

          .card_e {
            top: 67%;
            right: 2%;
          }

          .card_f {
            top: 30%;
            right: 21%;
          }
        }

        // .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 {
          color: #b1e3ff;
          padding: 0 3rem;
          font-family: 'AlibabaPuHuiTiRegular';

          .title {
            display: flex;
            align-items: center;
            font-size: 20px;
            background: url(@/assets/images/info_bg.png) no-repeat center;
            background-size: 100% 100%;

            i {
              display: block;
              width: 6px;
              height: 50px;
              background: linear-gradient(270deg, #679fff 0%, rgba(17, 119, 231, 0.698) 100%);
              border-radius: 0px 0px 0px 0px;
              margin-right: 18px;
            }
          }

          .infoPanel {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;

            .item {
              width: 49%;
              height: calc(100vh - 150px - 53rem);
              padding: 15px 0;
              background: -webkit-linear-gradient(top, #052266 0%, #011341 100%);
              overflow: auto;

              .collapse {
                .colItem {
                  .n-collapse-item__header-main {
                    font-size: 18px;
                    color: #1fb1ff;
                    padding: 0 22px;

                    .n-collapse-item-arrow {
                      margin-right: 10px;

                      img {
                        width: 18px;
                        height: 16px;
                      }
                    }
                  }

                  .n-collapse-item__content-wrapper {
                    .n-collapse-item__content-inner {
                      padding-top: 10px;

                      .content {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 15px;
                        font-size: 16px;
                        color: #c15757;
                        line-height: 30px;

                        span {
                          display: flex;
                          align-items: center;
                          flex: 0 0 calc(100% / 2);
                          i {
                            font-style: normal;
                            display: flex;
                            align-items: center;
                            .n-input-number {
                              display: flex;
                              align-items: center;
                            }
                          }
                          .switch {
                            font-size: 13px;
                          }
                        }

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

                      // .content.pump {
                      //   span {
                      //     flex: auto;
                      //   }
                      // }
                    }
                  }
                }

                .colItem.n-collapse-item--active {
                  .n-collapse-item-arrow {
                    transform: none;
                  }
                }

                .colItem:not(:first-child) {
                  border-top: none;
                }

                .colItem:not(:first-child)::before {
                  display: block;
                  content: '';
                  width: 100%;
                  height: 1px;
                  background: linear-gradient(
                    90deg,
                    rgba(31, 225, 255, 0) 0%,
                    rgba(189, 220, 255, 0.94) 50%,
                    rgba(31, 225, 255, 0) 97%
                  );
                }
              }
            }
          }

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

        .tips {
          font-size: 1.6rem;
          font-family: 'AlibabaPuHuiTiRegular';
          text-align: center;
          color: #b1e3ff;
          margin-top: 40vh;
        }
      }
    }

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

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

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

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

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

    /*边角，即两个滚动条的交汇处*/
    .tableGrid ::-webkit-scrollbar-corner {
      background-color: transparent;
    }
  }
  .copyright {
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #9ca3af;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
}

.dark {
  .devicemanage {
    background-color: rgba(29, 30, 31, 0.8);
    background-blend-mode: multiply;

    .layout {
      .sidebar {
        background-color: rgba(29, 30, 31, 0.8);
      }

      .main {
        background-color: rgba(29, 30, 31, 0.8);

        .devicePrt {
          :deep(.devicInfo) {
            .infoPanel {
              .item {
                background: -webkit-linear-gradient(top, rgba(29, 30, 31, 0.8) 0%, rgba(28, 32, 37, 0.8) 100%);
              }
            }
          }
        }
      }
    }
  }
}