.content-box {
  width: 97.5%;
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    /* // width: calc(100wh - 40px); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
    .gongneng {
      .el-dropdown {
        margin-left: 20px;
      }
    }
  }

  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;

    /* // border-bottom: 1px solid rgb(231, 231, 231); */
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0 0 0;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;
      }
    }
    .changeItems {
      display: flex;
      margin: 5px 0 15px 0;
      .changeItem {
        padding: 0 15px;
        height: 30px;
        background-color: rgba(230, 230, 230, 1);
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 3px;
        color: rgba(166, 166, 166, 1);
        cursor: pointer;
      }
      .changeItem_active {
        background-color: rgba(222, 234, 252, 1);
        color: rgba(0, 97, 255, 1);
      }
      .search {
        margin-right: 5px;
      }
    }

    .gongneng {
      margin: 10px 0 20px 0;

      span {
        color: #fff;
      }
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }

    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }

  .footer {
    width: 96%;
    height: calc(100vh - 308px);
    margin: 10px auto 20px;
    color: #000;
    overflow: auto;
    .floor {
      .title {
        margin: 8px 0;
        .t1 {
          font-weight: 600;
          margin-right: 10px;
        }
        .t2 {
          font-size: 13px;
          color: rgba(102, 102, 102, 1);
        }
      }
      .roomList {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;

        .room {
          width: 228px;
          height: 140px;
          opacity: 1;
          border-radius: 4px;
          background: rgba(240, 243, 247, 1);
          margin: 5px 18px 18px 0;
          /* // padding-left: 15px; */
          .el-tooltip__trigger {
            height: 100%;
          }
          .roomNum {
            font-size: 16px;
            height: 55px;
            font-weight: 600;
            margin: 0 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .status {
              /* // background-color: rgba(211, 219, 230, 1); */
              background-color: rgba(41, 109, 227, 1);
              color: #fff;
              font-size: 12px;
              padding: 1px 5px;
              border-radius: 2px;
            }
          }
          .rLock {
            font-size: 12px;
            color: #000;
            margin: 0 15px;
            padding: 0 0 5px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
              cursor: pointer;
            }
          }
          .wifi {
            display: flex;
            align-items: center;
            padding: 10px 0 10px 15px;
            color: rgba(51, 51, 51, 1);
            img {
              width: 14px;
              padding-right: 5px;
            }
          }
        }
      }
    }
  }
  .footers {
    width: 96%;
    height: calc(100vh - 308px);
    margin: 10px auto 10px;

    .el-table--fit {
      height: 100%;

      /* // border: 1px solid #ccc; */
      :deep(.el-table__header-wrapper) {
        /* // background-color: #000; */
        font-size: 15px;
        color: #000;

        th {
          font-weight: 400;
          font-size: 16px;
        }

        .cell {
          color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-table__column-filter-trigger {
            width: 20px;
            height: 20px;
            margin-left: 5px;
            background-image: url("../../assets/icons/switch.png");
            background-size: 100% 100%;
            .el-icon {
              display: none;
            }
          }
        }

        /* // 日历 */
        .calendar {
          cursor: pointer;

          .date {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;

            .dateSel {
              display: flex;
              align-items: center;
            }

            .el-icon {
              margin: 0 5px;
            }
          }

          .nowDay {
            background-color: rgba(41, 109, 227, 1);
            color: rgb(255, 255, 255);
            margin-left: 5px;
            padding: 0px 3px;
            transform: scale(0.8);
            border-radius: 2px;
          }

          .dates {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #868686;
          }

          .block {
            cursor: pointer;

            .el-input__wrapper {
              /* // border: 1px solid red; */
              box-shadow: none;
              background-color: transparent;

              .el-input__prefix-inner {
                transform: translateX(130px);
              }

              .el-input__inner {
                cursor: pointer;
                margin-left: 20px;
              }
            }
          }
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 15px;
        color: #000;

        .contentBody {
          display: flex;
          flex-direction: column;
          text-align: left;

          /* // padding: 8px 8px; */
          .calendar {
            /* // height: 26px; */
            padding: 0 8px;
          }

          .calendars {
            /* // height: 26px; */
            padding: 0 2px;
          }
        }

        .contentBodys {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 100%;
          position: absolute;
          background-color: #ccc;
          left: 0;
          top: 0;
          opacity: 0;
          transform: scale(0.96);

          img {
            width: 18px;
            margin: 5px;
          }
        }

        .contentBodys_closeType {
          opacity: 1;
          /* // border: 1px solid rgba(9, 101, 98, 1); */
        }

        /* // 房间清扫图标 */
        .cell {
          .roomNumber {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 22px;
              position: absolute;
              right: 6px;
              bottom: 6px;
            }
          }

          .roomNumbers {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: #ccc;
            left: 0;
            top: 0;
            opacity: 0;
            transform: scale(0.96);
          }

          .roomNumbers:hover {
            opacity: 1;
            border: 1px solid rgba(41, 109, 227, 1);
          }
        }
      }

      :deep(.el-table__row):hover {
        td {
          background: #fff;
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        /* // border: 1px solid #ccc; */
      }

      :deep(.el-table__row td):hover {
        cursor: pointer;
        background-color: rgb(245, 247, 253);
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.options) {
        display: flex;
        justify-content: center;
        align-items: center;

        .reset {
          color: rgba(9, 101, 98, 1);
          cursor: pointer;
        }

        .look {
          margin: 0 10px;
          color: rgba(30, 125, 251, 1);
          cursor: pointer;
        }

        .del {
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }
      }
    }

    /* // 添加员工弹窗样式 */
    :deep(.addStaff) {
      /* //   height: 420px; */
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 30px 20px 10px 20px;

        .el-input {
          width: 200px;

          .el-input__suffix-inner {
            color: rgba(61, 81, 232, 1);
          }
        }

        .options {
          margin: 10px 20px 20px 0;
          width: 100%;

          .el-form-item__content {
            display: flex;
            flex-direction: row-reverse;
          }

          .queding {
            color: #fff;
            margin-left: 15px;
          }
        }
      }
    }
  }
  .footer::-webkit-scrollbar-track {
    background-color: #daeeff;
  }

  .footer::-webkit-scrollbar {
    background-color: #0888f8;
    height: 3px;
    width: 4px;
  }

  .footer::-webkit-scrollbar-thumb {
    background: #57b2ff;
    border-radius: 4px;
    height: 3px;
    width: 4px;
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      /* // width: 1600px; */
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        background-color: rgba(111, 182, 184, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}

.el-input {
  width: 192px;
}

/* // 弹出的信息框 */
.roominfoPopper {
  .roomInfo {
    /* // border: 1px solid red; */
    color: #fff;
    font-size: 14px;
    position: relative;
    .close {
      position: absolute;
      width: 25px;
      height: 25px;
      right: -35px;
      top: -24px;
      cursor: pointer;
    }
    .title {
      font-size: 16px;
      padding: 7.5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      .i {
        display: inline-block;
        width: 208px;
      }
      .setAside {
        display: flex;
        align-items: center;
        margin-left: 16px;
        font-size: 14px;
        cursor: pointer;
        img {
          width: 16px;
          margin-right: 5px;
        }
      }
    }
    .content {
      display: flex;
      .lefts {
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        width: 208px;
        span:nth-child(1) {
          text-align: left;
          display: inline-block;
          /* // width: 72px; */
          margin: 5px 15px 5px 0;
        }
        span:nth-child(2) {
          text-align: left;
          display: inline-block;
          /* // width: 190px; */
          /* // padding-right: 20px; */
        }
      }
      .rigths {
        /* // width: 140px; */
        margin-left: 15px;
        div {
          display: flex;
          align-items: center;
          height: 33px;
          cursor: pointer;
          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          span {
            text-align: left;
            display: inline-block;
          }
          .deblocking {
            transform: translateX(3px);
          }
        }
        .roomType {
          margin: 30px 0 0 15px;
          .block {
            width: 49px;
            height: 49px;
            background-color: #fff;
            border-radius: 50%;
            color: rgba(30, 125, 251, 1);
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
/* // 换房弹窗 */
:deep(.roomChangeDialog) {
  /* // height: 600px; */
  overflow: hidden;
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      display: flex;
      height: 500px;
      margin-bottom: 50px;
      margin: 0 20px 50px;
      .middles {
        width: 150px;
        /* // margin: 0 auto; */
        color: #000;
        /* //   切换  消息记录  操作记录 */
        .changeItemss {
          /* // margin: 20px 0; */
          width: 130px;
          .changeNews {
            margin: 15px 0;
            height: 40px;
            background-color: rgba(230, 230, 230, 1);
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            border-radius: 3px;
            color: rgba(166, 166, 166, 1);
            cursor: pointer;
          }
          .changeNews_active {
            background-color: rgba(222, 234, 252, 1);
            color: rgba(0, 97, 255, 1);
          }
        }
        /* // border-bottom: 1px solid rgb(231, 231, 231); */
        .filter {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin: 10px 0 0 0;
          justify-content: start;

          .search {
            color: #fff;
          }

          .condition {
            display: flex;
            align-items: center;
            margin: 10px 30px 10px 0;

            :deep(.el-input .el-input__inner) {
              font-size: 14px;
            }

            /* // span {
            //   margin: 0 10px 0 0;
            // } */
          }
        }

        .gongneng {
          margin: 10px 0 20px 0;

          span {
            color: #fff;
          }
        }

        :deep(.cont) {
          width: 60%;
          margin: 20px auto;
        }

        :deep(.download) {
          display: flex;
          align-items: center;
          margin: 10px;
        }

        :deep(.download span) {
          font-size: 16px;
          margin-left: 20px;
        }

        :deep(.cont .el-button) {
          margin-left: 60px;
          margin-bottom: 30px;
        }

        :deep(.cont .accomplish) {
          width: 100%;
          display: flex;
          justify-content: center;
        }

        :deep(.cont .accomplish .el-button) {
          width: 50%;
          margin: 0;
        }
      }
      .cards {
        flex: 1;
        overflow: auto;
        margin: 10px 0 0 0;
        .floor {
          .title {
            margin: 8px 0;
            .t1 {
              font-weight: 600;
              margin-right: 10px;
            }
            .t2 {
              font-size: 13px;
              color: rgba(102, 102, 102, 1);
            }
          }
          .roomList {
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;

            .room {
              width: 228px;
              height: 140px;
              opacity: 1;
              border-radius: 4px;
              background: rgba(240, 243, 247, 1);
              margin: 5px 18px 18px 0;
              /* // padding-left: 15px; */
              .el-tooltip__trigger {
                height: 100%;
              }
              .roomNum {
                font-size: 16px;
                height: 55px;
                font-weight: 600;
                margin: 0 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .status {
                  /* // background-color: rgba(211, 219, 230, 1); */
                  background-color: rgba(41, 109, 227, 1);
                  color: #fff;
                  font-size: 12px;
                  padding: 1px 5px;
                  border-radius: 2px;
                }
              }
              .rLock {
                font-size: 12px;
                color: #000;
                margin: 0 15px;
                padding: 0 0 5px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                img {
                  cursor: pointer;
                }
              }
              .wifi {
                display: flex;
                align-items: center;
                padding: 10px 0 10px 15px;
                color: rgba(51, 51, 51, 1);
                img {
                  width: 14px;
                  padding-right: 5px;
                }
              }
            }
          }
        }
      }
      .cards::-webkit-scrollbar-track {
        background-color: #daeeff;
      }

      .cards::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
      }

      .cards::-webkit-scrollbar-thumb {
        background: #57b2ff;
        border-radius: 4px;
        height: 3px;
        width: 4px;
      }

      .footers {
        width: 96%;
        /* // height: 402px; */
        margin: 0 auto;

        .el-table--fit {
          height: 100%;

          .el-table__header-wrapper {
            background-color: #000;
            font-size: 15px;

            tr {
              color: #000;
            }
          }

          .el-table__row {
            height: 50px;
            font-size: 15px;
            color: #000;

            .orderNum {
              color: rgba(111, 182, 184, 1);
              cursor: pointer;
            }
          }

          .el-table__row:nth-child(2n) {
            .el-table-fixed-column--right {
              background-color: rgba(240, 243, 247, 1);
            }
          }

          .el-table__row td {
            padding: 0;
            border: 0;
          }

          .el-button--primary {
            margin-left: 5px;
          }

          .el-table__body .even2 {
            background-color: #fff;
          }

          .el-table__body .odd2 {
            background-color: rgba(240, 243, 247, 1);
          }
        }
      }
    }
    .roomChangeFooter {
      height: 150px;
      margin: 0 20px 0;
      .reason {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        .reason_ {
          color: #000;
          margin-right: 10px;
        }
      }
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin: 30px 0 0 0;
        .title {
          margin: 0 10px;
        }
      }
    }
  }
}
/* // 预定弹窗 */
:deep(.reserveDialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto; */
    /* // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .reserveRuleForm {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          margin-right: 15px;
        }
      }
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 入住弹窗 */
:deep(.checkInDialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .operation {
        margin: 15px 0;
      }
      .tags {
        display: flex;
        margin: 15px 0;
        .changeItem {
          width: 85px;
          height: 30px;
          background-color: rgba(230, 230, 230, 1);
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          margin-right: 15px;
          border-radius: 3px;
          color: rgba(166, 166, 166, 1);
          cursor: pointer;
        }
        .changeItem_active {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
        }
      }
      .residentInfo {
        display: flex;
        .el-form-item {
          margin-right: 20px;
        }
      }
      .checkIn {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          margin-right: 20px;
        }
      }
      .keys {
        .el-form-item {
          .el-input-group__append {
            background-color: rgba(222, 234, 252, 1);
            color: rgba(0, 97, 255, 1);
            cursor: pointer;
            user-select: none;
          }
        }
      }
      /* // .reserveRuleForm {
      //   display: flex;
      //   flex-wrap: wrap;
      //   .el-form-item {
      //     margin-right: 15px;
      //   }
      // } */
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 确定入住 弹出支付页面弹窗 */
:deep(.payPriceVialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .operation {
        margin: 15px 0;
      }
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 微信扫码支付界面弹窗 */
:deep(.paymentCodeVialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto; */
    /* // padding: 10px 20px 10px 20px; */
    padding: 0;
    .roomChangeBody {
      margin: 0 20px 80px;
      .unpaid {
        font-size: 20px;
        color: #000;
        margin: 20px 0;
        span {
          font-size: 30px;
          font-weight: 800;
          color: rgba(212, 48, 48, 1);
        }
      }
      .imgTitle {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 178px;
          height: 173px;
        }
        /* // p{
        //   text-align: center;
        // } */
      }
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 身份证读取 */
:deep(.addIdentityCard) {
  /* //   height: 420px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    padding: 30px 20px 10px 20px;
    height: 330px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    .el-steps {
      width: 600px;
      transform: translateX(90px);
      margin: 0 0 40px 0;
    }
    .title {
      text-align: center;
    }
    .icons {
      display: flex;
      justify-content: center;
      img {
        width: 70px;
        margin: 40px 0;
      }
      .loading {
        animation: move 3s linear;
      }
      @keyframes move {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .retry {
      text-align: center;
      span {
        color: red;
        padding: 0 8px;
        cursor: pointer;
      }
    }
  }
}

/* // 指纹弹窗 */
:deep(.fingerprint) {
  width: 611px;
  height: 486px;
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    padding: 0;
    .elbody {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px;
      font-size: 18px;
      color: #000;
      border-bottom: 0.5px solid #ccc;

      i {
        cursor: pointer;
      }
    }
  }
  .el-dialog__footer {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
/* // 退房 */
:deep(.checkOutDialog) {
  /* // height: 600px; */
  overflow: hidden;
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(245, 249, 255, 1);
    font-weight: 600;
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    margin: 0;
    border-bottom: 1px solid rgba(230, 230, 230, 1);

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    padding: 0px 20px 20px 20px;
    /* // height: 200px;
    // display: flex;
    // flex-direction: column-reverse; */

    .middle {
      width: 96%;
      color: #000;
      .content {
        height: 100px;
        padding: 50px 0 0 20px;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .options {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
      .item {
        display: flex;
        align-items: center;
        margin: 24px 0;

        .title {
          width: 100px;
          text-align: right;
          margin-right: 10px;
        }
      }
      .againPass {
        margin: 24px 0 40px 0;
      }
    }
  }
}
/* // 日志列表弹窗 */
:deep(.logDialog) {
  /* // height: 600px; */
  overflow: hidden;
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    overflow: auto;
    padding: 0px 20px 10px 20px;

    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 30px;

      span {
        color: #000;
      }

      .el-pagination {
        /* // width: 1600px; */
        .el-pagination__total {
          color: #000;
        }

        .el-pagination__goto {
          color: #000;
        }

        .el-pagination__classifier {
          color: #000;
        }

        .el-input__wrapper {
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          box-shadow: none;
        }

        .el-pager li {
          margin: 0 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        .el-pager li.is-active {
          /* // background-color: rgba(111, 182, 184, 1); */
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 1);
          /* // border: 1px solid red; */
        }

        .btn-prev {
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        .btn-next {
          margin-left: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }
      }
    }

    .logs {
      width: 96%;
      /* // height: 402px; */
      margin: 10px auto 20px;

      .el-table--fit {
        height: 100%;

        .el-table__header-wrapper {
          background-color: #000;
          font-size: 15px;

          tr {
            color: #000;
          }
        }

        .el-table__row {
          height: 50px;
          font-size: 15px;
          color: #000;

          .orderNum {
            color: rgba(111, 182, 184, 1);
            cursor: pointer;
          }
        }

        .el-table__row:nth-child(2n) {
          .el-table-fixed-column--right {
            background-color: rgba(240, 243, 247, 1);
          }
        }

        .el-table__row td {
          padding: 0;
          border: 0;
        }

        .el-button--primary {
          margin-left: 5px;
        }

        .el-table__body .even2 {
          background-color: #fff;
        }

        .el-table__body .odd2 {
          background-color: rgba(240, 243, 247, 1);
        }
      }
    }
  }
}
/* // 锁房弹窗 */
:deep(.lockRoomVialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto; */
    padding: 20px 0 0 0;
    /* // padding: 0; */
    .roomChangeBody {
      margin: 0 20px 80px;
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 批量置脏房 */
:deep(.dialogClean) {
  /* // height: 540px; */
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    padding: 0;

    .trees {
      display: flex;
      justify-content: center;
      padding: 25px 0;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
    }

    .tree {
      .tree-left {
        width: 316px;
        height: 44px;
        background: rgba(240, 243, 247, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
    }

    .el-tree {
      width: 316px;
      height: 324px;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      padding-left: 9px;
      overflow: auto;
    }

    ul {
      width: 316px;
      height: 324px;
      list-style: none;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      overflow: auto;

      li {
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        align-items: center;
        margin-top: 5px;

        .el-icon-close {
          cursor: pointer;
          width: 10px;
          height: 10px;
        }
      }
    }

    .options {
      width: 96%;
      display: flex;
      flex-direction: row-reverse;
      padding: 16px 0;

      .queding {
        margin-left: 20px;
        color: #fff;
      }
    }
  }
}
/* // 批量开关房 */
:deep(.roomCloseDilog) {
  /* // height: 540px; */
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    padding: 0;

    /* // 上一步页面样式 */
    .first {
      .trees {
        display: flex;
        justify-content: center;
        padding: 25px 0;
        border-bottom: 1px solid #e9eaed;
      }

      .tree {
        .tree-left {
          width: 316px;
          height: 44px;
          background: rgba(240, 243, 247, 1);
          border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          display: flex;
          align-items: center;
        }
      }

      .el-tree {
        width: 316px;
        height: 324px;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        padding-left: 9px;
        overflow: auto;
      }

      ul {
        width: 316px;
        height: 324px;
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        overflow: auto;

        li {
          display: flex;
          justify-content: space-between;
          padding-right: 17px;
          align-items: center;
          margin-top: 5px;

          .el-icon-close {
            cursor: pointer;
            width: 10px;
            height: 10px;
          }
        }
      }
    }

    .options {
      width: 96%;
      display: flex;
      flex-direction: row-reverse;
      padding: 16px 0;

      .queding {
        margin-left: 20px;
        color: #fff;
      }
    }

    /* // 下一步页面样式 */
    .last {
      .hint {
        background-color: #e6ecfa;
        border: 1px solid #053dc8;
        display: flex;
        align-items: center;
        padding: 6px 24px;
        color: #000;

        img {
          width: 16px;
          margin: 0 3px;
        }
      }

      .roomUl {
        display: flex;
        margin: 20px 0 0px;
        color: #000;

        /* // align-items: center; */
        .title {
          width: 100px;
          height: 40px;
          text-align: right;
          line-height: 40px;
          color: #000;
          margin-right: 15px;
        }

        .delRoom {
          ul {
            width: 560px;
            list-style: none;
            border: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;

            li {
              width: 160px;
              height: 40px;
              border: 1px solid #e0e0e0;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 0 10px 10px 0;

              span {
                margin-right: 40px;
              }

              .del {
                width: 14px;
                height: 14px;
                background-image: url("@/assets/delete.png");
                background-size: 100%;
              }

              .del:hover {
                background-image: url("@/assets/delete_hover.png");
                cursor: pointer;
              }
            }
          }

          .el-radio-group {
            .el-radio__label {
              color: #000;
            }
          }
        }
      }

      .roomTime {
        margin: 10px 0;

        .delRoom {
          display: flex;
          align-items: center;
        }
      }

      .textarea {
        border-bottom: 1px solid #e9eaed;
        padding-bottom: 25px;

        .delRoom {
          width: 510px;
        }
      }
    }
  }
}