health.applet/miniprogram/components/calendar/index.scss

@import "./theme/iconfont.wxss";
@import "./theme/theme-default.wxss";
@import "./theme/theme-elegant.wxss";

.b {
  display: flex;
}

.lr {
  flex-direction: row;
}

.tb {
  flex-direction: column;
}

.pc {
  justify-content: center;
}

.ac {
  align-items: center;
}

.cc {
  align-items: center;
  justify-content: center;
}

.wrap {
  flex-wrap: wrap;
}

.flex {
  flex-grow: 1;
}

.bg {
  background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
  overflow: hidden;
}

.white-color {
  color: #fff;
}

.fs24 {
  font-size: 24rpx;
}

.fs28 {
  font-size: 28rpx;
}

.fs32 {
  font-size: 32rpx;
}

.fs36 {
  font-size: 36rpx;
  display: none;
}

.calendar {
  width: 100%;
  box-sizing: border-box;
}

/* 日历操作栏 */

.handle {
  height: 80rpx;
  /* display: none; */
}

.prev-handle,
.next-handle {
  padding: 20rpx;
}

.date-in-handle {
  height: 80rpx;
}

/* 星期栏 */

.weeks {
  height: 50rpx;
  line-height: 50rpx;
  opacity: 0.5;
}

.week {
  text-align: center;
}
.default_prev-month-date {
  color: #a2a3a4 !important;
}
.default_normal-date {
  color: black !important;
}
.default_next-month-date {
  color: #a2a3a4 !important;
}
.grid,
.week {
  width: 14.2857%;
  color: #171a1d;
}

.date-wrap {
  width: 100%;
  height: 80rpx;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

.date {
  position: relative;
  left: 0;
  top: 0;
  width: 55rpx;
  height: 55rpx;
  text-align: center;
  line-height: 55rpx;
  font-size: 26rpx;
  font-weight: 200;
  border-radius: 50%;
  transition: all 0.3s;
  animation-name: choosed;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.date-area-mode {
  width: 100%;
  border-radius: 0;
}

.date-desc {
  width: 150%;
  height: 32rpx;
  font-size: 20rpx;
  line-height: 32rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  text-align: center;
}

@keyframes choosed {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  to {
    transform: scale(1);
  }
}

/* 日期圆圈标记 */
.todo-circle {
  border-width: 1rpx;
  border-style: solid;
  box-sizing: border-box;
}

/* 待办点标记相关样式 */
.todo-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.todo-dot-top {
  top: 3rpx;
}

.todo-dot.todo-dot-top-always {
  top: -8rpx;
}

.todo-dot.todo-dot-bottom {
  bottom: 0;
}

.todo-dot.todo-dot-bottom-always {
  bottom: -10rpx;
}

/* 日期描述文字（待办文字/农历）相关样式 */

.date-desc.date-desc-top {
  top: -6rpx;
}

.date-desc.date-desc-top-always {
  top: -20rpx;
}

.date-desc.date-desc-bottom {
  bottom: -14rpx;
}

.todo-circle .date-desc.date-desc-bottom {
  bottom: -30rpx;
}

.date-desc.date-desc-bottom-always {
  bottom: -28rpx;
}
.grid.dim .date,
.grid.dim .date-desc,
.grid.dim .dot {
  // opacity: 0.5;
}
.grid.other-month .date,
.grid.other-month .date-desc,
.grid.other-month .dot {
  color: #ccc;
}
.grid.current-month .date,
.grid.current-month .date-desc {
  color: #222;
}
.grid.today .date {
  background: #eaf4ff;
  color: #2e7fff;
  font-weight: 600;
}
.grid.choosed .date {
  background: #2e7fff;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 8rpx #2e7fff66;
  border-radius: 50%;
  border: none;

 
}
.dot-self-unchecked {
  background: #ff9800;
}
.dot-self-checked {
  background: #2e7fff;
}
.dot-other-unchecked {
  background: #ff4d4f;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 4rpx;
}

/* 不同状态不同颜色 */
.dot-3 {
  background: #2e7fff;
} /* 打卡完成 */
.dot-1 {
    background: #ff4d4f;
  } /* 本项目未打卡 */

.dot-2 {
  background: #ff9800;
} /* 其他项目未打卡 */

.status-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .patch-btn {
    //   margin-left: 24rpx;
    background: #1d6ff6;
    color: #fff;
    border-radius: 12rpx;
    //   padding: 0 32rpx;
    height: 56rpx;
    line-height: 56rpx;
    font-size: 28rpx;
    border: none;
  }
}
.calendar-footer {
  margin-top: 48rpx;
  width: 100%;
  .status-row {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .status-label {
    //   font-size: 26rpx;
    }

    .status-content {
    //   font-size: 26rpx;
    }

    .unpunch {
      color: #d54941;
    }

    .punch {
      color: #222;
      margin-right: 10rpx;
    }

    .patch-btn {
    //   margin-left: 24rpx;
      background: #1d6ff6;
      color: #fff;
      border-radius: 12rpx;
    //   padding: 0 32rpx;
      height: 56rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      border: none;
    }
  }
}