From d1f193e13ed1d9f79e90e2122c3d9ebb51dabb69 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 8 Sep 2026 14:20:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E3=80=81=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/AboutSection.vue  | 262 +----------
 .../src/components/BookingConfirmPopup.vue    | 306 ++----------
 packages/app/src/components/CardShop.vue      | 305 ++----------
 packages/app/src/components/DateSelector.vue  |  24 +-
 .../app/src/components/FlashSaleSection.vue   | 312 ++-----------
 .../src/components/PracticeActivityCard.vue   |  45 +-
 packages/app/src/components/ProfileMenu.vue   | 331 ++-----------
 packages/app/src/components/QuickEntry.vue    | 178 +------
 packages/app/src/components/SlotCard.vue      | 435 +++---------------
 packages/app/src/components/StudioInfo.vue    | 191 +-------
 .../app/src/components/TimePeriodFilter.vue   |  16 +-
 .../app/src/components/UpcomingBooking.vue    | 150 +-----
 packages/app/src/components/UserCard.vue      | 271 ++---------
 packages/app/src/pages/booking/index.vue      | 296 +++---------
 packages/app/src/pages/home/index.vue         | 136 ++----
 packages/app/src/pages/profile/index.vue      |  52 +--
 16 files changed, 481 insertions(+), 2829 deletions(-)

diff --git a/packages/app/src/components/AboutSection.vue b/packages/app/src/components/AboutSection.vue
index f9e8124..6152ecf 100644
--- a/packages/app/src/components/AboutSection.vue
+++ b/packages/app/src/components/AboutSection.vue
@@ -2,7 +2,6 @@
   <view class="about-section">
     <view class="section-header">
       <view>
-        <text class="section-eyebrow">Teacher Spotlight</text>
         <text class="section-title">老师介绍</text>
       </view>
       <text class="section-more" @tap="goToDetail">查看详情</text>
@@ -12,9 +11,7 @@
       <view class="teacher-main">
         <view class="cover-wrap">
           <image class="teacher-cover" :src="teacher.avatar" mode="aspectFill" />
-          <view class="cover-badge">
-            <text class="cover-badge-text">{{ teacher.badges[0] }}</text>
-          </view>
+
         </view>
 
         <view class="teacher-content">
@@ -22,28 +19,20 @@
             <view>
               <view class="name-row">
                 <text class="teacher-name">{{ teacher.name }}</text>
-                <text class="teacher-tag">{{ teacher.badges[1] }}</text>
+
               </view>
               <text class="teacher-title">{{ teacher.title }}</text>
             </view>
           </view>
 
           <view class="specialty-row">
-            <text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
+            <text class="specialty-text">{{ teacher.specialties.join(' · ') }}</text>
           </view>
 
           <text class="teacher-intro">{{ teacher.intro }}</text>
         </view>
       </view>
 
-      <view class="credential-box">
-        <text class="credential-label">认证背景</text>
-        <view v-for="item in teacher.certifications" :key="item" class="credential-row">
-          <view class="credential-dot" />
-          <text class="credential-text">{{ item }}</text>
-        </view>
-      </view>
-
       <view class="action-row">
         <view class="secondary-btn" @tap.stop="goToDetail">
           <text class="secondary-btn-text">查看详情</text>
@@ -71,228 +60,25 @@ function goToBooking() {
 </script>
 
 <style lang="scss" scoped>
-.about-section {
-  padding: 20rpx 24rpx 0;
-}
-
-.section-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-bottom: 18rpx;
-}
-
-.section-eyebrow {
-  display: block;
-  font-size: 20rpx;
-  letter-spacing: 3rpx;
-  text-transform: uppercase;
-  color: #b99b8c;
-  margin-bottom: 8rpx;
-}
-
-.section-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #2f2723;
-}
-
-.section-more {
-  font-size: 24rpx;
-  color: #c36d52;
-  padding: 10rpx 0;
-}
-
-.teacher-card {
-  display: flex;
-  flex-direction: column;
-  gap: 18rpx;
-  background:
-    radial-gradient(circle at top right, rgba(226, 198, 179, 0.42), transparent 32%),
-    linear-gradient(135deg, #fffdfb 0%, #f8f2ee 46%, #f2e8e2 100%);
-  border-radius: 30rpx;
-  padding: 22rpx;
-  box-shadow: 0 18rpx 38rpx rgba(126, 98, 84, 0.09);
-}
-
-.teacher-main {
-  display: flex;
-  gap: 22rpx;
-  align-items: stretch;
-}
-
-.cover-wrap {
-  position: relative;
-  width: 188rpx;
-  height: 248rpx;
-  border-radius: 24rpx;
-  overflow: hidden;
-  flex-shrink: 0;
-  background: #eadfd7;
-}
-
-.teacher-cover {
-  width: 100%;
-  height: 100%;
-}
-
-.cover-badge {
-  position: absolute;
-  left: 14rpx;
-  bottom: 14rpx;
-  border-radius: 999rpx;
-  padding: 8rpx 16rpx;
-  background: rgba(41, 34, 30, 0.74);
-  backdrop-filter: blur(12rpx);
-}
-
-.cover-badge-text {
-  font-size: 20rpx;
-  font-weight: 600;
-  color: #fff7f3;
-}
-
-.teacher-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.teacher-heading {
-  margin-bottom: 14rpx;
-}
-
-.name-row {
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-  margin-bottom: 8rpx;
-}
-
-.teacher-name {
-  font-size: 38rpx;
-  line-height: 1;
-  font-weight: 700;
-  color: #2e2521;
-}
-
-.teacher-tag {
-  font-size: 18rpx;
-  line-height: 1;
-  color: #a85d44;
-  background: rgba(221, 150, 118, 0.18);
-  border-radius: 999rpx;
-  padding: 8rpx 12rpx;
-}
-
-.teacher-title {
-  font-size: 24rpx;
-  color: #7f6659;
-}
-
-.specialty-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10rpx;
-  margin-bottom: 14rpx;
-}
-
-.specialty-pill {
-  padding: 8rpx 16rpx;
-  border-radius: 999rpx;
-  background: rgba(92, 126, 151, 0.12);
-  color: #5a7a8b;
-  font-size: 20rpx;
-  font-weight: 600;
-}
-
-.teacher-intro {
-  font-size: 22rpx;
-  line-height: 1.7;
-  color: #5e5048;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.credential-box {
-  padding: 16rpx 18rpx;
-  border-radius: 18rpx;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1rpx solid rgba(190, 161, 145, 0.22);
-}
-
-.credential-label {
-  display: block;
-  font-size: 18rpx;
-  letter-spacing: 2rpx;
-  color: #b19486;
-  margin-bottom: 8rpx;
-}
-
-.credential-text {
-  font-size: 20rpx;
-  line-height: 1.7;
-  color: #6a5a51;
-}
-
-.credential-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 12rpx;
-}
-
-.credential-row + .credential-row {
-  margin-top: 12rpx;
-}
-
-.credential-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  margin-top: 12rpx;
-  flex-shrink: 0;
-  background: #6d4037;
-}
-
-.action-row {
-  display: flex;
-  gap: 12rpx;
-}
-
-.secondary-btn,
-.primary-btn {
-  height: 72rpx;
-  border-radius: 999rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.secondary-btn {
-  width: 148rpx;
-  border: 1rpx solid rgba(139, 113, 99, 0.24);
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.primary-btn {
-  flex: 1;
-  background: linear-gradient(135deg, #ff7654 0%, #ff4d38 100%);
-  box-shadow: 0 14rpx 24rpx rgba(255, 92, 69, 0.24);
-}
-
-.secondary-btn-text {
-  font-size: 24rpx;
-  font-weight: 600;
-  color: #684d40;
-}
-
-.primary-btn-text {
-  font-size: 26rpx;
-  font-weight: 700;
-  color: #ffffff;
-  letter-spacing: 1rpx;
-}
+.about-section { margin: 36rpx 32rpx 0; }
+.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
+.section-more { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
+.teacher-card { padding: 26rpx; background: #f2ebe5; border-radius: 28rpx; }
+.teacher-main { display: flex; align-items: flex-start; gap: 24rpx; }
+.cover-wrap { width: 164rpx; height: 230rpx; border-radius: 18rpx; overflow: hidden; background: #e1d4c8; flex-shrink: 0; }
+.teacher-cover { width: 100%; height: 100%; }
+.teacher-content { flex: 1; min-width: 0; }
+.name-row { margin-bottom: 8rpx; }
+.teacher-name { font-size: 34rpx; font-weight: 500; color: #514943; }
+.teacher-title { font-size: 22rpx; color: #8b817b; line-height: 1.5; }
+.specialty-row { margin: 14rpx 0 10rpx; }
+.specialty-text { font-size: 21rpx; color: #617d73; line-height: 1.6; }
+.teacher-intro { font-size: 22rpx; line-height: 1.7; color: #786b61; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.action-row { display: flex; gap: 16rpx; margin-top: 24rpx; }
+.secondary-btn, .primary-btn { flex: 1; height: 68rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; }
+.secondary-btn { background: #fbf7f3; }
+.primary-btn { background: #6b8276; }
+.secondary-btn-text { font-size: 24rpx; color: #78675c; }
+.primary-btn-text { font-size: 24rpx; font-weight: 400; color: #fff; }
 </style>
diff --git a/packages/app/src/components/BookingConfirmPopup.vue b/packages/app/src/components/BookingConfirmPopup.vue
index 7f90083..5877e55 100644
--- a/packages/app/src/components/BookingConfirmPopup.vue
+++ b/packages/app/src/components/BookingConfirmPopup.vue
@@ -42,9 +42,6 @@
         <!-- Single membership -->
         <view v-if="memberships.length === 1" class="card-single">
           <view class="card-item selected">
-            <view class="card-icon-wrap">
-              <text class="card-icon">💳</text>
-            </view>
             <view class="card-info">
               <text class="card-name">{{ memberships[0].cardType.name }}</text>
               <text class="card-remain" v-if="memberships[0].remainingTimes !== null">
@@ -61,7 +58,7 @@
         </view>
 
         <!-- Multiple memberships picker -->
-        <view v-else-if="memberships.length > 1" class="card-picker-wrap">
+        <scroll-view v-else-if="memberships.length > 1" class="card-picker-wrap" scroll-y>
           <view
             v-for="m in memberships"
             :key="m.id"
@@ -69,9 +66,6 @@
             :class="{ selected: selectedMembershipId === m.id }"
             @tap="selectedMembershipId = m.id"
           >
-            <view class="card-icon-wrap">
-              <text class="card-icon">💳</text>
-            </view>
             <view class="card-info">
               <text class="card-name">{{ m.cardType.name }}</text>
               <text class="card-remain" v-if="m.remainingTimes !== null">
@@ -85,7 +79,7 @@
               <text class="check-icon">✓</text>
             </view>
           </view>
-        </view>
+        </scroll-view>
 
         <!-- No memberships fallback (should not normally appear) -->
         <view v-else class="no-card-tip">
@@ -110,6 +104,8 @@
         <button
           class="btn-confirm"
           :class="{ disabled: !selectedMembershipId }"
+          :disabled="!selectedMembershipId || requestingSubscribe"
+          :loading="requestingSubscribe"
           @tap="handleConfirm"
         >
           <text class="btn-confirm-text">确认预约</text>
@@ -143,8 +139,8 @@ const requestingSubscribe = ref(false)
 watch(
   [() => props.visible, () => props.memberships],
   ([visible, memberships]) => {
-    if (visible && memberships.length > 0) {
-      selectedMembershipId.value = memberships[0].id
+    if (visible) {
+      selectedMembershipId.value = memberships[0]?.id ?? ''
     }
   },
   { immediate: true },
@@ -187,261 +183,45 @@ function handleMaskTap() {
 </script>
 
 <style lang="scss" scoped>
-.popup-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 1000;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.popup-panel {
-  width: 100%;
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
-  padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.popup-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 32rpx;
-}
-
-.popup-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-}
-
-.close-btn {
-  width: 56rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: $primary-selected-bg;
-  border-radius: 50%;
-}
-
-.close-icon {
-  font-size: 24rpx;
-  color: #999;
-}
-
-/* Info rows */
-.info-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20rpx;
-  margin-bottom: 28rpx;
-}
-
-.info-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.info-label {
-  font-size: 28rpx;
-  color: #999;
-  width: 80rpx;
-  flex-shrink: 0;
-}
-
-.info-value {
-  font-size: 28rpx;
-  color: #222;
-  font-weight: 500;
-}
-
-.divider {
-  height: 1rpx;
-  background: $primary-border;
-  margin: 8rpx 0 28rpx;
-}
-
-/* Card selection */
-.card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-  margin-bottom: 24rpx;
-}
-
-.section-label-row {
-  margin-bottom: 8rpx;
-}
-
-.section-label {
-  font-size: 28rpx;
-  color: #666;
-  font-weight: 500;
-}
-
-.card-single,
-.card-picker-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
+.popup-mask { position: fixed; inset: 0; background: rgba(56, 48, 42, 0.32); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
+.popup-panel { width: 100%; box-sizing: border-box; background: #fbf9f6; border-radius: 36rpx 36rpx 0 0; padding: 28rpx 32rpx calc(24rpx + env(safe-area-inset-bottom)); }
+.popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
+.popup-title { font-size: 32rpx; font-weight: 500; color: #514943; }
+.close-btn { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
+.close-icon { font-size: 26rpx; color: #8b817b; }
+.info-section { padding: 24rpx; background: #f1e8e1; border-radius: 24rpx; display: flex; flex-direction: column; gap: 14rpx; }
+.info-row { display: flex; align-items: center; gap: 20rpx; }
+.info-label { font-size: 24rpx; color: #8b7b70; width: 64rpx; flex-shrink: 0; }
+.info-value { font-size: 26rpx; color: #6f5c50; font-weight: 400; }
+.divider { height: 24rpx; }
+.card-section { display: flex; flex-direction: column; gap: 16rpx; }
+.section-label { font-size: 26rpx; color: #514943; font-weight: 500; }
+.card-picker-wrap { height: 250rpx; }
 .card-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 24rpx 20rpx;
-  border-radius: 16rpx;
-  border: 2rpx solid $primary-border;
-  background: $primary-bg;
-  gap: 20rpx;
-  transition: border-color 0.15s, background 0.15s;
-
-  &.selected {
-    border-color: $primary-dark;
-    background: $primary-selected-bg;
-  }
+  display: flex; align-items: center; padding: 22rpx 24rpx; border-radius: 24rpx;
+  border: 2rpx solid #eee8e3; background: #fff; gap: 20rpx; box-sizing: border-box;
+  &.selected { border-color: #a5b8ab; background: #f0f4ee; }
 }
-
-.card-icon-wrap {
-  width: 60rpx;
-  height: 60rpx;
-  border-radius: 14rpx;
-  background: linear-gradient(135deg, $primary-color, $primary-dark);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.card-icon {
-  font-size: 32rpx;
-}
-
-.card-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-}
-
-.card-name {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #222;
-}
-
-.card-remain {
-  font-size: 22rpx;
-  color: #999;
-}
-
-.check-mark {
-  width: 44rpx;
-  height: 44rpx;
-  border-radius: 50%;
-  background: $primary-dark;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.check-icon {
-  font-size: 24rpx;
-  color: #fff;
-  font-weight: 700;
-}
-
-.no-card-tip {
-  padding: 24rpx;
-  text-align: center;
-}
-
-.no-card-text {
-  font-size: 26rpx;
-  color: #bbb;
-}
-
-/* Deduction tip */
-.deduction-tip {
-  background: $primary-selected-bg;
-  border-radius: 12rpx;
-  padding: 16rpx 20rpx;
-  margin-bottom: 28rpx;
-}
-
-.deduction-text {
-  font-size: 24rpx;
-  color: $primary-dark;
-  line-height: 1.5;
-}
-
-/* Action buttons */
-.action-row {
-  display: flex;
-  flex-direction: row;
-  gap: 20rpx;
-  margin-top: 8rpx;
-}
-
-.btn-outline {
-  flex: 1;
-  height: 88rpx;
-  border-radius: 44rpx;
-  border: 2rpx solid $primary-border;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:active {
-    background: #f5f5f5;
-  }
-}
-
-.btn-outline-text {
-  font-size: 30rpx;
-  color: #666;
-  font-weight: 500;
-}
-
+.card-picker-wrap .card-item { margin-bottom: 12rpx; }
+.card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
+.card-name { font-size: 26rpx; font-weight: 400; color: #514943; overflow-wrap: anywhere; }
+.card-remain { font-size: 22rpx; color: #8b817b; }
+.check-mark { width: 36rpx; height: 36rpx; border-radius: 50%; background: #6b8276; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.check-icon { font-size: 22rpx; color: #fff; }
+.no-card-tip { padding: 24rpx; text-align: center; }
+.no-card-text { font-size: 24rpx; color: #8b817b; }
+.deduction-tip { padding: 18rpx 4rpx; }
+.deduction-text { font-size: 22rpx; color: #8b817b; line-height: 1.6; }
+.action-row { display: flex; gap: 20rpx; margin-top: 12rpx; }
+.btn-outline { flex: 1; height: 88rpx; border-radius: 999rpx; background: #f0eae4; display: flex; align-items: center; justify-content: center; }
+.btn-outline-text { font-size: 28rpx; color: #78675c; font-weight: 400; }
 .btn-confirm {
-  flex: 2;
-  height: 88rpx;
-  border-radius: 44rpx;
-  background: linear-gradient(135deg, $primary-color, $primary-dark);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:active {
-    opacity: 0.85;
-  }
-
-  &.disabled {
-    background: $primary-border;
-  }
-}
-
-.btn-confirm-text {
-  font-size: 30rpx;
-  color: #fff;
-  font-weight: 600;
-  letter-spacing: 1rpx;
-
-  .disabled & {
-    color: #bbb;
-  }
+  flex: 2; height: 88rpx; padding: 0; margin: 0; border: none; line-height: 1;
+  border-radius: 999rpx; background: #6b8276;
+  display: flex; align-items: center; justify-content: center;
+  &::after { border: none; }
+  &:active { background: #597264; }
+  &.disabled { background: #d9dfd8; }
 }
+.btn-confirm-text { font-size: 28rpx; color: #fff; font-weight: 500; .disabled & { color: #677467; } }
 </style>
diff --git a/packages/app/src/components/CardShop.vue b/packages/app/src/components/CardShop.vue
index b300a0c..ee6dccb 100644
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -3,7 +3,7 @@
     <!-- Section header -->
     <view class="section-header">
       <text class="section-title">会员卡</text>
-      <text class="section-action" @tap="goToAllCards">全部</text>
+      <text class="section-action" @tap="goToAllCards">全部 ›</text>
     </view>
 
     <!-- Loading skeleton -->
@@ -39,8 +39,7 @@
             mode="aspectFill"
           />
           <template v-else>
-            <view class="cover-deco cover-deco--1" />
-            <view class="cover-deco cover-deco--2" />
+            <text class="cover-label">{{ card.type === CardTypeCategory.TRIAL ? '体验' : card.type === CardTypeCategory.DURATION ? '期限卡' : '次卡' }}</text>
           </template>
         </view>
 
@@ -146,272 +145,36 @@ function goToAllCards() {
 </script>
 
 <style lang="scss" scoped>
-.card-shop {
-  background: #ffffff;
-  margin: 16rpx 24rpx 0;
-  padding-bottom: 20rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-/* ── Section header ── */
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32rpx 32rpx 20rpx;
-}
-
-.section-title {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #222;
-}
-
-.section-action {
-  font-size: 26rpx;
-  color: #999;
-  padding: 8rpx 24rpx;
-  border: 1rpx solid #ddd;
-  border-radius: 24rpx;
-}
-
-/* ── Card list ── */
-.card-list {
-  padding: 0 32rpx;
-}
-
-.card-row {
-  display: flex;
-  align-items: center;
-  gap: 20rpx;
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid rgba($brand-color, 0.08);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-/* ══════════════════════════════════════════════════════════
-   CARD COVER — Clean minimal design
-   ══════════════════════════════════════════════════════════ */
-.card-cover {
-  width: 200rpx;
-  height: 130rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.card-cover-img {
-  width: 100%;
-  height: 100%;
-}
-
-/* Decorative circles */
-.cover-deco {
-  position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-
-  &--1 {
-    width: 100rpx;
-    height: 100rpx;
-    top: -30rpx;
-    right: -20rpx;
-    background: rgba(255, 255, 255, 0.4);
-  }
-
-  &--2 {
-    width: 70rpx;
-    height: 70rpx;
-    bottom: -20rpx;
-    left: -10rpx;
-    background: rgba(255, 255, 255, 0.25);
-  }
-}
-
-/* Card cover backgrounds */
-.cover--times {
-  background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
-}
-
-.cover--duration {
-  background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
-}
-
-.cover--trial {
-  background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
-}
-
-/* ── Card info — matches card-cover height ── */
-.card-info {
-  flex: 1;
-  min-width: 0;
-  height: 130rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.info-top {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4rpx;
-}
-
-.info-bottom {
-  display: flex;
-  align-items: baseline;
-  gap: 16rpx;
-}
-
-.card-name-row {
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-  min-width: 0;
-}
-
-.card-name {
-  min-width: 0;
-  font-size: 30rpx;
-  font-weight: 700;
-  color: $text-primary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  letter-spacing: 0.5rpx;
-  line-height: 1.2;
-}
-
-.renew-tag {
-  flex-shrink: 0;
-  font-size: 18rpx;
-  font-weight: 700;
-  color: #5f7a6e;
-  background: rgba(143, 168, 154, 0.2);
-  padding: 2rpx 10rpx;
-  border-radius: 8rpx;
-  line-height: 1.4;
-  letter-spacing: 1rpx;
-}
-
-.card-validity {
-  font-size: 23rpx;
-  color: $text-secondary;
-  line-height: 1.2;
-}
-
-.card-times {
-  display: flex;
-  align-items: baseline;
-  gap: 4rpx;
-}
-
-.card-times-value {
-  font-size: 34rpx;
-  font-weight: 800;
-  color: $brand-color;
-  line-height: 1;
-}
-
-.card-times-unit {
-  font-size: 20rpx;
-  color: $text-secondary;
-  font-weight: 500;
-}
-
-.price-row {
-  display: flex;
-  align-items: baseline;
-  gap: 6rpx;
-}
-
-.price-current {
-  font-size: 32rpx;
-  font-weight: 800;
-  color: $brand-color;
-  line-height: 1;
-}
-
-.price-original {
-  font-size: 20rpx;
-  color: $text-hint;
-  text-decoration: line-through;
-}
-
-/* Arrow */
-.card-arrow {
-  font-size: 44rpx;
-  color: $text-hint;
-  flex-shrink: 0;
-  transform: scaleX(0.5);
-  transform-origin: center;
-}
-
-/* ── Skeleton ── */
-.skeleton-row {
-  display: flex;
-  align-items: center;
-  gap: 20rpx;
-  padding: 20rpx 0;
-  border-bottom: 1rpx solid rgba($brand-color, 0.08);
-}
-
-.skeleton-card-cover {
-  width: 240rpx;
-  height: 130rpx;
-  border-radius: 16rpx;
-  flex-shrink: 0;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-  background-size: 400% 100%;
-  animation: shimmer 1.4s infinite;
-}
-
-.skeleton-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
-.skeleton-line {
-  height: 24rpx;
-  border-radius: 6rpx;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-  background-size: 400% 100%;
-  animation: shimmer 1.4s infinite;
-
-  &--title {
-    width: 60%;
-    height: 30rpx;
-  }
-
-  &--sub {
-    width: 40%;
-  }
-
-  &--price {
-    width: 45%;
-    height: 36rpx;
-  }
-}
-
-/* ── Empty state ── */
-.empty-state {
-  padding: 80rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-text {
-  font-size: 28rpx;
-  color: $text-hint;
-}
+.card-shop { margin: 36rpx 32rpx 0; }
+.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-bottom: 20rpx; }
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
+.section-action { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
+.card-list { padding: 0 24rpx; border-radius: 28rpx; background: #fff; border: 1rpx solid #eee8e3; }
+.card-row { display: flex; align-items: center; gap: 20rpx; padding: 26rpx 0; border-bottom: 1rpx solid #f0ebe6; &:last-child { border: none; } }
+.card-cover { width: 132rpx; height: 148rpx; border-radius: 16rpx; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f0e6de; }
+.card-cover-img { width: 100%; height: 100%; }
+.cover--times { background: #f0e6de; }
+.cover--duration { background: #e9ede5; }
+.cover--trial { background: #f2e4e0; }
+.cover-label { font-family: 'Songti SC', 'STSong', serif; font-size: 28rpx; color: #857062; letter-spacing: 3rpx; }
+.card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14rpx; }
+.info-top { display: flex; flex-direction: column; gap: 8rpx; }
+.card-name-row { display: flex; align-items: baseline; gap: 8rpx; }
+.card-name { min-width: 0; font-size: 27rpx; font-weight: 400; color: #514943; line-height: 1.5; overflow-wrap: anywhere; }
+.renew-tag { flex-shrink: 0; font-size: 18rpx; color: #617d73; background: #edf2ec; padding: 3rpx 8rpx; border-radius: 6rpx; }
+.card-validity { font-size: 21rpx; color: #8b817b; }
+.info-bottom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8rpx 16rpx; }
+.card-times { display: flex; align-items: baseline; gap: 4rpx; }
+.card-times-value { font-size: 24rpx; color: #6f655e; }
+.card-times-unit { font-size: 20rpx; color: #8b817b; }
+.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8rpx; }
+.price-current { font-size: 30rpx; font-weight: 500; color: #8b6c5b; font-variant-numeric: tabular-nums; }
+.price-original { font-size: 20rpx; color: #a59b93; text-decoration: line-through; }
+.card-arrow { font-size: 32rpx; color: #b2a79e; flex-shrink: 0; }
+.skeleton-card-cover { width: 132rpx; height: 148rpx; border-radius: 16rpx; flex-shrink: 0; }
+.skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 16rpx; }
+.skeleton-line { height: 24rpx; width: 70%; border-radius: 8rpx; &--sub { width: 50%; } }
+.skeleton-line, .skeleton-card-cover { background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; }
+.empty-state { padding: 48rpx 24rpx; border-radius: 24rpx; background: #f3efea; text-align: center; }
+.empty-text { font-size: 24rpx; color: #8b817b; }
 </style>
diff --git a/packages/app/src/components/DateSelector.vue b/packages/app/src/components/DateSelector.vue
index 4be3259..5ec087f 100644
--- a/packages/app/src/components/DateSelector.vue
+++ b/packages/app/src/components/DateSelector.vue
@@ -14,7 +14,7 @@
         >
           <text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
           <text class="day">{{ getDayNumber(item.date) }}</text>
-          <text class="month">{{ getMonthNumber(item.date) }}月</text>
+          <text v-if="variant !== 'soft' || getDayNumber(item.date) === '1'" class="month">{{ getMonthNumber(item.date) }}月</text>
         </view>
       </view>
     </scroll-view>
@@ -28,7 +28,7 @@ import { getDateRange } from '../utils/format'
 
 interface Props {
   modelValue: string
-  variant?: 'default' | 'booking'
+  variant?: 'default' | 'booking' | 'soft'
 }
 
 const props = defineProps<Props>()
@@ -168,4 +168,24 @@ const variant = computed(() => props.variant ?? 'default')
     }
   }
 }
+
+.date-selector.date-selector--soft {
+  padding: 8rpx 0 24rpx;
+  background: #fbf9f6;
+  border-bottom: none;
+  .track { padding: 0 32rpx; gap: 12rpx; }
+  .date-item {
+    min-width: 0; width: 86rpx; height: 116rpx; padding: 0;
+    box-sizing: border-box; border-radius: 24rpx;
+    background: transparent; gap: 12rpx;
+    .weekday { font-size: 22rpx; color: #8b817b; }
+    .day { font-size: 34rpx; font-weight: 400; color: #514943; }
+    &.active {
+      background: #eee3dc;
+      .weekday, .day { color: #705b4f; }
+      .day { font-weight: 500; }
+    }
+    &.today:not(.active) .weekday { color: #617d73; font-weight: 400; }
+  }
+}
 </style>
diff --git a/packages/app/src/components/FlashSaleSection.vue b/packages/app/src/components/FlashSaleSection.vue
index 57dbe8a..9b30f3e 100644
--- a/packages/app/src/components/FlashSaleSection.vue
+++ b/packages/app/src/components/FlashSaleSection.vue
@@ -3,11 +3,8 @@
     <!-- Section header -->
     <view class="section-header">
       <view class="header-left">
-        <view class="flash-icon-wrap">
-          <view class="flash-icon-clock" />
-        </view>
         <text class="section-title">限时秒杀</text>
-        <view v-if="hasOngoing" class="live-dot" />
+        <text v-if="hasOngoing" class="live-note">进行中</text>
       </view>
     </view>
 
@@ -155,284 +152,31 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.flash-sale-section {
-  background: #fff;
-  margin: 16rpx 24rpx 0;
-  padding-bottom: 24rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-/* ── Section header ── */
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 28rpx 32rpx 16rpx;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.flash-icon-wrap {
-  width: 44rpx;
-  height: 44rpx;
-  border-radius: 12rpx;
-  background: linear-gradient(135deg, #D4A59A, #C08B7E);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* CSS-drawn clock icon */
-.flash-icon-clock {
-  width: 24rpx;
-  height: 24rpx;
-  border: 3rpx solid #fff;
-  border-radius: 50%;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 2rpx;
-    height: 9rpx;
-    background: #fff;
-    transform-origin: bottom center;
-    transform: translate(-50%, -100%) rotate(0deg);
-    border-radius: 1rpx;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 2rpx;
-    height: 7rpx;
-    background: #fff;
-    transform-origin: bottom center;
-    transform: translate(-50%, -100%) rotate(90deg);
-    border-radius: 1rpx;
-  }
-}
-
-.section-title {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #222;
-}
-
-.live-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  background: #C08B7E;
-  animation: pulse 1.5s ease infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.4; transform: scale(0.8); }
-}
-
-/* ── Horizontal scroll ── */
-.flash-scroll {
-  padding-left: 32rpx;
-  white-space: nowrap;
-}
-
-.flash-card-list {
-  display: inline-flex;
-  gap: 20rpx;
-  padding-right: 32rpx;
-}
-
-/* ── Flash card ── */
-.flash-card {
-  width: 340rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-  flex-shrink: 0;
-  display: inline-flex;
-  flex-direction: column;
-  box-shadow: 0 4rpx 20rpx rgba(192, 139, 126, 0.18);
-  white-space: normal;
-}
-
-.card--ongoing { box-shadow: 0 6rpx 28rpx rgba(192, 139, 126, 0.28); }
-.card--upcoming { opacity: 0.95; }
-.card--soldout { opacity: 0.7; }
-.card--ended { opacity: 0.5; }
-
-/* Card top gradient — warm blush tones */
-.card-top {
-  padding: 20rpx 20rpx 16rpx;
-  background: linear-gradient(135deg, #D4A59A 0%, #C9948A 40%, #B5836E 100%);
-  display: flex;
-  flex-direction: column;
-  gap: 10rpx;
-}
-
-.card--upcoming .card-top {
-  background: linear-gradient(135deg, #8FA89A 0%, #7BA5A0 100%);
-}
-
-.card--soldout .card-top,
-.card--ended .card-top {
-  background: linear-gradient(135deg, #C4BAB0, #AEA49A);
-}
-
-/* Phase badge */
-.phase-badge {
-  align-self: flex-start;
-  padding: 4rpx 14rpx;
-  border-radius: 12rpx;
-}
-
-.badge--ongoing { background: rgba(255, 255, 255, 0.3); }
-.badge--upcoming { background: rgba(255, 255, 255, 0.25); }
-.badge--inactive { background: rgba(0, 0, 0, 0.1); }
-
-.phase-badge-text {
-  font-size: 20rpx;
-  font-weight: 600;
-  color: #fff;
-}
-
-/* Countdown */
-.countdown-row {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-}
-
-.countdown-label {
-  font-size: 20rpx;
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.countdown-blocks {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-}
-
-.cd-block {
-  background: rgba(255, 255, 255, 0.25);
-  color: #fff;
-  font-size: 22rpx;
-  font-weight: 700;
-  padding: 4rpx 8rpx;
-  border-radius: 6rpx;
-  font-family: 'DIN Alternate', monospace;
-  min-width: 36rpx;
-  text-align: center;
-  backdrop-filter: blur(4px);
-}
-
-.cd-sep {
-  color: rgba(255, 255, 255, 0.75);
-  font-size: 20rpx;
-  font-weight: 700;
-}
-
-/* Card body */
-.card-body {
-  padding: 20rpx;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  gap: 8rpx;
-}
-
-.card-title {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: $text-primary;
-  line-height: 1.3;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.card-type-name {
-  font-size: 22rpx;
-  color: $text-hint;
-}
-
-/* Price area */
-.price-area {
-  display: flex;
-  align-items: baseline;
-  gap: 12rpx;
-  margin-top: 4rpx;
-}
-
-.flash-price-row {
-  display: flex;
-  align-items: baseline;
-}
-
-.flash-currency {
-  font-size: 22rpx;
-  font-weight: 700;
-  color: #B5725E;
-}
-
-.flash-price {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #B5725E;
-  line-height: 1;
-}
-
-.original-price {
-  font-size: 22rpx;
-  color: #ccc;
-  text-decoration: line-through;
-}
-
-/* Stock area */
-.stock-area {
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-  margin-top: 8rpx;
-}
-
-.stock-bar {
-  height: 10rpx;
-  background: #f5f0ed;
-  border-radius: 5rpx;
-  overflow: hidden;
-}
-
-.stock-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #D4A59A, #C08B7E);
-  border-radius: 5rpx;
-  transition: width 0.3s;
-
-  &--hot {
-    animation: stockPulse 2s ease infinite;
-  }
-}
-
-@keyframes stockPulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-.stock-text {
-  font-size: 20rpx;
-  color: $text-hint;
-}
+.flash-sale-section { margin: 36rpx 32rpx 0; }
+.section-header { margin-bottom: 20rpx; }
+.header-left { display: flex; align-items: baseline; justify-content: space-between; gap: 16rpx; }
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
+.live-note { font-size: 22rpx; color: #9b7b66; }
+.flash-scroll { width: 100%; white-space: nowrap; }
+.flash-card-list { display: inline-flex; gap: 20rpx; }
+.flash-card { width: 400rpx; border-radius: 28rpx; overflow: hidden; border: 1rpx solid #e7ded5; flex-shrink: 0; display: inline-flex; flex-direction: column; white-space: normal; background: #fff; }
+.card-top { padding: 20rpx 24rpx; background: #f1e6de; display: flex; flex-direction: column; gap: 12rpx; }
+.card--upcoming .card-top { background: #eaf0e8; }
+.card--soldout .card-top, .card--ended .card-top { background: #eeeae5; }
+.phase-badge-text { font-size: 22rpx; color: #7c6656; }
+.countdown-row, .countdown-blocks { display: flex; align-items: baseline; gap: 8rpx; }
+.countdown-label { font-size: 20rpx; color: #8b817b; }
+.cd-block, .cd-sep { font-size: 24rpx; color: #7c6656; font-variant-numeric: tabular-nums; }
+.card-body { padding: 24rpx; display: flex; flex-direction: column; gap: 10rpx; }
+.card-title { font-size: 28rpx; font-weight: 500; color: #514943; line-height: 1.5; overflow-wrap: anywhere; }
+.card-type-name { font-size: 22rpx; color: #8b817b; }
+.price-area { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12rpx; margin-top: 8rpx; }
+.flash-price-row { display: flex; align-items: baseline; gap: 4rpx; }
+.flash-currency { font-size: 22rpx; color: #8b6c5b; }
+.flash-price { font-size: 38rpx; font-weight: 500; color: #8b6c5b; }
+.original-price { font-size: 21rpx; color: #a59b93; text-decoration: line-through; }
+.stock-area { margin-top: 12rpx; display: flex; flex-direction: column; gap: 10rpx; }
+.stock-bar { height: 6rpx; background: #f3efea; border-radius: 6rpx; overflow: hidden; }
+.stock-fill { height: 100%; border-radius: 6rpx; background: #bea28e; }
+.stock-text { font-size: 20rpx; color: #8b817b; }
 </style>
diff --git a/packages/app/src/components/PracticeActivityCard.vue b/packages/app/src/components/PracticeActivityCard.vue
index a48a9c7..39af2a4 100644
--- a/packages/app/src/components/PracticeActivityCard.vue
+++ b/packages/app/src/components/PracticeActivityCard.vue
@@ -2,7 +2,6 @@
   <view class="practice">
     <view class="practice__heading">
       <view>
-        <text class="practice__eyebrow">YOUR PRACTICE</text>
         <view class="practice__title">练习足迹<text class="practice__period">最近 30 天</text></view>
       </view>
       <view class="practice__summary"><text class="practice__number">{{ activity ? total : '—' }}</text><text>节课</text></view>
@@ -55,10 +54,10 @@ const cells = computed(() => activity.value?.days ?? Array.from({ length: 30 },
 const total = computed(() => cells.value.reduce((sum, day) => sum + day.count, 0))
 const activeDays = computed(() => cells.value.filter(day => day.count > 0).length)
 const detail = computed(() => {
-  if (!activity.value) return '每一次练习，都在积蓄力量'
+  if (!activity.value) return '正在整理练习记录'
   const day = activity.value.days.find(item => item.date === selected.value)
   if (day) return `${formatDate(day.date)} · ${day.count ? `已完成 ${day.count} 节课` : '暂无已完成课程'}`
-  return total.value ? `已练习 ${activeDays.value} 天 · 点选查看` : '从下一次练习，点亮第一格'
+  return total.value ? `已练习 ${activeDays.value} 天 · 点选查看` : '近 30 天暂无已完成课程'
 })
 function formatDate(date: string) {
   return `${Number(date.slice(5, 7))}月${Number(date.slice(8, 10))}日`
@@ -89,21 +88,19 @@ onUnmounted(() => { disposed = true })
 
 <style scoped lang="scss">
 .practice {
-  margin: 28rpx $spacing-lg 0;
+  margin: 24rpx 32rpx 0;
   padding: 28rpx;
-  border: 1rpx solid #e2eae8;
+  border: 1rpx solid #eee8e3;
   border-radius: 28rpx;
-  background: linear-gradient(135deg, #fffefd, #f5f9f8);
-  box-shadow: 0 8rpx 28rpx rgba(56, 88, 88, 0.035);
-  color: #355b60;
+  background: #fff;
+  color: #514943;
 
   &__heading, &__range, &__footer, &__legend { display: flex; align-items: center; justify-content: space-between; }
-  &__eyebrow { font-family: Georgia, serif; font-size: 17rpx; letter-spacing: 3rpx; color: #75908f; }
-  &__title { margin-top: 8rpx; font-size: 30rpx; font-weight: 600; letter-spacing: 2rpx; }
-  &__period { margin-left: 16rpx; font-size: 21rpx; font-weight: 400; letter-spacing: 0; color: #788b88; }
-  &__summary { display: flex; align-items: baseline; gap: 8rpx; font-size: 21rpx; color: #788b88; }
-  &__number { font-family: Georgia, serif; font-size: 56rpx; line-height: 1; color: #355b60; font-variant-numeric: tabular-nums; }
-  &__range { margin: 24rpx 0 12rpx; font-size: 20rpx; color: #788b88; }
+  &__title { font-size: 28rpx; font-weight: 500; }
+  &__period { margin-left: 16rpx; font-size: 21rpx; font-weight: 400; letter-spacing: 0; color: #8b817b; }
+  &__summary { display: flex; align-items: baseline; gap: 8rpx; font-size: 21rpx; color: #8b817b; }
+  &__number { font-size: 44rpx; font-weight: 400; line-height: 1; color: #617d73; font-variant-numeric: tabular-nums; }
+  &__range { margin: 24rpx 0 12rpx; font-size: 20rpx; color: #8b817b; }
   &__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 9rpx; }
   &__cell {
     width: 100%; height: 44rpx; min-width: 0; margin: 0; padding: 0;
@@ -111,19 +108,19 @@ onUnmounted(() => { disposed = true })
     border-radius: 8rpx; border: 2rpx solid transparent; box-sizing: border-box;
     font-size: 19rpx; line-height: 1; font-variant-numeric: tabular-nums;
     &::after { border: none; }
-    &--0 { background: #e9eeeb; color: #768780; }
-    &--1 { background: #b8d4ce; color: #355b60; }
-    &--2 { background: #77a9a2; color: #193f43; }
-    &--3 { background: #3e7575; color: #ffffff; }
-    &--today { border-bottom-color: #355b60; }
-    &--selected { box-shadow: 0 0 0 3rpx #fff, 0 0 0 5rpx #527f80; }
+    &--0 { background: #edf0e9; color: #7c8676; }
+    &--1 { background: #ccd9c6; color: #516d50; }
+    &--2 { background: #9cb594; color: #304b36; }
+    &--3 { background: #637f5f; color: #ffffff; }
+    &--today { border-bottom-color: #516d50; }
+    &--selected { box-shadow: 0 0 0 3rpx #fff, 0 0 0 5rpx #637f5f; }
   }
   &__grid--loading { opacity: 0.5; }
   &__footer { margin-top: 22rpx; gap: 12rpx; flex-wrap: wrap; }
-  &__detail { font-size: 21rpx; color: #627c77; }
-  &__legend { gap: 5rpx; font-size: 18rpx; color: #788b88; }
+  &__detail { font-size: 21rpx; color: #788477; }
+  &__legend { gap: 5rpx; font-size: 18rpx; color: #8b817b; }
   &__swatch { width: 13rpx; height: 13rpx; border-radius: 3rpx; }
-  &__state { min-height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20rpx; font-size: 24rpx; color: #788b88; }
-  &__retry { margin: 0; padding: 0 24rpx; line-height: 56rpx; font-size: 24rpx; color: #355b60; background: #e9eeeb; border-radius: 28rpx; &::after { border: none; } }
+  &__state { min-height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20rpx; font-size: 24rpx; color: #8b817b; }
+  &__retry { margin: 0; padding: 0 24rpx; line-height: 56rpx; font-size: 24rpx; color: #516d50; background: #edf0e9; border-radius: 28rpx; &::after { border: none; } }
 }
 </style>
diff --git a/packages/app/src/components/ProfileMenu.vue b/packages/app/src/components/ProfileMenu.vue
index 6b2fedd..4ec6dc5 100644
--- a/packages/app/src/components/ProfileMenu.vue
+++ b/packages/app/src/components/ProfileMenu.vue
@@ -1,32 +1,29 @@
 <template>
   <view class="profile-menu">
-    <template v-for="item in menuItems" :key="item.key">
-      <!-- Separator -->
-      <view v-if="item.type === 'separator'" class="profile-menu__separator" />
-
-      <!-- Menu item -->
-      <view
-        v-else
-        class="profile-menu__item"
-        :class="{ 'profile-menu__item--admin': item.isAdmin }"
-        hover-class="profile-menu__item--hover"
-        hover-stay-time="150"
-        @tap="handleTap(item)"
-      >
-        <view
-          class="profile-menu__icon-wrap"
-          :class="[
-            `profile-menu__icon-wrap--${item.key}`,
-            { 'profile-menu__icon-wrap--admin': item.isAdmin },
-          ]"
-        />
-        <text class="profile-menu__title" :class="{ 'profile-menu__title--admin': item.isAdmin }">
-          {{ item.title }}
-        </text>
-        <text v-if="item.badge" class="profile-menu__badge">{{ item.badge }}</text>
-        <text class="profile-menu__arrow">›</text>
+    <view class="profile-menu__shortcuts">
+      <view v-for="item in primaryItems" :key="item.key" class="profile-menu__shortcut"
+        hover-class="profile-menu__item--hover" @tap="handleTap(item)">
+        <view class="profile-menu__shortcut-head">
+          <view class="profile-menu__icon" :class="'profile-menu__icon--' + item.key" />
+          <text class="profile-menu__arrow">›</text>
+        </view>
+        <text class="profile-menu__shortcut-title">{{ item.title }}</text>
+        <text class="profile-menu__shortcut-note">{{ !requireAuth ? '登录后查看' : item.key === 'membership' ? `${activeMembershipCount || 0} 张可用` : `${upcomingBookingCount || 0} 节待上` }}</text>
       </view>
-    </template>
+    </view>
+
+    <slot />
+
+    <view class="profile-menu__links">
+      <template v-for="item in secondaryItems" :key="item.key">
+        <view v-if="item.type === 'separator'" class="profile-menu__separator" />
+        <view v-else class="profile-menu__item" :class="{ 'profile-menu__item--admin': item.isAdmin }"
+          hover-class="profile-menu__item--hover" hover-stay-time="150" @tap="handleTap(item)">
+          <text class="profile-menu__title">{{ item.title }}</text>
+          <text class="profile-menu__arrow">›</text>
+        </view>
+      </template>
+    </view>
   </view>
 </template>
 
@@ -135,6 +132,9 @@ const menuItems = computed<MenuItem[]>(() => {
   return items
 })
 
+const primaryItems = computed(() => menuItems.value.filter(item => item.key === 'membership' || item.key === 'bookings'))
+const secondaryItems = computed(() => menuItems.value.filter(item => item.key !== 'membership' && item.key !== 'bookings'))
+
 function handleTap(item: MenuItem) {
   if (item.requireAuth && !props.requireAuth) {
     emit('require-login')
@@ -150,269 +150,20 @@ function handleTap(item: MenuItem) {
 
 <style lang="scss" scoped>
 .profile-menu {
-  background: $bg-card;
-  border-radius: $radius-lg;
-  margin: $spacing-lg $spacing-lg 0;
-  overflow: hidden;
-
-  &__separator {
-    height: $spacing-sm;
-    background: $bg-page;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    padding: $spacing-md $spacing-lg;
-    border-bottom: 1rpx solid $border-color;
-    background: $bg-card;
-    transition: background 0.15s;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &--hover {
-      background: #f5f5f5;
-    }
-
-    &--admin {
-      background: rgba($accent-color, 0.04);
-    }
-  }
-
-  &__icon-wrap {
-    width: 56rpx;
-    height: 56rpx;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-right: $spacing-md;
-    position: relative;
-    background: rgba($brand-color, 0.06);
-
-    // ─── Pure CSS Icons ────────────────────────────────
-
-    // 会员卡 — 圆角矩形卡片 + 横线
-    &--membership {
-      background: rgba($accent-color, 0.10);
-      &::before {
-        content: '';
-        width: 26rpx;
-        height: 18rpx;
-        border: 2.5rpx solid $accent-color;
-        border-radius: 4rpx;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, 1rpx);
-        width: 16rpx;
-        height: 0;
-        border-top: 2.5rpx solid $accent-color;
-      }
-    }
-
-    // 预约 — 日历（矩形 + 顶部两个小竖线）
-    &--bookings {
-      background: rgba($brand-color, 0.06);
-      &::before {
-        content: '';
-        width: 24rpx;
-        height: 22rpx;
-        border: 2.5rpx solid $brand-color;
-        border-radius: 4rpx;
-        border-top-width: 5rpx;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: 14rpx;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 10rpx;
-        height: 0;
-        border-top: 2.5rpx solid $brand-color;
-        // 用 box-shadow 模拟两个竖线
-        box-shadow:
-          -4rpx -7rpx 0 0 $brand-color,
-          4rpx -7rpx 0 0 $brand-color;
-      }
-    }
-
-    &--teaching-schedule {
-      background: rgba(93, 140, 138, 0.12);
-      &::before {
-        content: '';
-        width: 24rpx;
-        height: 22rpx;
-        border: 2.5rpx solid #476d72;
-        border-radius: 6rpx;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 12rpx;
-        height: 12rpx;
-        transform: translate(-30%, -18%) rotate(45deg);
-        border-top: 2.5rpx solid #476d72;
-        border-left: 2.5rpx solid #476d72;
-      }
-    }
-
-    &--invite {
-      background: rgba(255, 122, 69, 0.12);
-      &::before {
-        content: '';
-        width: 20rpx;
-        height: 20rpx;
-        border: 2.5rpx solid #ff7a45;
-        border-radius: 50%;
-        position: absolute;
-        top: 12rpx;
-        left: 14rpx;
-        box-sizing: border-box;
-        box-shadow: 16rpx 8rpx 0 -2rpx rgba(255, 122, 69, 0.95);
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        width: 22rpx;
-        height: 12rpx;
-        border: 2.5rpx solid #ff7a45;
-        border-top: none;
-        border-radius: 0 0 14rpx 14rpx;
-        left: 17rpx;
-        bottom: 13rpx;
-        box-sizing: border-box;
-      }
-    }
-
-    // 个人信息 — 人形（圆 + 肩弧）
-    &--info {
-      background: rgba($brand-color, 0.06);
-      &::before {
-        content: '';
-        width: 12rpx;
-        height: 12rpx;
-        border: 2.5rpx solid $brand-color;
-        border-radius: 50%;
-        position: absolute;
-        top: 16rpx;
-        left: 50%;
-        transform: translateX(-50%);
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        width: 22rpx;
-        height: 10rpx;
-        border: 2.5rpx solid $brand-color;
-        border-bottom: none;
-        border-radius: 12rpx 12rpx 0 0;
-        position: absolute;
-        bottom: 13rpx;
-        left: 50%;
-        transform: translateX(-50%);
-        box-sizing: border-box;
-      }
-    }
-
-    // 清除缓存 — 旋转的刷新箭头（圆弧）
-    &--clear {
-      background: rgba($text-hint, 0.08);
-      &::before {
-        content: '';
-        width: 20rpx;
-        height: 20rpx;
-        border: 2.5rpx solid $text-secondary;
-        border-radius: 50%;
-        border-right-color: transparent;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: 14rpx;
-        right: 15rpx;
-        width: 0;
-        height: 0;
-        border-left: 5rpx solid $text-secondary;
-        border-top: 4rpx solid transparent;
-        border-bottom: 4rpx solid transparent;
-      }
-    }
-
-    // 管理中心 — 齿轮（圆 + 四个刻度）
-    &--admin {
-      background: rgba($accent-color, 0.12);
-      &::before {
-        content: '';
-        width: 14rpx;
-        height: 14rpx;
-        border: 2.5rpx solid $accent-color;
-        border-radius: 50%;
-        box-sizing: border-box;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 24rpx;
-        height: 24rpx;
-        transform: translate(-50%, -50%);
-        // 四条刻度线用 box-shadow 实现
-        background:
-          linear-gradient($accent-color, $accent-color) center top / 2.5rpx 5rpx no-repeat,
-          linear-gradient($accent-color, $accent-color) center bottom / 2.5rpx 5rpx no-repeat,
-          linear-gradient($accent-color, $accent-color) left center / 5rpx 2.5rpx no-repeat,
-          linear-gradient($accent-color, $accent-color) right center / 5rpx 2.5rpx no-repeat;
-      }
-    }
-  }
-
-  &__title {
-    flex: 1;
-    font-size: 30rpx;
-    color: $text-primary;
-
-    &--admin {
-      color: $accent-color;
-      font-weight: 500;
-    }
-  }
-
-  &__badge {
-    font-size: 22rpx;
-    line-height: 1;
-    font-weight: 600;
-    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(192, 154, 137, 0.16);
-    box-shadow:
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
-      0 6rpx 16rpx rgba(143, 103, 89, 0.12);
-  }
-
-  &__arrow {
-    font-size: 36rpx;
-    color: $text-hint;
-    line-height: 1;
-    transform: scaleX(0.6);
-    transform-origin: center;
-  }
+  &__shortcuts { display: flex; gap: 20rpx; margin: 24rpx 32rpx 0; }
+  &__shortcut { flex: 1; min-width: 0; padding: 24rpx; box-sizing: border-box; border-radius: 26rpx; background: #fff; border: 1rpx solid #eee8e3; }
+  &__shortcut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
+  &__shortcut-title { display: block; font-size: 27rpx; font-weight: 500; color: #514943; }
+  &__shortcut-note { display: block; font-size: 22rpx; color: #8b817b; margin-top: 8rpx; }
+  &__icon { width: 36rpx; height: 30rpx; position: relative; box-sizing: border-box; border: 2rpx solid #9b8878; border-radius: 6rpx; }
+  &__icon--membership::after { content: ''; position: absolute; top: 8rpx; left: 0; right: 0; border-top: 2rpx solid #9b8878; }
+  &__icon--bookings { border-color: #829a8b; border-top-width: 7rpx; &::after { content: ''; position: absolute; left: 8rpx; top: 8rpx; width: 12rpx; border-top: 2rpx solid #829a8b; } }
+  &__links { margin: 24rpx 32rpx 0; border-radius: 26rpx; background: #fff; overflow: hidden; }
+  &__item { display: flex; align-items: center; gap: 20rpx; min-height: 96rpx; padding: 0 28rpx; box-sizing: border-box; border-bottom: 1rpx solid #f2ede8; &:last-child { border-bottom: none; } }
+  &__item--hover { background: #f4f1ec; }
+  &__item--admin { background: #eff3ed; .profile-menu__title { color: #617d73; } }
+  &__title { flex: 1; font-size: 27rpx; font-weight: 400; color: #6f655e; }
+  &__arrow { font-size: 30rpx; color: #b2a79e; line-height: 1; }
+  &__separator { height: 12rpx; background: #fbf9f6; }
 }
 </style>
diff --git a/packages/app/src/components/QuickEntry.vue b/packages/app/src/components/QuickEntry.vue
index f9e07ec..6af3864 100644
--- a/packages/app/src/components/QuickEntry.vue
+++ b/packages/app/src/components/QuickEntry.vue
@@ -2,7 +2,6 @@
   <view class="quick-entry">
     <!-- ① Not logged in -->
     <view v-if="!userStore.loggedIn" class="entry-pill pill-login" @tap="handleLogin">
-      <view class="pill-dot dot-login" />
       <text class="pill-label">欢迎来到工作室</text>
       <view class="pill-action action-login">
         <text class="pill-action-text">微信登录</text>
@@ -15,7 +14,7 @@
       class="entry-pill pill-trial"
       @tap="handleTrialEntry"
     >
-      <view class="pill-tag tag-trial">体验</view>
+
       <text class="pill-label">首次体验专属课程</text>
       <view class="pill-action action-trial">
         <text class="pill-action-text">预约体验课</text>
@@ -25,10 +24,9 @@
     <!-- ③ Has valid active card -->
     <template v-else-if="userStore.hasValidMembership">
       <view class="entry-pill pill-active" @tap="handleBooking">
-        <view class="pill-dot dot-active" />
-        <text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
+          <text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
         <view class="pill-action action-book">
-          <text class="pill-action-text">约课</text>
+          <text class="pill-action-text">预约课程</text>
         </view>
       </view>
 
@@ -45,8 +43,7 @@
       class="entry-pill pill-expired"
       @tap="handleRenew"
     >
-      <view class="pill-dot dot-expired" />
-      <text class="pill-label">会员卡已到期</text>
+      <text class="pill-label">暂无可用会员卡</text>
       <view class="pill-action action-renew">
         <text class="pill-action-text">续卡</text>
       </view>
@@ -130,160 +127,15 @@ const renewStripText = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.quick-entry {
-  padding: 20rpx 24rpx 0;
-}
-
-/* ── Pill base ── */
-.entry-pill {
-  display: flex;
-  align-items: center;
-  height: 80rpx;
-  border-radius: 40rpx;
-  padding: 0 8rpx 0 24rpx;
-  gap: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
-}
-
-/* ── Pill variants ── */
-.pill-login {
-  background: #1a1a2e;
-}
-
-.pill-trial {
-  background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
-}
-
-.pill-active {
-  background: #ffffff;
-  border: 1rpx solid rgba(0, 0, 0, 0.06);
-  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
-}
-
-.pill-expired {
-  background: #f5f5f5;
-  border: 1rpx solid rgba(0, 0, 0, 0.04);
-  box-shadow: none;
-}
-
-/* ── Status dot ── */
-.pill-dot {
-  width: 14rpx;
-  height: 14rpx;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.dot-login {
-  background: $primary-color;
-  box-shadow: 0 0 8rpx rgba($primary-color, 0.6);
-}
-
-.dot-active {
-  background: #34c759;
-  box-shadow: 0 0 8rpx rgba(52, 199, 89, 0.5);
-}
-
-.dot-expired {
-  background: #aaa;
-}
-
-/* ── Tag (trial only) ── */
-.pill-tag {
-  font-size: 20rpx;
-  font-weight: 700;
-  padding: 4rpx 14rpx;
-  border-radius: 20rpx;
-  flex-shrink: 0;
-  letter-spacing: 1rpx;
-}
-
-.tag-trial {
-  background: rgba(255, 215, 0, 0.25);
-  color: #ffd700;
-}
-
-/* ── Label text ── */
-.pill-label {
-  flex: 1;
-  font-size: 26rpx;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.pill-label-active {
-  color: #333;
-}
-
-.pill-expired .pill-label {
-  color: #888;
-}
-
-/* ── Action button ── */
-.pill-action {
-  flex-shrink: 0;
-  height: 60rpx;
-  padding: 0 28rpx;
-  border-radius: 30rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pill-action-text {
-  font-size: 24rpx;
-  font-weight: 600;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.action-login {
-  background: $primary-color;
-  .pill-action-text { color: #1a1a2e; }
-}
-
-.action-trial {
-  background: rgba(255, 215, 0, 0.2);
-  .pill-action-text { color: #ffd700; }
-}
-
-.action-book {
-  background: #1a1a2e;
-  .pill-action-text { color: #fff; }
-}
-
-.action-renew {
-  background: #e8efe9;
-  .pill-action-text { color: #5f7a6e; }
-}
-
-/* ── Renew strip (running low) ── */
-.renew-strip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8rpx;
-  margin-top: 12rpx;
-  padding: 14rpx 24rpx;
-  background: linear-gradient(135deg, #8fa89a, #a8c0b4);
-  border-radius: 24rpx;
-}
-
-.renew-strip-text {
-  font-size: 22rpx;
-  font-weight: 500;
-  color: #fffcfa;
-  letter-spacing: 0.5rpx;
-}
-
-.renew-strip-arrow {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: rgba(255, 252, 250, 0.82);
-  line-height: 1;
-}
+.quick-entry { margin: 24rpx 32rpx 0; }
+.entry-pill { display: flex; align-items: center; min-height: 120rpx; box-sizing: border-box; padding: 24rpx; gap: 20rpx; border-radius: 28rpx; background: #f1e8e1; }
+.pill-active { background: #edf2ec; }
+.pill-expired { background: #f0ece7; }
+.pill-label { flex: 1; min-width: 0; font-size: 26rpx; line-height: 1.6; color: #6f5c50; overflow-wrap: anywhere; }
+.pill-label-active { color: #526b5d; }
+.pill-action { flex-shrink: 0; min-height: 68rpx; padding: 0 24rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; background: #6b8276; }
+.pill-action-text { font-size: 24rpx; font-weight: 400; color: #fff; white-space: nowrap; }
+.renew-strip { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 18rpx 12rpx 0; }
+.renew-strip-text { font-size: 22rpx; color: #8b817b; line-height: 1.5; }
+.renew-strip-arrow { font-size: 28rpx; color: #8b817b; }
 </style>
diff --git a/packages/app/src/components/SlotCard.vue b/packages/app/src/components/SlotCard.vue
index 9393806..3de0bf1 100644
--- a/packages/app/src/components/SlotCard.vue
+++ b/packages/app/src/components/SlotCard.vue
@@ -1,94 +1,29 @@
 <template>
-  <view class="slot-card-wrapper" :class="[`status-${statusClass}`]" @tap="emit('cardTap', timeSlot)">
-    <!-- Ticket background image -->
-    <image
-      class="ticket-bg"
-      src="/static/courseBg.png"
-      mode="aspectFill"
-    />
-
-    <!-- Card content overlay -->
-    <view class="ticket-content">
-      <!-- ── Top section: Time row (like flight ticket) ── -->
-      <view class="ticket-top">
-        <!-- Left: Start time -->
-        <view class="time-block">
-          <text class="time-main">{{ startTimeDisplay }}</text>
-          <text class="time-label">{{ timeSlot.date }}</text>
-        </view>
-
-        <!-- Center: Duration + icon -->
-        <view class="duration-block">
-          <view class="duration-line">
-            <view class="line-dot" />
-            <view class="line-dash" />
-            <view class="duration-icon">
-              <text class="icon-text">⏱</text>
-            </view>
-            <view class="line-dash" />
-            <view class="line-dot" />
-          </view>
-          <text class="duration-text">{{ durationMin }}分钟</text>
-        </view>
-
-        <!-- Right: End time -->
-        <view class="time-block time-block--right">
-          <text class="time-main">{{ endTimeDisplay }}</text>
-          <view class="capacity-tag" :class="capacityClass">
-            <text class="capacity-text">{{ capacityLabel }}</text>
-          </view>
-        </view>
+  <view class="slot-card" :class="`slot-card--${statusClass}`" @tap="emit('cardTap', timeSlot)">
+    <view class="slot-heading">
+      <view class="slot-time">
+        <text class="time-start">{{ startTimeDisplay }}</text>
+        <text class="time-end">— {{ endTimeDisplay }}</text>
       </view>
-
-      <!-- ── Dashed tear-off line ── -->
-      <view class="tear-line" />
-
-      <!-- ── Bottom section: Course name + Action ── -->
-      <view class="ticket-bottom">
-        <view class="course-info">
-          <text class="course-name">普拉提私教</text>
-        </view>
-
-        <!-- Action area -->
-        <view class="action-area">
-          <!-- Expired -->
-          <template v-if="isPast && !timeSlot.isBookedByMe">
-            <view class="action-badge badge-expired">
-              <text>已过期</text>
-            </view>
-          </template>
-
-          <!-- OPEN + not booked -->
-          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
-            <view class="action-btn btn-book" @tap.stop="emit('book', timeSlot)">
-              <text>预约</text>
-            </view>
-          </template>
-
-          <!-- OPEN + booked by me -->
-          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
-            <view class="action-badge badge-booked">
-              <text>{{ myBookingLabel }}</text>
-            </view>
-            <view class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
-              <text>取消</text>
-            </view>
-          </template>
-
-          <!-- FULL -->
-          <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
-            <view class="action-badge badge-full">
-              <text>已约满</text>
-            </view>
-          </template>
-
-          <!-- CLOSED -->
-          <template v-else>
-            <view class="action-badge badge-closed">
-              <text>已关闭</text>
-            </view>
-          </template>
-        </view>
+      <text class="slot-duration">{{ durationMin }} 分钟</text>
+    </view>
+    <view class="slot-body">
+      <view class="course-info">
+        <text class="course-name">普拉提私教</text>
+        <text class="slot-status">{{ capacityLabel }}</text>
+      </view>
+      <view class="action-area">
+        <template v-if="timeSlot.isBookedByMe">
+          <text class="booked-label">已预约</text>
+          <view v-if="timeSlot.status === TimeSlotStatus.OPEN" class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
+            <text>取消预约</text>
+          </view>
+        </template>
+        <button v-else-if="!isPast && timeSlot.status === TimeSlotStatus.OPEN && timeSlot.bookedCount < timeSlot.capacity"
+          class="book-button" hover-class="book-button--pressed" @tap.stop="emit('book', timeSlot)">
+          预约
+        </button>
+        <text v-else class="unavailable-label">{{ isPast ? '已结束' : timeSlot.status === TimeSlotStatus.CLOSED ? '未开放' : '已约满' }}</text>
       </view>
     </view>
   </view>
@@ -122,24 +57,17 @@ const durationMin = computed(() => {
 
 const myBookingLabel = computed(() => (
   props.timeSlot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
-    ? '已预约待确认'
+    ? '待老师确认'
     : '已预约'
 ))
 
 const capacityLabel = computed(() => {
-  const { bookedCount, capacity, status } = props.timeSlot
-  if (status === TimeSlotStatus.CLOSED) return '已关闭'
-  if (status === TimeSlotStatus.FULL) return '已约满'
-  const remaining = capacity - bookedCount
-  return `剩余${remaining}位`
-})
-
-const capacityClass = computed(() => {
-  const { bookedCount, capacity, status } = props.timeSlot
-  if (status === TimeSlotStatus.CLOSED) return 'cap-closed'
-  if (status === TimeSlotStatus.FULL) return 'cap-full'
-  if (bookedCount >= capacity * 0.8) return 'cap-almost'
-  return 'cap-open'
+  const { bookedCount, capacity, status, isBookedByMe } = props.timeSlot
+  if (isBookedByMe) return myBookingLabel.value
+  if (isPast.value) return '已结束'
+  if (status === TimeSlotStatus.CLOSED) return '暂未开放'
+  if (status === TimeSlotStatus.FULL || bookedCount >= capacity) return '名额已满'
+  return `还可约 ${Math.max(0, capacity - bookedCount)} 位`
 })
 
 const statusClass = computed(() => {
@@ -154,276 +82,39 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 </script>
 
 <style lang="scss" scoped>
-/* ─── Wrapper ─── */
-.slot-card-wrapper {
-  position: relative;
-  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);
-  }
-
-  /* Status-based opacity */
-  &.status-expired {
-    opacity: 0.55;
-  }
-
-  &.status-full,
-  &.status-closed {
-    opacity: 0.75;
-  }
+.slot-card {
+  margin: 0 32rpx 20rpx;
+  padding: 28rpx;
+  border: 1rpx solid #eee8e3;
+  border-radius: 28rpx;
+  background: #fff;
+  color: #514943;
 }
-
-/* ─── Ticket background image ─── */
-.ticket-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+.slot-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16rpx; }
+.slot-time { display: flex; align-items: baseline; gap: 12rpx; font-variant-numeric: tabular-nums; }
+.time-start { font-size: 40rpx; font-weight: 500; line-height: 1.2; }
+.time-end { font-size: 28rpx; color: #8b817b; }
+.slot-duration { flex-shrink: 0; font-size: 22rpx; color: #8b817b; }
+.slot-body { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-top: 24rpx; }
+.course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
+.course-name { font-size: 26rpx; font-weight: 400; }
+.slot-status { font-size: 22rpx; color: #617d73; }
+.action-area { display: flex; flex-direction: column; align-items: flex-end; gap: 2rpx; flex-shrink: 0; }
+.book-button {
+  display: flex; align-items: center; justify-content: center;
+  min-width: 136rpx; height: 72rpx; margin: 0; padding: 0 30rpx;
+  border: none; border-radius: 999rpx; background: #6b8276;
+  font-size: 26rpx; font-weight: 400; line-height: 1; color: #fff;
+  &::after { border: none; }
+  &--pressed { background: #597264; }
 }
-
-/* ─── Content overlay ─── */
-.ticket-content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 28rpx 40rpx 24rpx;
-}
-
-/* ═══ Top section: Time row ═══ */
-.ticket-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.time-block {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 100rpx;
-
-  &--right {
-    align-items: flex-end;
-  }
-}
-
-.time-main {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #3a2e2a;
-  line-height: 1;
-  letter-spacing: 1rpx;
-}
-
-.time-label {
-  margin-top: 8rpx;
-  font-size: 22rpx;
-  color: #a18a82;
-  font-weight: 500;
-}
-
-/* Duration center block */
-.duration-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  padding: 0 16rpx;
-}
-
-.duration-line {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-top: 8rpx;
-}
-
-.line-dot {
-  width: 10rpx;
-  height: 10rpx;
-  border-radius: 50%;
-  background: #ccb7ae;
-  flex-shrink: 0;
-}
-
-.line-dash {
-  flex: 1;
-  height: 2rpx;
-  background: repeating-linear-gradient(
-    to right,
-    #dccbc2 0,
-    #dccbc2 8rpx,
-    transparent 8rpx,
-    transparent 16rpx
-  );
-}
-
-.duration-icon {
-  flex-shrink: 0;
-  width: 48rpx;
-  height: 48rpx;
-  border-radius: 50%;
-  background: rgba(185, 143, 125, 0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 8rpx;
-}
-
-.icon-text {
-  font-size: 22rpx;
-}
-
-.duration-text {
-  margin-top: 6rpx;
-  font-size: 22rpx;
-  color: #a18a82;
-  font-weight: 500;
-}
-
-/* Capacity tag */
-.capacity-tag {
-  margin-top: 8rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 6rpx;
-  font-size: 20rpx;
-
-  &.cap-open {
-    background: rgba(101, 163, 126, 0.12);
-
-    .capacity-text {
-      color: #5d9472;
-    }
-  }
-
-  &.cap-almost {
-    background: rgba(214, 161, 92, 0.14);
-
-    .capacity-text {
-      color: #b98543;
-    }
-  }
-
-  &.cap-full {
-    background: rgba(216, 91, 87, 0.12);
-
-    .capacity-text {
-      color: #c96763;
-    }
-  }
-
-  &.cap-closed {
-    background: rgba(111, 96, 91, 0.08);
-
-    .capacity-text {
-      color: #9d8f89;
-    }
-  }
-}
-
-.capacity-text {
-  font-size: 20rpx;
-  font-weight: 600;
-}
-
-/* ═══ Tear-off dashed line ═══ */
-.tear-line {
-  margin: 20rpx -40rpx 16rpx;
-  height: 2rpx;
-  background: repeating-linear-gradient(
-    to right,
-    #e0dcd6 0,
-    #e0dcd6 10rpx,
-    transparent 10rpx,
-    transparent 20rpx
-  );
-  opacity: 0.6;
-}
-
-/* ═══ Bottom section ═══ */
-.ticket-bottom {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.course-info {
-  flex: 1;
-}
-
-.course-name {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: #3a2e2a;
-  letter-spacing: 1rpx;
-}
-
-/* ─── Action area ─── */
-.action-area {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  flex-shrink: 0;
-}
-
-.action-btn,
-.action-badge {
-  padding: 10rpx 24rpx;
-  border-radius: 20rpx;
-  font-size: 26rpx;
-  font-weight: 600;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-book {
-  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;
-
-  &:active {
-    opacity: 0.85;
-    transform: scale(0.96);
-  }
-}
-
-.badge-booked {
-  background: linear-gradient(135deg, rgba(247, 240, 235, 0.96), rgba(236, 225, 217, 0.98));
-  color: #8f6759;
-}
-
-.badge-expired {
-  background: rgba(111, 96, 91, 0.08);
-  color: #9d8f89;
-}
-
-.badge-full {
-  background: rgba(216, 91, 87, 0.12);
-  color: #c96763;
-}
-
-.badge-closed {
-  background: rgba(111, 96, 91, 0.08);
-  color: #b5a8a1;
-}
-
-.cancel-link {
-  font-size: 22rpx;
-  color: #c96763;
-  font-weight: 500;
-  text-decoration: underline;
-  text-decoration-color: rgba(201, 103, 99, 0.28);
+.booked-label { font-size: 24rpx; color: #617d73; }
+.cancel-link { padding: 12rpx 0 8rpx 20rpx; font-size: 21rpx; color: #8b817b; }
+.unavailable-label { padding: 14rpx 24rpx; border-radius: 999rpx; background: #f3f0ed; color: #8b817b; font-size: 23rpx; }
+.slot-card--booked { background: #f2f5f0; border-color: #e2e9df; }
+.slot-card--expired, .slot-card--closed, .slot-card--full {
+  background: #f7f5f2;
+  .time-start, .course-name { color: #8b817b; }
+  .slot-status { color: #948a82; }
 }
 </style>
diff --git a/packages/app/src/components/StudioInfo.vue b/packages/app/src/components/StudioInfo.vue
index 3f0bd19..4ce7966 100644
--- a/packages/app/src/components/StudioInfo.vue
+++ b/packages/app/src/components/StudioInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <view class="studio-info">
+    <text class="section-title">来工作室坐坐</text>
     <!-- Address + Chat row -->
     <view class="location-row">
       <view class="location-left" @tap="handleAddressTap">
-        <view class="location-icon" />
         <view class="location-content">
           <text class="location-label">场馆地址</text>
           <text class="location-text">
@@ -12,7 +12,7 @@
         </view>
       </view>
       <button class="chat-btn" open-type="contact">
-        <view class="chat-icon" />
+        <text>联系老师</text>
       </button>
     </view>
 
@@ -27,7 +27,6 @@
             @tap="previewPhoto(idx)"
           >
             <image class="gallery-image" :src="photo" mode="aspectFill" />
-            <view class="gallery-overlay" />
           </view>
         </view>
       </scroll-view>
@@ -88,179 +87,15 @@ function copyAddress() {
 </script>
 
 <style lang="scss" scoped>
-.studio-info {
-  margin: 16rpx 24rpx 0;
-  background: #ffffff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-/* ── Location row ── */
-.location-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 28rpx 32rpx 24rpx;
-  gap: 24rpx;
-}
-
-.location-left {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  flex: 1;
-  min-width: 0;
-}
-
-.location-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.location-label {
-  display: block;
-  font-size: 22rpx;
-  color: #b39a92;
-  letter-spacing: 2rpx;
-  margin-bottom: 6rpx;
-}
-
-.location-text {
-  font-size: 26rpx;
-  color: #5f5955;
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-/* ── Gallery ── */
-.gallery-block {
-  padding: 6rpx 0 28rpx;
-}
-
-.gallery-scroll {
-  width: 100%;
-}
-
-.gallery-track {
-  display: flex;
-  gap: 14rpx;
-  padding: 0 32rpx;
-  width: max-content;
-}
-
-.gallery-item {
-  position: relative;
-  width: 192rpx;
-  height: 108rpx;
-  border-radius: 14rpx;
-  overflow: hidden;
-  flex-shrink: 0;
-  background: linear-gradient(135deg, #eadfd8 0%, #d5c0b4 100%);
-  box-shadow: 0 8rpx 18rpx rgba(124, 95, 82, 0.1);
-}
-
-.gallery-image {
-  width: 100%;
-  height: 100%;
-}
-
-.gallery-overlay {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(38, 28, 24, 0.2) 100%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);
-}
-
-/* ── Icons ── */
-.location-icon {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 50%;
-  background: rgba($brand-color, 0.06);
-  position: relative;
-  flex-shrink: 0;
-
-  // 定位图标 — 圆头 + 尖尾
-  &::before {
-    content: '';
-    position: absolute;
-    top: 14rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 18rpx;
-    height: 18rpx;
-    border: 2.5rpx solid $brand-color;
-    border-radius: 50% 50% 50% 0;
-    transform: translateX(-50%) rotate(-45deg);
-    box-sizing: border-box;
-  }
-  // 中心白点
-  &::after {
-    content: '';
-    position: absolute;
-    top: 21rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 6rpx;
-    height: 6rpx;
-    background: $brand-color;
-    border-radius: 50%;
-    box-sizing: border-box;
-  }
-}
-
-.chat-btn {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 50%;
-  background: rgba($brand-color, 0.06);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.chat-btn::after {
-  border: none;
-}
-
-.chat-icon {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 50%;
-  background: rgba($brand-color, 0.06);
-  position: relative;
-
-  // 消息气泡
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 26rpx;
-    height: 20rpx;
-    border: 2.5rpx solid $brand-color;
-    border-radius: 6rpx;
-    box-sizing: border-box;
-  }
-  // 气泡尾巴
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 12rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 5rpx solid transparent;
-    border-right: 5rpx solid transparent;
-    border-top: 7rpx solid $brand-color;
-  }
-}
+.studio-info { margin: 36rpx 32rpx 0; }
+.section-title { display: block; margin-bottom: 20rpx; font-size: 30rpx; font-weight: 500; color: #514943; }
+.location-row { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; }
+.location-left, .location-content { flex: 1; min-width: 0; }
+.location-label { display: block; font-size: 21rpx; color: #8b817b; margin-bottom: 6rpx; }
+.location-text { font-size: 24rpx; color: #6f655e; line-height: 1.7; overflow-wrap: anywhere; }
+.chat-btn { flex-shrink: 0; margin: 0; padding: 0 20rpx; line-height: 64rpx; font-size: 23rpx; border: none; border-radius: 999rpx; background: #f0eae4; color: #78675c; &::after { border: none; } }
+.gallery-scroll { width: 100%; }
+.gallery-track { display: inline-flex; gap: 16rpx; }
+.gallery-item { width: 264rpx; height: 180rpx; border-radius: 20rpx; overflow: hidden; flex-shrink: 0; background: #e9e1d8; }
+.gallery-image { width: 100%; height: 100%; }
 </style>
diff --git a/packages/app/src/components/TimePeriodFilter.vue b/packages/app/src/components/TimePeriodFilter.vue
index bbacb73..6f5b317 100644
--- a/packages/app/src/components/TimePeriodFilter.vue
+++ b/packages/app/src/components/TimePeriodFilter.vue
@@ -25,7 +25,7 @@ interface Tab {
 
 interface Props {
   modelValue: PeriodKey
-  variant?: 'default' | 'booking'
+  variant?: 'default' | 'booking' | 'soft'
 }
 
 const props = defineProps<Props>()
@@ -117,4 +117,18 @@ function handleChange(key: PeriodKey) {
     }
   }
 }
+
+.time-period-filter.time-period-filter--soft {
+  margin: 0 32rpx 24rpx; padding: 6rpx;
+  border: none; border-radius: 999rpx; background: #f0ece7;
+  .tab-item {
+    padding: 14rpx 0; border-radius: 999rpx;
+    .tab-label { font-size: 24rpx; color: #8b817b; }
+    &.active {
+      background: #fff;
+      .tab-label { color: #617d73; font-weight: 500; }
+      &::after { display: none; }
+    }
+  }
+}
 </style>
diff --git a/packages/app/src/components/UpcomingBooking.vue b/packages/app/src/components/UpcomingBooking.vue
index 2224877..169fcc5 100644
--- a/packages/app/src/components/UpcomingBooking.vue
+++ b/packages/app/src/components/UpcomingBooking.vue
@@ -25,7 +25,6 @@
       <view class="details-col">
         <text class="card-name">{{ booking.membership.cardType.name }}</text>
         <view class="time-row">
-          <text class="time-icon">🕐</text>
           <text class="time-text">
             {{ formatTime(booking.timeSlot.startTime) }} – {{ formatTime(booking.timeSlot.endTime) }}
           </text>
@@ -108,132 +107,25 @@ function goToBookingDetail(id: string) {
 </script>
 
 <style lang="scss" scoped>
-.upcoming-section {
-  margin: 24rpx 24rpx 0;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16rpx;
-}
-
-.section-title {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #1a1a2e;
-}
-
-.section-more {
-  font-size: 26rpx;
-  color: $primary-dark;
-}
-
-.booking-card {
-  background: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-  padding: 28rpx 28rpx;
-  display: flex;
-  align-items: center;
-  gap: 24rpx;
-  margin-bottom: 16rpx;
-}
-
-.date-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  width: 88rpx;
-}
-
-.date-day {
-  font-size: 52rpx;
-  font-weight: 800;
-  color: #1a1a2e;
-  line-height: 1;
-}
-
-.date-month {
-  font-size: 22rpx;
-  color: $primary-dark;
-  margin-top: 4rpx;
-}
-
-.date-weekday {
-  font-size: 22rpx;
-  color: #999;
-  margin-top: 4rpx;
-}
-
-.booking-divider {
-  width: 2rpx;
-  height: 80rpx;
-  background: #f0f0f0;
-  flex-shrink: 0;
-}
-
-.details-col {
-  flex: 1;
-}
-
-.card-name {
-  display: block;
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a2e;
-  margin-bottom: 10rpx;
-}
-
-.time-row {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  margin-bottom: 10rpx;
-}
-
-.time-icon {
-  font-size: 24rpx;
-}
-
-.time-text {
-  font-size: 26rpx;
-  color: #555;
-}
-
-.status-row {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-}
-
-.status-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-}
-
-.dot--pending   { background: #f39c12; }
-.dot--confirmed { background: #27ae60; }
-.dot--completed { background: #3498db; }
-.dot--cancelled { background: #e74c3c; }
-.dot--default   { background: #999; }
-
-.status-text {
-  font-size: 24rpx;
-  color: #999;
-}
-
-.text--pending   { color: #f39c12; }
-.text--confirmed { color: #27ae60; }
-.text--completed { color: #3498db; }
-.text--cancelled { color: #e74c3c; }
-
-.booking-arrow {
-  font-size: 36rpx;
-  color: #ccc;
-  flex-shrink: 0;
-}
+.upcoming-section { margin: 36rpx 32rpx 0; }
+.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-bottom: 20rpx; }
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
+.section-more { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
+.booking-card { display: flex; align-items: center; gap: 24rpx; margin-bottom: 16rpx; padding: 26rpx; border-radius: 28rpx; background: #fff; border: 1rpx solid #eee8e3; }
+.date-col { display: flex; flex-direction: column; align-items: center; gap: 4rpx; width: 72rpx; flex-shrink: 0; }
+.date-day { font-size: 44rpx; font-weight: 400; line-height: 1.1; color: #617d73; }
+.date-month, .date-weekday { font-size: 20rpx; color: #8b817b; }
+.booking-divider { width: 1rpx; height: 80rpx; background: #eee8e3; flex-shrink: 0; }
+.details-col { flex: 1; min-width: 0; }
+.card-name { display: block; font-size: 26rpx; color: #514943; font-weight: 400; line-height: 1.5; margin-bottom: 8rpx; overflow-wrap: anywhere; }
+.time-row { margin-bottom: 8rpx; }
+.time-text { font-size: 24rpx; color: #6f655e; font-variant-numeric: tabular-nums; }
+.status-row { display: flex; align-items: center; gap: 8rpx; }
+.status-dot { width: 8rpx; height: 8rpx; border-radius: 50%; background: #a5b8ab; }
+.status-text { font-size: 21rpx; color: #617d73; }
+.dot--pending { background: #b8a18b; }
+.text--pending { color: #957c65; }
+.dot--cancelled { background: #b69589; }
+.text--cancelled { color: #9c7a6e; }
+.booking-arrow { font-size: 32rpx; color: #b2a79e; flex-shrink: 0; }
 </style>
diff --git a/packages/app/src/components/UserCard.vue b/packages/app/src/components/UserCard.vue
index 739eac9..732df0e 100644
--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -1,15 +1,14 @@
 <template>
   <view class="user-card">
-    <!-- Header: gradient background, padded to sit below nav bar -->
-    <view class="user-card__header" :style="{ paddingTop: (navBarHeight ?? 0) + 'px' }">
+    <view class="user-card__header">
       <!-- Not logged in state -->
       <view v-if="!loggedIn" class="user-card__guest">
         <view class="user-card__avatar-wrap">
           <image class="user-card__avatar-img" src="/static/default-avatar.jpg" mode="aspectFill" />
         </view>
         <view class="user-card__guest-info">
-          <text class="user-card__guest-title">Hi，欢迎来到普拉提</text>
-          <text class="user-card__guest-sub">登录后查看个人数据</text>
+          <text class="user-card__guest-title">欢迎来到工作室</text>
+          <text class="user-card__guest-sub">登录后查看会员卡与练习记录</text>
         </view>
         <button class="user-card__login-btn" :loading="loading" @tap="handleLogin">
           微信登录
@@ -17,7 +16,7 @@
       </view>
 
       <!-- Logged in + profile loaded -->
-      <view v-else-if="loggedIn && hasProfile" class="user-card__user">
+      <view v-else-if="loggedIn && hasProfile" class="user-card__user" @tap="emit('edit')">
         <view class="user-card__avatar-wrap">
           <image
             class="user-card__avatar-img"
@@ -29,15 +28,11 @@
         <view class="user-card__info">
           <view class="user-card__name-row">
             <text class="user-card__nickname">{{ user!.nickname }}</text>
-            <view v-if="hasMembership" class="user-card__member-badge">
-              <view class="user-card__member-icon">
-                <text class="user-card__member-letter">C</text>
-              </view>
-              <text class="user-card__member-label">CLUB</text>
-            </view>
+            <text v-if="hasMembership" class="user-card__member-label">会员</text>
           </view>
-          <text v-if="maskedPhone" class="user-card__phone">{{ maskedPhone }}</text>
+          <text class="user-card__phone">{{ maskedPhone || '完善个人资料' }}</text>
         </view>
+        <text class="user-card__edit">资料 ›</text>
       </view>
 
       <!-- Logged in but profile still loading -->
@@ -57,18 +52,18 @@
     <!-- Stats row: shown only when profile is loaded -->
     <view v-if="loggedIn && hasProfile" class="user-card__stats">
       <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.totalBookings ?? 0 }}</text>
-        <text class="user-card__stat-label">总训练(次)</text>
+        <text class="user-card__stat-value">{{ stats?.totalBookings ?? '—' }}</text>
+        <text class="user-card__stat-label">累计上课 · 节</text>
       </view>
       <view class="user-card__stat-divider" />
       <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.monthBookings ?? 0 }}</text>
-        <text class="user-card__stat-label">本月(次)</text>
+        <text class="user-card__stat-value">{{ stats?.monthBookings ?? '—' }}</text>
+        <text class="user-card__stat-label">本月上课 · 节</text>
       </view>
       <view class="user-card__stat-divider" />
       <view class="user-card__stat-item">
         <text class="user-card__stat-value">{{ remainingSessions }}</text>
-        <text class="user-card__stat-label">剩余课时(节)</text>
+        <text class="user-card__stat-label">剩余课时 · 节</text>
       </view>
     </view>
   </view>
@@ -86,12 +81,11 @@ const props = defineProps<{
   stats: UserStatsResponse | null
   memberships?: readonly MembershipWithCardType[]
   loading?: boolean
-  /** Height of the custom nav bar in px, so header content starts below it */
-  navBarHeight?: number
 }>()
 
 const emit = defineEmits<{
   (e: 'login'): void
+  (e: 'edit'): void
 }>()
 
 const avatarFailed = ref(false)
@@ -151,221 +145,28 @@ function handleLogin() {
 
 <style lang="scss" scoped>
 .user-card {
-  background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
-  border-radius: 0 0 40rpx 40rpx;
-  overflow: hidden;
-
-  &__header {
-    padding: $spacing-lg $spacing-lg $spacing-lg;
-  }
-
-  // ── Guest state ──
-  &__guest {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-  }
-
-  &__guest-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-xs;
-  }
-
-  &__guest-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #ffffff;
-  }
-
-  &__guest-sub {
-    font-size: 24rpx;
-    color: rgba(255, 255, 255, 0.65);
-  }
-
-  &__login-btn {
-    flex-shrink: 0;
-    background: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-    font-size: 26rpx;
-    font-weight: 500;
-    border: none;
-    border-radius: $radius-lg;
-    padding: 0 $spacing-md;
-    height: 64rpx;
-    line-height: 64rpx;
-    min-width: 160rpx;
-
-    &::after {
-      border: none;
-    }
-  }
-
-  // ── Logged-in user ──
-  &__user {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-  }
-
-  &__avatar-wrap {
-    position: relative;
-    flex-shrink: 0;
-    width: 120rpx;
-    height: 120rpx;
-  }
-
-  &__avatar-img {
-    width: 120rpx;
-    height: 120rpx;
-    border-radius: 50%;
-    border: 4rpx solid rgba(255, 255, 255, 0.4);
-  }
-
-  &__info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 8rpx;
-  }
-
-  &__name-row {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-  }
-
-  &__nickname {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #ffffff;
-  }
-
-  &__member-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 10rpx;
-    padding: 6rpx 14rpx 6rpx 8rpx;
-    border-radius: 999rpx;
-    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(143, 103, 89, 0.14);
-  }
-
-  &__member-icon {
-    width: 34rpx;
-    height: 34rpx;
-    border-radius: 50%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    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(143, 103, 89, 0.16);
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 3rpx;
-      border-radius: 50%;
-      border: 1.5rpx solid rgba(143, 103, 89, 0.28);
-    }
-  }
-
-  &__member-letter {
-    position: relative;
-    z-index: 1;
-    font-size: 20rpx;
-    line-height: 1;
-    font-weight: 800;
-    color: #8f6759;
-    letter-spacing: 1rpx;
-  }
-
-  &__member-label {
-    font-size: 20rpx;
-    line-height: 1;
-    font-weight: 700;
-    color: #8f6759;
-    letter-spacing: 2rpx;
-  }
-
-  &__phone {
-    font-size: 26rpx;
-    color: rgba(255, 255, 255, 0.75);
-  }
-
-  // ── Loading state ──
-  &__loading {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-  }
-
-  &__avatar-skeleton {
-    width: 120rpx;
-    height: 120rpx;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  &__nickname-skeleton {
-    width: 160rpx;
-    height: 36rpx;
-    border-radius: $radius-sm;
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  &__phone-skeleton {
-    width: 120rpx;
-    height: 26rpx;
-    border-radius: $radius-sm;
-    background: rgba(255, 255, 255, 0.2);
-    margin-top: 8rpx;
-  }
-
-  // ── Stats row ──
-  &__stats {
-    display: flex;
-    align-items: stretch;
-    background: rgba(255, 255, 255, 0.15);
-    margin: 0 $spacing-lg $spacing-lg;
-    border-radius: $radius-lg;
-    padding: $spacing-md 0;
-    backdrop-filter: blur(10rpx);
-  }
-
-  &__stat-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: $spacing-xs 0;
-  }
-
-  &__stat-divider {
-    width: 1rpx;
-    background: rgba(255, 255, 255, 0.3);
-    margin: $spacing-xs 0;
-  }
-
-  &__stat-value {
-    font-size: 44rpx;
-    font-weight: 700;
-    color: #ffffff;
-    line-height: 1;
-  }
-
-  &__stat-label {
-    font-size: 22rpx;
-    color: rgba(255, 255, 255, 0.8);
-    margin-top: 6rpx;
-  }
+  margin: 20rpx 32rpx 0; padding: 28rpx; background: #f2e9e3; border-radius: 32rpx;
+  &__user, &__loading { display: flex; align-items: center; gap: 20rpx; }
+  &__avatar-wrap { width: 108rpx; height: 108rpx; flex-shrink: 0; }
+  &__avatar-img { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 5rpx solid #fcf8f4; }
+  &__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
+  &__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10rpx; }
+  &__nickname { font-size: 36rpx; font-weight: 500; line-height: 1.4; color: #514943; overflow-wrap: anywhere; }
+  &__member-label { flex-shrink: 0; font-size: 19rpx; color: #8b6c5b; background: #fbf5ef; padding: 4rpx 12rpx; border-radius: 999rpx; }
+  &__phone { font-size: 24rpx; color: #8b7b70; }
+  &__edit { flex-shrink: 0; font-size: 22rpx; color: #8b7b70; padding: 16rpx 0 16rpx 8rpx; }
+  &__stats { display: flex; align-items: stretch; margin-top: 28rpx; padding-top: 26rpx; border-top: 1rpx solid #e3d7ce; }
+  &__stat-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
+  &__stat-value { font-size: 40rpx; font-weight: 400; color: #6f5c50; line-height: 1.15; font-variant-numeric: tabular-nums; }
+  &__stat-label { font-size: 20rpx; color: #8b7b70; }
+  &__stat-divider { width: 1rpx; margin: 6rpx 0; background: #e3d7ce; }
+  &__guest { display: flex; align-items: center; flex-wrap: wrap; gap: 20rpx; }
+  &__guest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
+  &__guest-title { font-size: 32rpx; font-weight: 500; color: #514943; }
+  &__guest-sub { font-size: 23rpx; color: #8b7b70; line-height: 1.6; }
+  &__login-btn { width: 100%; height: 76rpx; line-height: 76rpx; margin: 4rpx 0 0; padding: 0; border: none; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 26rpx; font-weight: 400; &::after { border: none; } }
+  &__avatar-skeleton { width: 108rpx; height: 108rpx; border-radius: 50%; background: #e6d9ce; }
+  &__nickname-skeleton { width: 150rpx; height: 32rpx; border-radius: 8rpx; background: #e6d9ce; }
+  &__phone-skeleton { width: 180rpx; height: 22rpx; border-radius: 6rpx; background: #e6d9ce; }
 }
 </style>
diff --git a/packages/app/src/pages/booking/index.vue b/packages/app/src/pages/booking/index.vue
index 8f4df90..8db8189 100644
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="booking-page">
+  <view class="booking-page" :style="{ height: pageHeight }">
     <!-- ──────────── Status bar spacing ──────────── -->
     <view class="status-bar" :style="{ height: statusBarHeight }" />
 
@@ -10,15 +10,18 @@
 
     <!-- ──────────── Date & period filters ──────────── -->
     <view class="filter-header">
-      <DateSelector v-model="selectedDate" variant="booking" @select="onDateSelect" />
-      <TimePeriodFilter v-model="selectedPeriod" variant="booking" @change="onPeriodChange" />
+      <view class="calendar-heading">
+        <text class="calendar-month">{{ selectedMonthLabel }}</text>
+        <text class="calendar-hint">选择上课日期</text>
+      </view>
+      <DateSelector v-model="selectedDate" variant="soft" @select="onDateSelect" />
+      <TimePeriodFilter v-model="selectedPeriod" variant="soft" @change="onPeriodChange" />
     </view>
 
     <!-- ──────────── Slot list ──────────── -->
     <scroll-view
       class="slot-scroll"
       scroll-y
-      :style="{ height: scrollHeight }"
       refresher-enabled
       :refresher-triggered="refreshing"
       @refresherrefresh="onRefresh"
@@ -37,12 +40,7 @@
 
       <!-- Empty state -->
       <view v-else-if="filteredSlots.length === 0" class="empty-wrap">
-        <view class="empty-illustration">
-          <view class="empty-circle outer" />
-          <view class="empty-circle inner" />
-          <view class="empty-dot" />
-        </view>
-        <text class="empty-text">当日暂无可约时段</text>
+        <text class="empty-text">这个时段还没有课程</text>
         <text class="empty-sub">请选择其他日期或时段查看</text>
       </view>
 
@@ -50,9 +48,8 @@
       <view v-else class="slot-list">
         <!-- Date summary -->
         <view class="date-summary">
-          <text class="date-summary-text">
-            共 {{ filteredSlots.length }} 个可选时段
-          </text>
+          <text class="date-summary-title">{{ selectedDayLabel }}</text>
+          <text class="date-summary-text">{{ filteredSlots.length }} 个时段</text>
         </view>
 
         <SlotCard
@@ -82,7 +79,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
 import { BookingStatus, TIME_PERIODS } from '@mp-pilates/shared'
 import { useBookingStore } from '../../stores/booking'
@@ -126,28 +123,26 @@ onShareTimeline(() => {
 
 // ─── Layout ───────────────────────────────────────────────
 const statusBarHeight = ref('20px')
-const scrollHeight = ref('500px')
-// Heights of static elements above scroll-view (in rpx, converted to px)
-const PAGE_HEADER_RPX = 88   // title bar height
-const FILTER_HEADER_RPX = 240 // DateSelector + TimePeriodFilter
-const TABBAR_RPX = 100
+const pageHeight = ref('100vh')
 
 function updateLayout() {
-  const { statusBarHeight: statusBarPx, windowWidth } = getSystemLayout()
-  const ratio = windowWidth / 750
-  statusBarHeight.value = `${statusBarPx}px`
-
-  const headerPx = Math.round(PAGE_HEADER_RPX * ratio)
-  const filterPx = Math.round(FILTER_HEADER_RPX * ratio)
-  const tabbarPx = Math.round(TABBAR_RPX * ratio)
-
-  // scroll-view fills remaining space: window - statusBar - pageHeader - filters - tabbar
-  const { windowHeight } = uni.getWindowInfo()
-  const remaining = windowHeight - statusBarPx - headerPx - filterPx - tabbarPx
-  scrollHeight.value = `${remaining}px`
+  statusBarHeight.value = `${getSystemLayout().statusBarHeight}px`
+  // The mini-program window already excludes its native tab bar. Flex layout
+  // gives the remaining height to the list as the filters change size.
+  pageHeight.value = `${uni.getWindowInfo().windowHeight}px`
 }
 
 updateLayout()
+onResize(updateLayout)
+
+const selectedMonthLabel = computed(() => {
+  const [year, month] = selectedDate.value.split('-')
+  return `${year} 年 ${Number(month)} 月`
+})
+const selectedDayLabel = computed(() => {
+  const [, month, day] = selectedDate.value.split('-')
+  return `${Number(month)} 月 ${Number(day)} 日的课程`
+})
 
 // ─── Filtered slots ───────────────────────────────────────
 const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
@@ -310,216 +305,33 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-.booking-page {
-  height: 100vh;
-  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;
-}
-
-/* ── Status bar ───────────────────────────────────── */
-.status-bar {
-  flex-shrink: 0;
-  background: #fcfaf8;
-}
-
-/* ── Page header ──────────────────────────────────── */
-.page-header {
-  flex-shrink: 0;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fcfaf8;
-}
-
-.page-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #3a2e2a;
-  letter-spacing: 1rpx;
-}
-
-/* ── Filter header ────────────────────────────────── */
-.filter-header {
-  flex-shrink: 0;
-  background: rgba(252, 250, 248, 0.96);
-  box-shadow: 0 12rpx 30rpx rgba(120, 91, 79, 0.06);
-}
-
-/* ── Scroll container ──────────────────────────────── */
-.slot-scroll {
-  flex: 1;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* ── Slot list ─────────────────────────────────────── */
-.slot-list {
-  display: flex;
-  flex-direction: column;
-  padding: 28rpx 0 0;
-}
-
-/* ── Date summary ──────────────────────────────────── */
-.date-summary {
-  padding: 0 24rpx 16rpx;
-}
-
-.date-summary-text {
-  font-size: 24rpx;
-  color: #9d8b83;
-  font-weight: 500;
-}
-
-/* ── Loading skeleton ──────────────────────────────── */
-.loading-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
-  padding: 28rpx 24rpx;
-}
-
-.skeleton-card {
-  height: 220rpx;
-  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 16rpx 36rpx rgba(120, 91, 79, 0.08);
-}
-
-.skeleton-time {
-  width: 90rpx;
-  height: 80rpx;
-  border-radius: 12rpx;
-  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;
-}
-
-.skeleton-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
-}
-
-.skeleton-title {
-  width: 60%;
-  height: 28rpx;
-  border-radius: 8rpx;
-  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;
-}
-
-.skeleton-sub {
-  width: 40%;
-  height: 20rpx;
-  border-radius: 6rpx;
-  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;
-}
-
-.skeleton-btn {
-  width: 100rpx;
-  height: 60rpx;
-  border-radius: 20rpx;
-  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;
-}
-
-/* ── Empty state ───────────────────────────────────── */
-.empty-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 120rpx 40rpx 80rpx;
-  gap: 0;
-}
-
-/* Zen-inspired geometric illustration */
-.empty-illustration {
-  position: relative;
-  width: 200rpx;
-  height: 200rpx;
-  margin-bottom: 56rpx;
-}
-
-.empty-circle {
-  position: absolute;
-  border-radius: 50%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  &.outer {
-    width: 180rpx;
-    height: 180rpx;
-    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, #f6e9e1 0%, #ddc1b4 50%, #b98f7d 100%);
-    opacity: 0.6;
-    animation: breathe 3s ease-in-out infinite 0.5s;
-  }
-}
-
-.empty-dot {
-  position: absolute;
-  width: 16rpx;
-  height: 16rpx;
-  border-radius: 50%;
-  background: #a87d6c;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.empty-text {
-  font-size: 32rpx;
-  color: #6f605b;
-  font-weight: 600;
-  letter-spacing: 2rpx;
-  margin-bottom: 16rpx;
-}
-
-.empty-sub {
-  font-size: 26rpx;
-  color: #a18a82;
-  letter-spacing: 1rpx;
-}
-
-@keyframes breathe {
-  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
-  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.4; }
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-  50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
-}
-
-/* ── Bottom spacer ─────────────────────────────────── */
-.scroll-bottom-spacer {
-  height: 48rpx;
+.booking-page { height: 100vh; background: #fbf9f6; display: flex; flex-direction: column; overflow: hidden; }
+.status-bar { flex-shrink: 0; }
+.page-header { flex-shrink: 0; height: 88rpx; display: flex; align-items: center; justify-content: center; }
+.page-title { font-size: 34rpx; font-weight: 500; color: #514943; }
+.filter-header { flex-shrink: 0; border-bottom: 1rpx solid #eee8e3; }
+.calendar-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 24rpx 32rpx 16rpx; gap: 16rpx; }
+.calendar-month { font-size: 28rpx; font-weight: 500; color: #514943; }
+.calendar-hint { font-size: 22rpx; color: #8b817b; }
+.slot-scroll { flex: 1; height: 0; min-height: 0; width: 100%; box-sizing: border-box; }
+.slot-list { display: flex; flex-direction: column; padding-top: 28rpx; }
+.date-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16rpx; padding: 0 32rpx 20rpx; }
+.date-summary-title { font-size: 25rpx; color: #6f655e; }
+.date-summary-text { font-size: 22rpx; color: #8b817b; }
+.loading-wrap { display: flex; flex-direction: column; gap: 20rpx; padding: 28rpx 32rpx; }
+.skeleton-card { height: 200rpx; box-sizing: border-box; border-radius: 28rpx; background: #fff; display: flex; align-items: center; padding: 28rpx; gap: 20rpx; }
+.skeleton-time, .skeleton-title, .skeleton-sub, .skeleton-btn {
+  border-radius: 10rpx;
+  background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%);
+  background-size: 400% 100%; animation: shimmer 1.4s infinite;
 }
+.skeleton-time { width: 90rpx; height: 70rpx; flex-shrink: 0; }
+.skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 12rpx; }
+.skeleton-title { width: 80%; height: 28rpx; }
+.skeleton-sub { width: 60%; height: 20rpx; }
+.skeleton-btn { width: 110rpx; height: 60rpx; border-radius: 999rpx; flex-shrink: 0; }
+.empty-wrap { margin: 32rpx; padding: 64rpx 28rpx; border-radius: 28rpx; background: #f3efea; display: flex; flex-direction: column; align-items: center; gap: 14rpx; }
+.empty-text { font-size: 28rpx; color: #6f655e; font-weight: 400; }
+.empty-sub { font-size: 23rpx; color: #8b817b; text-align: center; line-height: 1.6; }
+.scroll-bottom-spacer { height: 28rpx; }
 </style>
diff --git a/packages/app/src/pages/home/index.vue b/packages/app/src/pages/home/index.vue
index 68df5c8..da01b3c 100644
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -1,52 +1,22 @@
 <template>
-  <view class="home-page">
-    <!-- ① Brand Banner — fixed background layer -->
+  <view class="home-page" :style="{ height: pageHeight }">
     <view class="banner-fixed">
       <BrandBanner :studio-info="studioStore.studioInfo" />
     </view>
-
-    <!-- Pull-to-refresh wrapper — scrollable foreground -->
-    <scroll-view
-      class="page-scroll"
-      scroll-y
-      :scroll-top="scrollTop"
-      :scroll-with-animation="true"
-      :refresher-enabled="true"
-      :refresher-triggered="refreshing"
-      @refresherrefresh="handleRefresh"
-      @refresherrestore="refreshing = false"
-    >
-      <!-- Transparent spacer to reveal Banner behind -->
+    <scroll-view class="page-scroll" scroll-y :scroll-into-view="scrollTarget"
+      scroll-with-animation refresher-enabled :refresher-triggered="refreshing"
+      @refresherrefresh="handleRefresh" @refresherrestore="refreshing = false">
       <view class="banner-spacer" />
-
-      <!-- Floating card with rounded top corners -->
       <view class="floating-card">
-        <!-- Drag indicator -->
-        <view class="card-handle">
-          <view class="card-handle-bar" />
-        </view>
-
-        <!-- ② Studio Info (photo strip + address/phone) -->
-        <StudioInfo :studio-info="studioStore.studioInfo" />
-
-        <!-- ③ Quick Entry (login / trial / book / renew) -->
+        <view class="card-handle"><view class="card-handle-bar" /></view>
         <QuickEntry @scroll-to-card-shop="scrollToCardShop" />
-
-        <!-- ④ Upcoming Bookings -->
         <UpcomingBooking />
-
-        <!-- ④.5 Flash Sale Section -->
+        <StudioInfo :studio-info="studioStore.studioInfo" />
         <FlashSaleSection ref="flashSaleRef" />
-
-        <!-- ⑤ Card Shop (vertical list) -->
         <view :id="cardShopAnchorId">
           <CardShop ref="cardShopRef" />
         </view>
-
-        <!-- ⑥ About (teacher + studio gallery) -->
         <AboutSection />
-
-        <!-- Bottom padding for tab bar -->
         <view class="bottom-padding" />
       </view>
     </scroll-view>
@@ -55,7 +25,7 @@
 
 <script setup lang="ts">
 import { ref, nextTick, onUnmounted } from 'vue'
-import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onShow, onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 
 import BrandBanner from '../../components/BrandBanner.vue'
 import StudioInfo from '../../components/StudioInfo.vue'
@@ -94,7 +64,9 @@ const refreshing = ref(false)
 const cardShopRef = ref<InstanceType<typeof CardShop> | null>(null)
 const flashSaleRef = ref<InstanceType<typeof FlashSaleSection> | null>(null)
 const cardShopAnchorId = 'card-shop-anchor'
-const scrollTop = ref(0)
+const scrollTarget = ref('')
+const pageHeight = ref(`${uni.getWindowInfo().windowHeight}px`)
+onResize(() => { pageHeight.value = `${uni.getWindowInfo().windowHeight}px` })
 const pendingScrollToCardShop = ref(false)
 
 // Listen for cross-page scroll request (e.g. from booking page "去购买")
@@ -132,8 +104,10 @@ async function refreshData() {
   await Promise.allSettled(tasks)
 
   // Also refresh card shop and flash sales
-  cardShopRef.value?.fetchCardTypes()
-  flashSaleRef.value?.fetchFlashSales()
+  await Promise.allSettled([
+    cardShopRef.value?.fetchCardTypes(),
+    flashSaleRef.value?.fetchFlashSales(),
+  ])
 }
 
 async function handleRefresh() {
@@ -145,78 +119,30 @@ async function handleRefresh() {
   }
 }
 
-function scrollToCardShop() {
-  // Reset first so setting the same value still triggers scroll
-  scrollTop.value = 0
-  nextTick(() => {
-    uni.createSelectorQuery()
-      .select(`#${cardShopAnchorId}`)
-      .boundingClientRect()
-      .selectViewport()
-      .scrollOffset((res) => {
-        if (res) {
-          scrollTop.value = (res as UniApp.NodeInfo).scrollTop ?? 0
-        }
-      })
-      .exec()
-  })
+async function scrollToCardShop() {
+  scrollTarget.value = ''
+  await nextTick()
+  scrollTarget.value = cardShopAnchorId
 }
 </script>
 
 <style lang="scss" scoped>
-.home-page {
-  position: relative;
-  height: 100vh;
-  background: #FAF8F5;
-}
-
-/* Banner fixed behind everything */
-.banner-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 0;
-}
-
-/* Scroll layer sits above banner */
-.page-scroll {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  height: 100vh;
-}
-
-/* Transparent spacer lets banner peek through */
-.banner-spacer {
-  height: 420rpx;
-}
-
-/* Floating card that overlaps the banner */
+.home-page { position: relative; height: 100vh; background: #fbf9f6; }
+.banner-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; }
+.page-scroll { position: relative; z-index: 1; height: 100%; }
+.banner-spacer { height: 420rpx; }
 .floating-card {
   position: relative;
-  background: #FAF8F5;
-  border-radius: 32rpx 32rpx 0 0;
   min-height: 100vh;
   padding-top: 12rpx;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
-}
-
-/* Small drag indicator at top of card */
-.card-handle {
-  display: flex;
-  justify-content: center;
-  padding: 16rpx 0 8rpx;
-}
-
-.card-handle-bar {
-  width: 64rpx;
-  height: 8rpx;
-  border-radius: 4rpx;
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.bottom-padding {
-  height: 120rpx;
+  border-radius: 32rpx 32rpx 0 0;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.7);
+  background: linear-gradient(180deg, rgba(251, 249, 246, 0.86), #fbf9f6 260rpx);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 -4rpx 20rpx rgba(66, 54, 45, 0.06);
 }
+.card-handle { display: flex; justify-content: center; padding: 16rpx 0 8rpx; }
+.card-handle-bar { width: 64rpx; height: 8rpx; border-radius: 4rpx; background: rgba(112, 94, 79, 0.18); }
+.bottom-padding { height: 48rpx; }
 </style>
diff --git a/packages/app/src/pages/profile/index.vue b/packages/app/src/pages/profile/index.vue
index 738293c..82052b5 100644
--- a/packages/app/src/pages/profile/index.vue
+++ b/packages/app/src/pages/profile/index.vue
@@ -1,13 +1,12 @@
 <template>
-  <view class="profile-page">
-    <!-- Custom nav bar (transparent, blends with UserCard gradient) -->
-    <CustomNavBar title="我的" transparent />
+  <view class="profile-page" :style="{ paddingTop: navBarHeight + 'px' }">
+    <view class="profile-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <view class="profile-page__nav-title">我的</view>
+    </view>
 
     <!-- User card -->
     <UserCard :logged-in="loggedIn" :has-profile="hasProfile" :user="user" :stats="stats" :memberships="memberships"
-      :loading="loginLoading" :nav-bar-height="navBarHeight" @login="handleLogin" />
-
-    <PracticeActivityCard v-if="loggedIn" :key="userStore.token" :refresh-key="activityRefreshKey" />
+      :loading="loginLoading" @login="handleLogin" @edit="goToInfo" />
 
     <!-- Menu section: always visible -->
     <ProfileMenu
@@ -18,7 +17,9 @@
       :invite-share-eligible="!!user?.inviteShareEligible"
       @clear-cache="handleClearCache"
       @require-login="handleLogin"
-    />
+    >
+      <PracticeActivityCard v-if="loggedIn" :key="userStore.token" :refresh-key="activityRefreshKey" />
+    </ProfileMenu>
 
     <!-- Logout button: only when logged in -->
     <view v-if="loggedIn" class="profile-page__logout-wrap">
@@ -38,7 +39,6 @@ import { getErrorMessage } from '../../utils/auth'
 import PracticeActivityCard from '../../components/PracticeActivityCard.vue'
 import UserCard from '../../components/UserCard.vue'
 import ProfileMenu from '../../components/ProfileMenu.vue'
-import CustomNavBar from '../../components/CustomNavBar.vue'
 
 const userStore = useUserStore()
 const bookingStore = useBookingStore()
@@ -47,7 +47,8 @@ const { upcomingBookings } = storeToRefs(bookingStore)
 
 const activityRefreshKey = ref(0)
 const loginLoading = ref(false)
-const navBarHeight = ref(64)
+const navBarHeight = ref(getSystemLayout().navBarHeight)
+const statusBarHeight = getSystemLayout().statusBarHeight
 
 const activeMembershipCount = computed(
   () => user.value?.activeMembershipCount ?? userStore.activeMemberships.length,
@@ -107,12 +108,16 @@ async function handleLogin() {
   }
 }
 
+function goToInfo() {
+  uni.navigateTo({ url: '/pages/profile/info' })
+}
+
 function handleLogout() {
   uni.showModal({
     title: '退出登录',
     content: '确定要退出登录吗？',
     confirmText: '退出',
-    confirmColor: '#ff4d4f',
+    confirmColor: '#9c7a6e',
     success(res) {
       if (res.confirm) {
         userStore.logout()
@@ -138,27 +143,10 @@ function handleClearCache() {
 
 <style lang="scss" scoped>
 .profile-page {
-  min-height: 100vh;
-
-  &__logout-wrap {
-    margin: $spacing-xl $spacing-lg $spacing-xl;
-  }
-
-  &__logout-btn {
-    width: 100%;
-    height: 88rpx;
-    line-height: 88rpx;
-    background: $bg-card;
-    color: $error-color;
-    font-size: 30rpx;
-    font-weight: 500;
-    border: none;
-    border-radius: $radius-lg;
-    text-align: center;
-
-    &::after {
-      border: none;
-    }
-  }
+  min-height: 100vh; box-sizing: border-box; background: #fbf9f6; padding-bottom: 36rpx;
+  &__nav { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: #fbf9f6; }
+  &__nav-title { height: 88rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 500; color: #514943; }
+  &__logout-wrap { margin: 28rpx 32rpx 0; }
+  &__logout-btn { width: 100%; height: 80rpx; line-height: 80rpx; padding: 0; margin: 0; border: none; border-radius: 24rpx; background: #f2ede7; color: #91766a; font-size: 25rpx; font-weight: 400; &::after { border: none; } }
 }
 </style>