feat: 订单详情交互对接

components/Calender/styles/index.scss

@@ -0,0 +1,265 @@
+// 颜色系统
+$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;
+}