.react-h5-calendar {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 10px;
    overflow: hidden;
    font-size: 14px;
    background-color: #fff;
    * {
        box-sizing: border-box;
        user-select: none;
      }
    .calendar-operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 30px;
        img {
          width: auto;
          height: 16px;
        }
        &.left-icon {
          transform: rotate(180deg);
        }
      }
    }
    .calendar-head {
      display: flex;
      flex-flow: row nowrap;
      background: #fff;
      .head-cell {
        display: flex;
        flex-basis: 14.28571%;
        align-items: center;
        justify-content: center;
        height: 34px;
      }
    }
    .calendar-body {
      position: relative;
      height: 216px;
      transition: height 0.3s;
      &.week-mode {
        height: 36px;
      }
      .month-cell {
        position: absolute;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        will-change: transform;
        .day-cell {
          display: flex;
          flex-basis: 14.28571%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 36px;
          &.is-other-month-day {
            color: #999;
          }
          .day-text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
          }
          .current-day {
            color: #fff;
            background: #4378be;
            border-radius: 50%;
          }
          .circle-mark {
            border: 1px solid #4378be;
            border-radius: 50%;
          }
          .dot-mark {
            width: 4px;
            height: 4px;
            background-color: #4378be;
            border-radius: 50%;
          }
        }
      }
    }
    .bottom-operate {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      img {
        width: auto;
        height: 16px;
        &.top {
          transform: rotate(180deg);
        }
      }
    }
  }