feat: 新的预约列表样式

packages/app/src/components/SlotCard.vue

@@ -1,83 +1,88 @@
 <template>
-  <view class="slot-card-wrapper">
-    <!-- Date display above card -->
-    <view class="slot-date">
-      {{ timeSlot.date }}
-    </view>
+  <view class="slot-card-wrapper" :class="[`status-${statusClass}`]" @tap="emit('cardTap', timeSlot)">
+    <!-- Ticket background image -->
+    <image
+      class="ticket-bg"
+      src="/static/courseBg.png"
+      mode="aspectFill"
+    />
 
-    <view class="slot-card" :class="[
-      { 'slot-card--booked': timeSlot.isBookedByMe },
-      { 'slot-card--past': isPast && !timeSlot.isBookedByMe },
-      { 'slot-card--full': timeSlot.status === TimeSlotStatus.FULL },
-      `status-${statusClass}`
-    ]">
-      <!-- Decorative left curves (ticket style) -->
-      <view class="curve curve-left">
-        <view class="curve-inner curve-top" />
-        <view class="curve-inner curve-bottom" />
-      </view>
-
-      <!-- Main content -->
-      <view class="slot-content">
-        <!-- Left: Time column -->
-        <view class="time-section">
-          <text class="start-time">{{ timeSlot.startTime.slice(0, 5) }}</text>
-          <view class="time-divider" />
-          <text class="end-time">{{ timeSlot.endTime.slice(0, 5) }}</text>
+    <!-- Card content overlay -->
+    <view class="ticket-content">
+      <!-- ── Top section: Time row (like flight ticket) ── -->
+      <view class="ticket-top">
+        <!-- Left: Start time -->
+        <view class="time-block">
+          <text class="time-main">{{ startTimeDisplay }}</text>
+          <text class="time-label">{{ timeSlot.date }}</text>
         </view>
 
-        <!-- Center divider with dashes -->
-        <view class="divider-dashes" />
-
-        <!-- Center: Course info -->
-        <view class="course-section">
-          <text class="course-name">普拉提私教</text>
-          <view class="course-meta">
-            <text class="course-duration">{{ durationMin }}分钟</text>
-            <text class="meta-separator">•</text>
-            <view class="course-capacity" :class="capacityClass">
-              <text class="capacity-text">{{ capacityLabel }}</text>
+        <!-- Center: Duration + icon -->
+        <view class="duration-block">
+          <view class="duration-line">
+            <view class="line-dot" />
+            <view class="line-dash" />
+            <view class="duration-icon">
+              <text class="icon-text">⏱</text>
             </view>
+            <view class="line-dash" />
+            <view class="line-dot" />
+          </view>
+          <text class="duration-text">{{ durationMin }}分钟</text>
+        </view>
+
+        <!-- Right: End time -->
+        <view class="time-block time-block--right">
+          <text class="time-main">{{ endTimeDisplay }}</text>
+          <view class="capacity-tag" :class="capacityClass">
+            <text class="capacity-text">{{ capacityLabel }}</text>
           </view>
         </view>
+      </view>
 
-        <!-- Center divider with dashes -->
-        <view class="divider-dashes" />
+      <!-- ── Dashed tear-off line ── -->
+      <view class="tear-line" />
 
-        <!-- Right: Action section -->
-        <view class="action-section">
-          <!-- Expired badge -->
+      <!-- ── Bottom section: Course name + Action ── -->
+      <view class="ticket-bottom">
+        <view class="course-info">
+          <text class="course-name">普拉提私教</text>
+        </view>
+
+        <!-- Action area -->
+        <view class="action-area">
+          <!-- Expired -->
           <template v-if="isPast && !timeSlot.isBookedByMe">
             <view class="action-badge badge-expired">
               <text>已过期</text>
             </view>
           </template>
 
-          <!-- OPEN + not booked: Book button -->
+          <!-- OPEN + not booked -->
           <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
-            <view class="action-button btn-book" @tap.stop="emit('book', timeSlot)">
+            <view class="action-btn btn-book" @tap.stop="emit('book', timeSlot)">
               <text>预约</text>
             </view>
           </template>
 
-          <!-- OPEN + booked by me: Cancel link -->
+          <!-- OPEN + booked by me -->
           <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
             <view class="action-badge badge-booked">
               <text>已预约</text>
             </view>
-            <view class="action-cancel" @tap.stop="emit('cancel', timeSlot)">
+            <view class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
               <text>取消</text>
             </view>
           </template>
 
-          <!-- FULL: Full badge -->
+          <!-- FULL -->
           <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
             <view class="action-badge badge-full">
               <text>已约满</text>
             </view>
           </template>
 
-          <!-- CLOSED: Closed badge -->
+          <!-- CLOSED -->
           <template v-else>
             <view class="action-badge badge-closed">
               <text>已关闭</text>
@@ -85,12 +90,6 @@
           </template>
         </view>
       </view>
-
-      <!-- Decorative right curves (ticket style) -->
-      <view class="curve curve-right">
-        <view class="curve-inner curve-top" />
-        <view class="curve-inner curve-bottom" />
-      </view>
     </view>
   </view>
 </template>
@@ -109,8 +108,12 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   book: [timeSlot: TimeSlotWithBookingStatus]
   cancel: [timeSlot: TimeSlotWithBookingStatus]
+  cardTap: [timeSlot: TimeSlotWithBookingStatus]
 }>()
 
+const startTimeDisplay = computed(() => props.timeSlot.startTime.slice(0, 5))
+const endTimeDisplay = computed(() => props.timeSlot.endTime.slice(0, 5))
+
 const durationMin = computed(() => {
   const [sh, sm] = props.timeSlot.startTime.split(':').map(Number)
   const [eh, em] = props.timeSlot.endTime.split(':').map(Number)
@@ -122,7 +125,7 @@ const capacityLabel = computed(() => {
   if (status === TimeSlotStatus.CLOSED) return '已关闭'
   if (status === TimeSlotStatus.FULL) return '已约满'
   const remaining = capacity - bookedCount
-  return `剩余 ${remaining} 个名额`
+  return `剩余${remaining}位`
 })
 
 const capacityClass = computed(() => {
@@ -145,187 +148,147 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 </script>
 
 <style lang="scss" scoped>
+/* ─── Wrapper ─── */
 .slot-card-wrapper {
-  padding: 0 24rpx 24rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 8rpx;
-}
-
-.slot-date {
-  font-size: 24rpx;
-  color: #999;
-  padding: 0 12rpx;
-  font-weight: 500;
-}
-
-/* ─── Main Card ─── */
-.slot-card {
   position: relative;
-  display: flex;
-  align-items: center;
-  background: #fff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+  margin: 0 24rpx 20rpx;
+  min-height: 220rpx;
   transition: all 0.2s ease;
-  min-height: 140rpx;
-  padding: 0;
 
   &:active {
     transform: scale(0.98);
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   }
 
-  /* Status variants */
-  &.status-open {
-    background: linear-gradient(135deg, #fff 0%, #fafaf8 100%);
-  }
-
-  &.status-booked {
-    background: linear-gradient(135deg, #f0f7fb 0%, #f5fbff 100%);
-    box-shadow: 0 4rpx 20rpx rgba(66, 133, 244, 0.1);
+  /* Status-based opacity */
+  &.status-expired {
+    opacity: 0.55;
   }
 
   &.status-full,
   &.status-closed {
-    background: #fafaf8;
-    opacity: 0.85;
-  }
-
-  &.status-expired {
-    background: #f8f8f6;
-    opacity: 0.7;
+    opacity: 0.75;
   }
 }
 
-/* ─── Decorative curves (ticket punch holes) ─── */
-.curve {
+/* ─── Ticket background image ─── */
+.ticket-bg {
   position: absolute;
-  width: 48rpx;
-  height: 140rpx;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* ─── Content overlay ─── */
+.ticket-content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
+  padding: 28rpx 40rpx 24rpx;
+}
+
+/* ═══ Top section: Time row ═══ */
+.ticket-top {
+  display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  pointer-events: none;
+}
 
-  &.curve-left {
-    left: -24rpx;
-  }
+.time-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 100rpx;
 
-  &.curve-right {
-    right: -24rpx;
+  &--right {
+    align-items: flex-end;
   }
 }
 
-.curve-inner {
-  width: 48rpx;
-  height: 48rpx;
-  background: #FAF8F5; /* Match page background */
-  border-radius: 0 48rpx 48rpx 0;
-
-  .curve-right & {
-    border-radius: 48rpx 0 0 48rpx;
-  }
+.time-main {
+  font-size: 40rpx;
+  font-weight: 800;
+  color: #1a1a2e;
+  line-height: 1;
+  letter-spacing: 1rpx;
 }
 
-/* ─── Main content flex layout ─── */
-.slot-content {
+.time-label {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #999;
+  font-weight: 500;
+}
+
+/* Duration center block */
+.duration-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 0 16rpx;
+}
+
+.duration-line {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 28rpx 48rpx;
-  gap: 0;
+  margin-top: 8rpx;
 }
 
-/* ─── Time Section ─── */
-.time-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 90rpx;
+.line-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: #ccc;
   flex-shrink: 0;
-  gap: 8rpx;
 }
 
-.start-time {
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-  line-height: 1;
-}
-
-.end-time {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #999;
-  line-height: 1;
-}
-
-.time-divider {
-  width: 2rpx;
-  height: 20rpx;
-  background: #e0dcd6;
-  border-radius: 1rpx;
-  margin: 4rpx 0;
-}
-
-/* ─── Dashed dividers ─── */
-.divider-dashes {
-  flex: 0 0 auto;
-  width: 2rpx;
-  height: 80rpx;
+.line-dash {
+  flex: 1;
+  height: 2rpx;
   background: repeating-linear-gradient(
-    to bottom,
-    #e0dcd6 0,
-    #e0dcd6 8rpx,
+    to right,
+    #d0d0d0 0,
+    #d0d0d0 8rpx,
     transparent 8rpx,
     transparent 16rpx
   );
-  margin: 0 20rpx;
-  opacity: 0.6;
 }
 
-/* ─── Course Section (center) ─── */
-.course-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  gap: 8rpx;
-  min-width: 120rpx;
-}
-
-.course-name {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #1a1a1a;
-  line-height: 1.2;
-}
-
-.course-meta {
+.duration-icon {
+  flex-shrink: 0;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: rgba($primary-color, 0.1);
   display: flex;
   align-items: center;
-  gap: 10rpx;
+  justify-content: center;
+  margin: 0 8rpx;
+}
+
+.icon-text {
+  font-size: 22rpx;
+}
+
+.duration-text {
+  margin-top: 6rpx;
   font-size: 22rpx;
   color: #999;
-}
-
-.course-duration {
   font-weight: 500;
 }
 
-.meta-separator {
-  color: #ddd;
-}
-
-.course-capacity {
-  font-weight: 600;
-  padding: 4rpx 8rpx;
-  border-radius: 4rpx;
+/* Capacity tag */
+.capacity-tag {
+  margin-top: 8rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 6rpx;
+  font-size: 20rpx;
 
   &.cap-open {
-    color: #4caf50;
     background: rgba(76, 175, 80, 0.08);
 
     .capacity-text {
@@ -334,7 +297,6 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   }
 
   &.cap-almost {
-    color: #f59e0b;
     background: rgba(245, 158, 11, 0.08);
 
     .capacity-text {
@@ -343,7 +305,6 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   }
 
   &.cap-full {
-    color: #ef4444;
     background: rgba(239, 68, 68, 0.08);
 
     .capacity-text {
@@ -352,7 +313,6 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   }
 
   &.cap-closed {
-    color: #999;
     background: rgba(0, 0, 0, 0.04);
 
     .capacity-text {
@@ -362,53 +322,76 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 }
 
 .capacity-text {
+  font-size: 20rpx;
   font-weight: 600;
 }
 
-/* ─── Action Section (right) ─── */
-.action-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 100rpx;
-  flex-shrink: 0;
-  gap: 8rpx;
+/* ═══ Tear-off dashed line ═══ */
+.tear-line {
+  margin: 20rpx -40rpx 16rpx;
+  height: 2rpx;
+  background: repeating-linear-gradient(
+    to right,
+    #e0dcd6 0,
+    #e0dcd6 10rpx,
+    transparent 10rpx,
+    transparent 20rpx
+  );
+  opacity: 0.6;
 }
 
-.action-button,
-.action-badge {
-  padding: 10rpx 20rpx;
-  border-radius: 20rpx;
+/* ═══ Bottom section ═══ */
+.ticket-bottom {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+}
+
+.course-info {
+  flex: 1;
+}
+
+.course-name {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1a1a2e;
+  letter-spacing: 1rpx;
+}
+
+/* ─── Action area ─── */
+.action-area {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  flex-shrink: 0;
+}
+
+.action-btn,
+.action-badge {
+  padding: 10rpx 24rpx;
+  border-radius: 20rpx;
   font-size: 26rpx;
   font-weight: 600;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.action-button {
+.btn-book {
+  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
+  color: #fff;
+  box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
   min-width: 120rpx;
   height: 60rpx;
   transition: all 0.15s;
 
   &:active {
     opacity: 0.85;
+    transform: scale(0.96);
   }
 }
 
-.btn-book {
-  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
-  color: #fff;
-  box-shadow: 0 4rpx 12rpx rgba($primary-dark, 0.25);
-}
-
-.action-badge {
-  padding: 8rpx 16rpx;
-  font-size: 24rpx;
-  white-space: nowrap;
-}
-
 .badge-booked {
   background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
   color: $primary-dark;
@@ -429,8 +412,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
   color: #bbb;
 }
 
-.action-cancel {
-  padding: 4rpx 12rpx;
+.cancel-link {
   font-size: 22rpx;
   color: #ef4444;
   font-weight: 500;