From 7ce7cef77c6f6a7e159af4c5812ce73f5a195a9e Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 14 Apr 2026 10:07:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20UI=20=E9=A1=B5=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/DateSelector.vue  |   49 +-
 packages/app/src/components/ProfileMenu.vue   |   44 +-
 packages/app/src/components/SlotCard.vue      |   59 +-
 .../app/src/components/TimePeriodFilter.vue   |   34 +-
 packages/app/src/components/UserCard.vue      |   16 +-
 packages/app/src/pages/booking/detail.vue     | 1145 ++++++++++++-----
 packages/app/src/pages/booking/index.vue      |   51 +-
 packages/app/src/pages/profile/index.vue      |    8 -
 8 files changed, 958 insertions(+), 448 deletions(-)

diff --git a/packages/app/src/components/DateSelector.vue b/packages/app/src/components/DateSelector.vue
index 9679457..4be3259 100644
--- a/packages/app/src/components/DateSelector.vue
+++ b/packages/app/src/components/DateSelector.vue
@@ -1,12 +1,15 @@
 <template>
-  <view class="date-selector">
+  <view class="date-selector" :class="`date-selector--${variant}`">
     <scroll-view class="scroll" scroll-x enhanced :show-scrollbar="false">
       <view class="track">
         <view
           v-for="item in dateRange"
           :key="item.date"
           class="date-item"
-          :class="{ active: item.date === modelValue, today: item.isToday }"
+          :class="[
+            `date-item--${variant}`,
+            { active: item.date === modelValue, today: item.isToday },
+          ]"
           @tap="handleSelect(item.date)"
         >
           <text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
@@ -25,6 +28,7 @@ import { getDateRange } from '../utils/format'
 
 interface Props {
   modelValue: string
+  variant?: 'default' | 'booking'
 }
 
 const props = defineProps<Props>()
@@ -47,6 +51,8 @@ function handleSelect(date: string) {
   emit('update:modelValue', date)
   emit('select', date)
 }
+
+const variant = computed(() => props.variant ?? 'default')
 </script>
 
 <style lang="scss" scoped>
@@ -55,6 +61,11 @@ function handleSelect(date: string) {
   padding: 16rpx 0 20rpx;
   border-bottom: 1rpx solid $primary-border;
 
+  &.date-selector--booking {
+    background: rgba(252, 250, 248, 0.96);
+    border-bottom-color: rgba(192, 154, 137, 0.12);
+  }
+
   .scroll {
     width: 100%;
     white-space: nowrap;
@@ -121,6 +132,40 @@ function handleSelect(date: string) {
         font-weight: 600;
       }
     }
+
+    &.date-item--booking {
+      background: rgba(247, 242, 238, 0.88);
+      border: 1rpx solid rgba(192, 154, 137, 0.08);
+
+      .weekday {
+        color: #9d8b83;
+      }
+
+      .day {
+        color: #3a2e2a;
+      }
+
+      .month {
+        color: #b7a79f;
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #d7beb1, #b98f7d);
+        box-shadow: 0 12rpx 28rpx rgba(143, 103, 89, 0.16);
+
+        .weekday,
+        .day,
+        .month {
+          color: #fffaf7;
+        }
+      }
+
+      &.today:not(.active) {
+        .weekday {
+          color: #8f6759;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/packages/app/src/components/ProfileMenu.vue b/packages/app/src/components/ProfileMenu.vue
index cbac4c1..34c48dd 100644
--- a/packages/app/src/components/ProfileMenu.vue
+++ b/packages/app/src/components/ProfileMenu.vue
@@ -40,7 +40,7 @@ interface MenuItem {
   path?: string
   isAdmin?: boolean
   badge?: string
-  action?: 'clear' | 'about'
+  action?: 'clear'
   requireAuth?: boolean
 }
 
@@ -53,7 +53,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'clear-cache'): void
-  (e: 'about'): void
   (e: 'require-login'): void
 }>()
 
@@ -99,12 +98,6 @@ const menuItems = computed<MenuItem[]>(() => {
       title: '清除缓存',
       action: 'clear',
     },
-    {
-      key: 'about',
-      type: 'item',
-      title: '关于我们',
-      action: 'about',
-    },
   ]
 
   if (props.isAdmin) {
@@ -129,8 +122,6 @@ function handleTap(item: MenuItem) {
   }
   if (item.action === 'clear') {
     emit('clear-cache')
-  } else if (item.action === 'about') {
-    emit('about')
   } else if (item.path) {
     uni.navigateTo({ url: item.path })
   }
@@ -290,31 +281,6 @@ function handleTap(item: MenuItem) {
       }
     }
 
-    // 关于我们 — 圆形中心一个点 + 竖线（info 标记）
-    &--about {
-      background: rgba($text-hint, 0.08);
-      &::before {
-        content: '';
-        width: 22rpx;
-        height: 22rpx;
-        border: 2.5rpx solid $text-secondary;
-        border-radius: 50%;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 2.5rpx;
-        height: 8rpx;
-        background: $text-secondary;
-        border-radius: 1rpx;
-        box-shadow: 0 -6rpx 0 0 $text-secondary;
-      }
-    }
-
     // 管理中心 — 齿轮（圆 + 四个刻度）
     &--admin {
       background: rgba($accent-color, 0.12);
@@ -359,15 +325,15 @@ function handleTap(item: MenuItem) {
     font-size: 22rpx;
     line-height: 1;
     font-weight: 600;
-    color: #496578;
-    background: linear-gradient(135deg, rgba(239, 247, 251, 0.98), rgba(218, 234, 243, 0.96));
+    color: #8f6759;
+    background: linear-gradient(135deg, rgba(255, 248, 244, 0.98), rgba(241, 228, 220, 0.96));
     border-radius: 999rpx;
     padding: 9rpx 18rpx;
     margin-right: $spacing-sm;
-    border: 1rpx solid rgba(123, 165, 190, 0.18);
+    border: 1rpx solid rgba(192, 154, 137, 0.16);
     box-shadow:
       inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
-      0 6rpx 16rpx rgba(123, 165, 190, 0.16);
+      0 6rpx 16rpx rgba(143, 103, 89, 0.12);
   }
 
   &__arrow {
diff --git a/packages/app/src/components/SlotCard.vue b/packages/app/src/components/SlotCard.vue
index a48d195..9393806 100644
--- a/packages/app/src/components/SlotCard.vue
+++ b/packages/app/src/components/SlotCard.vue
@@ -160,6 +160,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   margin: 0 24rpx 20rpx;
   min-height: 220rpx;
   transition: all 0.2s ease;
+  filter: drop-shadow(0 16rpx 28rpx rgba(120, 91, 79, 0.08));
 
   &:active {
     transform: scale(0.98);
@@ -216,7 +217,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 .time-main {
   font-size: 40rpx;
   font-weight: 800;
-  color: #1a1a2e;
+  color: #3a2e2a;
   line-height: 1;
   letter-spacing: 1rpx;
 }
@@ -224,7 +225,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 .time-label {
   margin-top: 8rpx;
   font-size: 22rpx;
-  color: #999;
+  color: #a18a82;
   font-weight: 500;
 }
 
@@ -248,7 +249,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   width: 10rpx;
   height: 10rpx;
   border-radius: 50%;
-  background: #ccc;
+  background: #ccb7ae;
   flex-shrink: 0;
 }
 
@@ -257,8 +258,8 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   height: 2rpx;
   background: repeating-linear-gradient(
     to right,
-    #d0d0d0 0,
-    #d0d0d0 8rpx,
+    #dccbc2 0,
+    #dccbc2 8rpx,
     transparent 8rpx,
     transparent 16rpx
   );
@@ -269,7 +270,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   width: 48rpx;
   height: 48rpx;
   border-radius: 50%;
-  background: rgba($primary-color, 0.1);
+  background: rgba(185, 143, 125, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -283,7 +284,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 .duration-text {
   margin-top: 6rpx;
   font-size: 22rpx;
-  color: #999;
+  color: #a18a82;
   font-weight: 500;
 }
 
@@ -295,34 +296,34 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   font-size: 20rpx;
 
   &.cap-open {
-    background: rgba(76, 175, 80, 0.08);
+    background: rgba(101, 163, 126, 0.12);
 
     .capacity-text {
-      color: #4caf50;
+      color: #5d9472;
     }
   }
 
   &.cap-almost {
-    background: rgba(245, 158, 11, 0.08);
+    background: rgba(214, 161, 92, 0.14);
 
     .capacity-text {
-      color: #f59e0b;
+      color: #b98543;
     }
   }
 
   &.cap-full {
-    background: rgba(239, 68, 68, 0.08);
+    background: rgba(216, 91, 87, 0.12);
 
     .capacity-text {
-      color: #ef4444;
+      color: #c96763;
     }
   }
 
   &.cap-closed {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgba(111, 96, 91, 0.08);
 
     .capacity-text {
-      color: #999;
+      color: #9d8f89;
     }
   }
 }
@@ -360,7 +361,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 .course-name {
   font-size: 30rpx;
   font-weight: 700;
-  color: #1a1a2e;
+  color: #3a2e2a;
   letter-spacing: 1rpx;
 }
 
@@ -385,9 +386,9 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 }
 
 .btn-book {
-  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
-  color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
+  background: linear-gradient(135deg, #d5b9ab 0%, #b98f7d 100%);
+  color: #fffaf7;
+  box-shadow: 0 8rpx 18rpx rgba(143, 103, 89, 0.24);
   min-width: 120rpx;
   height: 60rpx;
   transition: all 0.15s;
@@ -399,30 +400,30 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 }
 
 .badge-booked {
-  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
-  color: $primary-dark;
+  background: linear-gradient(135deg, rgba(247, 240, 235, 0.96), rgba(236, 225, 217, 0.98));
+  color: #8f6759;
 }
 
 .badge-expired {
-  background: #f0f0f0;
-  color: #999;
+  background: rgba(111, 96, 91, 0.08);
+  color: #9d8f89;
 }
 
 .badge-full {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+  background: rgba(216, 91, 87, 0.12);
+  color: #c96763;
 }
 
 .badge-closed {
-  background: #f0f0f0;
-  color: #bbb;
+  background: rgba(111, 96, 91, 0.08);
+  color: #b5a8a1;
 }
 
 .cancel-link {
   font-size: 22rpx;
-  color: #ef4444;
+  color: #c96763;
   font-weight: 500;
   text-decoration: underline;
-  text-decoration-color: rgba(239, 68, 68, 0.3);
+  text-decoration-color: rgba(201, 103, 99, 0.28);
 }
 </style>
diff --git a/packages/app/src/components/TimePeriodFilter.vue b/packages/app/src/components/TimePeriodFilter.vue
index 21b1e5d..bbacb73 100644
--- a/packages/app/src/components/TimePeriodFilter.vue
+++ b/packages/app/src/components/TimePeriodFilter.vue
@@ -1,10 +1,10 @@
 <template>
-  <view class="time-period-filter">
+  <view class="time-period-filter" :class="`time-period-filter--${variant}`">
     <view
       v-for="tab in tabs"
       :key="tab.key ?? 'all'"
       class="tab-item"
-      :class="{ active: modelValue === tab.key }"
+      :class="[`tab-item--${variant}`, { active: modelValue === tab.key }]"
       @tap="handleChange(tab.key)"
     >
       <text class="tab-label">{{ tab.label }}</text>
@@ -25,14 +25,17 @@ interface Tab {
 
 interface Props {
   modelValue: PeriodKey
+  variant?: 'default' | 'booking'
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emit = defineEmits<{
   change: [period: PeriodKey]
   'update:modelValue': [period: PeriodKey]
 }>()
 
+const variant = computed(() => props.variant ?? 'default')
+
 const tabs = computed<Tab[]>(() => [
   { key: null, label: '全部' },
   ...Object.entries(TIME_PERIODS).map(([key, val]) => ({
@@ -55,6 +58,11 @@ function handleChange(key: PeriodKey) {
   padding: 0 24rpx;
   border-bottom: 1rpx solid $primary-border;
 
+  &.time-period-filter--booking {
+    background: rgba(252, 250, 248, 0.96);
+    border-bottom-color: rgba(192, 154, 137, 0.12);
+  }
+
   .tab-item {
     flex: 1;
     display: flex;
@@ -87,6 +95,26 @@ function handleChange(key: PeriodKey) {
         border-radius: 2rpx;
       }
     }
+
+    &.tab-item--booking {
+      .tab-label {
+        color: #9d8b83;
+      }
+
+      &.active {
+        .tab-label {
+          color: #8f6759;
+        }
+
+        &::after {
+          width: 48rpx;
+          height: 5rpx;
+          background: linear-gradient(90deg, #c8a899, #a87d6c);
+          border-radius: 999rpx;
+          box-shadow: 0 4rpx 10rpx rgba(168, 125, 108, 0.18);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/packages/app/src/components/UserCard.vue b/packages/app/src/components/UserCard.vue
index e895fce..c077750 100644
--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -248,11 +248,11 @@ function handleLogin() {
     gap: 10rpx;
     padding: 6rpx 14rpx 6rpx 8rpx;
     border-radius: 999rpx;
-    background: linear-gradient(135deg, rgba(244, 250, 253, 0.98), rgba(219, 235, 243, 0.94));
-    border: 1rpx solid rgba(123, 165, 190, 0.22);
+    background: linear-gradient(135deg, rgba(255, 249, 245, 0.98), rgba(242, 229, 221, 0.96));
+    border: 1rpx solid rgba(192, 154, 137, 0.18);
     box-shadow:
       inset 0 1rpx 0 rgba(255, 255, 255, 0.9),
-      0 8rpx 20rpx rgba(79, 123, 148, 0.16);
+      0 8rpx 20rpx rgba(143, 103, 89, 0.14);
   }
 
   &__member-icon {
@@ -263,17 +263,17 @@ function handleLogin() {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dfeef6 38%, #8fb6cb 100%);
+    background: radial-gradient(circle at 30% 30%, #fffdfb 0%, #f2e2d8 40%, #c79d89 100%);
     box-shadow:
       inset 0 2rpx 4rpx rgba(255, 255, 255, 0.76),
-      0 3rpx 8rpx rgba(77, 117, 140, 0.18);
+      0 3rpx 8rpx rgba(143, 103, 89, 0.16);
 
     &::after {
       content: '';
       position: absolute;
       inset: 3rpx;
       border-radius: 50%;
-      border: 1.5rpx solid rgba(92, 132, 156, 0.35);
+      border: 1.5rpx solid rgba(143, 103, 89, 0.28);
     }
   }
 
@@ -283,7 +283,7 @@ function handleLogin() {
     font-size: 20rpx;
     line-height: 1;
     font-weight: 800;
-    color: #4f6f82;
+    color: #8f6759;
     letter-spacing: 1rpx;
   }
 
@@ -291,7 +291,7 @@ function handleLogin() {
     font-size: 20rpx;
     line-height: 1;
     font-weight: 700;
-    color: #537488;
+    color: #8f6759;
     letter-spacing: 2rpx;
   }
 
diff --git a/packages/app/src/pages/booking/detail.vue b/packages/app/src/pages/booking/detail.vue
index f9334d2..7cb2068 100644
--- a/packages/app/src/pages/booking/detail.vue
+++ b/packages/app/src/pages/booking/detail.vue
@@ -1,228 +1,271 @@
 <template>
-  <view class="booking-detail-page" :style="{ paddingTop: navBarHeight }">
+  <view class="booking-detail-page">
     <CustomNavBar :title="isSlotMode ? '预约课程' : '预约详情'" show-back />
 
-    <!-- Loading state -->
-    <view v-if="loading" class="loading-wrap">
-      <view class="skeleton-card" />
-    </view>
+    <scroll-view class="detail-scroll" scroll-y :style="{ height: scrollHeight }">
+      <view class="nav-spacer" :style="{ height: navBarHeight }" />
 
-    <!-- Booking mode: not found -->
-    <view v-else-if="!isSlotMode && !booking" class="empty-wrap">
-      <text class="empty-title">预约不存在</text>
-    </view>
+      <view v-if="loading" class="loading-wrap">
+        <view class="skeleton-card" />
+      </view>
 
-    <!-- Slot mode: not found -->
-    <view v-else-if="isSlotMode && !slotData" class="empty-wrap">
-      <text class="empty-title">课程不存在</text>
-    </view>
+      <view v-else-if="!isSlotMode && !booking" class="empty-wrap">
+        <text class="empty-title">预约不存在</text>
+      </view>
 
-    <!-- Booking detail mode -->
-    <template v-else-if="!isSlotMode && booking">
-      <!-- Booking info card -->
-      <view class="info-card">
-        <view class="info-card-header">
-          <view class="status-banner" :class="bookingStatusBannerClass(booking.status)">
-            <view class="status-banner-dot" />
-            <text class="status-banner-text">{{ bookingStatusLabel(booking.status) }}</text>
-          </view>
-          <text class="status-banner-hint">{{ bookingStatusHint(booking.status) }}</text>
-        </view>
+      <view v-else-if="isSlotMode && !slotData" class="empty-wrap">
+        <text class="empty-title">课程不存在</text>
+      </view>
 
-        <!-- Course info -->
-        <view class="info-section">
-          <view class="info-row">
-            <text class="info-label">课程日期</text>
-            <text class="info-value">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">课程时间</text>
-            <text class="info-value">
+      <template v-else-if="!isSlotMode && booking">
+        <view class="hero-section">
+          <image class="hero-image" :src="teacher.cover" mode="widthFix" />
+          <view class="hero-overlay" />
+
+          <view class="hero-content">
+            <view class="hero-badges">
+              <text class="hero-badge" :class="bookingStatusBannerClass(booking.status)">
+                {{ bookingStatusLabel(booking.status) }}
+              </text>
+              <text class="hero-badge hero-badge--light">{{ booking.membership?.cardType?.name || '会员预约' }}</text>
+            </view>
+            <text class="hero-title">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
+            <text class="hero-subtitle">
               {{ booking.timeSlot.startTime.slice(0, 5) }} - {{ booking.timeSlot.endTime.slice(0, 5) }}
+              · {{ teacher.name }} 私教课
             </text>
-            </view>
-          <view class="info-row">
-            <text class="info-label">使用卡种</text>
-            <text class="info-value">{{ booking.membership?.cardType?.name }}</text>
+            <text class="hero-caption">{{ bookingStatusHint(booking.status) }}</text>
           </view>
         </view>
 
-        <!-- User info (for admin view) -->
-        <view v-if="isAdmin && bookingUser" class="info-section">
-          <view class="section-title">学员信息</view>
-          <view class="info-row">
-            <text class="info-label">学员姓名</text>
-            <text class="info-value">{{ bookingUser.nickname || '匿名用户' }}</text>
-          </view>
-          <view v-if="bookingUser.phone" class="info-row">
-            <text class="info-label">联系电话</text>
-            <text class="info-value">{{ bookingUser.phone }}</text>
-          </view>
-        </view>
+        <view class="content-wrap">
+          <view class="summary-card">
+            <text class="summary-eyebrow">Booking Snapshot</text>
+            <text class="summary-title">把这一节课留给更稳定的自己</text>
+            <text class="summary-intro">{{ bookingSummaryIntro }}</text>
 
-        <!-- Timestamps -->
-        <view class="info-section">
-          <view class="section-title">时间记录</view>
-          <view class="info-row">
-            <text class="info-label">预约时间</text>
-            <text class="info-value">{{ formatDateTime(booking.createdAt) }}</text>
-          </view>
-          <view v-if="booking.confirmedAt" class="info-row">
-            <text class="info-label">确认时间</text>
-            <text class="info-value">{{ formatDateTime(booking.confirmedAt) }}</text>
-          </view>
-          <view v-if="booking.completedAt" class="info-row">
-            <text class="info-label">核销时间</text>
-            <text class="info-value">{{ formatDateTime(booking.completedAt) }}</text>
-          </view>
-          <view v-if="booking.cancelledAt" class="info-row">
-            <text class="info-label">取消时间</text>
-            <text class="info-value">{{ formatDateTime(booking.cancelledAt) }}</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- Status timeline -->
-      <view class="timeline-card">
-        <view class="timeline-header">
-          <text class="timeline-title">状态流转记录</text>
-        </view>
-
-        <view v-if="history.length === 0" class="timeline-empty">
-          <text class="timeline-empty-text">暂无流转记录</text>
-        </view>
-
-        <view v-else class="timeline">
-          <view
-            v-for="(item, idx) in history"
-            :key="item.id"
-            class="timeline-item"
-            :class="{ 'timeline-item--last': idx === history.length - 1 }"
-          >
-            <!-- Dot -->
-            <view class="timeline-dot-wrap">
-              <view class="timeline-dot" :class="bookingTimelineDotClass(item.toStatus)" />
-              <view v-if="idx < history.length - 1" class="timeline-line" />
-            </view>
-
-            <!-- Content -->
-            <view class="timeline-content">
-              <view class="timeline-content-header">
-                <text class="timeline-status">{{ bookingStatusLabel(item.toStatus) }}</text>
-                <text class="timeline-time">{{ formatDateTime(item.createdAt) }}</text>
+            <view class="stats-grid">
+              <view v-for="item in bookingOverviewStats" :key="item.label" class="stat-item">
+                <text class="stat-value">{{ item.value }}</text>
+                <text class="stat-label">{{ item.label }}</text>
               </view>
-              <text v-if="item.remark" class="timeline-remark">{{ item.remark }}</text>
             </view>
           </view>
-        </view>
-      </view>
 
-      <!-- Action buttons -->
-      <view v-if="showActions" class="action-bar">
-        <!-- Pending: confirm button for admin -->
-        <view
-          v-if="booking.status === 'PENDING_CONFIRMATION' && isAdmin"
-          class="action-btn action-btn--confirm"
-          @tap="handleConfirm"
-        >
-          <text class="action-btn-text">确认预约</text>
-        </view>
+          <view class="detail-card">
+            <text class="card-title">课程内容</text>
+            <view class="specialty-row">
+              <text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
+            </view>
+            <text class="card-text">{{ courseIntro }}</text>
 
-        <!-- Confirmed: complete / noshow buttons for admin -->
-        <view v-if="booking.status === 'CONFIRMED' && isAdmin" class="action-row">
-          <view class="action-btn action-btn--complete" @tap="handleComplete">
-            <text class="action-btn-text">核销完成</text>
+            <view class="focus-grid">
+              <view v-for="item in courseFocus" :key="item.title" class="focus-item">
+                <text class="focus-title">{{ item.title }}</text>
+                <text class="focus-desc">{{ item.desc }}</text>
+              </view>
+            </view>
           </view>
-          <view class="action-btn action-btn--noshow" @tap="handleNoShow">
-            <text class="action-btn-text">标记未到</text>
+
+          <view v-if="isAdmin && bookingUser" class="detail-card">
+            <text class="card-title">学员信息</text>
+            <view class="meta-list">
+              <view class="meta-row">
+                <text class="meta-label">学员姓名</text>
+                <text class="meta-value">{{ bookingUser.nickname || '匿名用户' }}</text>
+              </view>
+              <view v-if="bookingUser.phone" class="meta-row">
+                <text class="meta-label">联系电话</text>
+                <text class="meta-value">{{ bookingUser.phone }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="detail-card">
+            <text class="card-title">时间记录</text>
+            <view class="meta-list">
+              <view class="meta-row">
+                <text class="meta-label">预约时间</text>
+                <text class="meta-value">{{ formatDateTime(booking.createdAt) }}</text>
+              </view>
+              <view v-if="booking.confirmedAt" class="meta-row">
+                <text class="meta-label">确认时间</text>
+                <text class="meta-value">{{ formatDateTime(booking.confirmedAt) }}</text>
+              </view>
+              <view v-if="booking.completedAt" class="meta-row">
+                <text class="meta-label">核销时间</text>
+                <text class="meta-value">{{ formatDateTime(booking.completedAt) }}</text>
+              </view>
+              <view v-if="booking.cancelledAt" class="meta-row">
+                <text class="meta-label">取消时间</text>
+                <text class="meta-value">{{ formatDateTime(booking.cancelledAt) }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="detail-card">
+            <text class="card-title">到店提醒</text>
+            <view v-for="item in reminderNotes" :key="item" class="list-row">
+              <view class="list-dot" />
+              <text class="list-text">{{ item }}</text>
+            </view>
+          </view>
+
+          <view class="detail-card timeline-card">
+            <text class="card-title">状态流转</text>
+
+            <view v-if="history.length === 0" class="timeline-empty">
+              <text class="timeline-empty-text">暂无流转记录</text>
+            </view>
+
+            <view v-else class="timeline">
+              <view
+                v-for="(item, idx) in history"
+                :key="item.id"
+                class="timeline-item"
+                :class="{ 'timeline-item--last': idx === history.length - 1 }"
+              >
+                <view class="timeline-dot-wrap">
+                  <view class="timeline-dot" :class="bookingTimelineDotClass(item.toStatus)" />
+                  <view v-if="idx < history.length - 1" class="timeline-line" />
+                </view>
+
+                <view class="timeline-content">
+                  <view class="timeline-content-header">
+                    <text class="timeline-status">{{ bookingStatusLabel(item.toStatus) }}</text>
+                    <text class="timeline-time">{{ formatDateTime(item.createdAt) }}</text>
+                  </view>
+                  <text v-if="item.remark" class="timeline-remark">{{ item.remark }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <view v-if="showActions" class="action-panel">
+            <view
+              v-if="booking.status === 'PENDING_CONFIRMATION' && isAdmin"
+              class="action-btn action-btn--primary"
+              @tap="handleConfirm"
+            >
+              <text class="action-btn-text">确认预约</text>
+            </view>
+
+            <view v-if="booking.status === 'CONFIRMED' && isAdmin" class="action-row">
+              <view class="action-btn action-btn--success" @tap="handleComplete">
+                <text class="action-btn-text">核销完成</text>
+              </view>
+              <view class="action-btn action-btn--soft-danger" @tap="handleNoShow">
+                <text class="action-btn-text">标记未到</text>
+              </view>
+            </view>
+
+            <view
+              v-if="booking.status === 'PENDING_CONFIRMATION' || booking.status === 'CONFIRMED'"
+              class="action-btn action-btn--ghost"
+              @tap="handleCancel"
+            >
+              <text class="action-btn-text">取消预约</text>
+            </view>
+          </view>
+
+          <view class="bottom-space" />
+        </view>
+      </template>
+
+      <template v-else-if="isSlotMode && slotData">
+        <view class="hero-section">
+          <image class="hero-image" :src="teacher.cover" mode="widthFix" />
+          <view class="hero-overlay" />
+
+          <view class="hero-content">
+            <view class="hero-badges">
+              <text class="hero-badge hero-badge--light">1 对 1 私教</text>
+              <text class="hero-badge" :class="slotCapacityClass">{{ slotSeatStatusText }}</text>
+            </view>
+            <text class="hero-title">普拉提私教</text>
+            <text class="hero-subtitle">
+              {{ formatDateDisplay(slotData.date) }} · {{ slotData.startTime.slice(0, 5) }} - {{ slotData.endTime.slice(0, 5) }}
+            </text>
+            <text class="hero-caption">由 {{ teacher.name }} 带你回到更稳定、更有控制感的训练节奏里。</text>
           </view>
         </view>
 
-        <!-- User can cancel if pending or confirmed -->
-        <view
-          v-if="booking.status === 'PENDING_CONFIRMATION' || booking.status === 'CONFIRMED'"
-          class="action-btn action-btn--cancel"
-          @tap="handleCancel"
-        >
-          <text class="action-btn-text">取消预约</text>
-        </view>
-      </view>
-    </template>
+        <view class="content-wrap">
+          <view class="summary-card">
+            <text class="summary-eyebrow">Private Pilates Session</text>
+            <text class="summary-title">先看清这节课适不适合你</text>
 
-    <!-- Slot preview mode -->
-    <template v-else-if="isSlotMode && slotData">
-      <!-- Slot info card -->
-      <view class="info-card">
-        <!-- Course info -->
-        <view class="info-section">
-          <view class="info-row">
-            <text class="info-label">课程日期</text>
-            <text class="info-value">{{ formatDateDisplay(slotData.date) }}</text>
+            <view class="specialty-row">
+              <text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
+            </view>
+
+            <text class="summary-intro">{{ teacher.intro }}</text>
+
+            <view class="stats-grid">
+              <view v-for="item in slotOverviewStats" :key="item.label" class="stat-item">
+                <text class="stat-value">{{ item.value }}</text>
+                <text class="stat-label">{{ item.label }}</text>
+              </view>
+            </view>
           </view>
-          <view class="info-row">
-            <text class="info-label">课程时间</text>
-            <text class="info-value">
-              {{ slotData.startTime.slice(0, 5) }} - {{ slotData.endTime.slice(0, 5) }}
+
+          <view class="detail-card">
+            <text class="card-title">课程介绍</text>
+            <text class="card-text">{{ courseIntro }}</text>
+          </view>
+
+          <view class="detail-card">
+            <text class="card-title">课程重点</text>
+            <view class="focus-grid">
+              <view v-for="item in courseFocus" :key="item.title" class="focus-item">
+                <text class="focus-title">{{ item.title }}</text>
+                <text class="focus-desc">{{ item.desc }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="detail-card cta-card">
+            <text class="card-title">适合这样的你</text>
+            <view class="fit-grid">
+              <view v-for="item in courseFits" :key="item" class="fit-pill">{{ item }}</view>
+            </view>
+            <text class="card-text">
+              如果你想改善体态、缓解肩颈腰背不适，提升核心稳定、线条感与身体控制力，这节课会是一个很好的开始。
             </text>
           </view>
-          <view class="info-row">
-            <text class="info-label">课程类型</text>
-            <text class="info-value">普拉提私教</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">授课方式</text>
-            <text class="info-value">私教</text>
-          </view>
-        </view>
 
-        <!-- Capacity info -->
-        <view class="info-section">
-          <view class="info-row">
-            <text class="info-label">课程容量</text>
-            <text class="info-value">{{ slotData.bookedCount }} / {{ slotData.capacity }} 人</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">剩余名额</text>
-            <view class="capacity-tag" :class="slotCapacityClass">
-              <text>{{ slotData.capacity - slotData.bookedCount }} 位</text>
+          <view class="detail-card">
+            <text class="card-title">上课提醒</text>
+            <view v-for="item in reminderNotes" :key="item" class="list-row">
+              <view class="list-dot" />
+              <text class="list-text">{{ item }}</text>
             </view>
           </view>
-        </view>
 
-        <!-- Course description -->
-        <view class="info-section">
-          <view class="section-title">课程介绍</view>
-          <text class="desc-text">
-            普拉提私教课程，由专业教练一对一指导，根据您的身体状况制定个性化训练方案。通过精准的核心控制训练，帮助您改善体态、增强肌力、提升柔韧性。
-          </text>
+          <view class="bottom-space bottom-space--with-bar" />
         </view>
+      </template>
+    </scroll-view>
 
-        <!-- Notes -->
-        <view class="info-section">
-          <view class="section-title">温馨提示</view>
-          <text class="desc-text">· 请提前10分钟到达场馆\n· 建议穿着舒适运动服装\n· 课前2小时内避免大量进食\n· 如需取消请提前联系</text>
+    <view v-if="isSlotMode && slotData" class="bottom-bar">
+      <view class="bottom-note">
+        <text class="bottom-note-title">1 对 1 私教课</text>
+        <text class="bottom-note-sub">60 分钟 · {{ slotBottomNote }}</text>
+      </view>
+      <view class="bottom-actions">
+        <view
+          class="booking-btn"
+          :class="{
+            'booking-btn--muted': !canBook,
+            'booking-btn--outline': slotData.isBookedByMe && slotData.myBookingId,
+          }"
+          @tap="handleSlotPrimaryAction"
+        >
+          <text class="booking-btn-text" :class="{ 'booking-btn-text--muted': !canBook }">{{ slotPrimaryActionLabel }}</text>
         </view>
       </view>
+    </view>
 
-      <!-- Action button -->
-      <view v-if="canBook" class="action-bar">
-        <view class="action-btn action-btn--confirm" @tap="handleSlotBook">
-          <text class="action-btn-text">立即预约</text>
-        </view>
-      </view>
-      <view v-else-if="slotData.isBookedByMe && slotData.myBookingId" class="action-bar">
-        <view class="action-btn action-btn--disabled" @tap="goToMyBookingDetail">
-          <text class="action-btn-text">{{ slotActionLabel }}</text>
-        </view>
-      </view>
-      <view v-else-if="slotData.status === TimeSlotStatus.FULL" class="action-bar">
-        <view class="action-btn action-btn--disabled">
-          <text class="action-btn-text">已约满</text>
-        </view>
-      </view>
-    </template>
-
-    <!-- Booking confirm popup (slot mode) -->
     <BookingConfirmPopup
       v-if="isSlotMode"
       :visible="showConfirmPopup"
@@ -250,6 +293,7 @@ import { useUserStore } from '../../stores/user'
 import { getErrorMessage } from '../../utils/auth'
 import { getSystemLayout } from '../../utils/system'
 import { isSlotPast } from '../../utils/format'
+import { irisProfile } from '../../utils/teacher'
 import {
   formatDateDisplay,
   bookingStatusLabel,
@@ -263,6 +307,7 @@ const bookingStore = useBookingStore()
 const userStore = useUserStore()
 
 const navBarHeight = ref('64px')
+const scrollHeight = ref('500px')
 const loading = ref(false)
 
 // ─── Page mode ────────────────────────────────────────────────────────────
@@ -317,6 +362,99 @@ const slotCapacityClass = computed(() => {
   return 'cap-open'
 })
 
+const teacher = irisProfile
+
+const bookingOverviewStats = computed(() => {
+  if (!booking.value) return []
+
+  return [
+    { label: '课程类型', value: '私教' },
+    { label: '使用卡种', value: booking.value.membership?.cardType?.name || '会员卡' },
+    { label: '课程时长', value: getSlotDuration(booking.value.timeSlot.startTime, booking.value.timeSlot.endTime) },
+  ]
+})
+
+const slotOverviewStats = computed(() => {
+  if (!slotData.value) return []
+
+  return [
+    { label: '课程容量', value: `${slotData.value.capacity} 人` },
+    { label: '已预约', value: `${slotData.value.bookedCount} 人` },
+    { label: '课程时长', value: getSlotDuration(slotData.value.startTime, slotData.value.endTime) },
+  ]
+})
+
+const courseFocus = computed(() => teacher.teachingFocus.slice(0, 4))
+
+const courseFits = [
+  '久坐肩颈紧张',
+  '体态调整',
+  '产后恢复',
+  '塑形紧致',
+  '核心无力',
+  '运动入门',
+]
+
+const reminderNotes = [
+  '请提前 10 分钟到达场馆，给身体一点从容进入状态的时间。',
+  '建议穿着舒适且方便伸展的运动服装。',
+  '课前 2 小时尽量避免大量进食，训练时会更轻松。',
+  '如需调整或取消，请尽量提前联系，方便安排时段。',
+]
+
+const bookingSummaryIntro = computed(() => {
+  if (!booking.value) return ''
+
+  return `这是一节由 ${teacher.name} 带领的一对一普拉提课程，训练会围绕你的体态、稳定性与控制能力展开，让每一次练习都更有针对性。`
+})
+
+const courseIntro = computed(() => {
+  const specialties = teacher.specialties.join('、')
+  return `${teacher.name} 会在一对一课程里根据你的身体状态与训练目标，安排更细腻的节奏与动作引导，重点关注 ${specialties} 等方向。\n\n课程会从呼吸、核心激活与身体控制开始，帮助改善圆肩、头前伸、骨盆前倾等常见体态问题，也让肩颈、腰背和臀腿逐步建立更稳定的支撑。\n\n普拉提的优势在于低冲击、重质量、讲究精准发力，适合运动入门、长期塑形，以及希望提升柔韧性、稳定性和身体觉知的人。`
+})
+
+const slotSeatStatusText = computed(() => {
+  if (!slotData.value) return ''
+  return `剩余 ${Math.max(slotData.value.capacity - slotData.value.bookedCount, 0)} 位`
+})
+
+const slotPrimaryActionLabel = computed(() => {
+  if (!slotData.value) return '查看课程'
+  if (canBook.value) return '立即预约'
+  if (slotData.value.isBookedByMe && slotData.value.myBookingId) return slotActionLabel.value
+  if (slotData.value.status === TimeSlotStatus.FULL) return '已约满'
+  return '当前不可预约'
+})
+
+const slotBottomNote = computed(() => {
+  if (!slotData.value) return ''
+  if (canBook.value) return slotSeatStatusText.value
+  if (slotData.value.isBookedByMe) return '已为你保留本次预约'
+  if (slotData.value.status === TimeSlotStatus.FULL) return '当前名额已满'
+  return '请选择其他可预约时段'
+})
+
+function handleSlotPrimaryAction() {
+  if (!slotData.value) return
+  if (canBook.value) {
+    handleSlotBook()
+    return
+  }
+  if (slotData.value.isBookedByMe && slotData.value.myBookingId) {
+    goToMyBookingDetail()
+  }
+}
+
+function getSlotDuration(startTime: string, endTime: string) {
+  const [startHour, startMinute] = startTime.split(':').map(Number)
+  const [endHour, endMinute] = endTime.split(':').map(Number)
+  const minutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute)
+
+  if (minutes <= 0) return '待确认'
+  if (minutes % 60 === 0) return `${minutes / 60} 小时`
+  return `${minutes} 分钟`
+}
+
 // ─── Status helpers ───────────────────────────────────────────────────────
 function formatDateTime(dateStr: string): string {
   if (!dateStr) return '-'
@@ -539,7 +677,7 @@ async function handleCancel() {
 
 // ─── Lifecycle ────────────────────────────────────────────────────────────
 onMounted(async () => {
-  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
+  updateLayout()
   // Load memberships if logged in (needed for BookingConfirmPopup)
   if (userStore.loggedIn && userStore.activeMemberships.length === 0) {
     await userStore.fetchMemberships()
@@ -547,6 +685,7 @@ onMounted(async () => {
 })
 
 onLoad((query) => {
+  updateLayout()
   const q = query as Record<string, string>
 
   if (q.slotId) {
@@ -562,13 +701,235 @@ onLoad((query) => {
     loadBookingData()
   }
 })
+
+function updateLayout() {
+  const { navBarHeight: navBarPx } = getSystemLayout()
+  const { windowHeight } = uni.getWindowInfo()
+  navBarHeight.value = `${navBarPx}px`
+  scrollHeight.value = `${windowHeight}px`
+}
 </script>
 
 <style lang="scss" scoped>
 .booking-detail-page {
-  min-height: 100vh;
-  background: $primary-bg;
-  padding-bottom: 40rpx;
+  height: 100vh;
+  background: #f7f2ee;
+  box-sizing: border-box;
+}
+
+.detail-scroll {
+  width: 100%;
+}
+
+.nav-spacer {
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.hero-section {
+  position: relative;
+  height: 580rpx;
+  overflow: hidden;
+}
+
+.hero-image {
+  width: 100%;
+  display: block;
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(33, 24, 22, 0.08) 0%, rgba(33, 24, 22, 0.08) 34%, rgba(33, 24, 22, 0.68) 100%),
+    radial-gradient(circle at top right, rgba(255, 228, 208, 0.28), transparent 30%);
+}
+
+.hero-content {
+  position: absolute;
+  left: 32rpx;
+  right: 32rpx;
+  bottom: 84rpx;
+  z-index: 1;
+}
+
+.hero-badges {
+  display: flex;
+  gap: 10rpx;
+  flex-wrap: wrap;
+  margin-bottom: 18rpx;
+}
+
+.hero-badge {
+  min-height: 42rpx;
+  padding: 0 16rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1rpx solid rgba(255, 255, 255, 0.24);
+  color: #fff8f3;
+  font-size: 20rpx;
+  backdrop-filter: blur(10rpx);
+
+  &--light {
+    color: #fff8f3;
+    background: rgba(255, 255, 255, 0.16);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &.banner--pending {
+    color: #fff4e2;
+    background: rgba(201, 129, 28, 0.2);
+    border-color: rgba(255, 226, 170, 0.2);
+  }
+
+  &.banner--confirmed {
+    color: #fff8f2;
+    background: rgba(139, 107, 77, 0.28);
+    border-color: rgba(255, 236, 222, 0.18);
+  }
+
+  &.banner--completed {
+    color: #effff6;
+    background: rgba(47, 143, 103, 0.22);
+    border-color: rgba(216, 255, 230, 0.18);
+  }
+
+  &.banner--cancelled {
+    color: #f5efea;
+    background: rgba(155, 155, 155, 0.22);
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+
+  &.banner--noshow {
+    color: #fff2f1;
+    background: rgba(216, 91, 87, 0.24);
+    border-color: rgba(255, 222, 220, 0.16);
+  }
+
+  &.cap-open,
+  &.cap-almost,
+  &.cap-full {
+    color: #fff8f3;
+  }
+}
+
+.hero-title {
+  display: block;
+  font-size: 52rpx;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1.08;
+  margin-bottom: 10rpx;
+}
+
+.hero-subtitle {
+  display: block;
+  font-size: 26rpx;
+  color: rgba(255, 247, 241, 0.9);
+  line-height: 1.6;
+}
+
+.hero-caption {
+  display: block;
+  margin-top: 18rpx;
+  font-size: 24rpx;
+  color: rgba(255, 240, 229, 0.82);
+  line-height: 1.65;
+}
+
+.content-wrap {
+  position: relative;
+  margin-top: -8rpx;
+  padding: 0 24rpx;
+}
+
+.summary-card,
+.detail-card,
+.action-panel {
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 28rpx;
+  box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
+  backdrop-filter: blur(12rpx);
+}
+
+.summary-card {
+  padding: 28rpx;
+  margin-bottom: 18rpx;
+}
+
+.summary-eyebrow {
+  display: block;
+  font-size: 20rpx;
+  color: #c09a89;
+  letter-spacing: 3rpx;
+  text-transform: uppercase;
+  margin-bottom: 8rpx;
+}
+
+.summary-title {
+  display: block;
+  font-size: 34rpx;
+  line-height: 1.35;
+  color: #2f2522;
+  font-weight: 700;
+}
+
+.summary-intro {
+  display: block;
+  margin-top: 18rpx;
+  font-size: 26rpx;
+  line-height: 1.8;
+  color: #685854;
+}
+
+.specialty-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 20rpx;
+}
+
+.specialty-pill {
+  height: 52rpx;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  background: rgba(192, 154, 137, 0.12);
+  color: #9c6f60;
+  font-size: 22rpx;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16rpx;
+  margin-top: 24rpx;
+}
+
+.stat-item {
+  padding: 22rpx 18rpx;
+  border-radius: 22rpx;
+  background: linear-gradient(180deg, rgba(247, 242, 238, 0.95), rgba(255, 255, 255, 0.9));
+  border: 1rpx solid rgba(192, 154, 137, 0.08);
+}
+
+.stat-value {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #2f2522;
+  line-height: 1.35;
+}
+
+.stat-label {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #a18a82;
 }
 
 /* ── Loading ─────────────────────────────────────────── */
@@ -577,11 +938,12 @@ onLoad((query) => {
 }
 
 .skeleton-card {
-  height: 300rpx;
-  border-radius: 20rpx;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  height: 420rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 25%, rgba(245, 235, 229, 0.92) 50%, rgba(255, 255, 255, 0.78) 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
+  box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
 }
 
 /* ── Empty ───────────────────────────────────────────── */
@@ -589,57 +951,12 @@ onLoad((query) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 120rpx 40rpx;
+  padding: 160rpx 40rpx;
 }
 
 .empty-title {
   font-size: 32rpx;
-  color: #666;
-}
-
-/* ── Info card ────────────────────────────────────────── */
-.info-card {
-  margin: 24rpx;
-  background: #fff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
-}
-
-.info-card-header {
-  padding: 28rpx 24rpx 22rpx;
-  background: linear-gradient(180deg, rgba(160, 144, 128, 0.08), rgba(160, 144, 128, 0.02));
-  border-bottom: 1rpx solid rgba(160, 144, 128, 0.08);
-}
-
-.status-banner {
-  display: inline-flex;
-  align-items: center;
-  gap: 10rpx;
-  padding: 12rpx 20rpx;
-  border-radius: 999rpx;
-  border: 1rpx solid transparent;
-}
-
-.status-banner-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.status-banner-text {
-  font-size: 24rpx;
-  font-weight: 700;
-  letter-spacing: 1rpx;
-}
-
-.status-banner-hint {
-  display: block;
-  margin-top: 14rpx;
-  font-size: 24rpx;
-  line-height: 1.6;
-  color: #8c8175;
+  color: #7a6962;
 }
 
 .banner--pending {
@@ -672,92 +989,159 @@ onLoad((query) => {
   border-color: rgba(239, 83, 80, 0.18);
 }
 
-.info-section {
-  padding: 24rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+.cap-open {
+  background: rgba(76, 175, 80, 0.18);
+  border-color: rgba(145, 219, 149, 0.22);
+}
+
+.cap-almost {
+  background: rgba(245, 158, 11, 0.2);
+  border-color: rgba(255, 223, 176, 0.22);
+}
+
+.cap-full {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(255, 212, 212, 0.24);
+}
+
+.detail-card {
+  padding: 28rpx;
+  margin-bottom: 18rpx;
+}
+
+.card-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #2f2522;
+  margin-bottom: 20rpx;
+}
+
+.card-text {
+  display: block;
+  font-size: 26rpx;
+  color: #685854;
+  line-height: 1.85;
+  white-space: pre-line;
+}
+
+.meta-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18rpx;
+}
+
+.meta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24rpx;
+  padding-bottom: 18rpx;
+  border-bottom: 1rpx solid rgba(192, 154, 137, 0.12);
 
   &:last-child {
     border-bottom: none;
+    padding-bottom: 0;
   }
 }
 
-.section-title {
-  font-size: 24rpx;
-  font-weight: 600;
-  color: #A09080;
-  margin-bottom: 16rpx;
-  letter-spacing: 1rpx;
-}
-
-.info-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12rpx 0;
-}
-
-.info-label {
+.meta-label {
   font-size: 26rpx;
-  color: #999;
+  color: #a18a82;
 }
 
-.info-value {
+.meta-value {
   font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-}
-
-.capacity-tag {
-  padding: 4rpx 16rpx;
-  border-radius: 8rpx;
-  font-size: 24rpx;
+  color: #2f2522;
   font-weight: 600;
+  text-align: right;
+  line-height: 1.6;
+}
 
-  &.cap-open {
-    background: rgba(76, 175, 80, 0.08);
-    color: #4caf50;
-  }
+.focus-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16rpx;
+  margin-top: 22rpx;
+}
 
-  &.cap-almost {
-    background: rgba(245, 158, 11, 0.08);
-    color: #f59e0b;
-  }
+.focus-item {
+  padding: 22rpx;
+  border-radius: 22rpx;
+  background: linear-gradient(180deg, rgba(247, 242, 238, 0.96), rgba(255, 255, 255, 0.92));
+  border: 1rpx solid rgba(192, 154, 137, 0.09);
+}
 
-  &.cap-full {
-    background: rgba(239, 68, 68, 0.08);
-    color: #ef4444;
+.focus-title {
+  display: block;
+  font-size: 26rpx;
+  color: #3a2e2a;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+}
+
+.focus-desc {
+  display: block;
+  font-size: 22rpx;
+  color: #8d7d76;
+  line-height: 1.7;
+}
+
+.list-row {
+  display: flex;
+  gap: 14rpx;
+  align-items: flex-start;
+
+  & + & {
+    margin-top: 16rpx;
   }
 }
 
-.desc-text {
-  font-size: 26rpx;
-  color: #666;
-  line-height: 1.7;
+.list-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #c09a89;
+  margin-top: 11rpx;
+  flex-shrink: 0;
+}
+
+.list-text {
+  flex: 1;
+  font-size: 25rpx;
+  line-height: 1.75;
+  color: #6f605b;
+}
+
+.cta-card {
+  background:
+    linear-gradient(145deg, rgba(255, 250, 247, 0.98), rgba(248, 240, 233, 0.95)),
+    radial-gradient(circle at top right, rgba(255, 226, 206, 0.5), transparent 38%);
+}
+
+.fit-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-bottom: 20rpx;
+}
+
+.fit-pill {
+  padding: 12rpx 20rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.76);
+  border: 1rpx solid rgba(192, 154, 137, 0.14);
+  color: #8f6759;
+  font-size: 22rpx;
 }
 
 /* ── Timeline card ────────────────────────────────────── */
 .timeline-card {
-  margin: 24rpx;
-  background: #fff;
-  border-radius: 20rpx;
   overflow: hidden;
-  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
-}
-
-.timeline-header {
-  padding: 24rpx;
-  border-bottom: 1rpx solid #f5f5f5;
-}
-
-.timeline-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
 }
 
 .timeline-empty {
-  padding: 48rpx;
+  padding: 36rpx 0 8rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -765,11 +1149,11 @@ onLoad((query) => {
 
 .timeline-empty-text {
   font-size: 26rpx;
-  color: #bbb;
+  color: #b5a8a1;
 }
 
 .timeline {
-  padding: 24rpx;
+  padding-top: 10rpx;
   display: flex;
   flex-direction: column;
 }
@@ -788,13 +1172,13 @@ onLoad((query) => {
 }
 
 .timeline-dot {
-  width: 16rpx;
-  height: 16rpx;
+  width: 18rpx;
+  height: 18rpx;
   border-radius: 50%;
   flex-shrink: 0;
 
   &.dot--pending { background: #f59e0b; }
-  &.dot--confirmed { background: $primary-dark; }
+  &.dot--confirmed { background: #8b6b4d; }
   &.dot--completed { background: #66bb6a; }
   &.dot--cancelled { background: #e0e0e0; }
   &.dot--noshow { background: #ef5350; }
@@ -803,8 +1187,8 @@ onLoad((query) => {
 .timeline-line {
   width: 2rpx;
   flex: 1;
-  min-height: 40rpx;
-  background: #e8e8e8;
+  min-height: 46rpx;
+  background: rgba(192, 154, 137, 0.24);
   margin: 4rpx 0;
 }
 
@@ -821,31 +1205,34 @@ onLoad((query) => {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: 20rpx;
   margin-bottom: 6rpx;
 }
 
 .timeline-status {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: #3a2e2a;
 }
 
 .timeline-time {
   font-size: 22rpx;
-  color: #bbb;
+  color: #b3a49d;
 }
 
 .timeline-remark {
   font-size: 24rpx;
-  color: #888;
+  color: #8d7d76;
   display: block;
   margin-top: 4rpx;
+  line-height: 1.65;
 }
 
 /* ── Action bar ──────────────────────────────────────── */
-.action-bar {
-  margin: 24rpx;
+.action-panel {
+  padding: 24rpx;
+  margin-bottom: 18rpx;
   display: flex;
   flex-direction: column;
   gap: 16rpx;
@@ -870,24 +1257,21 @@ onLoad((query) => {
     opacity: 0.85;
   }
 
-  &--confirm {
-    background: linear-gradient(135deg, $primary-color, $primary-dark);
+  &--primary {
+    background: linear-gradient(135deg, #b48471, #8f6759);
   }
 
-  &--complete {
-    background: linear-gradient(135deg, #66bb6a, #4caf50);
+  &--success {
+    background: linear-gradient(135deg, #6dbb90, #4e9b73);
   }
 
-  &--noshow {
-    background: rgba(239, 83, 80, 0.1);
+  &--soft-danger {
+    background: rgba(239, 83, 80, 0.12);
   }
 
-  &--cancel {
-    background: rgba(0, 0, 0, 0.04);
-  }
-
-  &--disabled {
-    background: rgba(0, 0, 0, 0.06);
+  &--ghost {
+    background: rgba(86, 66, 58, 0.06);
+    border: 1rpx solid rgba(143, 103, 89, 0.12);
   }
 }
 
@@ -896,16 +1280,107 @@ onLoad((query) => {
   font-weight: 600;
   color: #fff;
 
-  .action-btn--cancel & {
-    color: #666;
+  .action-btn--ghost & {
+    color: #6f605b;
   }
 
-  .action-btn--noshow & {
+  .action-btn--soft-danger & {
     color: #ef5350;
   }
+}
 
-  .action-btn--disabled & {
-    color: #bbb;
+.bottom-space {
+  height: 40rpx;
+
+  &--with-bar {
+    height: 220rpx;
+  }
+}
+
+.bottom-bar {
+  position: fixed;
+  left: 24rpx;
+  right: 24rpx;
+  bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
+  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
+  display: flex;
+  align-items: center;
+  gap: 18rpx;
+  padding: 18rpx 18rpx 18rpx 24rpx;
+  border-radius: 28rpx;
+  background: rgba(255, 252, 249, 0.92);
+  box-shadow: 0 18rpx 42rpx rgba(95, 67, 55, 0.14);
+  backdrop-filter: blur(16rpx);
+}
+
+.bottom-note {
+  flex: 1;
+  min-width: 0;
+}
+
+.bottom-note-title {
+  display: block;
+  font-size: 28rpx;
+  color: #2f2522;
+  font-weight: 700;
+}
+
+.bottom-note-sub {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  line-height: 1.6;
+  color: #8f7c74;
+}
+
+.bottom-actions {
+  flex-shrink: 0;
+}
+
+.booking-btn {
+  min-width: 220rpx;
+  padding: 0 30rpx;
+  height: 88rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #b48471, #8f6759);
+  box-shadow: 0 12rpx 28rpx rgba(143, 103, 89, 0.26);
+
+  &--muted {
+    background: rgba(111, 96, 91, 0.1);
+    box-shadow: none;
+  }
+
+  &--outline {
+    background: rgba(255, 255, 255, 0.72);
+    border: 1rpx solid rgba(143, 103, 89, 0.16);
+    box-shadow: none;
+  }
+}
+
+.booking-btn-text {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #fff9f6;
+
+  .booking-btn--outline & {
+    color: #8f6759;
+  }
+
+  &--muted {
+    color: #9d8f89;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
   }
 }
 </style>
diff --git a/packages/app/src/pages/booking/index.vue b/packages/app/src/pages/booking/index.vue
index 6914fba..8f4df90 100644
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -10,8 +10,8 @@
 
     <!-- ──────────── Date & period filters ──────────── -->
     <view class="filter-header">
-      <DateSelector v-model="selectedDate" @select="onDateSelect" />
-      <TimePeriodFilter v-model="selectedPeriod" @change="onPeriodChange" />
+      <DateSelector v-model="selectedDate" variant="booking" @select="onDateSelect" />
+      <TimePeriodFilter v-model="selectedPeriod" variant="booking" @change="onPeriodChange" />
     </view>
 
     <!-- ──────────── Slot list ──────────── -->
@@ -312,7 +312,9 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .booking-page {
   height: 100vh;
-  background: $primary-bg;
+  background:
+    radial-gradient(circle at top, rgba(255, 232, 218, 0.36), transparent 34%),
+    linear-gradient(180deg, #fbf7f3 0%, #f6efea 100%);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -321,7 +323,7 @@ onMounted(async () => {
 /* ── Status bar ───────────────────────────────────── */
 .status-bar {
   flex-shrink: 0;
-  background: #fff;
+  background: #fcfaf8;
 }
 
 /* ── Page header ──────────────────────────────────── */
@@ -331,20 +333,21 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #fff;
+  background: #fcfaf8;
 }
 
 .page-title {
   font-size: 34rpx;
-  font-weight: 600;
-  color: #1a1a2e;
+  font-weight: 700;
+  color: #3a2e2a;
+  letter-spacing: 1rpx;
 }
 
 /* ── Filter header ────────────────────────────────── */
 .filter-header {
   flex-shrink: 0;
-  background: #fff;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+  background: rgba(252, 250, 248, 0.96);
+  box-shadow: 0 12rpx 30rpx rgba(120, 91, 79, 0.06);
 }
 
 /* ── Scroll container ──────────────────────────────── */
@@ -358,7 +361,7 @@ onMounted(async () => {
 .slot-list {
   display: flex;
   flex-direction: column;
-  padding: 24rpx 0 0;
+  padding: 28rpx 0 0;
 }
 
 /* ── Date summary ──────────────────────────────────── */
@@ -368,8 +371,8 @@ onMounted(async () => {
 
 .date-summary-text {
   font-size: 24rpx;
-  color: #999;
-  font-weight: 400;
+  color: #9d8b83;
+  font-weight: 500;
 }
 
 /* ── Loading skeleton ──────────────────────────────── */
@@ -382,22 +385,22 @@ onMounted(async () => {
 
 .skeleton-card {
   height: 220rpx;
-  border-radius: 20rpx;
-  background: #fff;
+  border-radius: 26rpx;
+  background: rgba(255, 255, 255, 0.88);
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 28rpx 48rpx;
   gap: 20rpx;
   margin: 0 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+  box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
 }
 
 .skeleton-time {
   width: 90rpx;
   height: 80rpx;
   border-radius: 12rpx;
-  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
+  background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
   flex-shrink: 0;
@@ -414,7 +417,7 @@ onMounted(async () => {
   width: 60%;
   height: 28rpx;
   border-radius: 8rpx;
-  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
+  background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
 }
@@ -423,7 +426,7 @@ onMounted(async () => {
   width: 40%;
   height: 20rpx;
   border-radius: 6rpx;
-  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
+  background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
 }
@@ -432,7 +435,7 @@ onMounted(async () => {
   width: 100rpx;
   height: 60rpx;
   border-radius: 20rpx;
-  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
+  background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
   flex-shrink: 0;
@@ -466,14 +469,14 @@ onMounted(async () => {
   &.outer {
     width: 180rpx;
     height: 180rpx;
-    border: 2rpx solid $primary-border;
+    border: 2rpx solid rgba(192, 154, 137, 0.18);
     animation: breathe 3s ease-in-out infinite;
   }
 
   &.inner {
     width: 120rpx;
     height: 120rpx;
-    background: linear-gradient(135deg, $primary-light 0%, $primary-color 50%, $primary-dark 100%);
+    background: linear-gradient(135deg, #f6e9e1 0%, #ddc1b4 50%, #b98f7d 100%);
     opacity: 0.6;
     animation: breathe 3s ease-in-out infinite 0.5s;
   }
@@ -484,7 +487,7 @@ onMounted(async () => {
   width: 16rpx;
   height: 16rpx;
   border-radius: 50%;
-  background: $primary-dark;
+  background: #a87d6c;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -493,7 +496,7 @@ onMounted(async () => {
 
 .empty-text {
   font-size: 32rpx;
-  color: $primary-dark;
+  color: #6f605b;
   font-weight: 600;
   letter-spacing: 2rpx;
   margin-bottom: 16rpx;
@@ -501,7 +504,7 @@ onMounted(async () => {
 
 .empty-sub {
   font-size: 26rpx;
-  color: $primary-color;
+  color: #a18a82;
   letter-spacing: 1rpx;
 }
 
diff --git a/packages/app/src/pages/profile/index.vue b/packages/app/src/pages/profile/index.vue
index 58c41de..db4c14e 100644
--- a/packages/app/src/pages/profile/index.vue
+++ b/packages/app/src/pages/profile/index.vue
@@ -14,7 +14,6 @@
       :active-membership-count="activeMembershipCount"
       :upcoming-booking-count="upcomingBookingCount"
       @clear-cache="handleClearCache"
-      @about="handleAbout"
       @require-login="handleLogin"
     />
 
@@ -129,13 +128,6 @@ function handleClearCache() {
   })
 }
 
-function handleAbout() {
-  uni.showModal({
-    title: '关于我们',
-    content: 'Focus Core 普拉提工作室\n版本 1.0.0\n\n专注核心，遇见更好的自己',
-    showCancel: false,
-  })
-}
 </script>
 
 <style lang="scss" scoped>