style: add font

app/citizen-frontend/src/components/layout/DefaultLayout.vue

@@ -38,7 +38,13 @@
     </v-app-bar>
 
     <!-- 側邊抽屜導航 -->
-    <v-navigation-drawer v-model="drawer" location="left" temporary width="300">
+    <v-navigation-drawer
+      v-model="drawer"
+      class="bg-background"
+      location="left"
+      temporary
+      width="300"
+    >
       <v-list-item v-if="store.isLoggedIn" class="py-4 bg-primary text-white">
         <template #prepend>
           <v-avatar color="accent" size="48">
@@ -57,7 +63,7 @@
         }}</v-list-item-subtitle>
       </v-list-item>
 
-      <v-list-item v-else class="py-4 bg-primary text-white">
+      <v-list-item v-else class="py-2 bg-primary text-white">
         <template #prepend>
           <v-avatar color="accent" size="48">
             <v-icon color="white" icon="mdi-heart-pulse" />
@@ -167,31 +173,40 @@
     </v-navigation-drawer>
 
     <!-- 主要內容區 -->
-    <v-main class="bg-background min-vh-100 pb-16">
-      <v-container class="px-4 py-4 max-width-mobile" fluid>
+    <v-main class="bg-white min-vh-100 pb-16">
+      <v-container class="px-4 py-4" fluid>
         <slot name="main" />
       </v-container>
     </v-main>
 
     <!-- 底部導航欄 (Mobile First 核心) -->
-    <v-bottom-navigation v-model="activeTab" color="primary" tag="div" grow>
+    <v-bottom-navigation
+      v-model="activeTab"
+      bg-color="background"
+      color="primary-darken-1"
+      grow
+      tag="div"
+    >
       <v-btn to="/" value="home">
-        <v-icon color="secondary">mdi-view-dashboard</v-icon>
+        <v-icon :color="getBottomNavIconColor('home')">mdi-view-dashboard</v-icon>
         <span class="bottom-nav-text">主控台</span>
       </v-btn>
 
       <v-btn to="/self-assessment" value="self-assessment">
-        <v-icon color="secondary">mdi-clipboard-text-search</v-icon>
+        <v-icon :color="getBottomNavIconColor('self-assessment')">
+          mdi-clipboard-text-search
+        </v-icon>
+
         <span class="bottom-nav-text">線上自評</span>
       </v-btn>
 
       <v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
-        <v-icon color="secondary">mdi-calendar-check</v-icon>
+        <v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
         <span class="bottom-nav-text">活動預約</span>
       </v-btn>
 
       <v-btn v-if="store.isLoggedIn" to="/checkin" value="checkin">
-        <v-icon color="secondary">mdi-qrcode-scan</v-icon>
+        <v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon>
         <span class="bottom-nav-text">現場量測</span>
       </v-btn>
     </v-bottom-navigation>
@@ -292,23 +307,27 @@ const showEmergency = ref(false)
 // 無障礙狀態 (可持久化儲存於 localStorage)
 const isLargeText = ref(localStorage.getItem('mode-large-text') === 'true')
 
-watch(isLargeText, (newVal) => {
+watch(isLargeText, newVal => {
   localStorage.setItem('mode-large-text', String(newVal))
 })
 
 // 同步底部導航狀態與當前路由
 watch(
   () => route.path,
-  (path) => {
+  path => {
     if (path === '/') activeTab.value = 'home'
     else if (path.startsWith('/self-assessment')) activeTab.value = 'self-assessment'
     else if (path.startsWith('/appointment')) activeTab.value = 'appointment'
     else if (path.startsWith('/checkin')) activeTab.value = 'checkin'
   },
-  { immediate: true }
+  { immediate: true },
 )
 
-function handleLogout() {
+function getBottomNavIconColor (value: string) {
+  return activeTab.value === value ? 'secondary' : 'secondary-darken-1'
+}
+
+function handleLogout () {
   store.logout()
   router.push('/login')
   drawer.value = false