@import '~@zgfe/business-lib/es/assets/styles/inner.less';

.data-measure {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  &-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-bottom: 16px;
    &-search {
      display: flex;
      gap: 12px;
      align-items: center;

      &-txt {
        display: flex;
        color: @text-color-secondary;
      }

      &-num {
        margin: 0 4px;
        color: @primary-color;
      }

      .ant-input-affix-wrapper {
        width: 264px;
      }
    }
    .ant-btn {
      .bsicon {
        margin-right: 8px;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
  &-detail {
    color: #165dff;
    cursor: pointer;
  }
  .ant-table {
    .not-operable {
      color: #5f6085;
      cursor: not-allowed;
    }
    .ant-table-row {
      > :nth-child(1) {
        color: #165dff;
        cursor: pointer;
        div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      // > :nth-child(2),
      // > :nth-child(6) {
      > :nth-child(5) {
        color: #5f6085;
      }
      // > :nth-child(3) {
      > :nth-child(2) {
        color: #29bd52;
      }
      // > :nth-child(4),
      // > :nth-child(5) {
      > :nth-child(3),
      > :nth-child(4) {
        color: #fb5547;
      }
    }
    .tishi {
      margin-left: 8px;
      color: #9aa1a9;
    }
  }
  &-table {
    .ant-table-content {
      height: 530px;
      overflow: scroll !important;
    }
  }
}

.data-measure-details {
  overflow: hidden !important;
  .ant-drawer-content-wrapper,
  .ant-drawer-content,
  .ant-drawer-wrapper-body {
    overflow: hidden !important;
  }
  .list-empty {
    padding: 40px 0;
    border: 1px solid #e6e7ea;
  }
  /* 解决文字超出溢出问题 */
  .text_cut_one {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  &-ol-top {
    gap: 40px;
    > :nth-child(1) {
      width: 245px;
    }
    > :nth-child(2) {
      width: 229px;
      padding-left: 12px;
    }
    > :nth-child(3) {
      flex: 1;
    }
    .event_name {
      > :nth-child(2) {
        display: -webkit-box;
        flex: 1;
        overflow: hidden;
        color: #021429;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  &-ol-bottom {
    > :nth-child(1),
    > :nth-child(4) {
      width: 268px;
    }
    > :nth-child(2) {
      width: 270px;
      padding-left: 28px;
    }
    > :nth-child(3) {
      width: calc(100% - 538px);
    }
  }
  &-title {
    margin-bottom: 16px;
    color: #021429;
    font-weight: bold;
  }
  ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: flex;
      gap: 8px;
      width: 33.33%;
      margin-bottom: 16px;
      span {
        color: #021429;
      }
    }
  }
  .ant-drawer-title {
    display: flex;
    justify-content: space-between;
    .qingchu {
      font-size: 22px !important;
    }
  }
  .ant-drawer-body {
    color: #5f6085;
    > :nth-child(1),
    > :nth-child(2),
    > :nth-child(3) {
      margin-bottom: 8px;
    }
    > :nth-child(3) {
      > :nth-child(2) {
        display: flex;
        justify-content: space-between;
        line-height: 32px;
        > :nth-child(2) {
          color: #165dff;
          cursor: pointer;
        }
      }
    }
  }
  &-log-list {
    &-header {
      display: flex;
      height: 50px;
      margin-top: 16px;
      color: #021429;
      background: #f2f3f4;
      border: 1px solid #e6e7ea;
      border-radius: 8px 8px 0 0;
      > div {
        padding: 15px 16px;
      }
      > :nth-child(1) {
        width: 224px;
        border-right: 1px solid #e6e7ea;
      }
      > :nth-child(2) {
        display: flex;
        flex: 1;
        justify-content: space-between;
        span {
          color: #5f6085;
        }
      }
    }
    &-box {
      display: flex;
      border: 1px solid #e6e7ea;
      border-top: none;
      border-radius: 0 0 8px 8px;
      &-tips {
        .ant-tooltip-inner {
          width: 381px;
        }
      }
      > :nth-child(1) {
        width: 224px;
        height: calc(100vh - 450px);
        min-height: 300px;
        overflow: auto;
        border-right: 1px solid #e6e7ea;
        > div {
          padding: 12px 25px;
          border-bottom: 1px solid #e6e7ea;
          cursor: pointer;
          > :nth-child(1) {
            margin-bottom: 6px;
            color: #67727f;
            font-size: 12px;
            > :nth-child(1) {
              margin-right: 6px;
              margin-left: -14px;
            }
          }
          > :nth-child(2) {
            div {
              padding: 1px 8px;
              border: 1px solid #ccd0d4;
              border-radius: 2px;
            }
          }
        }
        .active {
          background: #e8efff;
          border-left: 1px solid #165dff;
          > :nth-child(1) {
            color: #165dff;
          }
        }
      }
      > :nth-child(2) {
        flex: 1;
        height: calc(100vh - 450px);
        min-height: 300px;
        padding: 20px 16px;
        overflow: auto;
        white-space: pre-wrap;
      }
    }
  }
}
