ci4sManagement-cloud/react-ui/src/pages/Model/index.less

.datasetTopBox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 49px;
  padding: 0 30px;
  padding-right: 30px;
  background-image: url(/assets/images/pipeline-back.png);
  background-size: 100% 100%;
}
.datasetIntroTopBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 110px;
  margin-bottom: 10px;
  padding: 25px 30px;
  background-image: url(/assets/images/dataset-back.png);

  background-size: 100% 100%;
  .smallTagBox {
    display: flex;
    align-items: center;
    color: #1664ff;
    font-size: 14px;
    .tagItem {
      margin-right: 20px;
      padding: 4px 10px;
      background: rgba(22, 100, 255, 0.1);
      border-radius: 4px;
    }
  }
}
.dataListBox {
  padding: 20px 30px;
  color: #1d1d20;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09);
  .dataButtonList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin: 24px 0 30px 0;
    color: #575757;
    font-size: 16px;
  }
}
.datasetIntroCneterBox {
  height: 77vh;
  padding: 20px 30px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09);
}
.datasetIntroTitle {
  margin: 37px 0 10px 0;
  color: #1d1d20;
  font-size: 15px;
}
.datasetIntroText {
  margin-bottom: 30px;
  color: #575757;
  font-size: 14px;
}
.datasetBox {
  font-family: 'Alibaba';
  background: #f9fafb;
  :global {
    .ant-tabs-top > .ant-tabs-nav {
      margin: 0;
    }
    .ant-pagination {
      text-align: right;
    }
  }
}
.datasetAllBox {
  :global {
    .ant-tabs-nav .ant-tabs-nav-wrap {
      margin: -48px 0 0 30px;
    }
  }
}
.plusButton {
  margin: 0 18px 0 20px;
}

.datasetCneterBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 87.5vh;

  .datasetCneterLeftBox {
    width: 340px;
    height: 100%;
    margin-right: 10px;
    padding-top: 15px;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
    .custTab {
      display: flex;
      height: 32px;
      border-bottom: 1px solid #e0eaff;
      .tabItem {
        width: 52px;
        height: 100%;
        color: #808080;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
      }
    }
    .leftContentBox {
      max-height: 80vh;
      padding: 15px 20px;
      overflow-x: hidden;
      overflow-y: auto;
      .itemTitle {
        margin-bottom: 15px;
        color: #1d1d20;
        font-size: 14px;
      }
      .itemBox {
        display: flex;
        flex-wrap: wrap;
        align-content: start;
        width: 110%;
        .messageBox {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 92px;
          height: 62px;
          margin: 0 12px 20px 0;
          padding: 11px 0px 7px 0px;
          color: #1d1d20;
          font-size: 12px;
          border: 1px solid;
          border-color: rgba(22, 100, 255, 0.05);
          border-radius: 4px;
          cursor: pointer;
          .ptIcon {
            display: block;
          }
          .hoverIcon {
            display: none;
          }
          .messageText {
            width: 65px;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
            text-overflow: ellipsis;
            transition: all 0.2s;
          }
        }
        .messageBox:hover {
          background: rgba(22, 100, 255, 0.03);
          border: 1px solid;
          border-color: #1664ff;
          .ptIcon {
            display: none;
          }
          .hoverIcon {
            display: block;
          }
        }
        .active {
          background: rgba(22, 100, 255, 0.03) !important;
          border: 1px solid !important;
          border-color: #1664ff !important;
          .ptIcon {
            display: none !important;
          }
          .hoverIcon {
            display: block !important;
          }
        }
      }
    }
  }
  .datasetCneterRightBox {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    padding: 22px 30px 26px 30px;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
    .dataSource {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32px;
      margin-bottom: 30px;
      color: rgba(29, 29, 32, 0.8);
      font-size: 15px;
    }
    .dataContent {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-content: flex-start;
      width: 102%;
      .dataItem {
        position: relative;
        width: 23.5%;
        height: 164px;
        margin: 0 20px 25px 0;
        background: #ffffff;
        border: 1px solid;
        border-color: #eaeaea;
        border-radius: 4px;
        cursor: pointer;
        .itemText {
          position: absolute;
          top: 20px;
          left: 20px;
          height: 6px;
          color: #1d1d20;
          font-size: 16px;
          font-family: 'Alibaba';
          line-height: 0px;
          background: linear-gradient(
            to right,
            rgba(22, 100, 255, 0.6) 0,
            rgba(22, 100, 255, 0) 100%
          );
        }
        .itemDescripition {
          position: absolute;
          top: 57px;
          left: 20px;
          display: -webkit-box;
          padding-right: 28px;
          overflow: hidden;
          color: #575757;
          font-size: 14px;
          word-break: break-all;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .itemTime {
          position: absolute;
          bottom: 22px;
          left: 20px;
          display: flex;
          align-items: center;
          color: #808080;
          font-size: 13px;
        }
        .itemIcon {
          position: absolute;
          right: 20px;
          bottom: 22px;
          display: flex;
          align-items: center;
          color: #808080;
          font-size: 13px;
        }
      }
      .dataItem:hover {
        border-color: #1664ff;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
      }
      .dataItem:hover .itemText {
        color: #1664ff;
      }
    }
  }
}
.modal {
  :global {
    .ant-modal-content {
      width: 825px;
      padding: 20px 67px;
      background-image: url(/assets/images/modal-back.png);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100%;
      border-radius: 21px;
    }
    .ant-modal-header {
      margin: 20px 0;
      background-color: transparent;
    }
    .ant-input {
      height: 40px;
      border-color: #e6e6e6;
    }
    .ant-form-item .ant-form-item-label > label {
      color: rgba(29, 29, 32, 0.8);
    }
    .ant-modal-footer {
      display: flex;
      justify-content: center;
      margin: 40px 0 30px 0;
    }
    .ant-btn {
      width: 110px;
      height: 40px;
      font-size: 18px;
      background: rgba(22, 100, 255, 0.06);
      border-color: transparent;
      border-radius: 10px;
    }
    .ant-btn-primary {
      background: #1664ff;
    }
  }
}