toutoukan_front/miniprogram/pages/daily/daily.wxss

/* pages/checkin/checkin.wxss */
page {
    background-color: #f4f6f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* ⭐️ 移除这里的 padding */
  }
  
  /* ⭐️ 将 padding 添加到这里 */
  .container {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 32rpx; /* 间距 */
  }
  
  /* 顶部统计卡片 */
  .summary-card {
    background: linear-gradient(135deg, #74cdb9, #52b19e); /* 渐变绿 */
    border-radius: 20rpx;
    padding: 40rpx 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(82, 177, 158, 0.3);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .month-display {
    font-size: 30rpx;
    margin-bottom: 30rpx;
    font-weight: 500;
  }
  
  .stats-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 40rpx;
    align-items: center;
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%; /* 均分空间 */
  }
  
  .stat-number {
    font-size: 68rpx;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10rpx;
  }
  
  .stat-label {
    font-size: 26rpx;
    opacity: 0.8;
  }
  
  .divider-v {
    width: 2rpx;
    height: 80rpx;
    background-color: rgba(255, 255, 255, 0.4);
    align-self: center;
  }
  
  .today-checkin-box {
    margin-top: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .checkin-button, .checked-in-status {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
  }
  
  .checkin-button {
    background-color: rgba(255, 255, 255, 0.2);
    border: 4rpx solid rgba(255, 255, 255, 0.6);
    color: #fff;
  }
  
  .checkin-button:active {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.98);
  }
  
  .checked-in-status {
    background-color: rgba(255, 255, 255, 0.3); /* 已签到的淡背景 */
    border: 4rpx solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  
  .checkin-tip {
    font-size: 26rpx;
    opacity: 0.9;
    text-align: center;
    margin-top: 10rpx;
  }
  
  /* 签到日历卡片 */
  .calendar-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .calendar-header {
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 24rpx;
  }
  
  .calendar-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }
  
  .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .weekday-item {
    font-size: 26rpx;
    color: #999999;
    padding: 10rpx 0;
  }
  
  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
  }
  
  .day-item {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30rpx;
    color: #333333;
    line-height: 1; /* 确保文字不撑开 */
  }
  
  /* 其他月份日期 */
  .day-item.other-month {
    color: #cccccc;
  }
  
  /* 今日高亮 */
  .day-item.today .day-content {
    background-color: #ffeecc; /* 浅黄色背景 */
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 已签到日期样式 */
  .day-content.checked-in {
    background-color: #52b19e; /* 绿色背景 */
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* 确保数字颜色为白色，在绿色背景上清晰可见 */
    font-weight: 600;
  }
  
  /* 确保数字的样式 */
  .day-number {
    z-index: 2; /* 确保数字在背景之上 */
    position: relative; /* 配合 z-index */
  }
  
  /* 卡片整体点击态 */
  .card-hover {
    transform: scale(0.99);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  }