.container.data-v-d331dabb { height: calc(100vh - var(--window-top)); display: flex; flex-direction: column; background: #f5f5f5; overflow: hidden; } .date-selector.data-v-d331dabb { flex-shrink: 0; background: #ffffff; margin: 24rpx 32rpx; border-radius: 16rpx; padding: 32rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06); } .calendar-header.data-v-d331dabb { text-align: center; margin-bottom: 24rpx; } .month-title.data-v-d331dabb { font-size: 32rpx; font-weight: bold; color: #333; } .calendar-weekdays.data-v-d331dabb { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8rpx; margin-bottom: 16rpx; padding: 0 10rpx; } .weekday.data-v-d331dabb { font-size: 24rpx; color: #999; text-align: center; } .calendar-days.data-v-d331dabb { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8rpx; padding: 0 10rpx; } .calendar-day.data-v-d331dabb { height: 100rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8rpx; cursor: pointer; transition: all 0.3s ease; } .calendar-day.placeholder.data-v-d331dabb { visibility: hidden; } .calendar-day.disabled.data-v-d331dabb { opacity: 0.4; pointer-events: none; } .calendar-day.has-bookings.data-v-d331dabb { background: rgba(255, 122, 0, 0.08); border: 2rpx solid #FF7A00; } .calendar-day.today.data-v-d331dabb { background: rgba(255, 122, 0, 0.12); } .calendar-day.selected.data-v-d331dabb { background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%); } .calendar-day.selected .day-number.data-v-d331dabb { color: #ffffff; } .calendar-day.selected .booking-count.data-v-d331dabb { color: #ffffff; } .day-number.data-v-d331dabb { font-size: 28rpx; color: #333; margin-bottom: 4rpx; } .booking-count.data-v-d331dabb { font-size: 20rpx; color: #FF7A00; } .timeslots-scroll.data-v-d331dabb { flex: 1; overflow: hidden; } .timeslots-section.data-v-d331dabb { padding: 32rpx; } .section-title.data-v-d331dabb { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 24rpx; display: flex; align-items: center; } .total-booking.data-v-d331dabb { font-size: 24rpx; color: #FF7A00; margin-left: 16rpx; font-weight: normal; } .empty-state.data-v-d331dabb { padding: 80rpx 0; } .timeslots-list.data-v-d331dabb { display: flex; flex-direction: column; gap: 20rpx; } .timeslot-card.data-v-d331dabb { background: #ffffff; border-radius: 16rpx; padding: 32rpx; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); } .timeslot-card.disabled.data-v-d331dabb { opacity: 0.6; } .timeslot-info.data-v-d331dabb { flex: 1; } .time-range.data-v-d331dabb { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; } .slot-status.data-v-d331dabb { margin-top: 8rpx; } .booking-dialog.data-v-d331dabb { padding: 32rpx 0; } .dialog-item.data-v-d331dabb { display: flex; align-items: center; padding: 20rpx 0; border-bottom: 1rpx solid #f0f0f0; } .dialog-item.data-v-d331dabb:last-child { border-bottom: none; } .dialog-label.data-v-d331dabb { width: 120rpx; font-size: 28rpx; color: #666; } .dialog-value.data-v-d331dabb { flex: 1; font-size: 28rpx; color: #333; font-weight: 500; } /* 按钮自定义样式 - 使用全局样式 */ .btn-primary { background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%) !important; border: none !important; border-radius: 8rpx !important; color: #FFFFFF !important; box-shadow: 0 4rpx 12rpx rgba(255, 122, 0, 0.3) !important; outline: none !important; } .btn-primary::after { border: none !important; box-shadow: none !important; } .btn-primary:active { background: linear-gradient(135deg, #FF6900 0%, #FF8500 100%) !important; }