.homePage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .ant-select-selection-item {
    font-weight: bold;
  }
  :global {
    ::-webkit-scrollbar-thumb {
      border-radius: 0;
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .processGreen .ant-progress-steps-outer .ant-progress-steps-item-active {
    background: #1bc24d;
  }
  .processRed .ant-progress-steps-outer .ant-progress-steps-item-active {
    background: #e92c2c;
  }
  .ant-divider-horizontal {
    margin: 0;
  }
  .header {
    width: 100%;
    height: 44px;
    background: #ebf5ff;
    border: 1px solid #acc4fe;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    .headerImg {
      margin-left: 20px;
    }
    .headerText {
      margin-left: 10px;
    }
    .headerTextBold {
      margin-left: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      margin-right: 20px;
    }
    .headerChangeBtn {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1685ff;
      cursor: pointer;
    }
  }
  .contentTop {
    width: 100%;
    height: 165px;
    margin: 5px 0px;
    display: flex;
    flex-wrap: nowrap;
    .dataCenter {
      height: 165px;
      background: #fff;
      width: 18%;
      border-radius: 5px;
      padding: 3px;
      position: relative;
      .content {
        height: 145px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .dataCenterLabel {
          line-height: 44px;
          margin-left: 10px;
          min-width: 74px;
        }
        .dataCenterValue {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 44px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          .fontText {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            .iconBlue {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #1685ff;
              border-radius: 50%;
              margin-right: 5px;
            }
            .iconGrey {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #d9d9d9;
              border-radius: 50%;
              margin-right: 5px;
            }
          }
        }
      }

      .dataCenterFooter {
        width: calc(100% - 6px);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1685ff;
        background-color: #f4f8ff;
        border-radius: 2px;
        margin-bottom: 3px;
      }
    }
    .userCenter {
      height: 100%;
      background: #fff;
      width: 20%;
      margin: 0 0 0 6px;
      border-radius: 5px;
      position: relative;
      padding: 3px;
      .top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        .fontColor {
          font-size: 24px;
          font-family: DINPro;
          font-weight: bold;
          color: #1685ff;
          margin: 0 10px;
        }
      }
      .center {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item {
          text-align: center;
          .font {
            font-size: 20px;
            font-family: DINPro;
            font-weight: bold;
            color: #333333;
            margin-right: 5px;
          }
        }
      }
      .bottom {
        width: calc(100% - 6px);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1685ff;
        background-color: #f4f8ff;
        border-radius: 2px;
        margin-bottom: 3px;
      }
    }
    .tableCenter {
      height: 100%;
      background: #fff;
      border-radius: 5px;
      width: 30%;
      margin: 0 6px;
      position: relative;
      padding: 3px;
      .top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        .fontColor {
          font-size: 24px;
          font-family: DINPro;
          font-weight: bold;
          color: #1685ff;
          margin: 0 10px;
        }
      }
      .center {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item {
          text-align: center;
          .font {
            font-size: 20px;
            font-family: DINPro;
            font-weight: bold;
            color: #333333;
            margin-right: 5px;
          }
        }
      }
      .bottom {
        width: calc(100% - 6px);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1685ff;
        background-color: #f4f8ff;
        border-radius: 2px;
        margin-bottom: 3px;
      }
    }
    .flowCenter {
      height: 100%;
      background: #fff;
      width: 16%;
      margin: 0 6px 0 0;
      border-radius: 5px;
      position: relative;
      padding: 3px;
      .top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        .fontColor {
          font-size: 24px;
          font-family: DINPro;
          font-weight: bold;
          color: #1685ff;
          margin: 0 10px;
        }
      }
      .center {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item {
          text-align: center;
          .font {
            font-size: 20px;
            font-family: DINPro;
            font-weight: bold;
            color: #333333;
            margin-right: 5px;
          }
        }
      }
      .bottom {
        width: calc(100% - 6px);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1685ff;
        background-color: #f4f8ff;
        border-radius: 2px;
        margin-bottom: 3px;
      }
    }
    .hostCenter {
      height: 100%;
      background: #fff;
      width: 16%;
      border-radius: 5px;
      padding: 3px;
      position: relative;
      .content {
        height: 145px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .dataCenterLabel {
          line-height: 44px;
          margin-left: 10px;
          min-width: 60px;
        }
        .dataCenterValue {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 44px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          .fontText {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            .iconGreen {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #43bd25;
              border-radius: 50%;
              margin-right: 5px;
            }
            .iconGrey {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #d9d9d9;
              border-radius: 50%;
              margin-right: 5px;
            }
          }
        }
      }

      .dataCenterFooter {
        width: calc(100% - 6px);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1685ff;
        background-color: #f4f8ff;
        border-radius: 2px;
        margin-bottom: 3px;
      }
    }
  }
  .contentCenter {
    width: 100%;
    height: 350px;
    margin: 5px 0px;
    display: flex;
    flex-wrap: nowrap;
    .application {
      height: 100%;
      background: #fff;
      width: 22%;
      border-radius: 5px;
      .head {
        width: 100%;
        height: 43px;
        background: #1685ff;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        align-items: center;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        .icon {
          width: 3px;
          height: 12px;
          background: #ffffff;
          border-radius: 2px;
          margin: 0 10px 0px 20px;
        }
      }
      .content {
        height: 295px;
        width: 100%;
        padding: 12px;
        overflow-y: scroll;
        .contentItem {
          width: 100%;
          height: 58px;
          background: #ebf5ff;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          .contentLeft {
            min-width: 60px;
          }
          .contentLeftGreen {
            min-width: 75px;
          }
          .contentText {
            max-width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .blueIcon {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #1685ff;
            margin-left: 10px;
          }
          .greenIcon {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #03c0b7;
            margin-left: 10px;
          }
        }
      }
    }
    .userLogin {
      height: 100%;
      background: #fff;
      width: 56%;
      border-radius: 5px;
      margin: 0 6px;
      .head {
        width: 100%;
        height: 43px;
        background: #46c705;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        .icon {
          width: 3px;
          height: 12px;
          background: #ffffff;
          border-radius: 2px;
          margin: 0 10px 0px 20px;
        }
        .headLeft {
          display: flex;
          align-items: center;
        }
        .headRight {
          margin-right: 20px;
          cursor: pointer;
        }
      }
      .content {
        height: 312px;
        width: 100%;
        padding: 12px;
      }
    }
    .abnormal {
      height: 100%;
      background: #fff;
      width: 22%;
      border-radius: 5px;
      .head {
        width: 100%;
        height: 43px;
        background: #0198fc;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        align-items: center;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        .icon {
          width: 3px;
          height: 12px;
          background: #ffffff;
          border-radius: 2px;
          margin: 0 10px 0px 20px;
        }
      }
      .content {
        height: 300px;
        width: 100%;
        padding: 8px;
        overflow-y: scroll;
        .contentItem {
          width: 100%;
          height: 70px;
          background: #f4faff;
          border-radius: 5px;
          padding: 5px 14px;
          margin-bottom: 8px;
          .contentItemTop {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            .topLeft {
              display: flex;
              justify-content: flex-start;
              .icon {
                width: 42px;
                height: 42px;
                margin-right: 14px;
              }
              .abnormalFont {
                font-size: 15px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
              }
              .abnormalFontText {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .textStyle {
              color: #666666;
              min-width: 42px;
              .text {
                font-size: 20px;
                font-family: DINPro;
                font-weight: bold;
                color: #333333;
                margin-right: 3px;
              }
            }
          }
          .btn {
            width: 102px;
            height: 26px;
            background: #ffffff;
            border: 1px solid #e4e3e3;
            border-radius: 5px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            text-align: center;
            margin-top: 3px;
            margin-left: 56px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .contentBottom {
    width: 100%;
    flex: 1;
    overflow: hidden;
    margin: 5px 0px;
    display: flex;
    flex-wrap: nowrap;
    .callLog {
      height: 100%;
      background: #fff;
      width: 78%;
      border-radius: 5px;
      padding: 0 16px;
      .title {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .titleLeft {
          display: flex;
          align-items: center;
          .icon {
            width: 3px;
            height: 12px;
            background: #1685ff;
            border-radius: 2px;
            margin-right: 16px;
          }
          .text {
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
          }
        }

        .linkIcon {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1685ff;
        }
      }
      .table {
        width: 100%;
        height: calc(100% - 60px);
        overflow: hidden;
        .sort {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: auto;
          &[type='1'] {
            color: #fb0909;
            border: 2px solid #faa0a0;
          }
          &[type='2'] {
            color: #fb6a09;
            border: 2px solid #f07942;
          }
          &[type='3'] {
            color: #fbba09;
            border: 2px solid #f8e680;
          }
        }
        :global {
          .ant-table-wrapper {
            height: 100%;

            .ant-spin-nested-loading {
              height: 100%;

              .ant-spin-container {
                height: 100%;

                .ant-table.ant-table-small {
                  height: 100%;

                  .ant-table-container {
                    height: 100%;
                  }
                }
              }
            }
          }
        }
        .ant-tabs-tab {
          padding: 8px 8px;
        }

        .ant-tabs-tab-active {
          padding: 8px 8px;
        }
        .ant-tabs-tabpane {
          padding-left: 12px;
        }
        .ant-tabs-content-left {
          height: 100%;
        }
      }
    }
    .gisMessage {
      height: 100%;
      background: #fff;
      width: 22%;
      border-radius: 5px;
      margin: 0 0 0 6px;
      .head {
        width: 100%;
        height: 43px;
        background: #07ccc3;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        align-items: center;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        .icon {
          width: 3px;
          height: 12px;
          background: #ffffff;
          border-radius: 2px;
          margin: 0 10px 0px 20px;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 43px);
        padding: 4px;
        position: relative;
        .item {
          width: 100%;
          height: calc(100% - 20px);
          overflow-y: scroll;
          display: flex;
          justify-content: space-around;
          .dataCenterLabel {
            line-height: 38px;
            margin-left: 10px;
            min-width: 102px;
          }
          .dataCenterValue {
            text-align: end;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 38px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            color: #333333;
            .boldText {
              font-weight: bold;
            }
            .smallText {
              font-size: 12px;
              margin-left: 3px;
            }
            .fontText {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              .iconBlue {
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #1685ff;
                border-radius: 50%;
                margin-right: 5px;
              }
              .iconGrey {
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #d9d9d9;
                border-radius: 50%;
                margin-right: 5px;
              }
              .textBlue {
                color: #1685ff;
              }
            }
          }
        }
        .dataCenterFooter {
          width: calc(100% - 8px);
          position: absolute;
          bottom: 0;
          text-align: center;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1685ff;
          background-color: #f4f8ff;
          border-radius: 2px;
          margin-bottom: 3px;
        }
      }
    }
  }
}
