From c9c308d9cfb76aa0997d474309bfb9f311268945 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 23 Jun 2026 11:20:53 +0800
Subject: [PATCH] styling: appointment

---
 .../src/pages/appointment.vue                 | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/citizen-frontend/src/pages/appointment.vue b/app/citizen-frontend/src/pages/appointment.vue
index a06ee5c..4062508 100644
--- a/app/citizen-frontend/src/pages/appointment.vue
+++ b/app/citizen-frontend/src/pages/appointment.vue
@@ -10,7 +10,7 @@
       </v-card>
 
       <!-- 活動分類選擇 -->
-      <v-tabs v-model="filterTab" class="mb-4 bg-white rounded-lg elevation-1" color="primary" grow>
+      <v-tabs v-model="filterTab" class="mb-4 bg-white rounded-xl elevation-1" color="primary" grow>
         <v-tab value="all">全部活動</v-tab>
         <v-tab value="registered">我的報名</v-tab>
       </v-tabs>
@@ -18,22 +18,22 @@
       <!-- 活動列表 -->
       <div v-if="filteredAppointments.length === 0" class="text-center py-12">
         <v-icon class="mb-3" color="grey-lighten-1" icon="mdi-calendar-blank" size="64" />
-        <div class="text-subtitle-1 text-grey font-weight-bold">目前沒有相關活動</div>
+        <div class="text-title-small text-grey font-weight-bold">目前沒有相關活動</div>
       </div>
 
       <v-row v-else>
         <v-col v-for="apt in filteredAppointments" :key="apt.id" class="mb-4" cols="12">
-          <v-card class="rounded-xl elevation-3 border-accent-light" color="surface">
+          <v-card class="rounded-xl elevation-3" color="surface">
             <!-- 卡片頂部狀態條 -->
-            <v-card-item class="bg-teal-lighten-5 py-2">
+            <v-card-item class="bg-teal-lighten-5 py-4">
               <div class="d-flex justify-space-between align-center">
-                <span class="text-caption font-weight-bold text-primary">
+                <span class="text-title-medium font-weight-bold text-primary">
                   <v-icon class="mr-1" icon="mdi-office-building" size="14" />
                   {{ apt.organizer }}
                 </span>
 
                 <v-chip
-                  class="font-weight-black text-caption"
+                  class="font-weight-black text-title-small"
                   :color="getStatusColor(apt.status)"
                   size="small"
                   variant="flat"
@@ -43,27 +43,27 @@
               </div>
             </v-card-item>
 
-            <v-card-text class="pt-4 px-4 pb-2">
-              <h2 class="text-subtitle-1 font-weight-bold text-grey-darken-4 mb-3">
+            <v-card-text>
+              <h2 class="text-title-large font-weight-bold text-grey-darken-4 mb-4">
                 {{ apt.title }}
               </h2>
 
               <div class="d-flex align-start mb-2">
-                <v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-calendar-clock" size="18" />
+                <v-icon class="mr-2" color="primary" icon="mdi-calendar-clock" size="18" />
 
                 <div class="text-body-2 text-grey-darken-3">
                   <span class="font-weight-bold">{{ apt.date }}</span>
-                  <span class="ml-2 text-grey">{{ apt.time }}</span>
+                  <span class="ml-4 text-grey-darken-1">{{ apt.time }}</span>
                 </div>
               </div>
 
-              <div class="d-flex align-start mb-2">
+              <!-- <div class="d-flex align-start mb-2">
                 <v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-map-marker" size="18" />
                 <div class="text-body-2 text-grey-darken-3">{{ apt.location }}</div>
-              </div>
+              </div> -->
 
               <div class="d-flex align-start mb-3">
-                <v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-human-capacity" size="18" />
+                <v-icon class="mr-2" color="primary" icon="mdi-human-queue" size="18" />
 
                 <div class="text-body-2 text-grey-darken-3">
                   剩餘名額：<span
@@ -77,7 +77,7 @@
               <v-divider class="my-2" />
 
               <!-- 量測項目標籤 -->
-              <div class="mb-2">
+              <!-- <div class="mb-2">
                 <div class="text-caption font-weight-bold text-grey mb-1">量測項目：</div>
 
                 <div class="d-flex flex-wrap gap-1">
@@ -92,7 +92,7 @@
                     {{ item }}
                   </v-chip>
                 </div>
-              </div>
+              </div> -->
             </v-card-text>
 
             <!-- 卡片按鈕操作 -->
@@ -119,7 +119,6 @@
                       block
                       class="rounded-lg text-white font-weight-bold"
                       color="primary"
-                      prepend-icon="mdi-qrcode"
                       variant="flat"
                       @click="showCheckinQRCode(apt)"
                     >
@@ -191,7 +190,7 @@
               variant="tonal"
               @click="simulateOnSiteCheckin"
             >
-              模擬現場人員掃描 (立刻報到)
+              已由現場人員掃描報到
             </v-btn>
           </v-card-text>
 
@@ -292,5 +291,4 @@ function simulateOnSiteCheckin () {
   height: 244px;
   overflow: hidden;
 }
-
 </style>