feat: 订场页改为网格时间表，支持多场地多时段选择

- private/index.vue 重写为场地×时间网格，双向滚动，sticky表头
- 当前时间红线指示，已过时灰块/已占用浅红/已选中蓝色
- 支持多场地连续时段选择，非连续会提示
- 日期改为近7天，Tab栏样式与约课页统一
- 底部按钮：未选时全宽长条，选中后显示摘要+小按钮
- privateBooking.js 新增 getPrivateBookingGrid API
- quote/create 改为 items[] 格式，每场地独立时间段
- confirm.vue 按 items 逐条展示
- pages/private/index.vue onShow 自动刷新
- .env 冰场馆URL修正

miniprogram/src/pages/comprehensive/private/index.vue

@@ -1,102 +1,85 @@
 <template>
   <view class="private-page">
-    <view class="top-panel">
-      <view class="type-tabs">
-        <view
-          v-for="item in typeOptions"
-          :key="item.value"
-          class="type-tab"
-          :class="{ active: courtType === item.value }"
-          @tap="selectType(item.value)"
-        >
-          {{ item.label }}
-        </view>
-      </view>
-      <view class="venue-meta">
-        <text>{{ businessHoursText }}</text>
-        <text>{{ options ? `¥${options.unit_price}/半小时` : '加载价格中' }}</text>
-      </view>
+    <view class="tab-bar">
+      <view
+        v-for="item in typeOptions"
+        :key="item.value"
+        class="tab-item"
+        :class="{ active: courtType === item.value }"
+        @tap="selectType(item.value)"
+      >{{ item.label }}</view>
     </view>
 
-    <view class="date-section">
-      <scroll-view scroll-x class="date-scroll" :show-scrollbar="false">
-        <view class="date-list">
+    <scroll-view scroll-x class="date-bar" :show-scrollbar="false">
+      <view class="date-list">
+        <view
+          v-for="item in dateOptions"
+          :key="item.value"
+          class="date-chip"
+          :class="{ active: selectedDate === item.value }"
+          @tap="selectDate(item.value)"
+        >
+          <text class="date-label">{{ item.label }}</text>
+          <text class="date-day">{{ item.day }}</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="grid-wrapper">
+      <view v-if="isLoading && !grid" class="state-box">加载中...</view>
+      <view v-else-if="loadError" class="state-box">{{ loadError }}</view>
+      <view v-else-if="!grid || !grid.courts.length" class="state-box">暂无场地数据</view>
+      <scroll-view
+        v-else
+        scroll-x
+        scroll-y
+        enable-flex
+        class="grid-scroll"
+        :show-scrollbar="false"
+      >
+        <view class="grid-inner">
+          <view class="grid-header-row">
+            <view class="corner-cell">时间</view>
+            <view
+              v-for="court in grid.courts"
+              :key="court.id"
+              class="court-header-cell"
+            >{{ court.name }}</view>
+          </view>
           <view
-            v-for="item in dateOptions"
-            :key="item.value"
-            class="date-chip"
-            :class="{ active: selectedDate === item.value }"
-            @tap="selectDate(item.value)"
+            v-for="(slot, si) in grid.time_slots"
+            :key="si"
+            class="grid-row"
           >
-            <text class="date-week">{{ item.week }}</text>
-            <text class="date-day">{{ item.day }}</text>
+            <view class="time-label-cell">{{ slot.start }}</view>
+            <view
+              v-for="court in grid.courts"
+              :key="court.id"
+              class="grid-cell"
+              :class="getCellClass(court.id, si)"
+              @tap="toggleCell(court.id, si)"
+            ></view>
+          </view>
+          <view
+            v-if="currentTimeLineVisible && currentTimeTop >= 0"
+            class="current-time-line"
+            :style="{ top: currentTimeTop + 'rpx' }"
+          >
+            <text class="current-time-label">{{ now.format('HH:mm') }}</text>
           </view>
         </view>
       </scroll-view>
     </view>
 
-    <view class="duration-section section-card">
-      <view class="section-header compact">
-        <text class="section-title">预约时长</text>
-      </view>
-      <view class="duration-control">
-        <button class="step-btn" :disabled="durationUnits <= 1" @tap="decreaseDuration">-</button>
-        <view class="duration-value">
-          <text class="duration-main">{{ durationText }}</text>
-          <text class="duration-sub">{{ options ? `单场 ¥${options.amount_per_court}` : '按选择时长试算' }}</text>
+    <view class="action-bar">
+      <button v-if="selectedCourtCount === 0" class="primary-button submit-btn-full" @tap="goConfirm">预约</button>
+      <template v-else>
+        <view class="selection-info">
+          <text class="selection-main">{{ selectedCourtCount }}个场地 {{ selectionTimeText }}</text>
+          <text class="selection-sub">¥{{ selectionAmount }}</text>
         </view>
-        <button class="step-btn" :disabled="durationUnits >= MAX_DURATION_UNITS" @tap="increaseDuration">+</button>
-      </view>
-    </view>
-
-    <view class="time-section section-card">
-      <view class="section-header compact">
-        <text class="section-title">开始时间</text>
-      </view>
-
-      <view v-if="isLoading" class="state-box">正在加载可预约时段</view>
-      <view v-else-if="loadError" class="state-box">{{ loadError }}</view>
-      <view v-else-if="!timeOptions.length" class="state-box">当前日期暂无可预约时段</view>
-      <view v-else class="time-grid">
-        <view
-          v-for="item in timeOptions"
-          :key="item.start_at"
-          class="time-chip"
-          :class="{ active: selectedTime?.start_at === item.start_at, disabled: !item.available_court_count }"
-          @tap="selectTime(item)"
-        >
-          <text class="time-main">{{ formatTime(item.start_at) }}</text>
-          <text class="time-sub">{{ item.available_court_count ? `余 ${item.available_court_count} 场` : '已满' }}</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="court-section section-card">
-      <view class="section-header compact">
-        <text class="section-title">选择场地</text>
-      </view>
-
-      <view v-if="!selectedTime" class="state-box">请先选择开始时间</view>
-      <view v-else-if="!availableCourts.length" class="state-box">该时段无可预约场地</view>
-      <view v-else class="court-list">
-        <view
-          v-for="court in availableCourts"
-          :key="court.id"
-          class="court-chip"
-          :class="{ active: selectedCourtIds.includes(court.id) }"
-          @tap="toggleCourt(court.id)"
-        >
-          <text>{{ court.name }}</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="fixed-action-bar">
-      <view class="selection-info">
-        <text class="selection-main">{{ selectionTitle }}</text>
-        <text class="selection-sub">{{ selectionSubText }}</text>
-      </view>
-      <button class="primary-button submit-btn" :disabled="!canConfirm" @tap="goConfirm">确认预约</button>
+        <button class="primary-button submit-btn" :disabled="!canConfirm" @tap="goConfirm">预约</button>
+      </template>
     </view>
   </view>
 </template>
@@ -105,11 +88,11 @@
 import { computed, onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
 import { privateBookingApi } from '@/modules/comprehensive/api/privateBooking'
-import { formatAmount, toAmountNumber } from '@/modules/comprehensive/utils/money'
-import { formatTime, todayString } from '@/modules/comprehensive/utils/date'
 
-const ADVANCE_DAYS = 7
-const MAX_DURATION_UNITS = 8
+const HEADER_HEIGHT = 75
+const CELL_HEIGHT = 107
+const TIME_COL_WIDTH = 128
+const COURT_COL_WIDTH = 149
 
 const typeOptions = [
   { label: '羽毛球', value: 'badminton' },
@@ -117,342 +100,467 @@ const typeOptions = [
 ]
 
 const courtType = ref('badminton')
-const selectedDate = ref(todayString())
-const durationUnits = ref(2)
-const options = ref(null)
-const selectedTime = ref(null)
-const selectedCourtIds = ref([])
+const selectedDate = ref(dayjs().format('YYYY-MM-DD'))
+const grid = ref(null)
 const isLoading = ref(false)
 const loadError = ref('')
+const selectedCells = ref({})
+const now = ref(dayjs())
 let loadRequestId = 0
 
+const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 const dateOptions = computed(() => {
   const today = dayjs()
-  const weekLabels = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-  return Array.from({ length: ADVANCE_DAYS }).map((_, index) => {
-    const date = today.add(index, 'day')
-    const week = index === 0 ? '今天' : index === 1 ? '明天' : weekLabels[date.day()]
+  return Array.from({ length: 7 }).map((_, i) => {
+    const d = today.add(i, 'day')
     return {
-      value: date.format('YYYY-MM-DD'),
-      week,
-      day: date.format('MM/DD')
+      label: i === 0 ? '今天' : i === 1 ? '明天' : weekDays[d.day()],
+      day: `${d.month() + 1}/${d.date()}`,
+      value: d.format('YYYY-MM-DD')
     }
   })
 })
 
-const timeOptions = computed(() => options.value?.time_options || [])
-const availableCourts = computed(() => selectedTime.value?.available_courts || [])
-const businessHoursText = computed(() => {
-  if (!options.value) return '营业时间加载中'
-  return `营业 ${normalizeClock(options.value.open_time)}-${normalizeClock(options.value.close_time)}`
-})
-const durationText = computed(() => {
-  const minutes = durationUnits.value * 30
-  if (minutes % 60 === 0) return `${minutes / 60} 小时`
-  if (minutes > 60) return `${Math.floor(minutes / 60)} 小时 ${minutes % 60} 分钟`
-  return `${minutes} 分钟`
-})
-const canConfirm = computed(() => selectedTime.value && selectedCourtIds.value.length > 0)
-const estimatedAmount = computed(() => {
-  return formatAmount(toAmountNumber(options.value?.amount_per_court) * selectedCourtIds.value.length)
-})
-const selectionTitle = computed(() => {
-  if (!selectedTime.value) return '请选择开始时间'
-  if (!selectedCourtIds.value.length) return `${formatTime(selectedTime.value.start_at)}-${formatTime(selectedTime.value.end_at)}`
-  return `${selectedCourtIds.value.length} 个场地 · ¥${estimatedAmount.value}`
-})
-const selectionSubText = computed(() => {
-  if (!selectedTime.value) return '选择时长后展示可预约时间'
-  if (!selectedCourtIds.value.length) return '请选择至少一个场地'
-  return `${formatTime(selectedTime.value.start_at)}-${formatTime(selectedTime.value.end_at)} · ${durationText.value}`
+const openTime = computed(() => normalizeClock(grid.value?.open_time))
+const closeTime = computed(() => normalizeClock(grid.value?.close_time))
+
+const occupationMap = computed(() => {
+  const map = {}
+  if (!grid.value) return map
+  for (const occ of grid.value.occupations) {
+    if (!map[occ.court_id]) map[occ.court_id] = []
+    map[occ.court_id].push(occ)
+  }
+  return map
 })
 
-onMounted(loadOptions)
+const cellStatus = computed(() => {
+  if (!grid.value) return {}
+  const status = {}
+  const isToday = selectedDate.value === dayjs().format('YYYY-MM-DD')
+  const currentTime = now.value
 
-const loadOptions = async () => {
-  const requestId = ++loadRequestId
-  isLoading.value = true
-  loadError.value = ''
-  selectedTime.value = null
-  selectedCourtIds.value = []
-  try {
-    const data = await privateBookingApi.getPrivateBookingOptions({
-      date: selectedDate.value,
-      courtType: courtType.value,
-      durationUnits: durationUnits.value
-    })
-    if (requestId !== loadRequestId) return
-    options.value = data
-    selectFirstAvailableTime()
-  } catch (error) {
-    if (requestId !== loadRequestId) return
-    options.value = null
-    loadError.value = error?.message || '加载失败，请稍后重试'
-  } finally {
-    if (requestId === loadRequestId) {
-      isLoading.value = false
+  for (const court of grid.value.courts) {
+    status[court.id] = {}
+    const occs = occupationMap.value[court.id] || []
+
+    for (let si = 0; si < grid.value.time_slots.length; si++) {
+      const slot = grid.value.time_slots[si]
+      const slotStart = dayjs(`${selectedDate.value} ${slot.start}`)
+      const slotEnd = dayjs(`${selectedDate.value} ${slot.end}`)
+
+      if (isToday && slotEnd.isBefore(currentTime)) {
+        status[court.id][si] = 'past'
+        continue
+      }
+
+      const isOccupied = occs.some((occ) => {
+        const occStart = dayjs(occ.start_at)
+        const occEnd = dayjs(occ.end_at)
+        return occStart.isBefore(slotEnd) && occEnd.isAfter(slotStart)
+      })
+
+      status[court.id][si] = isOccupied ? 'occupied' : 'available'
     }
   }
-}
+  return status
+})
 
-const selectFirstAvailableTime = () => {
-  const first = timeOptions.value.find((item) => item.available_court_count > 0)
-  if (first) {
-    selectTime(first)
+const currentTimeLineVisible = computed(() => {
+  if (!grid.value) return false
+  return selectedDate.value === dayjs().format('YYYY-MM-DD')
+})
+
+const currentTimeTop = computed(() => {
+  if (!grid.value || !currentTimeLineVisible.value) return -1
+  const openMin = parseTimeToMinutes(grid.value.open_time)
+  const closeMin = parseTimeToMinutes(grid.value.close_time)
+  const currentMin = now.value.hour() * 60 + now.value.minute()
+  if (currentMin < openMin || currentMin > closeMin) return -1
+  return HEADER_HEIGHT + ((currentMin - openMin) / 30) * CELL_HEIGHT
+})
+
+const selectedCourtCount = computed(() => Object.keys(selectedCells.value).length)
+const selectedTotalSlots = computed(() =>
+  Object.values(selectedCells.value).reduce((sum, indices) => sum + indices.length, 0)
+)
+
+const canConfirm = computed(() => selectedCourtCount.value > 0 && selectedTotalSlots.value > 0)
+
+const selectionTimeText = computed(() => {
+  const allSlots = []
+  for (const indices of Object.values(selectedCells.value)) {
+    allSlots.push(...indices)
+  }
+  if (!allSlots.length) return ''
+  const sorted = allSlots.sort((a, b) => a - b)
+  const startSlot = grid.value.time_slots[sorted[0]]
+  const endSlot = grid.value.time_slots[sorted[sorted.length - 1]]
+  return `${startSlot.start}-${endSlot.end}`
+})
+
+const selectionAmount = computed(() => {
+  const priceVal = parseFloat(grid.value?.unit_price || '0')
+  return (priceVal * selectedTotalSlots.value).toFixed(2)
+})
+
+onMounted(loadGrid)
+
+async function loadGrid() {
+  const requestId = ++loadRequestId
+  if (!grid.value) isLoading.value = true
+  loadError.value = ''
+  try {
+    const data = await privateBookingApi.getPrivateBookingGrid({
+      date: selectedDate.value,
+      courtType: courtType.value
+    })
+    if (requestId !== loadRequestId) return
+    grid.value = data
+    selectedCells.value = {}
+  } catch (error) {
+    if (requestId !== loadRequestId) return
+    if (!grid.value) loadError.value = error?.message || '加载失败，请稍后重试'
+  } finally {
+    if (requestId === loadRequestId) isLoading.value = false
   }
 }
 
-const selectType = (type) => {
+function selectType(type) {
   if (courtType.value === type) return
   courtType.value = type
-  loadOptions()
+  loadGrid()
 }
 
-const selectDate = (date) => {
+function selectDate(date) {
   if (selectedDate.value === date) return
   selectedDate.value = date
-  loadOptions()
+  now.value = dayjs()
+  loadGrid()
 }
 
-const decreaseDuration = () => {
-  if (durationUnits.value <= 1) return
-  durationUnits.value -= 1
-  loadOptions()
+function getCellClass(courtId, slotIndex) {
+  const status = cellStatus.value[courtId]?.[slotIndex] || 'available'
+  const isSelected = selectedCells.value[courtId]?.includes(slotIndex)
+  if (isSelected) return { 'cell-selected': true }
+  return { [`cell-${status}`]: true }
 }
 
-const increaseDuration = () => {
-  if (durationUnits.value >= MAX_DURATION_UNITS) return
-  durationUnits.value += 1
-  loadOptions()
-}
+function toggleCell(courtId, slotIndex) {
+  const status = cellStatus.value[courtId]?.[slotIndex]
+  if (status !== 'available') return
 
-const selectTime = (timeOption) => {
-  if (!timeOption.available_court_count) return
-  selectedTime.value = timeOption
-  selectedCourtIds.value = timeOption.available_courts.slice(0, 1).map((court) => court.id)
-}
+  const current = selectedCells.value[courtId] || []
 
-const toggleCourt = (id) => {
-  if (selectedCourtIds.value.includes(id)) {
-    selectedCourtIds.value = selectedCourtIds.value.filter((item) => item !== id)
+  if (current.includes(slotIndex)) {
+    const next = current.filter((i) => i !== slotIndex)
+    if (next.length === 0) {
+      const next2 = { ...selectedCells.value }
+      delete next2[courtId]
+      selectedCells.value = next2
+      return
+    }
+    const sorted = next.sort((a, b) => a - b)
+    const isContiguous = sorted.every((val, idx) => idx === 0 || val === sorted[idx - 1] + 1)
+    if (isContiguous) {
+      selectedCells.value = { ...selectedCells.value, [courtId]: sorted }
+    } else {
+      uni.showToast({ title: '不能取消中间时段', icon: 'none' })
+    }
+    return
+  }
+
+  if (current.length === 0) {
+    selectedCells.value = { ...selectedCells.value, [courtId]: [slotIndex] }
+    return
+  }
+
+  const minIdx = Math.min(...current)
+  const maxIdx = Math.max(...current)
+
+  if (slotIndex === minIdx - 1 || slotIndex === maxIdx + 1) {
+    selectedCells.value = {
+      ...selectedCells.value,
+      [courtId]: [...current, slotIndex].sort((a, b) => a - b)
+    }
   } else {
-    selectedCourtIds.value = [...selectedCourtIds.value, id]
+    selectedCells.value = { ...selectedCells.value, [courtId]: [slotIndex] }
   }
 }
 
-const normalizeClock = (value) => {
+function goConfirm() {
+  if (!canConfirm.value) return
+
+  const items = Object.entries(selectedCells.value).map(([courtIdStr, slotIndices]) => {
+    const courtId = parseInt(courtIdStr)
+    const sorted = [...slotIndices].sort((a, b) => a - b)
+    const startSlot = grid.value.time_slots[sorted[0]]
+    const endSlot = grid.value.time_slots[sorted[sorted.length - 1]]
+    return {
+      court_id: courtId,
+      start_at: buildDateTime(selectedDate.value, startSlot.start),
+      end_at: buildDateTime(selectedDate.value, endSlot.end)
+    }
+  })
+
+  const payload = encodeURIComponent(JSON.stringify({
+    court_type: courtType.value,
+    items
+  }))
+  uni.navigateTo({ url: `/pages/comprehensive/private/confirm?payload=${payload}` })
+}
+
+function buildDateTime(date, time) {
+  return `${date}T${time}:00${dayjs().format('Z')}`
+}
+
+function parseTimeToMinutes(timeStr) {
+  if (!timeStr) return 0
+  const parts = timeStr.split(':')
+  return parseInt(parts[0]) * 60 + parseInt(parts[1])
+}
+
+function normalizeClock(value) {
   if (!value) return '--:--'
   return value.slice(0, 5)
 }
 
-const goConfirm = () => {
-  if (!canConfirm.value) return
-  const payload = encodeURIComponent(JSON.stringify({
-    court_type: courtType.value,
-    court_ids: selectedCourtIds.value,
-    start_at: selectedTime.value.start_at,
-    end_at: selectedTime.value.end_at
-  }))
-  uni.navigateTo({ url: `/pages/comprehensive/private/confirm?payload=${payload}` })
-}
+defineExpose({
+  refresh() {
+    now.value = dayjs()
+    loadGrid()
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 .private-page {
-  min-height: 100vh;
-  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
   background: $bg-color-soft;
 }
 
-.top-panel,
-.section-card {
-  @include minimal-card;
-  margin-bottom: $spacing-md;
+.tab-bar {
+  flex-shrink: 0;
+  display: flex;
+  height: 88rpx;
+  background: $bg-color-main;
+  border-bottom: 1rpx solid $border-color;
 }
 
-.court-section {
-  margin-bottom: 180rpx;
-}
-
-.type-tabs {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $spacing-sm;
-  margin-bottom: $spacing-md;
-}
-
-.type-tab,
-.date-chip,
-.time-chip,
-.court-chip {
+.tab-item {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius-base;
-  background: $bg-color-hover;
-  color: $text-color-muted;
-  font-weight: 800;
-}
-
-.type-tab {
-  height: 72rpx;
-  font-size: 26rpx;
-}
-
-.type-tab.active,
-.date-chip.active,
-.time-chip.active,
-.court-chip.active {
-  background: $text-color-main;
-  color: #FFFFFF;
-}
-
-.venue-meta {
-  min-height: 54rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
-  border-top: 1rpx solid $bg-color-hover;
-  color: $text-color-muted;
-  font-size: 24rpx;
+  font-size: 28rpx;
   font-weight: 700;
+  color: $text-color-muted;
+  transition: all 0.2s ease;
 }
 
-.date-section {
-  margin-bottom: $spacing-md;
+.tab-item.active {
+  color: $text-color-main;
+  font-weight: 900;
+  position: relative;
 }
 
-.date-scroll {
-  width: 100%;
+.tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48rpx;
+  height: 4rpx;
+  border-radius: 2rpx;
+  background: $text-color-main;
+}
+
+.date-bar {
+  flex-shrink: 0;
+  background: $bg-color-main;
+  border-bottom: 1rpx solid $border-color;
   white-space: nowrap;
 }
 
 .date-list {
   display: inline-flex;
-  gap: $spacing-sm;
-  padding-right: $spacing-md;
+  padding: $spacing-sm $spacing-xs;
+  gap: $spacing-xs;
 }
 
 .date-chip {
-  width: 128rpx;
-  height: 92rpx;
+  display: flex;
   flex-direction: column;
-  gap: 6rpx;
-  background: $bg-color-main;
-  border: 1rpx solid $bg-color-hover;
+  align-items: center;
+  justify-content: center;
+  width: 96rpx;
+  height: 88rpx;
+  border-radius: $border-radius-sm;
+  gap: 4rpx;
 }
 
-.date-week {
+.date-chip.active {
+  background: $text-color-main;
+}
+
+.date-label {
   font-size: 22rpx;
+  font-weight: 700;
+  color: $text-color-muted;
+}
+
+.date-chip.active .date-label {
+  color: #FFFFFF;
 }
 
 .date-day {
   font-size: 24rpx;
+  font-weight: 800;
+  color: $text-color-main;
 }
 
-.compact {
-  margin: 0 0 $spacing-md;
+.date-chip.active .date-day {
+  color: #FFFFFF;
 }
 
-.duration-control {
+.grid-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.grid-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-inner {
+  position: relative;
+  display: inline-block;
+}
+
+.grid-header-row {
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.corner-cell {
+  width: 128rpx;
+  flex-shrink: 0;
+  height: 75rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
+  justify-content: center;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $border-color;
+  color: $text-color-muted;
+  font-size: 20rpx;
+  font-weight: 800;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 15;
 }
 
-.step-btn {
-  width: 88rpx;
-  height: 76rpx;
+.court-header-cell {
+  width: 149rpx;
+  flex-shrink: 0;
+  height: 75rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $border-color;
+  color: $text-color-regular;
+  font-size: 20rpx;
+  font-weight: 800;
+  @include text-ellipsis;
+}
+
+.grid-row {
+  display: flex;
+}
+
+.time-label-cell {
+  width: 128rpx;
+  flex-shrink: 0;
+  height: 107rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $bg-color-hover;
+  color: $text-color-muted;
+  font-size: 20rpx;
+  font-weight: 700;
+  position: sticky;
+  left: 0;
+  z-index: 5;
+}
+
+.grid-cell {
+  width: 149rpx;
+  flex-shrink: 0;
+  height: 107rpx;
+  border-right: 1rpx solid $bg-color-hover;
+  border-bottom: 1rpx solid $bg-color-hover;
+}
+
+.cell-available {
+  background: $bg-color-main;
+}
+
+.cell-occupied {
+  background: $color-danger-light;
+}
+
+.cell-past {
+  background: $bg-color-hover;
+}
+
+.cell-selected {
+  background: $color-primary;
+}
+
+.current-time-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3rpx;
+  background: $color-danger;
+  z-index: 8;
+}
+
+.current-time-label {
+  position: absolute;
+  left: 4rpx;
+  top: -28rpx;
+  padding: 2rpx 8rpx;
+  border-radius: 4rpx;
+  background: $color-danger;
+  color: #FFFFFF;
+  font-size: 18rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.action-bar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: $border-radius-base;
-  background: $text-color-main;
-  color: #FFFFFF;
-  font-size: 38rpx;
-  font-weight: 900;
-}
-
-.step-btn[disabled] {
-  background: $bg-color-hover;
-  color: $text-color-light;
-}
-
-.duration-value {
-  flex: 1;
-  min-width: 0;
-  text-align: center;
-}
-
-.duration-main,
-.duration-sub,
-.time-main,
-.time-sub,
-.selection-main,
-.selection-sub {
-  display: block;
-}
-
-.duration-main {
-  color: $text-color-main;
-  font-size: 34rpx;
-  font-weight: 900;
-}
-
-.duration-sub {
-  margin-top: 4rpx;
-  color: $text-color-muted;
-  font-size: 22rpx;
-}
-
-.state-box {
-  min-height: 140rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $text-color-light;
-  font-size: 24rpx;
-}
-
-.time-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: $spacing-sm;
-}
-
-.time-chip {
-  height: 94rpx;
-  flex-direction: column;
-  gap: 6rpx;
-}
-
-.time-chip.disabled {
-  color: $text-color-light;
-  background: rgba(241, 245, 249, 0.7);
-}
-
-.time-main {
-  font-size: 26rpx;
-}
-
-.time-sub {
-  font-size: 20rpx;
-  font-weight: 700;
-}
-
-.court-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $spacing-sm;
-}
-
-.court-chip {
-  min-height: 76rpx;
-  padding: 0 $spacing-sm;
-  font-size: 26rpx;
+  gap: $spacing-md;
+  padding: $spacing-sm $spacing-md calc($spacing-sm + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.96);
+  border-top: 1rpx solid $border-color;
 }
 
 .selection-info {
@@ -461,19 +569,33 @@ const goConfirm = () => {
 }
 
 .selection-main {
+  display: block;
   color: $text-color-main;
   font-size: 28rpx;
   font-weight: 900;
 }
 
 .selection-sub {
+  display: block;
   margin-top: 4rpx;
   color: $text-color-muted;
   font-size: 22rpx;
 }
 
 .submit-btn {
-  width: 260rpx;
+  width: 200rpx;
 }
 
+.submit-btn-full {
+  flex: 1;
+}
+
+.state-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-color-light;
+  font-size: 24rpx;
+}
 </style>