From bff56559c894f089c72e688c9a2c0688464efbd8 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Wed, 12 Aug 2026 09:16:27 +0800
Subject: [PATCH] style: block order

---
 app/citizen-frontend/src/pages/course.vue   | 174 ++++++++++----------
 app/citizen-frontend/src/plugins/vuetify.ts |  20 +--
 2 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/app/citizen-frontend/src/pages/course.vue b/app/citizen-frontend/src/pages/course.vue
index 8bdca1c..436d1a5 100644
--- a/app/citizen-frontend/src/pages/course.vue
+++ b/app/citizen-frontend/src/pages/course.vue
@@ -88,93 +88,6 @@
 
       <!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
       <template v-else>
-        <v-card class="rounded-lg elevation-1 mb-4 overflow-hidden">
-          <v-img :alt="`${store.groupMeta.label}課表示意圖`" :src="groupIllustration" />
-        </v-card>
-
-        <v-card class="rounded-lg elevation-1 overflow-hidden">
-          <v-table class="course-table" density="comfortable">
-            <thead>
-              <tr>
-                <th class="day-col bg-primary text-white text-center">星期</th>
-
-                <th
-                  v-for="slot in visibleSlots"
-                  :key="slot.key"
-                  class="text-white text-center"
-                  :class="slot.headerClass"
-                >
-                  <v-icon class="mr-1" :icon="slot.icon" size="16" />
-                  {{ slot.label }}
-                </th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr
-                v-for="row in store.courseList"
-                :key="row.day"
-                :class="{ 'bg-teal-lighten-5': row.day === todayDay }"
-              >
-                <td class="day-col text-center font-weight-bold text-primary">
-                  {{ DAY_NAMES[row.day - 1] }}
-                </td>
-
-                <td v-for="slot in visibleSlots" :key="slot.key" class="slot-cell text-body-medium text-wrap">
-                  <div class="d-flex flex-column flex-md-row align-center ga-1 ga-md-3">
-                    <v-avatar class="slot-avatar flex-shrink-0" rounded="lg">
-                      <v-img
-                        :alt="`${DAY_NAMES[row.day - 1]}${slot.label}課表插圖`"
-                        :src="scheduleCardImage(row.day, slot.key)"
-                      />
-                    </v-avatar>
-
-                    <span>{{ row[slot.key] }}</span>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-card>
-
-        <!-- 運動時間建議：對應 doc/運動時間建議.png -->
-        <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
-          <v-card-title class="text-title-medium font-weight-bold text-primary d-flex align-center">
-            <v-icon class="mr-2" color="primary" icon="mdi-timer-outline" size="20" />
-            運動時間建議
-          </v-card-title>
-
-          <v-divider />
-
-          <v-table class="course-table" density="comfortable">
-            <thead>
-              <tr>
-                <th class="day-col bg-primary text-white text-center">星期</th>
-                <th class="bg-primary text-white text-center">運動內容</th>
-                <th class="time-col bg-primary text-white text-center">時間</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr
-                v-for="row in detail.duration"
-                :key="row.day"
-                :class="{ 'bg-teal-lighten-5': row.day === todayDay }"
-              >
-                <td class="day-col text-center font-weight-bold text-primary">
-                  {{ DAY_NAMES[row.day - 1] }}
-                </td>
-
-                <td class="text-body-medium text-wrap">{{ row.content }}</td>
-
-                <td class="time-col text-center text-body-medium">
-                  {{ row.minutes === null ? '—' : `${row.minutes} 分` }}
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-card>
-
         <!-- 課程說明：對應 doc/課程說明.md -->
         <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
           <v-card-title class="text-title-medium font-weight-bold text-primary d-flex align-center">
@@ -244,6 +157,93 @@
             </v-expansion-panel>
           </v-expansion-panels>
         </v-card>
+
+        <!-- 運動時間建議：對應 doc/運動時間建議.png -->
+        <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
+          <v-card-title class="text-title-medium font-weight-bold text-primary d-flex align-center">
+            <v-icon class="mr-2" color="primary" icon="mdi-timer-outline" size="20" />
+            運動時間建議
+          </v-card-title>
+
+          <v-divider />
+
+          <v-table class="course-table" density="comfortable">
+            <thead>
+              <tr>
+                <th class="day-col bg-primary text-white text-center">星期</th>
+                <th class="bg-primary text-white text-center">運動內容</th>
+                <th class="time-col bg-primary text-white text-center">時間</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr
+                v-for="row in detail.duration"
+                :key="row.day"
+                :class="{ 'bg-teal-lighten-5': row.day === todayDay }"
+              >
+                <td class="day-col text-center font-weight-bold text-primary">
+                  {{ DAY_NAMES[row.day - 1] }}
+                </td>
+
+                <td class="text-body-medium text-wrap">{{ row.content }}</td>
+
+                <td class="time-col text-center text-body-medium">
+                  {{ row.minutes === null ? '—' : `${row.minutes} 分` }}
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card>
+
+        <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
+          <v-table class="course-table" density="comfortable">
+            <thead>
+              <tr>
+                <th class="day-col bg-primary text-white text-center">星期</th>
+
+                <th
+                  v-for="slot in visibleSlots"
+                  :key="slot.key"
+                  class="text-white text-center"
+                  :class="slot.headerClass"
+                >
+                  <v-icon class="mr-1" :icon="slot.icon" size="16" />
+                  {{ slot.label }}
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr
+                v-for="row in store.courseList"
+                :key="row.day"
+                :class="{ 'bg-teal-lighten-5': row.day === todayDay }"
+              >
+                <td class="day-col text-center font-weight-bold text-primary">
+                  {{ DAY_NAMES[row.day - 1] }}
+                </td>
+
+                <td v-for="slot in visibleSlots" :key="slot.key" class="slot-cell text-body-medium text-wrap">
+                  <div class="d-flex flex-column flex-md-row align-center ga-1 ga-md-3">
+                    <v-avatar class="slot-avatar flex-shrink-0" rounded="lg">
+                      <v-img
+                        :alt="`${DAY_NAMES[row.day - 1]}${slot.label}課表插圖`"
+                        :src="scheduleCardImage(row.day, slot.key)"
+                      />
+                    </v-avatar>
+
+                    <span>{{ row[slot.key] }}</span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card>
+
+        <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
+          <v-img :alt="`${store.groupMeta.label}課表示意圖`" :src="groupIllustration" />
+        </v-card>
       </template>
     </template>
   </Layout>
diff --git a/app/citizen-frontend/src/plugins/vuetify.ts b/app/citizen-frontend/src/plugins/vuetify.ts
index 8af7ec3..a409f9d 100644
--- a/app/citizen-frontend/src/plugins/vuetify.ts
+++ b/app/citizen-frontend/src/plugins/vuetify.ts
@@ -14,17 +14,17 @@ import 'vuetify/styles'
 const HPTheme: ThemeDefinition = {
   dark: false,
   colors: {
-    'background': '#def0de', // 頁面背景
-    'surface': '#FFFFFF', // 卡片與白底區塊
-    'primary': '#18a442', // 主要品牌色
-    'primary-darken-1': '#008828',
-    'secondary': '#dc5349', // CTA 按鈕
+    background: '#F0F9F6', // 頁面背景
+    surface: '#FFFFFF', // 卡片與白底區塊
+    primary: '#1D7063', // 主要品牌色
+    'primary-darken-1': '#145248',
+    secondary: '#dc5349', // CTA 按鈕
     'secondary-darken-1': '#ab4c3d',
-    'accent': '#892894', // 標籤與強調
-    'error': '#B00020',
-    'info': '#2196F3',
-    'success': '#4CAF50',
-    'warning': '#FB8C00',
+    accent: '#47C2A6', // 標籤與強調
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
   },
 }