From 74551085e3d6c5751b6ecf67d078cecaee172451 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Thu, 9 Apr 2026 10:24:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=A7=92=E6=9D=80?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/CardShop.vue      | 263 +-----
 .../app/src/components/FlashSaleSection.vue   | 435 +++++++++
 packages/app/src/pages.json                   |  12 +
 packages/app/src/pages/admin/card-types.vue   |  14 +-
 packages/app/src/pages/admin/flash-sales.vue  | 863 ++++++++++++++++++
 packages/app/src/pages/admin/index.vue        |  16 +
 packages/app/src/pages/card/detail.vue        | 270 +-----
 packages/app/src/pages/flash-sale/detail.vue  | 837 +++++++++++++++++
 packages/app/src/pages/home/index.vue         |   8 +-
 packages/app/src/pages/profile/membership.vue | 580 ++++++------
 packages/app/src/stores/admin.ts              |  28 +
 packages/app/src/stores/flash-sale.ts         |  43 +
 packages/app/src/utils/format.ts              |  65 +-
 packages/server/prisma/schema.prisma          |  65 +-
 packages/server/src/app.module.ts             |   2 +
 .../flash-sale/dto/create-flash-sale.dto.ts   |  35 +
 .../flash-sale/dto/update-flash-sale.dto.ts   |  43 +
 .../flash-sale/flash-sale-admin.controller.ts |  67 ++
 .../src/flash-sale/flash-sale.controller.ts   |  40 +
 .../src/flash-sale/flash-sale.module.ts       |  14 +
 .../src/flash-sale/flash-sale.service.ts      | 409 +++++++++
 packages/server/src/payment/payment.module.ts |   2 +-
 .../server/src/payment/payment.service.ts     |  18 +-
 .../server/src/scheduler/scheduler.module.ts  |   2 +
 .../server/src/scheduler/scheduler.service.ts |  19 +-
 packages/shared/src/enums.ts                  |  13 +
 packages/shared/src/index.ts                  |  11 +
 packages/shared/src/types/flash-sale.ts       |  97 ++
 packages/shared/src/types/index.ts            |  10 +
 29 files changed, 3521 insertions(+), 760 deletions(-)
 create mode 100644 packages/app/src/components/FlashSaleSection.vue
 create mode 100644 packages/app/src/pages/admin/flash-sales.vue
 create mode 100644 packages/app/src/pages/flash-sale/detail.vue
 create mode 100644 packages/app/src/stores/flash-sale.ts
 create mode 100644 packages/server/src/flash-sale/dto/create-flash-sale.dto.ts
 create mode 100644 packages/server/src/flash-sale/dto/update-flash-sale.dto.ts
 create mode 100644 packages/server/src/flash-sale/flash-sale-admin.controller.ts
 create mode 100644 packages/server/src/flash-sale/flash-sale.controller.ts
 create mode 100644 packages/server/src/flash-sale/flash-sale.module.ts
 create mode 100644 packages/server/src/flash-sale/flash-sale.service.ts
 create mode 100644 packages/shared/src/types/flash-sale.ts

diff --git a/packages/app/src/components/CardShop.vue b/packages/app/src/components/CardShop.vue
index de026b0..c7e134c 100644
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -30,35 +30,10 @@
         class="card-row"
         @tap="goToDetail(card.id)"
       >
-        <!-- Card Cover — horizontal premium design -->
+        <!-- Card Cover — clean minimal design -->
         <view class="card-cover" :class="getCardCoverClass(card.type)">
-          <!-- Left accent bar -->
-          <view class="cover-accent-bar" />
-
-          <!-- Decorative circles -->
-          <view class="cover-deco cover-deco--tl" />
-          <view class="cover-deco cover-deco--br" />
-
-          <!-- CSS Icon -->
-          <view class="cover-icon" :class="`cover-icon--${card.type}`" />
-
-          <!-- Right side: text content -->
-          <view class="cover-content">
-            <view class="cover-badge">
-              <text class="cover-badge-text">{{ getCardTypeLabel(card.type) }}</text>
-            </view>
-            <text class="cover-name">{{ card.name }}</text>
-            <view class="cover-price-row">
-              <text class="cover-currency">¥</text>
-              <text class="cover-price">{{ formatPrice(card.price) }}</text>
-            </view>
-            <text
-              v-if="card.originalPrice && card.originalPrice > card.price"
-              class="cover-original"
-            >
-              ¥{{ formatPrice(card.originalPrice) }}
-            </text>
-          </view>
+          <view class="cover-deco cover-deco--1" />
+          <view class="cover-deco cover-deco--2" />
         </view>
 
         <!-- Card info — aligns with card-cover height -->
@@ -100,7 +75,7 @@
 import { ref, onMounted } from 'vue'
 import type { CardType } from '@mp-pilates/shared'
 import { get } from '../utils/request'
-import { formatPrice, getCardTypeLabel, getCardCoverClass } from '../utils/format'
+import { formatPrice, getCardCoverClass } from '../utils/format'
 
 const cardTypes = ref<CardType[]>([])
 const loading = ref(false)
@@ -180,249 +155,51 @@ function goToAllCards() {
 }
 
 /* ══════════════════════════════════════════════════════════
-   CARD COVER — Horizontal premium card design
+   CARD COVER — Clean minimal design
    ══════════════════════════════════════════════════════════ */
 .card-cover {
-  width: 240rpx;
+  width: 200rpx;
   height: 130rpx;
   border-radius: 16rpx;
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-
-  /* Glow effect behind */
-  &::before {
-    content: '';
-    position: absolute;
-    top: -20rpx;
-    left: -20rpx;
-    right: -20rpx;
-    bottom: -20rpx;
-    background: inherit;
-    filter: blur(24rpx) brightness(0.8);
-    z-index: 0;
-    opacity: 0.4;
-  }
-}
-
-/* Left accent stripe */
-.cover-accent-bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 6rpx;
-  background: rgba(255, 255, 255, 0.4);
-  z-index: 1;
 }
 
 /* Decorative circles */
 .cover-deco {
   position: absolute;
   border-radius: 50%;
-  z-index: 0;
   pointer-events: none;
 
-  &--tl {
-    width: 60rpx;
-    height: 60rpx;
-    top: -16rpx;
-    right: 20rpx;
-    background: rgba(255, 255, 255, 0.1);
+  &--1 {
+    width: 100rpx;
+    height: 100rpx;
+    top: -30rpx;
+    right: -20rpx;
+    background: rgba(255, 255, 255, 0.4);
   }
 
-  &--br {
-    width: 80rpx;
-    height: 80rpx;
-    bottom: -24rpx;
-    left: -16rpx;
-    background: rgba(255, 255, 255, 0.07);
-  }
-}
-
-/* CSS-drawn icons */
-.cover-icon {
-  width: 52rpx;
-  height: 52rpx;
-  position: relative;
-  z-index: 2;
-  flex-shrink: 0;
-  margin-left: 20rpx;
-}
-
-/* 次卡 — stacked cards */
-.cover-icon--TIMES {
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 36rpx;
-    height: 24rpx;
-    border: 2rpx solid rgba(255, 255, 255, 0.85);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 0.12);
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 10rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 36rpx;
-    height: 24rpx;
-    border: 2rpx solid rgba(255, 255, 255, 1);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 0.2);
-  }
-}
-
-/* 月卡 — calendar */
-.cover-icon--DURATION {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 36rpx;
-    height: 30rpx;
-    border: 2rpx solid rgba(255, 255, 255, 0.9);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 9rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 24rpx;
-    height: 0;
-    border-top: 2rpx solid rgba(255, 255, 255, 1);
-    box-shadow:
-      -6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9),
-      6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9);
-  }
-}
-
-/* 体验卡 — star */
-.cover-icon--TRIAL {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 16rpx;
-    height: 16rpx;
-    border: 2rpx solid rgba(255, 255, 255, 1);
-    border-radius: 50%;
-    box-sizing: border-box;
+  &--2 {
+    width: 70rpx;
+    height: 70rpx;
+    bottom: -20rpx;
+    left: -10rpx;
     background: rgba(255, 255, 255, 0.25);
   }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2rpx;
-    height: 42rpx;
-    background: rgba(255, 255, 255, 0.8);
-    box-shadow:
-      0 -12rpx 0 0 rgba(255, 255, 255, 0.8),
-      0 12rpx 0 0 rgba(255, 255, 255, 0.8),
-      -12rpx 0 0 0 rgba(255, 255, 255, 0.8),
-      12rpx 0 0 0 rgba(255, 255, 255, 0.8),
-      -8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
-      8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
-      -8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8),
-      8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8);
-  }
 }
 
 /* Card cover backgrounds */
 .cover--times {
-  background: linear-gradient(135deg, #1e2340 0%, #2d2d5e 50%, #3a3a7a 100%);
+  background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
 }
 
 .cover--duration {
-  background: linear-gradient(135deg, #4a1a6b 0%, #6c3483 50%, #8e4aaf 100%);
+  background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
 }
 
 .cover--trial {
-  background: linear-gradient(135deg, #14527a 0%, #1a6fa0 50%, #48a9a6 100%);
-}
-
-/* Right side text content */
-.cover-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0 16rpx 0 12rpx;
-  gap: 4rpx;
-  z-index: 2;
-}
-
-.cover-badge {
-  padding: 3rpx 10rpx;
-  border-radius: 8rpx;
-  background: rgba(255, 255, 255, 0.18);
-  border: 1rpx solid rgba(255, 255, 255, 0.28);
-}
-
-.cover-badge-text {
-  font-size: 16rpx;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 600;
-}
-
-.cover-name {
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #ffffff;
-  letter-spacing: 0.5rpx;
-  line-height: 1.2;
-  max-width: 130rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cover-price-row {
-  display: flex;
-  align-items: baseline;
-  gap: 2rpx;
-}
-
-.cover-currency {
-  font-size: 18rpx;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.cover-price {
-  font-size: 28rpx;
-  font-weight: 800;
-  color: #ffffff;
-  line-height: 1;
-}
-
-.cover-original {
-  font-size: 16rpx;
-  color: rgba(255, 255, 255, 0.5);
-  text-decoration: line-through;
+  background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
 }
 
 /* ── Card info — matches card-cover height ── */
diff --git a/packages/app/src/components/FlashSaleSection.vue b/packages/app/src/components/FlashSaleSection.vue
new file mode 100644
index 0000000..9914d39
--- /dev/null
+++ b/packages/app/src/components/FlashSaleSection.vue
@@ -0,0 +1,435 @@
+<template>
+  <view v-if="flashSales.length" class="flash-sale-section">
+    <!-- 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" />
+      </view>
+    </view>
+
+    <!-- Horizontal scroll cards -->
+    <scroll-view
+      scroll-x
+      :show-scrollbar="false"
+      class="flash-scroll"
+    >
+      <view class="flash-card-list">
+        <view
+          v-for="sale in flashSales"
+          :key="sale.id"
+          class="flash-card"
+          :class="cardPhaseClass(sale.phase)"
+          @tap="goToDetail(sale.id)"
+        >
+          <!-- Top gradient band -->
+          <view class="card-top">
+            <!-- Phase badge -->
+            <view class="phase-badge" :class="badgeClass(sale.phase)">
+              <text class="phase-badge-text">{{ phaseLabel(sale.phase) }}</text>
+            </view>
+
+            <!-- Countdown / status text -->
+            <view class="countdown-row">
+              <text v-if="sale.phase === FlashSalePhase.UPCOMING" class="countdown-label">距开始</text>
+              <text v-else-if="sale.phase === FlashSalePhase.ONGOING" class="countdown-label">剩余</text>
+              <view v-if="sale.phase === FlashSalePhase.UPCOMING || sale.phase === FlashSalePhase.ONGOING" class="countdown-blocks">
+                <text class="cd-block">{{ getSaleCountdown(sale).h }}</text>
+                <text class="cd-sep">:</text>
+                <text class="cd-block">{{ getSaleCountdown(sale).m }}</text>
+                <text class="cd-sep">:</text>
+                <text class="cd-block">{{ getSaleCountdown(sale).s }}</text>
+              </view>
+            </view>
+          </view>
+
+          <!-- Card body -->
+          <view class="card-body">
+            <text class="card-title">{{ sale.title }}</text>
+            <text class="card-type-name">{{ sale.cardType.name }}</text>
+
+            <!-- Price area -->
+            <view class="price-area">
+              <view class="flash-price-row">
+                <text class="flash-currency">¥</text>
+                <text class="flash-price">{{ formatPrice(sale.flashPrice) }}</text>
+              </view>
+              <text class="original-price">¥{{ formatPrice(sale.originalPrice) }}</text>
+            </view>
+
+            <!-- Stock progress -->
+            <view class="stock-area">
+              <view class="stock-bar">
+                <view
+                  class="stock-fill"
+                  :class="{ 'stock-fill--hot': getStockRatio(sale.soldCount, sale.totalStock) > 0.6 }"
+                  :style="{ width: stockPercent(sale) }"
+                />
+              </view>
+              <text class="stock-text">
+                {{ sale.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `剩 ${sale.remainingStock}/${sale.totalStock}` }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { FlashSalePhase } from '@mp-pilates/shared'
+import type { FlashSaleListItem } from '@mp-pilates/shared'
+import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../utils/format'
+import { get } from '../utils/request'
+
+const flashSales = ref<FlashSaleListItem[]>([])
+const tick = ref(0)
+
+let timer: ReturnType<typeof setInterval> | null = null
+
+const hasOngoing = computed(() =>
+  flashSales.value.some((s) => s.phase === FlashSalePhase.ONGOING),
+)
+
+async function fetchFlashSales() {
+  try {
+    const data = await get<FlashSaleListItem[]>('/flash-sales')
+    flashSales.value = [...data]
+  } catch {
+    flashSales.value = []
+  }
+}
+
+// Expose for parent page refresh
+defineExpose({ fetchFlashSales })
+
+function phaseLabel(phase: FlashSalePhase): string {
+  return getFlashSalePhaseLabel(phase)
+}
+
+function cardPhaseClass(phase: FlashSalePhase): string {
+  if (phase === FlashSalePhase.ONGOING) return 'card--ongoing'
+  if (phase === FlashSalePhase.UPCOMING) return 'card--upcoming'
+  if (phase === FlashSalePhase.SOLD_OUT) return 'card--soldout'
+  return 'card--ended'
+}
+
+function badgeClass(phase: FlashSalePhase): string {
+  if (phase === FlashSalePhase.ONGOING) return 'badge--ongoing'
+  if (phase === FlashSalePhase.UPCOMING) return 'badge--upcoming'
+  return 'badge--inactive'
+}
+
+function stockPercent(sale: FlashSaleListItem): string {
+  return getStockPercent(sale.soldCount, sale.totalStock)
+}
+
+function getSaleCountdown(sale: FlashSaleListItem) {
+  void tick.value
+  const target = sale.phase === FlashSalePhase.UPCOMING ? sale.startTime : sale.endTime
+  return getCountdownParts(target)
+}
+
+function goToDetail(id: string) {
+  uni.navigateTo({ url: `/pages/flash-sale/detail?id=${id}` })
+}
+
+onMounted(() => {
+  fetchFlashSales()
+  timer = setInterval(() => {
+    tick.value++
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.flash-sale-section {
+  background: #fff;
+  margin-top: 16rpx;
+  padding-bottom: 24rpx;
+}
+
+/* ── 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;
+}
+</style>
diff --git a/packages/app/src/pages.json b/packages/app/src/pages.json
index b345809..bbb2809 100644
--- a/packages/app/src/pages.json
+++ b/packages/app/src/pages.json
@@ -104,6 +104,18 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/admin/flash-sales",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/flash-sale/detail",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
diff --git a/packages/app/src/pages/admin/card-types.vue b/packages/app/src/pages/admin/card-types.vue
index 05216d8..ffddae5 100644
--- a/packages/app/src/pages/admin/card-types.vue
+++ b/packages/app/src/pages/admin/card-types.vue
@@ -522,16 +522,16 @@ onMounted(fetchCardTypes)
   justify-content: space-between;
 }
 
-.header--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
-.header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-.header--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
+.header--times    { background: linear-gradient(90deg, #E8D5C4, #D4BFA8); }
+.header--duration { background: linear-gradient(90deg, #D8C8DC, #C4AECB); }
+.header--trial    { background: linear-gradient(90deg, #C8D8D2, #A9C4BC); }
 
-.ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }
+.ct-type-label { font-size: 22rpx; font-weight: 600; color: $brand-color; letter-spacing: 2rpx; }
 
 .ct-status-tag { border-radius: 20rpx; padding: 4rpx 16rpx; }
-.tag--on  { background: rgba(255,255,255,0.2); }
-.tag--off { background: rgba(0,0,0,0.2); }
-.ct-status-text { font-size: 20rpx; color: #ffffff; }
+.tag--on  { background: rgba(74, 64, 53, 0.1); }
+.tag--off { background: rgba(74, 64, 53, 0.08); }
+.ct-status-text { font-size: 20rpx; color: $brand-color; }
 
 .ct-body { padding: 24rpx; }
 
diff --git a/packages/app/src/pages/admin/flash-sales.vue b/packages/app/src/pages/admin/flash-sales.vue
new file mode 100644
index 0000000..ee4dc59
--- /dev/null
+++ b/packages/app/src/pages/admin/flash-sales.vue
@@ -0,0 +1,863 @@
+<template>
+  <view class="page" :style="{ paddingTop: navBarHeight }">
+    <CustomNavBar title="秒杀管理" show-back />
+
+    <!-- Toolbar -->
+    <view class="toolbar">
+      <text class="toolbar-hint">共 {{ total }} 个秒杀活动</text>
+      <view class="add-btn" @tap="openAdd">
+        <text class="add-btn-text">＋ 新建秒杀</text>
+      </view>
+    </view>
+
+    <!-- Loading skeleton -->
+    <view v-if="pageLoading" class="skeleton-list">
+      <view v-for="i in 3" :key="i" class="skeleton-item" />
+    </view>
+
+    <!-- Empty -->
+    <view v-else-if="!items.length" class="empty-state">
+      <text class="empty-icon">◈</text>
+      <text class="empty-text">暂无秒杀活动，点击右上角新建</text>
+    </view>
+
+    <!-- Flash sale list -->
+    <view v-else class="fs-list">
+      <view
+        v-for="item in items"
+        :key="item.id"
+        class="fs-card"
+      >
+        <!-- Header band -->
+        <view class="fs-header" :class="headerStatusClass(item)">
+          <view class="fs-header-left">
+            <text class="fs-title">{{ item.title }}</text>
+          </view>
+          <view class="fs-status-tag" :class="phaseTagClass(item.phase)">
+            <text class="fs-status-text">{{ phaseLabel(item.phase) }}</text>
+          </view>
+        </view>
+
+        <!-- Body -->
+        <view class="fs-body">
+          <view class="fs-info-row">
+            <text class="fs-card-type">关联卡种: {{ item.cardType.name }}</text>
+          </view>
+
+          <view class="fs-price-row">
+            <view class="fs-price-block">
+              <text class="fs-price-label">秒杀价</text>
+              <text class="fs-price-value flash">¥{{ formatPrice(item.flashPrice) }}</text>
+            </view>
+            <view class="fs-price-block">
+              <text class="fs-price-label">原价</text>
+              <text class="fs-price-value original">¥{{ formatPrice(item.originalPrice) }}</text>
+            </view>
+            <view class="fs-price-block">
+              <text class="fs-price-label">库存</text>
+              <text class="fs-price-value">{{ item.soldCount }}/{{ item.totalStock }}</text>
+            </view>
+          </view>
+
+          <!-- Stock progress bar -->
+          <view class="fs-stock-bar">
+            <view
+              class="fs-stock-fill"
+              :style="{ width: stockPercent(item) }"
+            />
+          </view>
+
+          <view class="fs-time-row">
+            <text class="fs-time">{{ formatDateTime(item.startTime) }} — {{ formatDateTime(item.endTime) }}</text>
+          </view>
+        </view>
+
+        <!-- Actions -->
+        <view class="fs-actions">
+          <view class="fs-action-btn edit-btn" @tap.stop="openEdit(item)">
+            <text class="fs-action-text">编辑</text>
+          </view>
+          <view
+            v-if="item.status === 'DRAFT'"
+            class="fs-action-btn activate-btn"
+            @tap.stop="confirmActivate(item)"
+          >
+            <text class="fs-action-text">上线</text>
+          </view>
+          <view
+            v-else-if="item.status === 'ACTIVE'"
+            class="fs-action-btn end-btn"
+            @tap.stop="confirmEnd(item)"
+          >
+            <text class="fs-action-text">结束</text>
+          </view>
+          <view
+            v-if="item.soldCount === 0"
+            class="fs-action-btn delete-btn"
+            @tap.stop="confirmDelete(item)"
+          >
+            <text class="fs-action-text">删除</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- ──────── Add / Edit modal ──────── -->
+    <view v-if="showModal" class="modal-mask" @tap.stop="closeModal">
+      <view class="modal-container" @tap.stop>
+        <scroll-view scroll-y class="modal-scroll">
+          <!-- Header -->
+          <view class="modal-header">
+            <text class="modal-title">{{ editTarget ? '编辑秒杀' : '新建秒杀' }}</text>
+            <view class="modal-close" @tap="closeModal">
+              <text class="modal-close-icon">✕</text>
+            </view>
+          </view>
+
+          <!-- Form fields -->
+          <view class="modal-body">
+            <!-- Card type picker -->
+            <view class="modal-field">
+              <text class="modal-label">关联卡种</text>
+              <picker
+                mode="selector"
+                :range="cardTypeOptions"
+                range-key="label"
+                :value="form.cardTypeIdx"
+                @change="onCardTypeChange"
+                :disabled="!!editTarget"
+              >
+                <view class="picker-display">
+                  <text class="picker-text">{{ cardTypeOptions[form.cardTypeIdx]?.label || '请选择' }}</text>
+                  <text class="picker-arrow">›</text>
+                </view>
+              </picker>
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">活动标题</text>
+              <input
+                class="modal-input"
+                v-model="form.title"
+                placeholder="如：新春限时秒杀"
+                placeholder-style="color:#bbb"
+              />
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">原价（元）</text>
+              <input
+                class="modal-input"
+                type="digit"
+                v-model="form.originalPriceStr"
+                placeholder="展示划线价"
+                placeholder-style="color:#bbb"
+              />
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">秒杀价（元）</text>
+              <input
+                class="modal-input"
+                type="digit"
+                v-model="form.flashPriceStr"
+                placeholder="实际支付价格"
+                placeholder-style="color:#bbb"
+              />
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">库存数量</text>
+              <input
+                class="modal-input"
+                type="number"
+                v-model="form.totalStockStr"
+                placeholder="秒杀总量"
+                placeholder-style="color:#bbb"
+              />
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">开始时间</text>
+              <view class="datetime-picker-group">
+                <picker
+                  mode="date"
+                  :value="form.startDate"
+                  @change="onStartDateChange"
+                >
+                  <text class="datetime-text">{{ form.startDate || '选择日期' }}</text>
+                </picker>
+                <picker
+                  mode="time"
+                  :value="form.startTimeStr"
+                  @change="onStartTimeChange"
+                >
+                  <text class="datetime-text">{{ form.startTimeStr || '选择时间' }}</text>
+                </picker>
+              </view>
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">结束时间</text>
+              <view class="datetime-picker-group">
+                <picker
+                  mode="date"
+                  :value="form.endDate"
+                  @change="onEndDateChange"
+                >
+                  <text class="datetime-text">{{ form.endDate || '选择日期' }}</text>
+                </picker>
+                <picker
+                  mode="time"
+                  :value="form.endTimeStr"
+                  @change="onEndTimeChange"
+                >
+                  <text class="datetime-text">{{ form.endTimeStr || '选择时间' }}</text>
+                </picker>
+              </view>
+            </view>
+
+            <view class="modal-field">
+              <text class="modal-label">排序值</text>
+              <input
+                class="modal-input"
+                type="number"
+                v-model="form.sortOrderStr"
+                placeholder="越小越靠前"
+                placeholder-style="color:#bbb"
+              />
+            </view>
+
+            <view class="modal-field modal-field--last">
+              <text class="modal-label">活动说明</text>
+              <textarea
+                class="modal-textarea"
+                v-model="form.description"
+                placeholder="可选，向用户展示"
+                placeholder-style="color:#bbb"
+                :maxlength="500"
+                auto-height
+              />
+            </view>
+          </view>
+
+          <!-- Action buttons -->
+          <view class="modal-actions">
+            <view class="modal-cancel" @tap="closeModal">
+              <text class="modal-cancel-text">取消</text>
+            </view>
+            <view
+              class="modal-confirm"
+              :class="{ 'modal-confirm--loading': submitting }"
+              @tap="submitForm"
+            >
+              <text class="modal-confirm-text">{{ submitting ? '保存中...' : '确认保存' }}</text>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import CustomNavBar from '../../components/CustomNavBar.vue'
+import { getSystemLayout } from '../../utils/system'
+import { useAdminStore } from '../../stores/admin'
+import { formatPrice, formatDateTime, getFlashSalePhaseLabel, getStockPercent, formatDateLocal, formatTimeLocal } from '../../utils/format'
+import { FlashSaleStatus, FlashSalePhase } from '@mp-pilates/shared'
+import type { FlashSaleAdminItem, CardType } from '@mp-pilates/shared'
+
+const adminStore = useAdminStore()
+
+const navBarHeight = ref('64px')
+onMounted(() => {
+  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
+})
+
+// ─── Data ────────────────────────────────────────────
+const items = ref<FlashSaleAdminItem[]>([])
+const total = ref(0)
+const pageLoading = ref(false)
+const showModal = ref(false)
+const submitting = ref(false)
+const editTarget = ref<FlashSaleAdminItem | null>(null)
+const cardTypes = ref<CardType[]>([])
+
+const cardTypeOptions = computed(() =>
+  cardTypes.value.map((ct) => ({
+    label: `${ct.name}（¥${formatPrice(ct.price)}）`,
+    value: ct.id,
+  })),
+)
+
+const defaultForm = () => ({
+  cardTypeIdx: 0,
+  title: '',
+  originalPriceStr: '',
+  flashPriceStr: '',
+  totalStockStr: '',
+  startDate: '',
+  startTimeStr: '',
+  endDate: '',
+  endTimeStr: '',
+  sortOrderStr: '0',
+  description: '',
+})
+
+const form = ref(defaultForm())
+
+// ─── Data loading ─────────────────────────────────────
+async function loadData() {
+  pageLoading.value = true
+  try {
+    const [salesResult, cardTypesResult] = await Promise.all([
+      adminStore.fetchFlashSales(),
+      adminStore.fetchCardTypes(),
+    ])
+    items.value = [...salesResult.data]
+    total.value = salesResult.total
+    cardTypes.value = [...cardTypesResult]
+  } catch {
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    pageLoading.value = false
+  }
+}
+
+async function reloadSales() {
+  try {
+    const result = await adminStore.fetchFlashSales()
+    items.value = [...result.data]
+    total.value = result.total
+  } catch {
+    // silent
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────
+function phaseLabel(phase: FlashSalePhase): string {
+  return getFlashSalePhaseLabel(phase)
+}
+
+function phaseTagClass(phase: FlashSalePhase): string {
+  if (phase === FlashSalePhase.ONGOING) return 'tag--ongoing'
+  if (phase === FlashSalePhase.UPCOMING) return 'tag--upcoming'
+  if (phase === FlashSalePhase.SOLD_OUT) return 'tag--soldout'
+  return 'tag--ended'
+}
+
+function headerStatusClass(item: FlashSaleAdminItem): string {
+  if (item.status === FlashSaleStatus.DRAFT) return 'header--draft'
+  if (item.status === FlashSaleStatus.ENDED) return 'header--ended'
+  return 'header--active'
+}
+
+function stockPercent(item: FlashSaleAdminItem): string {
+  return getStockPercent(item.soldCount, item.totalStock)
+}
+
+// ─── Modal ────────────────────────────────────────────
+function openAdd() {
+  editTarget.value = null
+  form.value = defaultForm()
+  showModal.value = true
+}
+
+function openEdit(item: FlashSaleAdminItem) {
+  editTarget.value = item
+  const startDt = new Date(item.startTime)
+  const endDt = new Date(item.endTime)
+  const ctIdx = cardTypes.value.findIndex((ct) => ct.id === item.cardTypeId)
+
+  form.value = {
+    cardTypeIdx: ctIdx >= 0 ? ctIdx : 0,
+    title: item.title,
+    originalPriceStr: String(item.originalPrice / 100),
+    flashPriceStr: String(item.flashPrice / 100),
+    totalStockStr: String(item.totalStock),
+    startDate: formatDateLocal(startDt),
+    startTimeStr: formatTimeLocal(startDt),
+    endDate: formatDateLocal(endDt),
+    endTimeStr: formatTimeLocal(endDt),
+    sortOrderStr: String(item.sortOrder),
+    description: item.description ?? '',
+  }
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editTarget.value = null
+}
+
+function onCardTypeChange(e: { detail: { value: number } }) {
+  const idx = Number(e.detail.value)
+  form.value.cardTypeIdx = idx
+  // Auto-fill original price from card type
+  const ct = cardTypes.value[idx]
+  if (ct && !form.value.originalPriceStr) {
+    form.value.originalPriceStr = String(Number(ct.price) / 100)
+  }
+}
+
+function onStartDateChange(e: { detail: { value: string } }) {
+  form.value.startDate = e.detail.value
+}
+function onStartTimeChange(e: { detail: { value: string } }) {
+  form.value.startTimeStr = e.detail.value
+}
+function onEndDateChange(e: { detail: { value: string } }) {
+  form.value.endDate = e.detail.value
+}
+function onEndTimeChange(e: { detail: { value: string } }) {
+  form.value.endTimeStr = e.detail.value
+}
+
+// ─── Form submit ──────────────────────────────────────
+async function submitForm() {
+  if (submitting.value) return
+
+  if (!form.value.title.trim()) {
+    uni.showToast({ title: '请填写活动标题', icon: 'none' }); return
+  }
+  const originalPrice = parseFloat(form.value.originalPriceStr)
+  if (isNaN(originalPrice) || originalPrice <= 0) {
+    uni.showToast({ title: '请填写有效原价', icon: 'none' }); return
+  }
+  const flashPrice = parseFloat(form.value.flashPriceStr)
+  if (isNaN(flashPrice) || flashPrice <= 0) {
+    uni.showToast({ title: '请填写有效秒杀价', icon: 'none' }); return
+  }
+  const totalStock = parseInt(form.value.totalStockStr, 10)
+  if (isNaN(totalStock) || totalStock < 1) {
+    uni.showToast({ title: '请填写有效库存', icon: 'none' }); return
+  }
+  if (!form.value.startDate || !form.value.startTimeStr) {
+    uni.showToast({ title: '请选择开始时间', icon: 'none' }); return
+  }
+  if (!form.value.endDate || !form.value.endTimeStr) {
+    uni.showToast({ title: '请选择结束时间', icon: 'none' }); return
+  }
+
+  const startTime = `${form.value.startDate}T${form.value.startTimeStr}:00`
+  const endTime = `${form.value.endDate}T${form.value.endTimeStr}:00`
+
+  if (new Date(endTime) <= new Date(startTime)) {
+    uni.showToast({ title: '结束时间须晚于开始时间', icon: 'none' }); return
+  }
+
+  submitting.value = true
+  try {
+    if (editTarget.value) {
+      await adminStore.updateFlashSale(editTarget.value.id, {
+        title: form.value.title.trim(),
+        originalPrice: Math.round(originalPrice * 100),
+        flashPrice: Math.round(flashPrice * 100),
+        totalStock,
+        startTime,
+        endTime,
+        description: form.value.description.trim() || undefined,
+        sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
+      })
+    } else {
+      const selectedCardType = cardTypes.value[form.value.cardTypeIdx]
+      if (!selectedCardType) {
+        uni.showToast({ title: '请选择卡种', icon: 'none' }); return
+      }
+      await adminStore.createFlashSale({
+        cardTypeId: selectedCardType.id,
+        title: form.value.title.trim(),
+        originalPrice: Math.round(originalPrice * 100),
+        flashPrice: Math.round(flashPrice * 100),
+        totalStock,
+        startTime,
+        endTime,
+        description: form.value.description.trim() || undefined,
+        sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
+      })
+    }
+    uni.showToast({ title: '保存成功', icon: 'success' })
+    closeModal()
+    await reloadSales()
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : '保存失败'
+    uni.showToast({ title: msg, icon: 'none' })
+  } finally {
+    submitting.value = false
+  }
+}
+
+// ─── Actions ──────────────────────────────────────────
+function confirmActivate(item: FlashSaleAdminItem) {
+  uni.showModal({
+    title: '确认上线',
+    content: `上线后「${item.title}」将对用户可见，到达秒杀时间后用户可抢购。`,
+    confirmText: '上线',
+    confirmColor: '#27ae60',
+    success: async (res) => {
+      if (!res.confirm) return
+      uni.showLoading({ title: '上线中...' })
+      try {
+        await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ACTIVE })
+        uni.hideLoading()
+        uni.showToast({ title: '已上线', icon: 'success' })
+        await reloadSales()
+      } catch {
+        uni.hideLoading()
+        uni.showToast({ title: '上线失败', icon: 'none' })
+      }
+    },
+  })
+}
+
+function confirmEnd(item: FlashSaleAdminItem) {
+  uni.showModal({
+    title: '确认结束',
+    content: `结束后「${item.title}」将停止售卖，已购买的不受影响。`,
+    confirmText: '结束',
+    confirmColor: '#e67e22',
+    success: async (res) => {
+      if (!res.confirm) return
+      uni.showLoading({ title: '结束中...' })
+      try {
+        await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ENDED })
+        uni.hideLoading()
+        uni.showToast({ title: '已结束', icon: 'success' })
+        await reloadSales()
+      } catch {
+        uni.hideLoading()
+        uni.showToast({ title: '操作失败', icon: 'none' })
+      }
+    },
+  })
+}
+
+function confirmDelete(item: FlashSaleAdminItem) {
+  uni.showModal({
+    title: '确认删除',
+    content: `确定删除「${item.title}」？此操作不可恢复。`,
+    confirmText: '删除',
+    confirmColor: '#c0392b',
+    success: async (res) => {
+      if (!res.confirm) return
+      uni.showLoading({ title: '删除中...' })
+      try {
+        await adminStore.deleteFlashSale(item.id)
+        uni.hideLoading()
+        uni.showToast({ title: '已删除', icon: 'success' })
+        await reloadSales()
+      } catch {
+        uni.hideLoading()
+        uni.showToast({ title: '删除失败', icon: 'none' })
+      }
+    },
+  })
+}
+
+// ─── Lifecycle ────────────────────────────────────────
+onMounted(loadData)
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: #f5f3f0;
+  padding-bottom: 40rpx;
+}
+
+/* ── Toolbar ─────────────────────────────── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 24rpx 16rpx;
+}
+
+.toolbar-hint { font-size: 24rpx; color: #999; }
+
+.add-btn {
+  background: linear-gradient(135deg, #D4A59A, #C08B7E);
+  border-radius: 32rpx;
+  padding: 12rpx 28rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.add-btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
+
+/* ── Skeleton ────────────────────────────── */
+.skeleton-list { padding: 0 24rpx; }
+
+.skeleton-item {
+  height: 300rpx;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background-size: 400% 100%;
+  animation: shimmer 1.4s infinite;
+}
+
+/* ── Empty ───────────────────────────────── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100rpx 0;
+  gap: 20rpx;
+}
+
+.empty-icon { font-size: 80rpx; }
+.empty-text { font-size: 28rpx; color: #bbb; }
+
+/* ── Flash sale list ─────────────────────── */
+.fs-list { padding: 0 24rpx; }
+
+.fs-card {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+.fs-header {
+  padding: 20rpx 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header--active { background: linear-gradient(90deg, #D4A59A, #C08B7E); }
+.header--draft { background: linear-gradient(90deg, #AEA49A, #9E948A); }
+.header--ended { background: linear-gradient(90deg, #B0A898, #9A928A); }
+
+.fs-header-left { flex: 1; min-width: 0; }
+
+.fs-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fs-status-tag {
+  border-radius: 20rpx;
+  padding: 4rpx 16rpx;
+  flex-shrink: 0;
+  margin-left: 12rpx;
+}
+
+.tag--ongoing { background: rgba(255, 255, 255, 0.3); }
+.tag--upcoming { background: rgba(255, 255, 255, 0.2); }
+.tag--soldout { background: rgba(0, 0, 0, 0.2); }
+.tag--ended { background: rgba(0, 0, 0, 0.3); }
+
+.fs-status-text { font-size: 20rpx; color: #fff; font-weight: 600; }
+
+.fs-body { padding: 24rpx; }
+
+.fs-info-row { margin-bottom: 16rpx; }
+
+.fs-card-type { font-size: 24rpx; color: #888; }
+
+.fs-price-row {
+  display: flex;
+  gap: 32rpx;
+  margin-bottom: 16rpx;
+}
+
+.fs-price-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.fs-price-label { font-size: 20rpx; color: #aaa; }
+
+.fs-price-value {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #333;
+
+  &.flash { color: #B5725E; }
+  &.original { color: #aaa; text-decoration: line-through; font-weight: 400; }
+}
+
+/* Stock progress bar */
+.fs-stock-bar {
+  height: 8rpx;
+  background: #f0f0f0;
+  border-radius: 4rpx;
+  overflow: hidden;
+  margin-bottom: 12rpx;
+}
+
+.fs-stock-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #D4A59A, #C08B7E);
+  border-radius: 4rpx;
+  transition: width 0.3s;
+}
+
+.fs-time-row { margin-top: 4rpx; }
+
+.fs-time { font-size: 22rpx; color: #999; }
+
+/* ── Actions ─────────────────────────────── */
+.fs-actions {
+  display: flex;
+  border-top: 1rpx solid #f5f5f5;
+}
+
+.fs-action-btn {
+  flex: 1;
+  padding: 20rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1rpx solid #f5f5f5;
+
+  &:last-child { border-right: none; }
+  &:active { background: #f9f9f9; }
+}
+
+.fs-action-text { font-size: 26rpx; font-weight: 600; }
+
+.edit-btn .fs-action-text { color: #1a1a2e; }
+.activate-btn .fs-action-text { color: #27ae60; }
+.end-btn .fs-action-text { color: #e67e22; }
+.delete-btn .fs-action-text { color: #c0392b; }
+
+/* ── Modal ───────────────────────────────── */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1000;
+}
+
+.modal-container {
+  width: 100%;
+  max-height: 85vh;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-scroll { flex: 1; max-height: 85vh; }
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 32rpx 16rpx;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 10;
+}
+
+.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a2e; }
+
+.modal-close {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  border-radius: 50%;
+}
+
+.modal-close-icon { font-size: 24rpx; color: #999; }
+
+.modal-body { padding: 0 32rpx; }
+
+.modal-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+  gap: 16rpx;
+
+  &--last { border-bottom: none; align-items: flex-start; }
+}
+
+.modal-label { font-size: 26rpx; color: #555; width: 160rpx; flex-shrink: 0; }
+
+.modal-input { flex: 1; text-align: right; font-size: 26rpx; color: #222; }
+
+.picker-display { display: flex; align-items: center; gap: 8rpx; }
+.picker-text { font-size: 26rpx; color: #222; }
+.picker-arrow { font-size: 26rpx; color: #bbb; }
+
+.datetime-picker-group {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.datetime-text {
+  font-size: 26rpx;
+  color: #222;
+  padding: 8rpx 16rpx;
+  background: #f8f8f8;
+  border-radius: 8rpx;
+}
+
+.modal-textarea {
+  flex: 1;
+  font-size: 26rpx;
+  color: #222;
+  min-height: 80rpx;
+  text-align: right;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 16rpx;
+  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+  background: #fff;
+}
+
+.modal-cancel {
+  flex: 1;
+  height: 88rpx;
+  background: #f0f0f0;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active { background: #e8e8e8; }
+}
+
+.modal-cancel-text { font-size: 28rpx; color: #555; }
+
+.modal-confirm {
+  flex: 2;
+  height: 88rpx;
+  background: linear-gradient(90deg, #D4A59A, #C08B7E);
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active { opacity: 0.85; }
+  &--loading { opacity: 0.6; pointer-events: none; }
+}
+
+.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #fff; }
+</style>
diff --git a/packages/app/src/pages/admin/index.vue b/packages/app/src/pages/admin/index.vue
index 03c602e..9da3ef8 100644
--- a/packages/app/src/pages/admin/index.vue
+++ b/packages/app/src/pages/admin/index.vue
@@ -131,6 +131,21 @@
           <text class="arrow-text">›</text>
         </view>
       </view>
+
+      <view class="list-item" @tap="navigate('/pages/admin/flash-sales')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--flash-sale">
+            <text class="item-icon-text">◈</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">秒杀管理</text>
+            <text class="item-desc">创建和管理限时秒杀活动</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
     </view>
 
     <!-- Section header: 系统 -->
@@ -330,6 +345,7 @@ onMounted(() => {
 .icon--members  { background: linear-gradient(135deg, $primary-color, $primary-dark); }
 .icon--orders   { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
 .icon--card     { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
+.icon--flash-sale { background: linear-gradient(135deg, #D4A59A, #C08B7E); }
 .icon--studio   { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
 
 .item-text-group {
diff --git a/packages/app/src/pages/card/detail.vue b/packages/app/src/pages/card/detail.vue
index c43de26..35978e3 100644
--- a/packages/app/src/pages/card/detail.vue
+++ b/packages/app/src/pages/card/detail.vue
@@ -37,28 +37,10 @@
           class="card-row"
           @tap="goToDetail(c.id)"
         >
-          <!-- Card Cover — horizontal -->
+          <!-- Card Cover — clean minimal -->
           <view class="card-cover" :class="getCardCoverClass(c.type)">
-            <view class="cover-accent-bar" />
-            <view class="cover-deco cover-deco--tl" />
-            <view class="cover-deco cover-deco--br" />
-            <view class="cover-icon" :class="`cover-icon--${c.type}`" />
-            <view class="cover-content">
-              <view class="cover-badge">
-                <text class="cover-badge-text">{{ getCardTypeLabel(c.type) }}</text>
-              </view>
-              <text class="cover-name">{{ c.name }}</text>
-              <view class="cover-price-row">
-                <text class="cover-currency">¥</text>
-                <text class="cover-price">{{ formatPrice(c.price) }}</text>
-              </view>
-              <text
-                v-if="c.originalPrice && c.originalPrice > c.price"
-                class="cover-original"
-              >
-                ¥{{ formatPrice(c.originalPrice) }}
-              </text>
-            </view>
+            <view class="cover-deco cover-deco--1" />
+            <view class="cover-deco cover-deco--2" />
           </view>
 
           <!-- Card info — aligns with card-cover height -->
@@ -461,15 +443,15 @@ onMounted(() => {
   overflow: hidden;
 
   &.hero--times {
-    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
+    background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
   }
 
   &.hero--duration {
-    background: linear-gradient(135deg, #6c3483 0%, #9b59b6 100%);
+    background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
   }
 
   &.hero--trial {
-    background: linear-gradient(135deg, #5a7a8a 0%, $primary-dark 100%);
+    background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
   }
 }
 
@@ -477,7 +459,7 @@ onMounted(() => {
 .hero-deco {
   position: absolute;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.35);
   pointer-events: none;
 
   &--1 {
@@ -499,14 +481,14 @@ onMounted(() => {
   align-self: flex-start;
   padding: 8rpx 22rpx;
   border-radius: 20rpx;
-  background: rgba(255, 255, 255, 0.18);
-  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  background: rgba(74, 64, 53, 0.1);
+  border: 1rpx solid rgba(74, 64, 53, 0.15);
   z-index: 1;
 }
 
 .hero-badge-text {
   font-size: 22rpx;
-  color: #fff;
+  color: $brand-color;
   font-weight: 600;
   letter-spacing: 1rpx;
 }
@@ -514,7 +496,7 @@ onMounted(() => {
 .hero-name {
   font-size: 48rpx;
   font-weight: 800;
-  color: #fff;
+  color: $brand-color;
   letter-spacing: 1rpx;
   z-index: 1;
 }
@@ -529,20 +511,20 @@ onMounted(() => {
 .hero-currency {
   font-size: 28rpx;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(74, 64, 53, 0.7);
   line-height: 1;
 }
 
 .hero-price {
   font-size: 64rpx;
   font-weight: 800;
-  color: #fff;
+  color: $brand-color;
   line-height: 1;
 }
 
 .hero-original {
   font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(74, 64, 53, 0.4);
   text-decoration: line-through;
   margin-left: 8rpx;
 }
@@ -575,7 +557,7 @@ onMounted(() => {
 .section-title {
   font-size: 30rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: $text-primary;
 }
 
 /* ── Info grid card ──────────────────────────────────── */
@@ -741,239 +723,49 @@ onMounted(() => {
 }
 
 /* ══════════════════════════════════════════════════════════
-   CARD COVER — Horizontal premium card design
+   CARD COVER — Clean minimal design
    ══════════════════════════════════════════════════════════ */
 .card-cover {
-  width: 240rpx;
+  width: 200rpx;
   height: 130rpx;
   border-radius: 16rpx;
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -20rpx;
-    left: -20rpx;
-    right: -20rpx;
-    bottom: -20rpx;
-    background: inherit;
-    filter: blur(24rpx) brightness(0.8);
-    z-index: 0;
-    opacity: 0.4;
-  }
-}
-
-.cover-accent-bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 6rpx;
-  background: rgba(255, 255, 255, 0.4);
-  z-index: 1;
 }
 
 .cover-deco {
   position: absolute;
   border-radius: 50%;
-  z-index: 0;
   pointer-events: none;
 
-  &--tl {
-    width: 60rpx;
-    height: 60rpx;
-    top: -16rpx;
-    right: 20rpx;
-    background: rgba(255, 255, 255, 0.1);
+  &--1 {
+    width: 100rpx;
+    height: 100rpx;
+    top: -30rpx;
+    right: -20rpx;
+    background: rgba(255, 255, 255, 0.4);
   }
 
-  &--br {
-    width: 80rpx;
-    height: 80rpx;
-    bottom: -24rpx;
-    left: -16rpx;
-    background: rgba(255, 255, 255, 0.07);
-  }
-}
-
-.cover-icon {
-  width: 52rpx;
-  height: 52rpx;
-  position: relative;
-  z-index: 2;
-  flex-shrink: 0;
-  margin-left: 20rpx;
-}
-
-.cover-icon--TIMES {
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 36rpx;
-    height: 24rpx;
-    border: 2rpx solid rgba(255, 255, 255, 0.85);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 0.12);
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 10rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 36rpx;
-    height: 24rpx;
-    border: 2rpx solid rgba(255, 255, 255, 1);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 0.2);
-  }
-}
-
-.cover-icon--DURATION {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 36rpx;
-    height: 30rpx;
-    border: 2rpx solid rgba(255, 255, 255, 0.9);
-    border-radius: 5rpx;
-    box-sizing: border-box;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 9rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 24rpx;
-    height: 0;
-    border-top: 2rpx solid rgba(255, 255, 255, 1);
-    box-shadow:
-      -6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9),
-      6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9);
-  }
-}
-
-.cover-icon--TRIAL {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 16rpx;
-    height: 16rpx;
-    border: 2rpx solid rgba(255, 255, 255, 1);
-    border-radius: 50%;
-    box-sizing: border-box;
+  &--2 {
+    width: 70rpx;
+    height: 70rpx;
+    bottom: -20rpx;
+    left: -10rpx;
     background: rgba(255, 255, 255, 0.25);
   }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2rpx;
-    height: 42rpx;
-    background: rgba(255, 255, 255, 0.8);
-    box-shadow:
-      0 -12rpx 0 0 rgba(255, 255, 255, 0.8),
-      0 12rpx 0 0 rgba(255, 255, 255, 0.8),
-      -12rpx 0 0 0 rgba(255, 255, 255, 0.8),
-      12rpx 0 0 0 rgba(255, 255, 255, 0.8),
-      -8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
-      8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
-      -8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8),
-      8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8);
-  }
 }
 
 .cover--times {
-  background: linear-gradient(135deg, #1e2340 0%, #2d2d5e 50%, #3a3a7a 100%);
+  background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
 }
 
 .cover--duration {
-  background: linear-gradient(135deg, #4a1a6b 0%, #6c3483 50%, #8e4aaf 100%);
+  background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
 }
 
 .cover--trial {
-  background: linear-gradient(135deg, #14527a 0%, #1a6fa0 50%, #48a9a6 100%);
-}
-
-.cover-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0 16rpx 0 12rpx;
-  gap: 4rpx;
-  z-index: 2;
-}
-
-.cover-badge {
-  padding: 3rpx 10rpx;
-  border-radius: 8rpx;
-  background: rgba(255, 255, 255, 0.18);
-  border: 1rpx solid rgba(255, 255, 255, 0.28);
-}
-
-.cover-badge-text {
-  font-size: 16rpx;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 600;
-}
-
-.cover-name {
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #ffffff;
-  letter-spacing: 0.5rpx;
-  line-height: 1.2;
-  max-width: 130rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cover-price-row {
-  display: flex;
-  align-items: baseline;
-  gap: 2rpx;
-}
-
-.cover-currency {
-  font-size: 18rpx;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.cover-price {
-  font-size: 28rpx;
-  font-weight: 800;
-  color: #ffffff;
-  line-height: 1;
-}
-
-.cover-original {
-  font-size: 16rpx;
-  color: rgba(255, 255, 255, 0.5);
-  text-decoration: line-through;
+  background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
 }
 
 /* ── Card info — matches card-cover height ── */
diff --git a/packages/app/src/pages/flash-sale/detail.vue b/packages/app/src/pages/flash-sale/detail.vue
new file mode 100644
index 0000000..b5100e1
--- /dev/null
+++ b/packages/app/src/pages/flash-sale/detail.vue
@@ -0,0 +1,837 @@
+<template>
+  <view class="page" :style="{ paddingTop: navBarHeight }">
+    <CustomNavBar title="限时秒杀" show-back />
+
+    <!-- Loading -->
+    <view v-if="loading" class="loading-wrap">
+      <view class="skeleton-hero" />
+      <view class="skeleton-body">
+        <view class="skeleton-line w80" />
+        <view class="skeleton-line w60" />
+        <view class="skeleton-line w40" />
+      </view>
+    </view>
+
+    <!-- Error -->
+    <view v-else-if="!detail" class="error-wrap">
+      <text class="error-icon">◈</text>
+      <text class="error-text">活动信息加载失败</text>
+      <view class="retry-btn" @tap="loadDetail">
+        <text class="retry-text">点击重试</text>
+      </view>
+    </view>
+
+    <template v-else>
+      <!-- ═══ Hero Section ═══ -->
+      <view class="hero" :class="heroPhaseClass">
+        <!-- Decorative elements -->
+        <view class="hero-deco hero-deco--1" />
+        <view class="hero-deco hero-deco--2" />
+        <view class="hero-deco hero-deco--3" />
+
+        <!-- Phase badge -->
+        <view class="hero-phase-badge" :class="phaseBadgeClass">
+          <text class="hero-phase-text">{{ phaseLabel }}</text>
+        </view>
+
+        <!-- Title -->
+        <text class="hero-title">{{ detail.title }}</text>
+
+        <!-- Price row -->
+        <view class="hero-price-row">
+          <text class="hero-currency">¥</text>
+          <text class="hero-price">{{ formatPrice(detail.flashPrice) }}</text>
+          <view class="hero-original-wrap">
+            <text class="hero-original-label">原价</text>
+            <text class="hero-original">¥{{ formatPrice(detail.originalPrice) }}</text>
+          </view>
+        </view>
+
+        <!-- Discount badge -->
+        <view class="hero-discount-badge">
+          <text class="hero-discount-text">立省 ¥{{ formatPrice(detail.originalPrice - detail.flashPrice) }}</text>
+        </view>
+
+        <!-- Countdown -->
+        <view
+          v-if="detail.phase === FlashSalePhase.UPCOMING || detail.phase === FlashSalePhase.ONGOING"
+          class="hero-countdown"
+        >
+          <text class="cd-label">
+            {{ detail.phase === FlashSalePhase.UPCOMING ? '距开始' : '距结束' }}
+          </text>
+          <view class="cd-blocks">
+            <text class="cd-block">{{ countdown.h }}</text>
+            <text class="cd-colon">:</text>
+            <text class="cd-block">{{ countdown.m }}</text>
+            <text class="cd-colon">:</text>
+            <text class="cd-block">{{ countdown.s }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- ═══ Stock Bar ═══ -->
+      <view class="stock-section">
+        <view class="stock-info">
+          <text class="stock-label">抢购进度</text>
+          <text class="stock-count">
+            {{ detail.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `已抢 ${detail.soldCount}/${detail.totalStock}` }}
+          </text>
+        </view>
+        <view class="stock-bar">
+          <view
+            class="stock-fill"
+            :class="{ 'stock-fill--hot': stockRatio > 0.6 }"
+            :style="{ width: stockPercent }"
+          />
+        </view>
+      </view>
+
+      <!-- ═══ Phone Auth Prompt ═══ -->
+      <view
+        v-if="userStore.loggedIn && !userStore.user?.phone"
+        class="phone-prompt-card"
+      >
+        <view class="phone-prompt-content">
+          <view class="phone-prompt-icon">📱</view>
+          <view class="phone-prompt-text">
+            <text class="phone-prompt-title">提前授权手机号</text>
+            <text class="phone-prompt-desc">授权后抢购更快，也方便馆主联系您</text>
+          </view>
+        </view>
+        <button
+          class="phone-auth-btn"
+          open-type="getPhoneNumber"
+          @getphonenumber="handleGetPhone"
+        >
+          <text class="phone-auth-text">立即授权</text>
+        </button>
+      </view>
+
+      <!-- ═══ Card Info ═══ -->
+      <view class="detail-section">
+        <view class="info-card">
+          <view class="section-header-row">
+            <view class="section-dot" />
+            <text class="section-label">会员卡信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-cell">
+              <text class="cell-value">{{ detail.cardType.name }}</text>
+              <text class="cell-label">卡种</text>
+            </view>
+            <view v-if="detail.cardType.totalTimes" class="info-cell">
+              <text class="cell-value">{{ detail.cardType.totalTimes }}</text>
+              <text class="cell-label">课时次数</text>
+            </view>
+            <view class="info-cell">
+              <text class="cell-value">{{ detail.cardType.durationDays }}</text>
+              <text class="cell-label">有效天数</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- Description -->
+        <view v-if="detail.description" class="desc-card">
+          <view class="section-header-row">
+            <view class="section-dot" />
+            <text class="section-label">活动说明</text>
+          </view>
+          <text class="desc-content">{{ detail.description }}</text>
+        </view>
+
+        <!-- Purchase Notes -->
+        <view class="notes-card">
+          <view class="section-header-row">
+            <view class="section-dot" />
+            <text class="section-label">参与须知</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">每位用户同一秒杀活动仅限参与一次</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">购买后立即生效，有效期 {{ detail.cardType.durationDays }} 天</text>
+          </view>
+          <view v-if="detail.cardType.totalTimes" class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">共 {{ detail.cardType.totalTimes }} 次课时，可灵活预约</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">需登录并授权手机号后方可参与秒杀</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">建议提前完善账号信息及手机号授权，方便馆主联系</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">秒杀卡不可退款，到期或课时用完后自动失效</text>
+          </view>
+          <view class="note-item">
+            <text class="note-dot">•</text>
+            <text class="note-text">支持微信支付，安全便捷</text>
+          </view>
+          <view class="note-item note-item--disclaimer">
+            <text class="note-text disclaimer-text">* 本活动最终解释权归普拉提馆所有</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- ═══ Bottom Action Bar ═══ -->
+      <view class="bottom-bar">
+        <view class="bar-price-area">
+          <text class="bar-price-label">秒杀价</text>
+          <view class="bar-price-row">
+            <text class="bar-currency">¥</text>
+            <text class="bar-price">{{ formatPrice(detail.flashPrice) }}</text>
+          </view>
+        </view>
+        <view
+          class="action-btn"
+          :class="actionBtnClass"
+          @tap="handleAction"
+        >
+          <text class="action-btn-text">{{ actionBtnText }}</text>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import {
+  FlashSalePhase,
+  FlashSaleOrderStatus,
+} from '@mp-pilates/shared'
+import type { FlashSaleDetail } from '@mp-pilates/shared'
+import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../../utils/format'
+import { getSystemLayout } from '../../utils/system'
+import { useUserStore } from '../../stores/user'
+import { useFlashSaleStore } from '../../stores/flash-sale'
+import CustomNavBar from '../../components/CustomNavBar.vue'
+import { post } from '../../utils/request'
+
+const userStore = useUserStore()
+const flashSaleStore = useFlashSaleStore()
+
+const navBarHeight = ref('64px')
+const loading = ref(false)
+const buying = ref(false)
+const detail = ref<FlashSaleDetail | null>(null)
+const flashSaleId = ref('')
+const tick = ref(0)
+
+let timer: ReturnType<typeof setInterval> | null = null
+
+// ─── Computed ─────────────────────────────────────────
+const phaseLabel = computed(() => {
+  if (!detail.value) return ''
+  return getFlashSalePhaseLabel(detail.value.phase)
+})
+
+const heroPhaseClass = computed(() => {
+  if (!detail.value) return ''
+  if (detail.value.phase === FlashSalePhase.ONGOING) return 'hero--ongoing'
+  if (detail.value.phase === FlashSalePhase.UPCOMING) return 'hero--upcoming'
+  return 'hero--inactive'
+})
+
+const phaseBadgeClass = computed(() => {
+  if (!detail.value) return ''
+  if (detail.value.phase === FlashSalePhase.ONGOING) return 'pbadge--ongoing'
+  if (detail.value.phase === FlashSalePhase.UPCOMING) return 'pbadge--upcoming'
+  return 'pbadge--inactive'
+})
+
+const stockRatio = computed(() => {
+  if (!detail.value) return 0
+  return getStockRatio(detail.value.soldCount, detail.value.totalStock)
+})
+
+const stockPercent = computed(() => {
+  if (!detail.value) return '0%'
+  return getStockPercent(detail.value.soldCount, detail.value.totalStock)
+})
+
+const countdown = computed(() => {
+  void tick.value
+  if (!detail.value) return { h: '00', m: '00', s: '00' }
+  const target = detail.value.phase === FlashSalePhase.UPCOMING
+    ? detail.value.startTime
+    : detail.value.endTime
+  return getCountdownParts(target)
+})
+
+const isDisabled = computed(() => {
+  if (!detail.value) return true
+  const d = detail.value
+  if (d.hasParticipated) return true
+  if (d.phase === FlashSalePhase.SOLD_OUT) return true
+  if (d.phase === FlashSalePhase.ENDED) return true
+  if (d.phase === FlashSalePhase.UPCOMING) return true
+  if (buying.value) return true
+  return false
+})
+
+const actionBtnText = computed(() => {
+  if (!detail.value) return ''
+  const d = detail.value
+
+  if (d.hasParticipated) {
+    if (d.userOrderStatus === FlashSaleOrderStatus.PAID) return '已成功抢购'
+    if (d.userOrderStatus === FlashSaleOrderStatus.RESERVED) return '待支付'
+    return '已参与'
+  }
+  if (d.phase === FlashSalePhase.SOLD_OUT) return '已售罄'
+  if (d.phase === FlashSalePhase.ENDED) return '活动已结束'
+  if (d.phase === FlashSalePhase.UPCOMING) return `距开始 ${countdown.value.h}:${countdown.value.m}:${countdown.value.s}`
+
+  if (!userStore.loggedIn) return '登录后参与'
+  if (!userStore.user?.phone) return '授权手机号后参与'
+  if (buying.value) return '抢购中...'
+  return `¥${formatPrice(d.flashPrice)} 立即抢购`
+})
+
+const actionBtnClass = computed(() => {
+  if (isDisabled.value) return 'action-btn--disabled'
+  return 'action-btn--active'
+})
+
+// ─── Data loading ────────────────────────────────────
+async function loadDetail() {
+  if (!flashSaleId.value) return
+  loading.value = true
+  try {
+    detail.value = await flashSaleStore.fetchDetail(flashSaleId.value)
+  } catch {
+    detail.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+// ─── Phone auth ──────────────────────────────────────
+async function handleGetPhone(e: { detail: { code?: string; errMsg?: string } }) {
+  if (!e.detail.code) return
+  try {
+    await post('/auth/phone', { code: e.detail.code })
+    await userStore.fetchProfile()
+    uni.showToast({ title: '授权成功', icon: 'success' })
+  } catch {
+    uni.showToast({ title: '授权失败，请重试', icon: 'none' })
+  }
+}
+
+// ─── Action handler ──────────────────────────────────
+async function handleAction() {
+  if (!detail.value || isDisabled.value) return
+
+  // Check login
+  if (!userStore.loggedIn) {
+    uni.showModal({
+      title: '提示',
+      content: '请先登录后再参与秒杀',
+      confirmText: '去登录',
+      success: async (res) => {
+        if (res.confirm) {
+          try {
+            const { isNewUser } = await userStore.loginWithSetup()
+            if (!isNewUser) {
+              await loadDetail() // refresh participation status
+            }
+          } catch {
+            uni.showToast({ title: '登录失败', icon: 'none' })
+          }
+        }
+      },
+    })
+    return
+  }
+
+  // Check phone
+  if (!userStore.user?.phone) {
+    uni.showToast({ title: '请先授权手机号', icon: 'none' })
+    return
+  }
+
+  // Confirm purchase
+  uni.showModal({
+    title: '确认抢购',
+    content: `确认以 ¥${formatPrice(detail.value.flashPrice)} 抢购「${detail.value.title}」？`,
+    confirmText: '确认抢购',
+    success: async (res) => {
+      if (res.confirm) {
+        await doPurchase()
+      }
+    },
+  })
+}
+
+async function doPurchase() {
+  if (!detail.value || buying.value) return
+  buying.value = true
+  uni.showLoading({ title: '抢购中...' })
+
+  try {
+    const result = await flashSaleStore.purchase(detail.value.id)
+
+    uni.hideLoading()
+
+    // Launch WeChat Pay
+    await new Promise<void>((resolve, reject) => {
+      uni.requestPayment({
+        provider: 'wxpay',
+        timeStamp: result.paymentParams.timeStamp,
+        nonceStr: result.paymentParams.nonceStr,
+        package: result.paymentParams.package,
+        signType: result.paymentParams.signType as 'MD5' | 'HMAC-SHA256',
+        paySign: result.paymentParams.paySign,
+        success: () => resolve(),
+        fail: (err: { errMsg?: string }) => reject(new Error(err.errMsg ?? '支付取消')),
+      })
+    })
+
+    uni.showToast({ title: '抢购成功！', icon: 'success' })
+    await userStore.fetchMemberships()
+    await loadDetail() // refresh status
+
+    setTimeout(() => {
+      uni.navigateTo({ url: '/pages/profile/membership' })
+    }, 1500)
+  } catch (err: unknown) {
+    uni.hideLoading()
+    const msg = err instanceof Error ? err.message : '抢购失败'
+    if (!msg.includes('取消') && !msg.includes('cancel')) {
+      uni.showToast({ title: msg, icon: 'none', duration: 3000 })
+    }
+    // Refresh detail to show updated status
+    await loadDetail()
+  } finally {
+    buying.value = false
+  }
+}
+
+// ─── Lifecycle ───────────────────────────────────────
+onMounted(() => {
+  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
+
+  const pages = getCurrentPages()
+  const current = pages[pages.length - 1]
+  const options = (current as { options?: Record<string, string> }).options ?? {}
+  flashSaleId.value = options.id ?? ''
+  loadDetail()
+
+  timer = setInterval(() => { tick.value++ }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: $bg-page;
+  padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
+}
+
+/* ── Loading ────────────────────────────── */
+.loading-wrap { padding: 0; }
+
+.skeleton-hero {
+  height: 420rpx;
+  background: linear-gradient(90deg, #ede8e3 25%, #e4dfd9 50%, #ede8e3 75%);
+  background-size: 400% 100%;
+  animation: shimmer 1.4s infinite;
+}
+
+.skeleton-body { padding: 32rpx 24rpx; display: flex; flex-direction: column; gap: 20rpx; }
+
+.skeleton-line {
+  height: 28rpx;
+  border-radius: 14rpx;
+  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background-size: 400% 100%;
+  animation: shimmer 1.4s infinite;
+  &.w80 { width: 80%; }
+  &.w60 { width: 60%; }
+  &.w40 { width: 40%; }
+}
+
+/* ── Error ───────────────────────────────── */
+.error-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 160rpx 40rpx;
+  gap: 24rpx;
+}
+
+.error-icon { font-size: 80rpx; }
+.error-text { font-size: 30rpx; color: $text-hint; }
+
+.retry-btn {
+  padding: 20rpx 48rpx;
+  border-radius: 40rpx;
+  background: linear-gradient(135deg, #D4A59A, #C08B7E);
+}
+
+.retry-text { font-size: 28rpx; color: #fff; font-weight: 600; }
+
+/* ═══════════════════════════════════════════
+   HERO — warm blush tones
+   ═══════════════════════════════════════════ */
+.hero {
+  padding: 56rpx 36rpx 48rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero--ongoing {
+  background: linear-gradient(135deg, #D4A59A 0%, #C9948A 35%, #B5836E 100%);
+}
+
+.hero--upcoming {
+  background: linear-gradient(135deg, #8FA89A 0%, #7BA5A0 100%);
+}
+
+.hero--inactive {
+  background: linear-gradient(135deg, #C4BAB0 0%, #AEA49A 100%);
+}
+
+.hero-deco {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+
+  &--1 { width: 300rpx; height: 300rpx; top: -60rpx; right: -40rpx; }
+  &--2 { width: 200rpx; height: 200rpx; bottom: -60rpx; left: 30rpx; }
+  &--3 { width: 120rpx; height: 120rpx; top: 40rpx; left: -30rpx; background: rgba(255, 255, 255, 0.05); }
+}
+
+.hero-phase-badge {
+  align-self: flex-start;
+  padding: 8rpx 24rpx;
+  border-radius: 24rpx;
+  z-index: 1;
+}
+
+.pbadge--ongoing { background: rgba(255, 255, 255, 0.3); }
+.pbadge--upcoming { background: rgba(255, 255, 255, 0.25); }
+.pbadge--inactive { background: rgba(0, 0, 0, 0.12); }
+
+.hero-phase-text { font-size: 24rpx; color: #fff; font-weight: 600; letter-spacing: 1rpx; }
+
+.hero-title {
+  font-size: 44rpx;
+  font-weight: 800;
+  color: #fff;
+  z-index: 1;
+  line-height: 1.2;
+}
+
+.hero-price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 4rpx;
+  z-index: 1;
+}
+
+.hero-currency { font-size: 30rpx; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
+.hero-price { font-size: 72rpx; font-weight: 800; color: #fff; line-height: 1; }
+
+.hero-original-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-left: 16rpx;
+}
+
+.hero-original-label { font-size: 18rpx; color: rgba(255, 255, 255, 0.65); }
+.hero-original { font-size: 26rpx; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
+
+.hero-discount-badge {
+  align-self: flex-start;
+  padding: 6rpx 20rpx;
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 0.22);
+  border: 1rpx solid rgba(255, 255, 255, 0.35);
+  z-index: 1;
+}
+
+.hero-discount-text { font-size: 22rpx; color: #fff; font-weight: 600; }
+
+/* Countdown */
+.hero-countdown {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-top: 8rpx;
+  z-index: 1;
+}
+
+.cd-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.85); }
+
+.cd-blocks { display: flex; align-items: center; gap: 6rpx; }
+
+.cd-block {
+  background: rgba(255, 255, 255, 0.25);
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 700;
+  padding: 8rpx 14rpx;
+  border-radius: 8rpx;
+  font-family: 'DIN Alternate', monospace;
+  min-width: 48rpx;
+  text-align: center;
+  backdrop-filter: blur(4px);
+}
+
+.cd-colon { color: #fff; font-size: 28rpx; font-weight: 700; }
+
+/* ═══════════════════════════════════════════
+   STOCK
+   ═══════════════════════════════════════════ */
+.stock-section {
+  margin: 0 24rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-top: -20rpx;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.1);
+}
+
+.stock-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.stock-label { font-size: 26rpx; color: $text-secondary; font-weight: 600; }
+.stock-count { font-size: 24rpx; color: #B5725E; font-weight: 600; }
+
+.stock-bar {
+  height: 16rpx;
+  background: #f5f0ed;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.stock-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #D4A59A, #C08B7E);
+  border-radius: 8rpx;
+  transition: width 0.3s;
+
+  &--hot { animation: stockPulse 2s ease infinite; }
+}
+
+@keyframes stockPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+/* ═══════════════════════════════════════════
+   PHONE PROMPT
+   ═══════════════════════════════════════════ */
+.phone-prompt-card {
+  margin: 20rpx 24rpx 0;
+  background: linear-gradient(135deg, #FBF5F3, #F5ECEA);
+  border-radius: 20rpx;
+  padding: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1rpx solid rgba(192, 139, 126, 0.2);
+}
+
+.phone-prompt-content {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  flex: 1;
+}
+
+.phone-prompt-icon { font-size: 40rpx; }
+
+.phone-prompt-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.phone-prompt-title { font-size: 26rpx; font-weight: 700; color: #B5725E; }
+.phone-prompt-desc { font-size: 22rpx; color: $text-hint; }
+
+.phone-auth-btn {
+  background: linear-gradient(135deg, #D4A59A, #C08B7E) !important;
+  border-radius: 32rpx !important;
+  padding: 12rpx 28rpx !important;
+  border: none !important;
+  line-height: 1.4 !important;
+  font-size: 24rpx !important;
+  margin: 0 !important;
+  flex-shrink: 0;
+  &::after { border: none; }
+}
+
+.phone-auth-text { font-size: 24rpx; color: #fff; font-weight: 600; }
+
+/* ═══════════════════════════════════════════
+   DETAIL SECTION
+   ═══════════════════════════════════════════ */
+.detail-section {
+  padding: 20rpx 24rpx 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.section-header-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+}
+
+.section-dot {
+  width: 6rpx;
+  height: 28rpx;
+  border-radius: 3rpx;
+  background: #C08B7E;
+  flex-shrink: 0;
+}
+
+.section-label { font-size: 30rpx; font-weight: 700; color: $text-primary; }
+
+/* Info card */
+.info-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
+}
+
+.info-grid {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.info-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  flex: 1;
+  position: relative;
+
+  & + & { border-left: 1rpx solid #f0ece8; }
+}
+
+.cell-value { font-size: 36rpx; font-weight: 800; color: $text-primary; line-height: 1.1; }
+.cell-label { font-size: 22rpx; color: $text-hint; }
+
+/* Description */
+.desc-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
+}
+
+.desc-content { font-size: 27rpx; color: $text-secondary; line-height: 1.75; }
+
+/* Notes */
+.notes-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
+}
+
+.note-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12rpx;
+  padding: 6rpx 0;
+}
+
+.note-dot { font-size: 26rpx; color: #C08B7E; line-height: 1.65; flex-shrink: 0; }
+.note-text { font-size: 26rpx; color: $text-secondary; line-height: 1.65; }
+
+.note-item--disclaimer { margin-top: 12rpx; padding-top: 16rpx; border-top: 1rpx solid #f0ece8; }
+.disclaimer-text { color: #bbb; font-size: 22rpx; }
+
+/* ═══════════════════════════════════════════
+   BOTTOM BAR
+   ═══════════════════════════════════════════ */
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1rpx solid #f0ece8;
+  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  box-shadow: 0 -4rpx 20rpx rgba(180, 160, 130, 0.08);
+  z-index: 100;
+}
+
+.bar-price-area {
+  display: flex;
+  flex-direction: column;
+  gap: 2rpx;
+}
+
+.bar-price-label { font-size: 20rpx; color: $text-hint; }
+
+.bar-price-row { display: flex; align-items: baseline; }
+
+.bar-currency { font-size: 24rpx; font-weight: 700; color: #B5725E; }
+.bar-price { font-size: 44rpx; font-weight: 800; color: #B5725E; line-height: 1; }
+
+.action-btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-btn--active {
+  background: linear-gradient(90deg, #D4A59A, #B5836E);
+  box-shadow: 0 4rpx 16rpx rgba(192, 139, 126, 0.35);
+
+  &:active { opacity: 0.85; }
+}
+
+.action-btn--disabled {
+  background: #d0cac4;
+}
+
+.action-btn-text {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 1rpx;
+}
+</style>
diff --git a/packages/app/src/pages/home/index.vue b/packages/app/src/pages/home/index.vue
index e9725c5..9d6f087 100644
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -35,6 +35,9 @@
         <!-- ④ Upcoming Bookings -->
         <UpcomingBooking />
 
+        <!-- ④.5 Flash Sale Section -->
+        <FlashSaleSection ref="flashSaleRef" />
+
         <!-- ⑤ Card Shop (vertical list) -->
         <view :id="cardShopAnchorId">
           <CardShop ref="cardShopRef" />
@@ -55,6 +58,7 @@ import BrandBanner from '../../components/BrandBanner.vue'
 import StudioInfo from '../../components/StudioInfo.vue'
 import QuickEntry from '../../components/QuickEntry.vue'
 import UpcomingBooking from '../../components/UpcomingBooking.vue'
+import FlashSaleSection from '../../components/FlashSaleSection.vue'
 import CardShop from '../../components/CardShop.vue'
 
 import { useUserStore } from '../../stores/user'
@@ -84,6 +88,7 @@ onShareTimeline(() => {
 // ─── Layout ───────────────────────────────────────────────
 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 pendingScrollToCardShop = ref(false)
@@ -121,8 +126,9 @@ async function refreshData() {
 
   await Promise.allSettled(tasks)
 
-  // Also refresh card shop
+  // Also refresh card shop and flash sales
   cardShopRef.value?.fetchCardTypes()
+  flashSaleRef.value?.fetchFlashSales()
 }
 
 async function handleRefresh() {
diff --git a/packages/app/src/pages/profile/membership.vue b/packages/app/src/pages/profile/membership.vue
index 0c746f2..89cc744 100644
--- a/packages/app/src/pages/profile/membership.vue
+++ b/packages/app/src/pages/profile/membership.vue
@@ -1,7 +1,6 @@
 <template>
   <view class="membership-page" :style="{ paddingTop: navBarHeight }">
     <CustomNavBar title="我的会员卡" show-back />
-    <!-- Pull-to-refresh scroll view -->
     <scroll-view
       class="scroll"
       scroll-y
@@ -16,11 +15,14 @@
 
       <!-- Empty state -->
       <view v-else-if="allMemberships.length === 0" class="empty-wrap">
-        <text class="empty-icon">💳</text>
-        <text class="empty-title">暂无会员卡</text>
-        <text class="empty-sub">购买会员卡后即可预约课程</text>
-        <view class="empty-btn" @tap="goStore">
-          <text class="empty-btn-text">去购买</text>
+        <view class="empty-card">
+          <view class="empty-deco empty-deco--1" />
+          <view class="empty-deco empty-deco--2" />
+          <text class="empty-title">还没有会员卡</text>
+          <text class="empty-sub">购买会员卡后即可预约课程</text>
+          <view class="empty-btn" @tap="goStore">
+            <text class="empty-btn-text">去选购</text>
+          </view>
         </view>
       </view>
 
@@ -29,7 +31,6 @@
         <!-- Active cards -->
         <view v-if="activeMemberships.length > 0" class="group-section">
           <view class="group-header">
-            <view class="group-dot group-dot--active" />
             <text class="group-title">有效会员卡</text>
             <text class="group-count">{{ activeMemberships.length }} 张</text>
           </view>
@@ -37,56 +38,60 @@
           <view
             v-for="m in activeMemberships"
             :key="m.id"
-            class="card-item"
+            class="mc"
+            :class="cardBgClass(m.cardType.type)"
           >
-            <!-- Colored left border strip -->
-            <view class="card-strip" :class="stripClass(m.cardType.type)" />
+            <!-- Decorative circles -->
+            <view class="mc-deco mc-deco--1" />
+            <view class="mc-deco mc-deco--2" />
 
-            <!-- Card header (colored gradient) -->
-            <view class="card-header" :class="headerClass(m.cardType.type)">
-              <view class="card-header-left">
-                <text class="card-name">{{ m.cardType.name }}</text>
-                <view class="card-type-badge">
-                  <text class="card-type-badge-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
+            <!-- Top row: name + status -->
+            <view class="mc-top">
+              <view class="mc-name-area">
+                <text class="mc-name">{{ m.cardType.name }}</text>
+                <view class="mc-type-tag">
+                  <text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
                 </view>
               </view>
-              <view class="status-badge status-badge--active">
-                <text class="status-badge-text">有效</text>
+              <view class="mc-status mc-status--active">
+                <view class="mc-status-dot" />
+                <text class="mc-status-text">有效</text>
               </view>
             </view>
 
-            <!-- Card body -->
-            <view class="card-body">
-              <!-- Times card: remaining times + progress -->
-              <template v-if="m.remainingTimes !== null">
-                <view class="highlight-row">
-                  <text class="highlight-label">剩余课时</text>
-                  <text class="highlight-value">
-                    <text class="highlight-number">{{ m.remainingTimes }}</text>
-                    <text class="highlight-unit"> 次</text>
-                  </text>
+            <!-- Center: highlight number (times card) -->
+            <view v-if="m.remainingTimes !== null" class="mc-center">
+              <text class="mc-big-num">{{ m.remainingTimes }}</text>
+              <text class="mc-big-unit">次剩余</text>
+              <view v-if="m.cardType.totalTimes" class="mc-progress">
+                <view class="mc-progress-track">
+                  <view
+                    class="mc-progress-fill"
+                    :style="{ width: getMembershipProgressWidth(m) }"
+                  />
                 </view>
-                <view v-if="m.cardType.totalTimes" class="progress-wrap">
-                  <view class="progress-bar">
-                    <view
-                      class="progress-fill"
-                      :style="{ width: getMembershipProgressWidth(m) }"
-                    />
-                  </view>
-                  <text class="progress-label">
-                    已使用 {{ getMembershipUsedTimes(m) }} / {{ m.cardType.totalTimes }} 次
-                  </text>
-                </view>
-              </template>
-
-              <!-- Duration card: expiry -->
-              <view class="info-row">
-                <text class="info-label">有效期至</text>
-                <text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
+                <text class="mc-progress-label">
+                  已用 {{ getMembershipUsedTimes(m) }}，共 {{ m.cardType.totalTimes }} 次
+                </text>
               </view>
-              <view class="info-row">
-                <text class="info-label">开始日期</text>
-                <text class="info-value">{{ m.startDate.slice(0, 10) }}</text>
+            </view>
+
+            <!-- Center: duration card (no times) -->
+            <view v-else class="mc-center">
+              <text class="mc-big-num">{{ daysRemaining(m) }}</text>
+              <text class="mc-big-unit">天剩余</text>
+            </view>
+
+            <!-- Bottom: dates -->
+            <view class="mc-bottom">
+              <view class="mc-date-item">
+                <text class="mc-date-label">开始</text>
+                <text class="mc-date-value">{{ m.startDate.slice(0, 10) }}</text>
+              </view>
+              <view class="mc-date-sep" />
+              <view class="mc-date-item">
+                <text class="mc-date-label">到期</text>
+                <text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
               </view>
             </view>
           </view>
@@ -95,7 +100,6 @@
         <!-- Expired / used up cards -->
         <view v-if="inactiveMemberships.length > 0" class="group-section">
           <view class="group-header">
-            <view class="group-dot group-dot--inactive" />
             <text class="group-title">历史记录</text>
             <text class="group-count">{{ inactiveMemberships.length }} 张</text>
           </view>
@@ -103,28 +107,30 @@
           <view
             v-for="m in inactiveMemberships"
             :key="m.id"
-            class="card-item card-item--inactive"
+            class="mc mc--inactive"
           >
-            <view class="card-strip card-strip--inactive" />
-            <view class="card-header card-header--inactive">
-              <view class="card-header-left">
-                <text class="card-name card-name--dim">{{ m.cardType.name }}</text>
-                <view class="card-type-badge card-type-badge--dim">
-                  <text class="card-type-badge-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
+            <view class="mc-deco mc-deco--1" />
+
+            <view class="mc-top">
+              <view class="mc-name-area">
+                <text class="mc-name">{{ m.cardType.name }}</text>
+                <view class="mc-type-tag">
+                  <text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
                 </view>
               </view>
-              <view class="status-badge" :class="statusBadgeClass(m.status)">
-                <text class="status-badge-text">{{ statusLabel(m.status) }}</text>
+              <view class="mc-status" :class="inactiveStatusClass(m.status)">
+                <text class="mc-status-text">{{ statusLabel(m.status) }}</text>
               </view>
             </view>
-            <view class="card-body">
-              <view v-if="m.remainingTimes !== null" class="info-row">
-                <text class="info-label">剩余课时</text>
-                <text class="info-value">{{ m.remainingTimes }} 次</text>
+
+            <view class="mc-inactive-info">
+              <view v-if="m.remainingTimes !== null" class="mc-date-item">
+                <text class="mc-date-label">剩余</text>
+                <text class="mc-date-value">{{ m.remainingTimes }} 次</text>
               </view>
-              <view class="info-row">
-                <text class="info-label">有效期至</text>
-                <text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
+              <view class="mc-date-item">
+                <text class="mc-date-label">有效期至</text>
+                <text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
               </view>
             </view>
           </view>
@@ -136,8 +142,7 @@
 
     <!-- Buy more FAB -->
     <view class="fab" @tap="goStore">
-      <text class="fab-icon">+</text>
-      <text class="fab-text">购买会员卡</text>
+      <text class="fab-text">+ 购买会员卡</text>
     </view>
   </view>
 </template>
@@ -153,13 +158,10 @@ import CustomNavBar from '../../components/CustomNavBar.vue'
 
 const userStore = useUserStore()
 
-// ─── Nav bar height ──────────────────────────────────────
 const navBarHeight = ref('64px')
-// ─── State ────────────────────────────────────────────────
 const loading = ref(false)
 const refreshing = ref(false)
 
-// ─── Computed from store ───────────────────────────────────
 const allMemberships = computed(() => userStore.memberships as MembershipWithCardType[])
 
 const activeMemberships = computed(() =>
@@ -170,8 +172,6 @@ const inactiveMemberships = computed(() =>
   allMemberships.value.filter((m) => m.status !== MembershipStatus.ACTIVE),
 )
 
-// ─── Helpers ──────────────────────────────────────────────
-
 function statusLabel(status: MembershipStatus): string {
   const map: Record<MembershipStatus, string> = {
     [MembershipStatus.ACTIVE]: '有效',
@@ -181,25 +181,22 @@ function statusLabel(status: MembershipStatus): string {
   return map[status] ?? status
 }
 
-function statusBadgeClass(status: MembershipStatus): string {
-  if (status === MembershipStatus.EXPIRED) return 'status-badge--expired'
-  if (status === MembershipStatus.USED_UP) return 'status-badge--used'
-  return 'status-badge--expired'
+function inactiveStatusClass(status: MembershipStatus): string {
+  if (status === MembershipStatus.USED_UP) return 'mc-status--used'
+  return 'mc-status--expired'
 }
 
-function stripClass(type: CardTypeCategory): string {
-  if (type === CardTypeCategory.TRIAL) return 'card-strip--trial'
-  if (type === CardTypeCategory.DURATION) return 'card-strip--duration'
-  return 'card-strip--times'
+function cardBgClass(type: CardTypeCategory): string {
+  if (type === CardTypeCategory.TRIAL) return 'mc--trial'
+  if (type === CardTypeCategory.DURATION) return 'mc--duration'
+  return 'mc--times'
 }
 
-function headerClass(type: CardTypeCategory): string {
-  if (type === CardTypeCategory.TRIAL) return 'card-header--trial'
-  if (type === CardTypeCategory.DURATION) return 'card-header--duration'
-  return 'card-header--times'
+function daysRemaining(m: MembershipWithCardType): number {
+  const diff = new Date(m.expireDate).getTime() - Date.now()
+  return Math.max(0, Math.ceil(diff / 86_400_000))
 }
 
-// ─── Data loading ─────────────────────────────────────────
 async function loadMemberships() {
   loading.value = true
   try {
@@ -221,7 +218,6 @@ function goStore() {
   uni.switchTab({ url: '/pages/home/index' })
 }
 
-// ─── Lifecycle ────────────────────────────────────────────
 onMounted(() => {
   navBarHeight.value = `${getSystemLayout().navBarHeight}px`
   loadMemberships()
@@ -231,313 +227,373 @@ onMounted(() => {
 <style lang="scss" scoped>
 .membership-page {
   min-height: 100vh;
-  background: #f5f3f0;
+  background: $bg-page;
 }
 
 .scroll {
   height: 100vh;
 }
 
-/* ── Loading ─────────────────────────────────────────── */
+/* ── Loading ─────────────────────────────── */
 .loading-wrap {
   padding: 24rpx;
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 24rpx;
 }
 
 .skeleton-card {
-  height: 220rpx;
-  border-radius: 20rpx;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  height: 320rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;
 }
 
-/* ── Empty ───────────────────────────────────────────── */
+/* ── Empty ────────────────────────────────── */
 .empty-wrap {
+  padding: 80rpx 24rpx;
+}
+
+.empty-card {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, #E8D5C4, #D8C8DC);
+  border-radius: 24rpx;
+  padding: 64rpx 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 120rpx 40rpx;
-  gap: 20rpx;
+  gap: 16rpx;
 }
 
-.empty-icon {
-  font-size: 80rpx;
+.empty-deco {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+
+  &--1 {
+    width: 200rpx;
+    height: 200rpx;
+    top: -60rpx;
+    right: -40rpx;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  &--2 {
+    width: 140rpx;
+    height: 140rpx;
+    bottom: -40rpx;
+    left: -20rpx;
+    background: rgba(255, 255, 255, 0.2);
+  }
 }
 
 .empty-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: $brand-color;
+  z-index: 1;
 }
 
 .empty-sub {
   font-size: 26rpx;
-  color: #999;
+  color: $text-secondary;
+  z-index: 1;
 }
 
 .empty-btn {
-  margin-top: 12rpx;
-  padding: 22rpx 60rpx;
-  border-radius: 44rpx;
-  background: $primary-dark;
-  box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
+  margin-top: 16rpx;
+  padding: 20rpx 56rpx;
+  border-radius: 40rpx;
+  background: rgba(74, 64, 53, 0.12);
+  z-index: 1;
+
+  &:active { background: rgba(74, 64, 53, 0.18); }
 }
 
 .empty-btn-text {
-  font-size: 30rpx;
-  color: #fff;
+  font-size: 28rpx;
+  color: $brand-color;
   font-weight: 600;
 }
 
-/* ── List ────────────────────────────────────────────── */
+/* ── List ─────────────────────────────────── */
 .list {
-  padding: 24rpx 24rpx 0;
+  padding: 16rpx 24rpx 0;
 }
 
-/* ── Group section ───────────────────────────────────── */
+/* ── Group ────────────────────────────────── */
 .group-section {
-  margin-bottom: 8rpx;
+  margin-bottom: 16rpx;
 }
 
 .group-header {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 10rpx;
-  padding: 8rpx 4rpx 14rpx;
-}
-
-.group-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  flex-shrink: 0;
-
-  &--active   { background: #4caf50; }
-  &--inactive { background: #bbb; }
+  justify-content: space-between;
+  padding: 12rpx 8rpx 16rpx;
 }
 
 .group-title {
-  font-size: 26rpx;
-  color: #555;
+  font-size: 28rpx;
+  color: $text-primary;
   font-weight: 600;
-  flex: 1;
 }
 
 .group-count {
   font-size: 22rpx;
-  color: #bbb;
+  color: $text-hint;
 }
 
-/* ── Card item ───────────────────────────────────────── */
-.card-item {
-  background: #fff;
-  border-radius: 20rpx;
+/* ══════════════════════════════════════════════
+   MEMBERSHIP CARD (mc)
+   ══════════════════════════════════════════════ */
+.mc {
+  position: relative;
   overflow: hidden;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
+  border-radius: 24rpx;
+  padding: 28rpx 32rpx;
+  margin-bottom: 20rpx;
   display: flex;
   flex-direction: column;
+  gap: 24rpx;
+}
 
-  &--inactive {
-    opacity: 0.72;
+/* Card type backgrounds */
+.mc--times {
+  background: linear-gradient(135deg, #EDE0D4 0%, #E2D2C2 100%);
+  box-shadow: 0 4rpx 20rpx rgba(212, 191, 168, 0.3);
+}
+
+.mc--duration {
+  background: linear-gradient(135deg, #E0D4E4 0%, #D4C6DA 100%);
+  box-shadow: 0 4rpx 20rpx rgba(196, 174, 203, 0.3);
+}
+
+.mc--trial {
+  background: linear-gradient(135deg, #D4E2DC 0%, #C6D8D0 100%);
+  box-shadow: 0 4rpx 20rpx rgba(169, 196, 188, 0.3);
+}
+
+.mc--inactive {
+  background: linear-gradient(135deg, #E8E4E0, #DDD9D5);
+  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.12);
+  opacity: 0.75;
+  gap: 16rpx;
+}
+
+/* Decorative circles */
+.mc-deco {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+
+  &--1 {
+    width: 180rpx;
+    height: 180rpx;
+    top: -50rpx;
+    right: -30rpx;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  &--2 {
+    width: 120rpx;
+    height: 120rpx;
+    bottom: -30rpx;
+    left: 40rpx;
+    background: rgba(255, 255, 255, 0.2);
   }
 }
 
-/* Colored left border strip */
-.card-strip {
-  height: 6rpx;
-
-  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
-  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
-  &--inactive { background: #ccc; }
-}
-
-/* Card header gradient area */
-.card-header {
-  padding: 22rpx 28rpx;
+/* ── Top row ──────────────────────────────── */
+.mc-top {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-
-  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
-  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
-  &--inactive { background: #888; }
+  z-index: 1;
 }
 
-.card-header-left {
+.mc-name-area {
   display: flex;
   flex-direction: column;
   gap: 8rpx;
 }
 
-.card-name {
-  font-size: 32rpx;
+.mc-name {
+  font-size: 34rpx;
   font-weight: 700;
-  color: #fff;
-
-  &--dim { color: #ddd; }
+  color: #2C2420;
+  line-height: 1.2;
 }
 
-.card-type-badge {
+.mc-type-tag {
   align-self: flex-start;
   padding: 4rpx 14rpx;
-  border-radius: 12rpx;
-  background: rgba(255, 255, 255, 0.15);
-  border: 1rpx solid rgba(255, 255, 255, 0.25);
-
-  &--dim {
-    background: rgba(255, 255, 255, 0.08);
-  }
+  border-radius: 10rpx;
+  background: rgba(44, 36, 32, 0.1);
 }
 
-.card-type-badge-text {
+.mc-type-text {
   font-size: 20rpx;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(44, 36, 32, 0.6);
   font-weight: 500;
 }
 
-/* Status badge */
-.status-badge {
-  padding: 8rpx 20rpx;
-  border-radius: 20rpx;
-  border: 1rpx solid rgba(255, 255, 255, 0.35);
+/* Status */
+.mc-status {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 16rpx;
   flex-shrink: 0;
-
-  &--active  { background: rgba(76, 175, 80, 0.3); }
-  &--expired { background: rgba(0, 0, 0, 0.2); }
-  &--used    { background: rgba(0, 0, 0, 0.2); }
 }
 
-.status-badge-text {
+.mc-status--active {
+  background: rgba(122, 158, 126, 0.18);
+}
+
+.mc-status--expired,
+.mc-status--used {
+  background: rgba(74, 64, 53, 0.08);
+}
+
+.mc-status-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: $success-color;
+}
+
+.mc-status-text {
   font-size: 22rpx;
-  color: #fff;
+  color: #2C2420;
   font-weight: 600;
 }
 
-/* Card body */
-.card-body {
-  padding: 20rpx 28rpx 24rpx;
+/* ── Center: big number ───────────────────── */
+.mc-center {
   display: flex;
   flex-direction: column;
-  gap: 10rpx;
-}
-
-.highlight-row {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 4rpx;
-}
-
-.highlight-label {
-  font-size: 26rpx;
-  color: #999;
-}
-
-.highlight-number {
-  font-size: 44rpx;
-  font-weight: 800;
-  color: $primary-dark;
-  line-height: 1;
-}
-
-.highlight-unit {
-  font-size: 22rpx;
-  color: $primary-dark;
-  font-weight: 500;
-}
-
-.info-row {
-  display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  padding: 8rpx 0;
+  z-index: 1;
 }
 
-.info-label {
-  font-size: 26rpx;
-  color: #999;
+.mc-big-num {
+  font-size: 80rpx;
+  font-weight: 800;
+  color: #2C2420;
+  line-height: 1;
+  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
 }
 
-.info-value {
-  font-size: 26rpx;
-  color: #333;
+.mc-big-unit {
+  font-size: 24rpx;
+  color: rgba(44, 36, 32, 0.55);
   font-weight: 500;
+  margin-top: 4rpx;
 }
 
-/* ── Progress bar ────────────────────────────────────── */
-.progress-wrap {
+/* Progress */
+.mc-progress {
+  width: 100%;
+  max-width: 400rpx;
+  margin-top: 20rpx;
   display: flex;
   flex-direction: column;
   gap: 8rpx;
-  margin-bottom: 6rpx;
 }
 
-.progress-bar {
-  height: 8rpx;
-  background: #f0f0f0;
-  border-radius: 4rpx;
+.mc-progress-track {
+  height: 10rpx;
+  background: rgba(44, 36, 32, 0.1);
+  border-radius: 5rpx;
   overflow: hidden;
 }
 
-.progress-fill {
+.mc-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, $primary-dark, $primary-color);
-  border-radius: 4rpx;
+  background: rgba(44, 36, 32, 0.35);
+  border-radius: 5rpx;
   transition: width 0.4s ease;
 }
 
-.progress-label {
-  font-size: 22rpx;
-  color: #bbb;
-  text-align: right;
+.mc-progress-label {
+  font-size: 20rpx;
+  color: rgba(44, 36, 32, 0.45);
+  text-align: center;
 }
 
-/* ── FAB ─────────────────────────────────────────────── */
+/* ── Bottom: dates ────────────────────────── */
+.mc-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  z-index: 1;
+  padding-top: 4rpx;
+  border-top: 1rpx solid rgba(44, 36, 32, 0.1);
+}
+
+.mc-date-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rpx;
+}
+
+.mc-date-sep {
+  width: 1rpx;
+  height: 40rpx;
+  background: rgba(44, 36, 32, 0.12);
+  flex-shrink: 0;
+}
+
+.mc-date-label {
+  font-size: 20rpx;
+  color: rgba(44, 36, 32, 0.4);
+}
+
+.mc-date-value {
+  font-size: 24rpx;
+  color: #2C2420;
+  font-weight: 600;
+}
+
+/* ── Inactive info ────────────────────────── */
+.mc-inactive-info {
+  display: flex;
+  gap: 40rpx;
+  padding-left: 4rpx;
+  z-index: 1;
+}
+
+/* ── FAB ──────────────────────────────────── */
 .fab {
   position: fixed;
   bottom: calc(32rpx + env(safe-area-inset-bottom));
   right: 32rpx;
-  background: #1a1a2e;
+  background: $brand-color;
   border-radius: 44rpx;
   padding: 22rpx 36rpx;
-  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+  box-shadow: 0 6rpx 24rpx rgba(74, 64, 53, 0.25);
   z-index: 100;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8rpx;
 
-  &:active {
-    opacity: 0.85;
-  }
-}
-
-.fab-icon {
-  font-size: 36rpx;
-  color: $primary-dark;
-  font-weight: 300;
-  line-height: 1;
+  &:active { opacity: 0.85; }
 }
 
 .fab-text {
   font-size: 28rpx;
-  font-weight: 700;
-  color: $primary-dark;
+  font-weight: 600;
+  color: #fff;
   letter-spacing: 1rpx;
 }
 
-/* ── Spacer ──────────────────────────────────────────── */
+/* ── Spacer ───────────────────────────────── */
 .scroll-bottom-spacer {
-  height: 120rpx;
+  height: 140rpx;
 }
 </style>
diff --git a/packages/app/src/stores/admin.ts b/packages/app/src/stores/admin.ts
index b1adbae..f5c0219 100644
--- a/packages/app/src/stores/admin.ts
+++ b/packages/app/src/stores/admin.ts
@@ -15,6 +15,9 @@ import type {
   PaginatedData,
   ScheduleSlotPreview,
   PublishDaySlotsDto,
+  FlashSaleAdminItem,
+  CreateFlashSaleDto,
+  UpdateFlashSaleDto,
 } from '@mp-pilates/shared'
 
 export interface AdminStats {
@@ -206,6 +209,26 @@ export const useAdminStore = defineStore('admin', () => {
     return get<AdminStats>('/admin/stats')
   }
 
+  // ── Flash sales ─────────────────────────────────────────────────
+  async function fetchFlashSales(params?: {
+    page?: number
+    limit?: number
+  }): Promise<PaginatedData<FlashSaleAdminItem>> {
+    return get<PaginatedData<FlashSaleAdminItem>>('/admin/flash-sales', params as Record<string, unknown>)
+  }
+
+  async function createFlashSale(dto: CreateFlashSaleDto): Promise<FlashSaleAdminItem> {
+    return post<FlashSaleAdminItem>('/admin/flash-sales', dto as unknown as Record<string, unknown>)
+  }
+
+  async function updateFlashSale(id: string, dto: UpdateFlashSaleDto): Promise<FlashSaleAdminItem> {
+    return put<FlashSaleAdminItem>(`/admin/flash-sales/${id}`, dto as unknown as Record<string, unknown>)
+  }
+
+  async function deleteFlashSale(id: string): Promise<{ deleted: boolean }> {
+    return del<{ deleted: boolean }>(`/admin/flash-sales/${id}`)
+  }
+
   return {
     // State
     weekTemplates,
@@ -243,5 +266,10 @@ export const useAdminStore = defineStore('admin', () => {
     publishDaySlots,
     // Stats
     fetchDashboardStats,
+    // Flash sales
+    fetchFlashSales,
+    createFlashSale,
+    updateFlashSale,
+    deleteFlashSale,
   }
 })
diff --git a/packages/app/src/stores/flash-sale.ts b/packages/app/src/stores/flash-sale.ts
new file mode 100644
index 0000000..d13269e
--- /dev/null
+++ b/packages/app/src/stores/flash-sale.ts
@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type {
+  FlashSaleListItem,
+  FlashSaleDetail,
+  FlashSalePurchaseResponse,
+} from '@mp-pilates/shared'
+import { get, post } from '../utils/request'
+
+export const useFlashSaleStore = defineStore('flash-sale', () => {
+  const flashSales = ref<FlashSaleListItem[]>([])
+  const loading = ref(false)
+
+  async function fetchFlashSales(): Promise<FlashSaleListItem[]> {
+    loading.value = true
+    try {
+      const data = await get<FlashSaleListItem[]>('/flash-sales')
+      flashSales.value = [...data]
+      return data
+    } catch {
+      flashSales.value = []
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchDetail(id: string): Promise<FlashSaleDetail> {
+    return get<FlashSaleDetail>(`/flash-sales/${id}`)
+  }
+
+  async function purchase(id: string): Promise<FlashSalePurchaseResponse> {
+    return post<FlashSalePurchaseResponse>(`/flash-sales/${id}/purchase`)
+  }
+
+  return {
+    flashSales,
+    loading,
+    fetchFlashSales,
+    fetchDetail,
+    purchase,
+  }
+})
diff --git a/packages/app/src/utils/format.ts b/packages/app/src/utils/format.ts
index 6633b24..fcdac1b 100644
--- a/packages/app/src/utils/format.ts
+++ b/packages/app/src/utils/format.ts
@@ -1,4 +1,5 @@
 import { CardTypeCategory } from '@mp-pilates/shared'
+import { FlashSalePhase } from '@mp-pilates/shared'
 
 /** Minimal membership shape needed by progress/usage helpers. */
 interface MembershipLike {
@@ -83,15 +84,73 @@ export function getCardGradientClass(type: CardTypeCategory | string): string {
   return 'gradient--times'
 }
 
-/** 会员卡进度百分比（剩余 / 总次数） */
+/** 会员卡进度百分比（剩余 / 总次数，clamp 到 0~100%） */
 export function getMembershipProgressWidth(membership: MembershipLike): string {
   if (membership.remainingTimes === null || !membership.cardType.totalTimes) return '0%'
   const pct = (membership.remainingTimes / membership.cardType.totalTimes) * 100
   return `${Math.max(0, Math.min(100, pct))}%`
 }
 
-/** 已使用次数 */
+/** 已使用次数（不低于 0，防止管理员调高剩余次数导致负值） */
 export function getMembershipUsedTimes(membership: MembershipLike): number {
   if (membership.remainingTimes === null || !membership.cardType.totalTimes) return 0
-  return membership.cardType.totalTimes - membership.remainingTimes
+  return Math.max(0, membership.cardType.totalTimes - membership.remainingTimes)
+}
+
+/** 格式化倒计时：HH:MM:SS */
+export function formatCountdown(targetTime: string): string {
+  const { h, m, s } = getCountdownParts(targetTime)
+  return `${h}:${m}:${s}`
+}
+
+/** 获取倒计时各部分（h/m/s 已补零） */
+export function getCountdownParts(targetTime: string): { readonly h: string; readonly m: string; readonly s: string } {
+  const diff = Math.max(0, new Date(targetTime).getTime() - Date.now())
+  return {
+    h: String(Math.floor(diff / 3_600_000)).padStart(2, '0'),
+    m: String(Math.floor((diff % 3_600_000) / 60_000)).padStart(2, '0'),
+    s: String(Math.floor((diff % 60_000) / 1000)).padStart(2, '0'),
+  }
+}
+
+/** 秒杀阶段中文标签 */
+export function getFlashSalePhaseLabel(phase: FlashSalePhase): string {
+  const map: Record<FlashSalePhase, string> = {
+    [FlashSalePhase.UPCOMING]: '即将开始',
+    [FlashSalePhase.ONGOING]: '抢购中',
+    [FlashSalePhase.SOLD_OUT]: '已售罄',
+    [FlashSalePhase.ENDED]: '已结束',
+  }
+  return map[phase]
+}
+
+/** 库存已售比例 */
+export function getStockRatio(soldCount: number, totalStock: number): number {
+  if (totalStock === 0) return 0
+  return soldCount / totalStock
+}
+
+/** 库存已售百分比字符串 */
+export function getStockPercent(soldCount: number, totalStock: number): string {
+  return `${Math.min(100, getStockRatio(soldCount, totalStock) * 100)}%`
+}
+
+/** 格式化日期时间为 MM-DD HH:mm */
+export function formatDateTime(dateStr: string): string {
+  const d = new Date(dateStr)
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hour = String(d.getHours()).padStart(2, '0')
+  const min = String(d.getMinutes()).padStart(2, '0')
+  return `${month}-${day} ${hour}:${min}`
+}
+
+/** 格式化 Date 为 YYYY-MM-DD（本地时间，用于 picker） */
+export function formatDateLocal(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+/** 格式化 Date 为 HH:MM（本地时间，用于 picker） */
+export function formatTimeLocal(d: Date): string {
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
 }
diff --git a/packages/server/prisma/schema.prisma b/packages/server/prisma/schema.prisma
index faa41ce..944a948 100644
--- a/packages/server/prisma/schema.prisma
+++ b/packages/server/prisma/schema.prisma
@@ -51,6 +51,18 @@ enum OrderStatus {
   REFUNDED
 }
 
+enum FlashSaleStatus {
+  DRAFT
+  ACTIVE
+  ENDED
+}
+
+enum FlashSaleOrderStatus {
+  RESERVED
+  PAID
+  EXPIRED
+}
+
 // ===== Models =====
 
 model User {
@@ -67,6 +79,7 @@ model User {
   memberships Membership[]
   bookings    Booking[]
   orders      Order[]
+  flashSaleOrders FlashSaleOrder[]
 
   @@map("users")
 }
@@ -87,6 +100,7 @@ model CardType {
 
   memberships Membership[]
   orders      Order[]
+  flashSales  FlashSale[]
 
   @@map("card_types")
 }
@@ -197,11 +211,13 @@ model Order {
   status          OrderStatus @default(PENDING)
   wxTransactionId String?     @map("wx_transaction_id")
   paidAt          DateTime?   @map("paid_at")
+  flashSaleId     String?     @map("flash_sale_id")
   createdAt       DateTime    @default(now()) @map("created_at")
   updatedAt       DateTime    @updatedAt @map("updated_at")
 
-  user     User     @relation(fields: [userId], references: [id])
-  cardType CardType @relation(fields: [cardTypeId], references: [id])
+  user           User            @relation(fields: [userId], references: [id])
+  cardType       CardType        @relation(fields: [cardTypeId], references: [id])
+  flashSaleOrder FlashSaleOrder?
 
   @@index([userId])
   @@index([status])
@@ -223,3 +239,48 @@ model StudioConfig {
 
   @@map("studio_config")
 }
+
+model FlashSale {
+  id            String          @id @default(uuid())
+  cardTypeId    String          @map("card_type_id")
+  title         String
+  originalPrice Decimal         @map("original_price") @db.Decimal(10, 0)
+  flashPrice    Decimal         @map("flash_price") @db.Decimal(10, 0)
+  totalStock    Int             @map("total_stock")
+  soldCount     Int             @default(0) @map("sold_count")
+  startTime     DateTime        @map("start_time")
+  endTime       DateTime        @map("end_time")
+  status        FlashSaleStatus @default(DRAFT)
+  description   String?         @db.Text
+  sortOrder     Int             @default(0) @map("sort_order")
+  createdAt     DateTime        @default(now()) @map("created_at")
+  updatedAt     DateTime        @updatedAt @map("updated_at")
+
+  cardType CardType         @relation(fields: [cardTypeId], references: [id])
+  orders   FlashSaleOrder[]
+
+  @@index([status, startTime, endTime])
+  @@map("flash_sales")
+}
+
+model FlashSaleOrder {
+  id          String               @id @default(uuid())
+  flashSaleId String               @map("flash_sale_id")
+  userId      String               @map("user_id")
+  orderId     String?              @unique @map("order_id")
+  status      FlashSaleOrderStatus @default(RESERVED)
+  reservedAt  DateTime             @default(now()) @map("reserved_at")
+  paidAt      DateTime?            @map("paid_at")
+  expiredAt   DateTime?            @map("expired_at")
+  createdAt   DateTime             @default(now()) @map("created_at")
+  updatedAt   DateTime             @updatedAt @map("updated_at")
+
+  flashSale FlashSale @relation(fields: [flashSaleId], references: [id])
+  user      User      @relation(fields: [userId], references: [id])
+  order     Order?    @relation(fields: [orderId], references: [id])
+
+  @@unique([flashSaleId, userId])
+  @@index([userId])
+  @@index([status])
+  @@map("flash_sale_orders")
+}
diff --git a/packages/server/src/app.module.ts b/packages/server/src/app.module.ts
index d3d6104..4526eba 100644
--- a/packages/server/src/app.module.ts
+++ b/packages/server/src/app.module.ts
@@ -11,6 +11,7 @@ import { BookingModule } from './booking/booking.module'
 import { SchedulerModule } from './scheduler/scheduler.module'
 import { PaymentModule } from './payment/payment.module'
 import { AdminModule } from './admin/admin.module'
+import { FlashSaleModule } from './flash-sale/flash-sale.module'
 
 @Module({
   imports: [
@@ -28,6 +29,7 @@ import { AdminModule } from './admin/admin.module'
     SchedulerModule,
     PaymentModule,
     AdminModule,
+    FlashSaleModule,
   ],
   controllers: [AppController],
 })
diff --git a/packages/server/src/flash-sale/dto/create-flash-sale.dto.ts b/packages/server/src/flash-sale/dto/create-flash-sale.dto.ts
new file mode 100644
index 0000000..a9da993
--- /dev/null
+++ b/packages/server/src/flash-sale/dto/create-flash-sale.dto.ts
@@ -0,0 +1,35 @@
+import { IsUUID, IsString, IsInt, IsDateString, IsOptional, Min, IsNumber } from 'class-validator'
+
+export class CreateFlashSaleDto {
+  @IsUUID()
+  cardTypeId!: string
+
+  @IsString()
+  title!: string
+
+  @IsNumber()
+  @Min(1)
+  originalPrice!: number
+
+  @IsNumber()
+  @Min(1)
+  flashPrice!: number
+
+  @IsInt()
+  @Min(1)
+  totalStock!: number
+
+  @IsDateString()
+  startTime!: string
+
+  @IsDateString()
+  endTime!: string
+
+  @IsOptional()
+  @IsString()
+  description?: string
+
+  @IsOptional()
+  @IsInt()
+  sortOrder?: number
+}
diff --git a/packages/server/src/flash-sale/dto/update-flash-sale.dto.ts b/packages/server/src/flash-sale/dto/update-flash-sale.dto.ts
new file mode 100644
index 0000000..a2c2a22
--- /dev/null
+++ b/packages/server/src/flash-sale/dto/update-flash-sale.dto.ts
@@ -0,0 +1,43 @@
+import { IsString, IsInt, IsDateString, IsOptional, Min, IsNumber, IsEnum } from 'class-validator'
+import { FlashSaleStatus } from '@mp-pilates/shared'
+
+export class UpdateFlashSaleDto {
+  @IsOptional()
+  @IsString()
+  title?: string
+
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  originalPrice?: number
+
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  flashPrice?: number
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  totalStock?: number
+
+  @IsOptional()
+  @IsDateString()
+  startTime?: string
+
+  @IsOptional()
+  @IsDateString()
+  endTime?: string
+
+  @IsOptional()
+  @IsString()
+  description?: string
+
+  @IsOptional()
+  @IsEnum(FlashSaleStatus)
+  status?: FlashSaleStatus
+
+  @IsOptional()
+  @IsInt()
+  sortOrder?: number
+}
diff --git a/packages/server/src/flash-sale/flash-sale-admin.controller.ts b/packages/server/src/flash-sale/flash-sale-admin.controller.ts
new file mode 100644
index 0000000..b4706c9
--- /dev/null
+++ b/packages/server/src/flash-sale/flash-sale-admin.controller.ts
@@ -0,0 +1,67 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  Post,
+  Put,
+  Query,
+  UseGuards,
+  ValidationPipe,
+} from '@nestjs/common'
+import { UserRole } from '@mp-pilates/shared'
+import { JwtAuthGuard } from '../auth/jwt-auth.guard'
+import { RolesGuard } from '../auth/roles.guard'
+import { Roles } from '../auth/roles.decorator'
+import { FlashSaleService } from './flash-sale.service'
+import { CreateFlashSaleDto } from './dto/create-flash-sale.dto'
+import { UpdateFlashSaleDto } from './dto/update-flash-sale.dto'
+
+@Controller('admin/flash-sales')
+@UseGuards(JwtAuthGuard, RolesGuard)
+@Roles(UserRole.ADMIN)
+export class FlashSaleAdminController {
+  constructor(private readonly flashSaleService: FlashSaleService) {}
+
+  /** POST /admin/flash-sales — create */
+  @Post()
+  create(
+    @Body(new ValidationPipe({ whitelist: true })) dto: CreateFlashSaleDto,
+  ) {
+    return this.flashSaleService.createFlashSale(dto)
+  }
+
+  /** GET /admin/flash-sales — list (paginated) */
+  @Get()
+  list(
+    @Query('page') page?: string,
+    @Query('limit') limit?: string,
+  ) {
+    return this.flashSaleService.getAdminFlashSales(
+      page ? parseInt(page, 10) : 1,
+      limit ? parseInt(limit, 10) : 20,
+    )
+  }
+
+  /** GET /admin/flash-sales/:id — detail */
+  @Get(':id')
+  detail(@Param('id') id: string) {
+    return this.flashSaleService.getFlashSaleDetail(id)
+  }
+
+  /** PUT /admin/flash-sales/:id — update */
+  @Put(':id')
+  update(
+    @Param('id') id: string,
+    @Body(new ValidationPipe({ whitelist: true })) dto: UpdateFlashSaleDto,
+  ) {
+    return this.flashSaleService.updateFlashSale(id, dto)
+  }
+
+  /** DELETE /admin/flash-sales/:id — delete (DRAFT only) */
+  @Delete(':id')
+  remove(@Param('id') id: string) {
+    return this.flashSaleService.deleteFlashSale(id)
+  }
+}
diff --git a/packages/server/src/flash-sale/flash-sale.controller.ts b/packages/server/src/flash-sale/flash-sale.controller.ts
new file mode 100644
index 0000000..744c807
--- /dev/null
+++ b/packages/server/src/flash-sale/flash-sale.controller.ts
@@ -0,0 +1,40 @@
+import {
+  Controller,
+  Get,
+  Param,
+  Post,
+  UseGuards,
+} from '@nestjs/common'
+import { JwtAuthGuard } from '../auth/jwt-auth.guard'
+import { CurrentUser } from '../common/decorators/current-user.decorator'
+import { FlashSaleService } from './flash-sale.service'
+
+@Controller('flash-sales')
+export class FlashSaleController {
+  constructor(private readonly flashSaleService: FlashSaleService) {}
+
+  /** GET /flash-sales — list active/upcoming (public) */
+  @Get()
+  getActiveFlashSales() {
+    return this.flashSaleService.getActiveFlashSales()
+  }
+
+  /** GET /flash-sales/:id — detail (optionally authenticated) */
+  @Get(':id')
+  getFlashSaleDetail(
+    @Param('id') id: string,
+    @CurrentUser('sub') userId?: string,
+  ) {
+    return this.flashSaleService.getFlashSaleDetail(id, userId)
+  }
+
+  /** POST /flash-sales/:id/purchase — requires auth */
+  @Post(':id/purchase')
+  @UseGuards(JwtAuthGuard)
+  purchase(
+    @Param('id') flashSaleId: string,
+    @CurrentUser('sub') userId: string,
+  ) {
+    return this.flashSaleService.purchase(flashSaleId, userId)
+  }
+}
diff --git a/packages/server/src/flash-sale/flash-sale.module.ts b/packages/server/src/flash-sale/flash-sale.module.ts
new file mode 100644
index 0000000..b5906fb
--- /dev/null
+++ b/packages/server/src/flash-sale/flash-sale.module.ts
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common'
+import { PrismaModule } from '../prisma/prisma.module'
+import { PaymentModule } from '../payment/payment.module'
+import { FlashSaleService } from './flash-sale.service'
+import { FlashSaleController } from './flash-sale.controller'
+import { FlashSaleAdminController } from './flash-sale-admin.controller'
+
+@Module({
+  imports: [PrismaModule, PaymentModule],
+  controllers: [FlashSaleController, FlashSaleAdminController],
+  providers: [FlashSaleService],
+  exports: [FlashSaleService],
+})
+export class FlashSaleModule {}
diff --git a/packages/server/src/flash-sale/flash-sale.service.ts b/packages/server/src/flash-sale/flash-sale.service.ts
new file mode 100644
index 0000000..6ecc219
--- /dev/null
+++ b/packages/server/src/flash-sale/flash-sale.service.ts
@@ -0,0 +1,409 @@
+import {
+  BadRequestException,
+  ConflictException,
+  Injectable,
+  Logger,
+  NotFoundException,
+} from '@nestjs/common'
+import { Prisma } from '@prisma/client'
+import {
+  FlashSaleStatus,
+  FlashSaleOrderStatus,
+  MembershipStatus,
+  OrderStatus,
+} from '@mp-pilates/shared'
+import { FlashSalePhase } from '@mp-pilates/shared'
+import { PrismaService } from '../prisma/prisma.service'
+import { WechatPayService, WxPaymentParams } from '../payment/wechat-pay.service'
+import { CreateFlashSaleDto } from './dto/create-flash-sale.dto'
+import { UpdateFlashSaleDto } from './dto/update-flash-sale.dto'
+
+// ── Helpers ─────────────────────────────────────────────────
+function computePhase(sale: {
+  startTime: Date
+  endTime: Date
+  soldCount: number
+  totalStock: number
+  status: string
+}): FlashSalePhase {
+  if (sale.status === FlashSaleStatus.ENDED) return FlashSalePhase.ENDED
+  const now = new Date()
+  if (now < sale.startTime) return FlashSalePhase.UPCOMING
+  if (now > sale.endTime) return FlashSalePhase.ENDED
+  if (sale.soldCount >= sale.totalStock) return FlashSalePhase.SOLD_OUT
+  return FlashSalePhase.ONGOING
+}
+
+function toNumber(val: Prisma.Decimal | number): number {
+  return typeof val === 'number' ? val : Number(val)
+}
+
+// ── Service ─────────────────────────────────────────────────
+
+@Injectable()
+export class FlashSaleService {
+  private readonly logger = new Logger(FlashSaleService.name)
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly wechatPayService: WechatPayService,
+  ) {}
+
+  // ═══════════════════════════════════════════════════════════
+  // USER: List active/upcoming flash sales
+  // ═══════════════════════════════════════════════════════════
+  async getActiveFlashSales() {
+    const sales = await this.prisma.flashSale.findMany({
+      where: {
+        status: FlashSaleStatus.ACTIVE,
+        endTime: { gt: new Date() },
+      },
+      include: {
+        cardType: {
+          select: { name: true, type: true, totalTimes: true, durationDays: true },
+        },
+      },
+      orderBy: [{ sortOrder: 'asc' }, { startTime: 'asc' }],
+    })
+
+    return sales.map((s) => ({
+      ...s,
+      originalPrice: toNumber(s.originalPrice),
+      flashPrice: toNumber(s.flashPrice),
+      phase: computePhase(s),
+      remainingStock: s.totalStock - s.soldCount,
+      cardType: s.cardType,
+    }))
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // USER: Get detail (with participation check)
+  // ═══════════════════════════════════════════════════════════
+  async getFlashSaleDetail(id: string, userId?: string) {
+    const sale = await this.prisma.flashSale.findUnique({
+      where: { id },
+      include: {
+        cardType: {
+          select: {
+            name: true,
+            type: true,
+            totalTimes: true,
+            durationDays: true,
+            description: true,
+          },
+        },
+      },
+    })
+    if (!sale) throw new NotFoundException('秒杀活动不存在')
+
+    let hasParticipated = false
+    let userOrderStatus: FlashSaleOrderStatus | null = null
+
+    if (userId) {
+      const existing = await this.prisma.flashSaleOrder.findUnique({
+        where: { flashSaleId_userId: { flashSaleId: id, userId } },
+      })
+      if (existing && existing.status !== FlashSaleOrderStatus.EXPIRED) {
+        hasParticipated = true
+        userOrderStatus = existing.status as FlashSaleOrderStatus
+      }
+    }
+
+    return {
+      ...sale,
+      originalPrice: toNumber(sale.originalPrice),
+      flashPrice: toNumber(sale.flashPrice),
+      phase: computePhase(sale),
+      remainingStock: sale.totalStock - sale.soldCount,
+      cardType: { ...sale.cardType },
+      hasParticipated,
+      userOrderStatus,
+      serverTime: new Date().toISOString(),
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // PURCHASE — Atomic stock deduction
+  // ═══════════════════════════════════════════════════════════
+  async purchase(flashSaleId: string, userId: string) {
+    // ① Pre-validate (fast-fail before transaction)
+    const user = await this.prisma.user.findUnique({ where: { id: userId } })
+    if (!user) throw new NotFoundException('用户不存在')
+    if (!user.phone) throw new BadRequestException('请先授权手机号后再参与秒杀')
+
+    const sale = await this.prisma.flashSale.findUnique({
+      where: { id: flashSaleId },
+      include: { cardType: true },
+    })
+    if (!sale) throw new NotFoundException('秒杀活动不存在')
+    if (sale.status !== FlashSaleStatus.ACTIVE) {
+      throw new BadRequestException('秒杀活动未上线')
+    }
+
+    const now = new Date()
+    if (now < sale.startTime) throw new BadRequestException('秒杀尚未开始')
+    if (now > sale.endTime) throw new BadRequestException('秒杀已结束')
+
+    // ② Atomic transaction: reserve stock + create FlashSaleOrder + create Order
+    let result: { order: { id: string; orderNo: string; amount: Prisma.Decimal }; flashSaleOrderId: string }
+
+    try {
+      result = await this.prisma.$transaction(async (tx) => {
+        // ②-a: CAS optimistic lock stock deduction
+        const updated = await tx.flashSale.updateMany({
+          where: {
+            id: flashSaleId,
+            soldCount: { lt: sale.totalStock },
+          },
+          data: {
+            soldCount: { increment: 1 },
+          },
+        })
+
+        if (updated.count === 0) {
+          throw new BadRequestException('手慢了，已售罄')
+        }
+
+        // ②-b: Create Order with flash sale price
+        const orderNo = `FS${Date.now()}${Math.random().toString(36).substring(2, 8)}`
+
+        const order = await tx.order.create({
+          data: {
+            userId,
+            cardTypeId: sale.cardTypeId,
+            orderNo,
+            amount: sale.flashPrice,
+            status: OrderStatus.PENDING,
+            flashSaleId,
+          },
+        })
+
+        // ②-c: Create FlashSaleOrder (unique constraint prevents duplicate)
+        const flashSaleOrder = await tx.flashSaleOrder.create({
+          data: {
+            flashSaleId,
+            userId,
+            orderId: order.id,
+            status: FlashSaleOrderStatus.RESERVED,
+          },
+        })
+
+        return {
+          order: { id: order.id, orderNo: order.orderNo, amount: order.amount },
+          flashSaleOrderId: flashSaleOrder.id,
+        }
+      })
+    } catch (err) {
+      // Handle unique constraint violation (user already participated)
+      if (err instanceof Prisma.PrismaClientKnownRequestError && err.code === 'P2002') {
+        throw new ConflictException('您已参与过此秒杀活动')
+      }
+      throw err
+    }
+
+    // ③ Create WeChat unified order (outside transaction — network call)
+    const paymentParams = await this.wechatPayService.createUnifiedOrder({
+      orderNo: result.order.orderNo,
+      amount: toNumber(result.order.amount),
+      openid: user.openid,
+      description: `秒杀-${sale.title}`,
+    })
+
+    return {
+      flashSaleOrderId: result.flashSaleOrderId,
+      order: {
+        id: result.order.id,
+        orderNo: result.order.orderNo,
+        amount: toNumber(result.order.amount),
+      },
+      paymentParams,
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ADMIN: Create flash sale
+  // ═══════════════════════════════════════════════════════════
+  async createFlashSale(dto: CreateFlashSaleDto) {
+    const cardType = await this.prisma.cardType.findUnique({
+      where: { id: dto.cardTypeId },
+    })
+    if (!cardType) throw new NotFoundException('卡种不存在')
+
+    const startTime = new Date(dto.startTime)
+    const endTime = new Date(dto.endTime)
+    if (endTime <= startTime) {
+      throw new BadRequestException('结束时间必须晚于开始时间')
+    }
+
+    const sale = await this.prisma.flashSale.create({
+      data: {
+        cardTypeId: dto.cardTypeId,
+        title: dto.title,
+        originalPrice: dto.originalPrice,
+        flashPrice: dto.flashPrice,
+        totalStock: dto.totalStock,
+        startTime,
+        endTime,
+        description: dto.description ?? null,
+        sortOrder: dto.sortOrder ?? 0,
+        status: FlashSaleStatus.DRAFT,
+      },
+      include: {
+        cardType: { select: { name: true, type: true } },
+      },
+    })
+
+    return {
+      ...sale,
+      originalPrice: toNumber(sale.originalPrice),
+      flashPrice: toNumber(sale.flashPrice),
+      phase: computePhase(sale),
+      cardType: { ...sale.cardType },
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ADMIN: Update flash sale
+  // ═══════════════════════════════════════════════════════════
+  async updateFlashSale(id: string, dto: UpdateFlashSaleDto) {
+    const existing = await this.prisma.flashSale.findUnique({ where: { id } })
+    if (!existing) throw new NotFoundException('秒杀活动不存在')
+
+    const data: Record<string, unknown> = {}
+    if (dto.title !== undefined) data.title = dto.title
+    if (dto.originalPrice !== undefined) data.originalPrice = dto.originalPrice
+    if (dto.flashPrice !== undefined) data.flashPrice = dto.flashPrice
+    if (dto.totalStock !== undefined) {
+      if (dto.totalStock < existing.soldCount) {
+        throw new BadRequestException('库存不能小于已售数量')
+      }
+      data.totalStock = dto.totalStock
+    }
+    if (dto.startTime !== undefined) data.startTime = new Date(dto.startTime)
+    if (dto.endTime !== undefined) data.endTime = new Date(dto.endTime)
+    if (dto.description !== undefined) data.description = dto.description
+    if (dto.status !== undefined) data.status = dto.status
+    if (dto.sortOrder !== undefined) data.sortOrder = dto.sortOrder
+
+    const sale = await this.prisma.flashSale.update({
+      where: { id },
+      data,
+      include: {
+        cardType: { select: { name: true, type: true } },
+      },
+    })
+
+    return {
+      ...sale,
+      originalPrice: toNumber(sale.originalPrice),
+      flashPrice: toNumber(sale.flashPrice),
+      phase: computePhase(sale),
+      cardType: { ...sale.cardType },
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ADMIN: Delete flash sale (only DRAFT)
+  // ═══════════════════════════════════════════════════════════
+  async deleteFlashSale(id: string) {
+    const existing = await this.prisma.flashSale.findUnique({ where: { id } })
+    if (!existing) throw new NotFoundException('秒杀活动不存在')
+
+    if (existing.soldCount > 0) {
+      throw new BadRequestException('已有用户参与，无法删除，请结束活动')
+    }
+
+    await this.prisma.flashSale.delete({ where: { id } })
+    return { deleted: true }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // ADMIN: List all flash sales (paginated)
+  // ═══════════════════════════════════════════════════════════
+  async getAdminFlashSales(page = 1, limit = 20) {
+    const skip = (page - 1) * limit
+
+    const [data, total] = await Promise.all([
+      this.prisma.flashSale.findMany({
+        include: {
+          cardType: { select: { name: true, type: true } },
+        },
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: limit,
+      }),
+      this.prisma.flashSale.count(),
+    ])
+
+    return {
+      data: data.map((s) => ({
+        ...s,
+        originalPrice: toNumber(s.originalPrice),
+        flashPrice: toNumber(s.flashPrice),
+        phase: computePhase(s),
+        cardType: s.cardType,
+      })),
+      total,
+      page,
+      limit,
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // SCHEDULER: Expire unpaid reservations (release stock)
+  // ═══════════════════════════════════════════════════════════
+  async expireUnpaidReservations(expireMinutes = 15): Promise<number> {
+    const cutoff = new Date(Date.now() - expireMinutes * 60_000)
+
+    const expiredOrders = await this.prisma.flashSaleOrder.findMany({
+      where: {
+        status: FlashSaleOrderStatus.RESERVED,
+        reservedAt: { lt: cutoff },
+      },
+    })
+
+    if (expiredOrders.length === 0) return 0
+
+    // Group by flashSaleId to batch stock release
+    const stockDecrements = new Map<string, number>()
+    const orderIds: string[] = []
+    const flashSaleOrderIds: string[] = []
+
+    for (const fo of expiredOrders) {
+      flashSaleOrderIds.push(fo.id)
+      stockDecrements.set(fo.flashSaleId, (stockDecrements.get(fo.flashSaleId) ?? 0) + 1)
+      if (fo.orderId) orderIds.push(fo.orderId)
+    }
+
+    try {
+      await this.prisma.$transaction([
+        // Batch mark all as expired
+        this.prisma.flashSaleOrder.updateMany({
+          where: { id: { in: flashSaleOrderIds } },
+          data: { status: FlashSaleOrderStatus.EXPIRED, expiredAt: new Date() },
+        }),
+        // Release stock per flash sale
+        ...Array.from(stockDecrements.entries()).map(([flashSaleId, count]) =>
+          this.prisma.flashSale.update({
+            where: { id: flashSaleId },
+            data: { soldCount: { decrement: count } },
+          }),
+        ),
+        // Cancel associated payment orders
+        ...(orderIds.length > 0
+          ? [
+              this.prisma.order.updateMany({
+                where: { id: { in: orderIds } },
+                data: { status: OrderStatus.REFUNDED },
+              }),
+            ]
+          : []),
+      ])
+    } catch (err) {
+      this.logger.error('Failed to batch-expire flash sale orders', err)
+      return 0
+    }
+
+    return expiredOrders.length
+  }
+}
diff --git a/packages/server/src/payment/payment.module.ts b/packages/server/src/payment/payment.module.ts
index c976c18..16a3ac9 100644
--- a/packages/server/src/payment/payment.module.ts
+++ b/packages/server/src/payment/payment.module.ts
@@ -8,6 +8,6 @@ import { WechatPayService } from './wechat-pay.service'
   imports: [PrismaModule],
   controllers: [PaymentController],
   providers: [PaymentService, WechatPayService],
-  exports: [PaymentService],
+  exports: [PaymentService, WechatPayService],
 })
 export class PaymentModule {}
diff --git a/packages/server/src/payment/payment.service.ts b/packages/server/src/payment/payment.service.ts
index 2d89582..033d716 100644
--- a/packages/server/src/payment/payment.service.ts
+++ b/packages/server/src/payment/payment.service.ts
@@ -5,7 +5,7 @@ import {
   NotFoundException,
 } from '@nestjs/common'
 import { CardType, Order } from '@prisma/client'
-import { MembershipStatus, OrderStatus } from '@mp-pilates/shared'
+import { MembershipStatus, OrderStatus, FlashSaleOrderStatus } from '@mp-pilates/shared'
 import { PrismaService } from '../prisma/prisma.service'
 import { WechatPayService, WxPaymentParams } from './wechat-pay.service'
 
@@ -136,6 +136,22 @@ export class PaymentService {
     ])
 
     this.logger.log(`Order PAID and Membership created: orderNo=${notification.orderNo}`)
+
+    // ── Flash sale order: mark as PAID ──
+    if (existingOrder.flashSaleId) {
+      await this.prisma.flashSaleOrder.updateMany({
+        where: {
+          orderId: existingOrder.id,
+          status: FlashSaleOrderStatus.RESERVED,
+        },
+        data: {
+          status: FlashSaleOrderStatus.PAID,
+          paidAt: now,
+        },
+      })
+      this.logger.log(`Flash sale order marked PAID for orderNo=${notification.orderNo}`)
+    }
+
     return this.buildSuccessXml()
   }
 
diff --git a/packages/server/src/scheduler/scheduler.module.ts b/packages/server/src/scheduler/scheduler.module.ts
index 8e45a97..46ea2dd 100644
--- a/packages/server/src/scheduler/scheduler.module.ts
+++ b/packages/server/src/scheduler/scheduler.module.ts
@@ -1,12 +1,14 @@
 import { Module } from '@nestjs/common'
 import { ScheduleModule } from '@nestjs/schedule'
 import { TimeSlotModule } from '../time-slot/time-slot.module'
+import { FlashSaleModule } from '../flash-sale/flash-sale.module'
 import { SchedulerService } from './scheduler.service'
 
 @Module({
   imports: [
     ScheduleModule.forRoot(),
     TimeSlotModule,
+    FlashSaleModule,
   ],
   providers: [SchedulerService],
 })
diff --git a/packages/server/src/scheduler/scheduler.service.ts b/packages/server/src/scheduler/scheduler.service.ts
index 2c715b2..3dd647f 100644
--- a/packages/server/src/scheduler/scheduler.service.ts
+++ b/packages/server/src/scheduler/scheduler.service.ts
@@ -1,12 +1,16 @@
 import { Injectable, Logger } from '@nestjs/common'
 import { Cron } from '@nestjs/schedule'
 import { SlotGeneratorService } from '../time-slot/slot-generator.service'
+import { FlashSaleService } from '../flash-sale/flash-sale.service'
 
 @Injectable()
 export class SchedulerService {
   private readonly logger = new Logger(SchedulerService.name)
 
-  constructor(private readonly slotGenerator: SlotGeneratorService) {}
+  constructor(
+    private readonly slotGenerator: SlotGeneratorService,
+    private readonly flashSaleService: FlashSaleService,
+  ) {}
 
   /** 02:00 daily — generate slots 14 days ahead from week templates */
   @Cron('0 2 * * *')
@@ -51,4 +55,17 @@ export class SchedulerService {
       this.logger.error('[handleCompleteBookings] Failed to complete bookings', err)
     }
   }
+
+  /** Every 5 min — expire unpaid flash sale reservations older than 15min */
+  @Cron('*/5 * * * *')
+  async handleExpireFlashSaleReservations(): Promise<void> {
+    try {
+      const count = await this.flashSaleService.expireUnpaidReservations(15)
+      if (count > 0) {
+        this.logger.log(`[handleExpireFlashSaleReservations] Expired ${count} unpaid reservations`)
+      }
+    } catch (err) {
+      this.logger.error('[handleExpireFlashSaleReservations] Failed', err)
+    }
+  }
 }
diff --git a/packages/shared/src/enums.ts b/packages/shared/src/enums.ts
index c2ac82e..6eb686b 100644
--- a/packages/shared/src/enums.ts
+++ b/packages/shared/src/enums.ts
@@ -45,3 +45,16 @@ export enum OrderStatus {
   PAID = 'PAID',
   REFUNDED = 'REFUNDED',
 }
+
+// ===== FlashSale =====
+export enum FlashSaleStatus {
+  DRAFT = 'DRAFT',
+  ACTIVE = 'ACTIVE',
+  ENDED = 'ENDED',
+}
+
+export enum FlashSaleOrderStatus {
+  RESERVED = 'RESERVED',
+  PAID = 'PAID',
+  EXPIRED = 'EXPIRED',
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index fb8ba63..dea9a56 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -7,6 +7,8 @@ export {
   TimeSlotSource,
   BookingStatus,
   OrderStatus,
+  FlashSaleStatus,
+  FlashSaleOrderStatus,
 } from './enums'
 
 // Constants
@@ -54,4 +56,13 @@ export type {
   PaginatedData,
   PaginatedResponse,
   PaginationQuery,
+  FlashSale,
+  FlashSaleListItem,
+  FlashSaleDetail,
+  FlashSaleAdminItem,
+  CreateFlashSaleDto,
+  UpdateFlashSaleDto,
+  FlashSalePurchaseResponse,
 } from './types/index'
+
+export { FlashSalePhase } from './types/index'
diff --git a/packages/shared/src/types/flash-sale.ts b/packages/shared/src/types/flash-sale.ts
new file mode 100644
index 0000000..834126d
--- /dev/null
+++ b/packages/shared/src/types/flash-sale.ts
@@ -0,0 +1,97 @@
+import { FlashSaleStatus, FlashSaleOrderStatus, CardTypeCategory } from '../enums'
+
+// ── Computed sale phase (derived from server time) ──────────
+export enum FlashSalePhase {
+  UPCOMING = 'UPCOMING',
+  ONGOING = 'ONGOING',
+  SOLD_OUT = 'SOLD_OUT',
+  ENDED = 'ENDED',
+}
+
+// ── Core entity ─────────────────────────────────────────────
+export interface FlashSale {
+  readonly id: string
+  readonly cardTypeId: string
+  readonly title: string
+  readonly originalPrice: number
+  readonly flashPrice: number
+  readonly totalStock: number
+  readonly soldCount: number
+  readonly startTime: string
+  readonly endTime: string
+  readonly status: FlashSaleStatus
+  readonly description: string | null
+  readonly sortOrder: number
+  readonly createdAt: string
+  readonly updatedAt: string
+}
+
+// ── User-facing list item (home page) ───────────────────────
+export interface FlashSaleListItem extends FlashSale {
+  readonly phase: FlashSalePhase
+  readonly remainingStock: number
+  readonly cardType: {
+    readonly name: string
+    readonly type: CardTypeCategory
+    readonly totalTimes: number | null
+    readonly durationDays: number
+  }
+}
+
+// ── Detail (includes user participation status) ─────────────
+export interface FlashSaleDetail extends FlashSaleListItem {
+  readonly hasParticipated: boolean
+  readonly userOrderStatus: FlashSaleOrderStatus | null
+  readonly serverTime: string
+}
+
+// ── Admin DTOs ──────────────────────────────────────────────
+export interface CreateFlashSaleDto {
+  readonly cardTypeId: string
+  readonly title: string
+  readonly originalPrice: number
+  readonly flashPrice: number
+  readonly totalStock: number
+  readonly startTime: string
+  readonly endTime: string
+  readonly description?: string
+  readonly sortOrder?: number
+}
+
+export interface UpdateFlashSaleDto {
+  readonly title?: string
+  readonly originalPrice?: number
+  readonly flashPrice?: number
+  readonly totalStock?: number
+  readonly startTime?: string
+  readonly endTime?: string
+  readonly description?: string
+  readonly status?: FlashSaleStatus
+  readonly sortOrder?: number
+}
+
+// ── Purchase response ───────────────────────────────────────
+export interface FlashSalePurchaseResponse {
+  readonly flashSaleOrderId: string
+  readonly order: {
+    readonly id: string
+    readonly orderNo: string
+    readonly amount: number
+  }
+  readonly paymentParams: {
+    readonly timeStamp: string
+    readonly nonceStr: string
+    readonly package: string
+    readonly signType: string
+    readonly paySign: string
+  }
+}
+
+// ── Admin list item ─────────────────────────────────────────
+export interface FlashSaleAdminItem extends FlashSale {
+  readonly phase: FlashSalePhase
+  readonly cardType: {
+    readonly name: string
+    readonly type: CardTypeCategory
+  }
+}
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 8479266..b0f9aae 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -7,3 +7,13 @@ export type { Booking, BookingWithDetails, BookingWithUser, BookingStatusHistory
 export type { Order, OrderWithDetails, CreateOrderDto, PaymentParams, CreateOrderResponse } from './order'
 export type { StudioConfig, UpdateStudioConfigDto } from './studio'
 export type { ApiResponse, PaginatedData, PaginatedResponse, PaginationQuery } from './api'
+export type {
+  FlashSale,
+  FlashSaleListItem,
+  FlashSaleDetail,
+  FlashSaleAdminItem,
+  CreateFlashSaleDto,
+  UpdateFlashSaleDto,
+  FlashSalePurchaseResponse,
+} from './flash-sale'
+export { FlashSalePhase } from './flash-sale'