.ya-header {
  width: 100%;
  margin-bottom: 20px;
  background-color: #ffffff;
  .ya-header-top {
    display: flex;
    .ya-arrow {
      width: 28px;
      height: 28px;
      margin: 22px 8px 0px 25px;
      vertical-align: middle;
    }
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #595959;
      margin-top: 25px;
    }
  }
  .ya-header-bottom {
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 23px;
    .ya-header-row {
      display: flex;
      flex-wrap: wrap;
    }
    .ya-box {
      display: flex;
      .ya-header-bottom-item-top {
        color: #a3a3a3;
        line-height: 22px;
      }
      .ya-header-bottom-item-bottom {
        color: #333333;
        line-height: 22px;

        .ya-ipv-middle {
          color: #f18301;
        }
        .ya-ipv-high {
          color: #ee3c98;
        }
        .ya-ipv-low {
          color: #0095ff;
        }
        .ya-ipv-safe {
          color: #2fcb96;
        }
        .ya-ipv-unknown {
          color: #9b9ea1;
        }
      }
    }

    .ya-header-bottom-item {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      padding: 0px 32px;
      margin-top: 23px;
      img {
        width: 43px;
        height: 46px;
        border-radius: 4px;
        margin-right: 16px;
      }
      .ya-header-bottom-item-top {
        color: #a3a3a3;
        line-height: 22px;
      }
      .ya-header-bottom-item-bottom {
        color: #333333;
        line-height: 22px;
        margin-top: 4px;
        .ya-alive {
          color: #55cd79;
        }
        .ya-offline {
          color: #afafaf;
        }
        .ya-abnormal {
          color: #f99c6a;
        }
        .ya-unknow {
          color: #000000 65%;
        }
        .ya-tag {
          display: flex;
          height: 100%;
          align-items: center;
          border: none;
          background-color: transparent;
          padding-left: 0px;
        }
        .ya-tag1,
        .ya-tag2,
        .ya-tag3,
        .ya-num {
          border-radius: 2px;
          line-height: 24px;
          padding: 2px 8px;
        }
        .ya-tag1 {
          background: rgba(#3cd597, 0.1);
          color: #3cd597;
          margin-right: 12px;
        }
        .ya-tag2 {
          background: #fdf6ec;
          color: #da8302;
          margin-right: 12px;
        }
        .ya-tag3 {
          background: #ecf5ff;
          color: #0079eb;
          margin-right: 12px;
        }
        .ya-num {
          background: rgba(0, 149, 255, 0.12);
          color: #0095ff;
        }
        .ya-num:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
    .ya-header-bottom-item:not(:last-child) {
      border-right: 1px solid #edf0f4;
    }
  }
}