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">
-        <v-card-title class="d-flex align-center">
-          <v-icon class="mr-2" color="primary" icon="mdi-calendar-week" />
-          課程建議
+      <!-- 頁面標題：刻意縮小，把版面讓給下方的組別 -->
+      <div class="d-flex align-center mb-3">
+        <v-icon class="mr-2" color="primary" icon="mdi-calendar-week" size="18" />
 
-          <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-chip>
-        </v-card-title>
+      <!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
+      <v-card class="rounded-xl mb-6 overflow-hidden" variant="flat">
+        <div class="d-flex align-center ga-4 pa-4" :class="`bg-${store.groupMeta.color}`">
+          <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>