YGChatCS/components/Calender/styles/index.scss

// 颜色系统
$primary-color: #1890ff;
$primary-light: #e6f7ff;
$primary-dark: #0050b3;

// 中性色
$text-primary: #262626;
$text-secondary: #8c8c8c;
$text-disabled: #bfbfbf;
$background-white: #ffffff;
$background-gray: #f5f5f5;
$border-color: #d9d9d9;

// 状态色
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;

// 尺寸规范
$modal-max-height: 80vh;
$modal-border-radius: 12px;
$modal-padding: 12px;

// 日期格子尺寸
$date-cell-size: 40px;
$date-cell-gap: 4px;
$date-cell-border-radius: 6px;

// 字体大小
$font-size-title: 18px;
$font-size-subtitle: 14px;
$font-size-date: 16px;
$font-size-price: 12px;
$font-size-label: 10px;

// uni-popup会自动处理遮罩层和定位，这里移除相关样式

// 弹窗主体
.calendar-popup {
  position: relative;
  width: 100%;
  background-color: $background-white;
  border-radius: $modal-border-radius;
  overflow: hidden;
}

// 头部区域
.calendar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: $modal-padding;
  border-bottom: 1px solid $border-color;
  background-color: $background-white;
}

.header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-title {
  font-size: $font-size-title;
  font-weight: 600;
  color: $text-primary;
  line-height: 1.4;
}

.header-subtitle {
  font-size: $font-size-subtitle;
  color: $text-secondary;
  line-height: 1.4;
}

.header-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.2s;

  &:active {
    background-color: $background-gray;
  }
}

// 周标题行 - 固定显示
.week-header {
  display: flex;
  padding: 16px $modal-padding 8px;
  background-color: $background-white;
  border-bottom: 1px solid #eeeeee;
}

// 日历主体区域
.calendar-body {
  padding: 8px $modal-padding $modal-padding;
  max-height: calc(#{$modal-max-height} - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
}

.week-day {
  flex: 1;
  text-align: center;
  font-size: $font-size-subtitle;
  color: $text-secondary;
  font-weight: 500;
  line-height: 1.4;
}

// 全年容器
.year-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

// 月份区域
.month-section {
  display: flex;
  flex-direction: column;
}

.month-title {
  font-size: $font-size-title;
  font-weight: 600;
  color: $text-primary;
  text-align: center;
  margin-bottom: 16px;
  margin-top: 8px;
  line-height: 1.4;
}

// 日期网格
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: $date-cell-gap;
}

// 日期格子基础样式
.date-cell {
  position: relative;
  width: $date-cell-size;
  height: $date-cell-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
  border-radius: $date-cell-border-radius;
  transition: all 0.2s ease;
  cursor: pointer;
}

// 空白格子
.date-cell-empty {
  background-color: transparent;
  cursor: default;
}

// 有内容的格子
.date-cell-content {
  background-color: $background-white;
  border: 1px solid transparent;

  &:hover {
    background-color: $background-gray;
  }

  &:active {
    transform: scale(0.95);
  }
}

// 禁用状态
.date-cell-disabled {
  background-color: $background-gray !important;
  color: $text-disabled !important;
  cursor: not-allowed !important;

  .date-number,
  .date-price {
    color: $text-disabled !important;
  }

  &:hover {
    background-color: $background-gray !important;
    transform: none !important;
  }
}

// 选中状态
.date-cell-selected {
  background-color: $primary-color !important;
  border-color: $primary-color !important;

  .date-number,
  .date-price,
  .date-label {
    color: $background-white !important;
  }

  &:hover {
    background-color: $primary-dark !important;
  }
}

// 范围内状态
.date-cell-in-range {
  background-color: $primary-light !important;
  border-color: $primary-light !important;

  .date-number {
    color: $primary-color !important;
  }

  .date-price {
    color: $primary-dark !important;
  }
}

// 日期数字
.date-number {
  font-size: $font-size-date;
  font-weight: 500;
  color: $text-primary;
  line-height: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 价格文字
.date-price {
  font-size: $font-size-price;
  color: $text-secondary;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  min-height: 14px;
}

// 自定义标签
.date-label {
  font-size: $font-size-label;
  color: $primary-color;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
  text-align: center;
  min-height: 12px;
}