SOURCE

<div class="cal">
	<!-- 日期的头部 -->
	<div class="cal-header">
		一月
	</div>
	<!-- 日期的数据-->
	<div class="cal-content">
		<div class="cal-content-date">
			<div class="cal-content-date-item">
				<span>周次</span>
        </div>
        <div class="cal-content-date-item">
          一
        </div>
        <div class="cal-content-date-item">
          二
        </div>
        <div class="cal-content-date-item">
          三
        </div>
        <div class="cal-content-date-item">
          四
        </div>
        <div class="cal-content-date-item">
          五
        </div>
        <div class="cal-content-date-item">
          六
        </div>
        <div class="cal-content-date-item">
          日
        </div>
      </div>
      <div class="cal-content-wrap">
        <div class="cal-content-wrap-item">
          <span class="cal-content-wrap-item-tips">预备</span>
        </div>
        <div class="cal-content-wrap-item">
          1
        </div>
        <div class="cal-content-wrap-item">
          2
        </div>
        <div class="cal-content-wrap-item">
          3
        </div>
        <div class="cal-content-wrap-item">
          4
        </div>
        <div class="cal-content-wrap-item">
          5
        </div>
        <div class="cal-content-wrap-item">
          6
        </div>
        <div class="cal-content-wrap-item isRest">
          <span>7</span>
          <span class="cal-content-wrap-item-isRest">休</span>
        </div>
      </div>
       <div class="cal-content-wrap">
        <div class="cal-content-wrap-item">
          <span class="cal-content-wrap-item-isWeeks">1</span>
        </div>
        <div class="cal-content-wrap-item">
          1
        </div>
        <div class="cal-content-wrap-item">
          2
        </div>
        <div class="cal-content-wrap-item">
          3
        </div>
        <div class="cal-content-wrap-item">
          4
        </div>
        <div class="cal-content-wrap-item">
          5
        </div>
        <div class="cal-content-wrap-item">
          6
        </div>
        <div class="cal-content-wrap-item isRest">
          <span>7</span>
          <span class="cal-content-wrap-item-isRest">休</span>
        </div>
      </div>
       <div class="cal-content-wrap">
        <div class="cal-content-wrap-item">
          <span class="cal-content-wrap-item-isWeeks">2</span>
        </div>
        <div class="cal-content-wrap-item">
          1
        </div>
        <div class="cal-content-wrap-item">
          2
        </div>
        <div class="cal-content-wrap-item">
          3
        </div>
        <div class="cal-content-wrap-item">
          4
        </div>
        <div class="cal-content-wrap-item">
          5
        </div>
        <div class="cal-content-wrap-item">
          6
        </div>
        <div class="cal-content-wrap-item isRest">
          <span>7</span>
          <span class="cal-content-wrap-item-isRest">休</span>
        </div>
      </div>
    </div>
  </div>

  $calHeight: 32px;
  $calHeaderBg: rgba(215,30,121,1);
  $calBorder: #EE9FC6;
  $calDatebg: #F5F5F5;
  $calDateBorder: #E5E5E5;
.cal {
  width:384px;
  display: flex;
  flex-direction: column;
  &-content {
    width: 100%;
    border-bottom: none;
    border-top: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    &-wrap {
      width: 100%;
      display: flex;
      background-color: $calDatebg;
      &-item {
        flex: 1;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        height:47px;
        font-size:14px;
        border-right: 1px solid $calDateBorder;
        border-bottom: 1px solid $calDateBorder;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        background-color: white;
        &:hover {
          cursor: pointer;
        }
        &-code {
          color: white;
          display: inline-block;
          width:39px;
          height:20px;
          line-height: 20px;
          text-align: center;
          background:rgba(55,120,220,1);
          border-radius:12px;
          font-size:12px;
          color:rgba(255,255,255,1);

        }
        &-isTuition {
          position: absolute;
          left: 0px;
          top: 0px;
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:500;
          color:rgba(55,120,220,1);
        }
        &.isTuition {
          background-color:white;
        }
        &-isRest {
          position: absolute;
          left: 0px;
          top: 0px;
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:500;
          color:rgba(215,30,121,1);
        }
        &.isRest {
          color: #D71E79;
          background-color:rgba(255,245,250,1);
        }
        &-tips {
          color:rgba(215,30,121,1);
        }
        &-isWeeks {
          display: inline-block;
          box-sizing: content-box;
          width:24px;
          height:24px;
          text-align: center;
          line-height: 24px;
          color: #D71E79;
          background:rgba(255,255,255,1);
          border-radius: 50%;
          border:2px solid rgba(215,30,121,1);
        }
      }
    }
    &-date {
      width: 100%;
      display: flex;
      background-color: $calDatebg;
      &-item {
        flex: 1;
        height:$calHeight;
        line-height:$calHeight;
        text-align: center;
        font-size:14px;
        border-right: 1px solid $calDateBorder;
        border-bottom: 1px solid $calDateBorder;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:500;
        color:rgba(0,0,0,0.85);
      }
    }
  }
  &-header {
    width: 100%;
    height:$calHeight;
    background: $calHeaderBg;
    line-height: 32px;
    text-align: center;
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:550;
    color:rgba(255,255,255,1);
  }
}