style: 體適能

app/citizen-frontend/src/pages/course.vue

@@ -1,25 +1,35 @@
 <template>
   <Layout>
     <template #main>
-      <!-- 標題卡：組別與說明 -->
+      <!-- 頁面標題：刻意縮小，把版面讓給下方的組別 -->
-      <v-card class="border-primary border-xl rounded-xl mb-6" variant="flat">
+      <div class="d-flex align-center mb-3">
-        <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" color="primary" icon="mdi-calendar-week" size="18" />
-          <v-icon class="mr-2" color="primary" icon="mdi-calendar-week" />
-          課程建議
 
-          <v-spacer />
+        <span class="text-title-small font-weight-bold text-grey-darken-1">課程建議</span>
+      </div>
 
-          <v-chip :color="store.groupMeta.color" size="small" variant="flat">
+      <!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
-            {{ store.groupMeta.label }}
+      <v-card class="rounded-xl mb-6 overflow-hidden" variant="flat">
-          </v-chip>
+        <div class="d-flex align-center ga-4 pa-4" :class="`bg-${store.groupMeta.color}`">
-        </v-card-title>
+          <v-avatar class="group-avatar" size="60">
+            <v-icon color="white" :icon="store.groupMeta.icon" size="34" />
+          </v-avatar>
 
-        <v-card-subtitle class="text-wrap">
+          <div>
+            <div class="text-title-small group-caption">你的體適能組別</div>
+
+            <div class="text-h5 font-weight-black text-white">{{ store.groupMeta.label }}</div>
+          </div>
+        </div>
+
+        <v-card-text class="text-body-medium text-grey-darken-2">
           {{ store.groupMeta.description }}
-        </v-card-subtitle>
+        </v-card-text>
+      </v-card>
 
       <!-- 時段篩選尚未開放給使用者操作，先隱藏 -->
-        <v-card-text v-if="SHOW_SLOT_FILTER" class="pt-4">
+      <v-card v-if="SHOW_SLOT_FILTER" class="rounded-xl mb-6" variant="flat">
+        <v-card-text>
           <div class="text-title-small text-grey mb-2">選擇要顯示的時段</div>
 
           <v-btn-toggle
@@ -306,4 +316,13 @@ onMounted(() => {
 .time-col {
   width: 22%;
 }
+
+/* 組別卡片：半透明白底圓形與次級白字，Vuetify 沒有對應的 utility class */
+.group-avatar {
+  background-color: rgba(255, 255, 255, 0.22);
+}
+
+.group-caption {
+  color: rgba(255, 255, 255, 0.85);
+}
 </style>

app/citizen-frontend/src/stores/course.ts

@@ -25,6 +25,8 @@ const MOCK_DELAY = 300
 export interface GroupMeta {
   label: string
   color: string
+  /** 以活動強度遞增的圖示表達組別高低，讓組別不只靠顏色辨識 */
+  icon: string
   description: string
 }
 
@@ -33,16 +35,19 @@ export const GROUP_META: Record<FitnessGroup, GroupMeta> = {
   low: {
     label: '低體適能',
     color: 'warning',
+    icon: 'mdi-walk',
     description: '肌力、平衡與心肺功能較弱，以降低跌倒風險、重建日常生活功能為優先。',
   },
   medium: {
     label: '中體適能',
-    color: 'secondary',
+    color: 'info',
+    icon: 'mdi-run',
     description: '尚未失能但已出現部分衰退，重點在累積功能儲備、增加肌肉量與心肺能力。',
   },
   high: {
     label: '高體適能',
     color: 'success',
+    icon: 'mdi-run-fast',
     description: '功能儲備高、跌倒風險低，目標是延緩衰退速度並長期維持既有功能。',
   },
 }