.home-page {
  // padding: 0 16px 16px;
  min-width: 1100px;
  position: relative;
  z-index: 3;
  .g2-tooltip-marker {
    border-radius: 50% !important;
  }
  .home-title {
    color: #333;
    padding-left: 28px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-top: 16px;
    &::before {
      width: 4px;
      height: 12px;
      content: '';
      background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
      display: inline-block;
      position: absolute;
      left: 16px;
      top: 22px;
    }
  }
  @font-face {
    font-family: 'number';
    src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
  }
  .data-wrap {
    background: #fff;
    padding-bottom: 25px;
    .data-box {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      .data-item {
        position: relative;
        height: 156px;
        background: #fff;
        width: ~'calc(16.67% - 8px)';
        padding: 16px;
        &.course-data {
          width: 33%;
        }
        .header {
          display: flex;
          .header-icon {
            width: 18px;
            height: 18px;
            margin-right: 4px;
          }
          .header-word {
            display: inline-block;
            font-size: 14px;
            line-height: 18px;
            color: #333;
            font-weight: 500;
          }
        }
        .data-number {
          font-family: 'number';
          font-size: 28px;
          color: #333;
          margin-top: 24px;
        }
        .data-footer {
          margin-top: 12px;
          .footer-word {
            font-size: 12px;
            color: #999;
            margin-right: 8px;
          }
          .iconfont {
            font-size: 12px;
            margin-right: 4px;
            color: #ec4b35;
          }
          .footer-number {
            font-size: 12px;
            color: #999;
          }
        }
        .course-box {
          border-radius: 4px;
          background: #fafafa;
          height: 124px;
          width: 60%;
          position: absolute;
          right: 16px;
          top: 28px;
          padding: 8px 0 0;
          .course-item {
            display: inline-block;
            width: 50%;
            padding: 4px 24px 12px;
            .course-title {
              font-size: 12px;
              color: #999;
            }
            .data {
              display: flex;
              align-items: flex-end;
              .course-number {
                font-size: 16px;
                font-family: 'number';
                margin-right: 16px;
                white-space: nowrap;
              }
              .course-word {
                font-size: 12px;
                color: #999;
                margin-right: 8px;
              }
              .iconfont {
                font-size: 12px;
                margin-right: 4px;
                color: #ec4b35;
              }
              .add-number {
                font-size: 12px;
                color: #999;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
  .study-wrap {
    background: #fff;
    margin-top: 16px;
    .study-box {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      .study-item {
        position: relative;
        height: 414px;
        background: #fff;
        width: ~'calc(50% - 8px)';
        padding: 16px;
        overflow: hidden;
        .study-title {
          font-size: 14px;
          color: #333;
          font-weight: 500;
          line-height: 22px;
          margin-bottom: 12px;
          .iconfont {
            font-size: 14px;
            color: #bfbfbf;
            margin-left: 4px;
          }
          .tip {
            font-size: 14px;
            color: #999999;
            margin-left: 8px;
            font-weight: 400;
          }
        }
        .study-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
          .study-tab {
            .tab {
              position: relative;
              padding-right: 24px;
              color: #666;
              cursor: pointer;
              &.selected {
                color: #2966ff;
                &::after {
                  position: absolute;
                  width: 24px;
                  height: 2px;
                  content: '';
                  background: #2966ff;
                  border-radius: 1px;
                  left: 9px;
                  bottom: -4px;
                }
              }
            }
          }
          .study-select {
            .select-word {
              color: #999;
              margin-right: 8px;
            }
          }
        }
        .table-item {
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          &.odd {
            background: #fafafa;
          }
          .table-image {
            width: 24px;
            height: 24px;
          }
          .table-number {
            width: 15%;
            color: #999;
            padding: 0 16px;
            text-align: center;
          }
          .table-data {
            width: 55%;
            padding: 0 16px;
            .table-name {
              color: #333;
              line-height: 20px;
              margin-bottom: 2px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .table-tag {
              line-height: 17px;
              color: #999;
              font-size: 12px;
            }
          }
          .table-study {
            width: 30%;
            color: #999;
            padding: 0 16px;
          }
        }
        .study-empty {
          margin-top: 102px;
          img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto 8px;
          }
          div {
            text-align: center;
            color: #333;
          }
        }
        .circle-box {
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .big-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 204px;
            height: 204px;
            border-radius: 102px;
            background: #f1f3f6;
            margin-top: -20px;
            .small-circle {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 124px;
              height: 124px;
              border-radius: 62px;
              background: #fff;
              .tip-box {
                text-align: center;
              }
            }
          }
        }
        .circle-tip {
          position: absolute;
          padding-left: 16px;
          &.unfinished {
            bottom: 2%;
            left: 36%;
            .spot {
              background: #2966ff;
            }
          }
          &.finished {
            bottom: 2%;
            left: 18%;
            .spot {
              background: #14cca7;
            }
          }
          .spot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            top: 8px;
            left: 0;
          }
          .number {
            color: #333;
            font-size: 16px;
            margin-bottom: 2px;
          }
          .word {
            color: #999;
          }
        }
      }
    }
  }

  .study-chart {
    width: 100%;
    height: 432px;
    background: #fff;
    padding: 16px 16px 32px 26px;
    .study-title {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      line-height: 22px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      .study-select {
        font-weight: 400;
        font-size: 14px;
        .select-word {
          color: #999;
          margin-right: 8px;
        }
      }
    }
    .chart-tip {
      display: flex;
      justify-content: space-between;
      div {
        color: #999;
        .iconfont {
          color: #bfbfbf;
          font-size: 14px;
          margin-left: 4px;
        }
      }
    }
    .chart-bottom-tip {
      display: flex;
      justify-content: center;
      .tip-item {
        display: flex;
        align-items: center;
        color: #666;
        .student-dot {
          background: #2966ff;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .time-dot {
          background: #feb613;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
  }
}

.g2-tooltip {
  background-color: #fff !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05) !important;
  opacity: 0.9;
  .g2-tooltip-title {
    margin-top: 0 !important;
    color: #999;
    font-size: 14px;
  }
  .g2-tooltip-list {
    li,
    span {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666 !important;
    }
  }
}

.data-plan-tooltip {
  max-width: none !important;
  .ant-tooltip-inner {
    white-space: nowrap;
    max-width: none !important;
  }
}
