.time-select-container { width: 100%; max-width: 100%; border-radius: 16rpx; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; overflow-x: hidden; } .time-select-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; } .time-select-title { font-size: 32rpx; color: #584735; font-weight: bold; } .month-selector { display: flex; align-items: center; color: #94765A; } .current-month { margin: 0 20rpx; font-size: 32rpx; font-weight: 500; } .arrow { font-size: 36rpx; width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; color: #8B5D3B; } .arrow-icon { width: 48rpx; height: 48rpx; } .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 20rpx; width: 100%; max-width: 100%; box-sizing: border-box; } .weekday { font-size: 28rpx; color: #584735; font-weight: bold; padding: 10rpx 4rpx; text-align: center; min-width: 0; box-sizing: border-box; } .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4rpx; width: 100%; max-width: 100%; box-sizing: border-box; } .day-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8rpx; position: relative; padding: 6rpx 2rpx; min-width: 0; box-sizing: border-box; overflow: hidden; transition: all 0.2s ease; } .day-number { font-size: 28rpx; font-weight: 500; margin-bottom: 2rpx; color: #584735; text-align: center; } .day-status { font-size: 24rpx; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; padding: 0 2rpx; } .day-cell.other-month { color: #ccc; display: none; } .day-cell.past { color: #999; } /* 可用日期样式 */ .day-cell.available .day-number, .day-cell.available .day-status { color: #8B5D3B; } /* 今天的特殊样式 */ .day-cell.today .day-number { color: #8B5D3B; font-weight: bold; } /* 不可用日期样式 */ .day-cell.unavailable .day-status { color: rgba(88, 71, 53, 0.5); } /* 已约满日期样式 */ .day-cell.full .day-status { color: #B1967B; } /* 选中状态样式 - 最高优先级 */ .day-cell.selected { background: #B1967B !important; transform: scale(1.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; position: relative; } .day-cell.selected .day-number { color: #fff !important; font-weight: bold; } .day-cell.selected .day-status { color: #fff !important; font-weight: 500; } /* 可选择日期的悬停效果 */ .day-cell.selectable:not(.selected) { transition: all 0.2s ease; cursor: pointer; } .day-cell.selectable:not(.selected):hover { background-color: rgba(139, 93, 59, 0.2); transform: scale(1.02); } /* 选中动画效果 */ @keyframes selectAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1.08); } } .day-cell.selected { animation: selectAnimation 0.3s ease-out; } /* 空白单元格样式 */ .day-cell.empty-cell { background: transparent; cursor: default; pointer-events: none; }