fix: change picture

app/citizen-frontend/src/components/BrandAvatar.vue

@@ -2,33 +2,29 @@
 withDefaults(
   defineProps<{
     size?: number | string;
-    iconSize?: number | string;
   }>(),
   {
-    size: 80,
+    size: 64,
-    iconSize: 48,
   },
 );
 </script>
 
 <template>
-  <v-avatar class="brand-avatar-spin" color="primary" :size="size">
+  <v-avatar class="brand-avatar" :size="size">
-    <v-icon color="red-accent-1" icon="mdi-heart-pulse" :size="iconSize" />
+    <img alt="運動玩轉健康力" class="brand-avatar-image" src="/logo.jpg" />
   </v-avatar>
 </template>
 
 <style scoped>
-.brand-avatar-spin {
+.brand-avatar {
-  animation: brand-avatar-spin 0.9s ease-out both;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.14);
 }
 
-@keyframes brand-avatar-spin {
+.brand-avatar-image {
-  from {
+  display: block;
-    transform: rotate(0deg);
+  height: 100%;
-  }
+  object-fit: cover;
-
+  width: 100%;
-  to {
-    transform: rotate(360deg);
-  }
 }
 </style>

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

@@ -191,8 +191,11 @@
     </v-navigation-drawer>
 
     <!-- 主要內容區 -->
-    <v-main class="bg-white min-vh-100 pb-16">
+    <v-main
-      <v-container class="px-4 py-4">
+      class="bg-white min-vh-100"
+      :class="{ 'pb-16': BOTTOM_NAVIGATION_ENABLED }"
+    >
+      <v-container class="px-4 py-2">
         <slot name="main" />
       </v-container>
     </v-main>

app/citizen-frontend/src/config/features.ts

@@ -1,5 +1,6 @@
 export const APPOINTMENT_ENABLED = false;
 export const BOTTOM_NAVIGATION_ENABLED = false;
 export const CHECKIN_ENABLED = false;
+export const EXERCISE_DURATION_RECOMMENDATION_ENABLED = true;
 export const RADAR_ENABLED = false;
 export const SELF_ASSESSMENT_ENABLED = false;

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

@@ -211,7 +211,10 @@
           </v-card>
 
           <!-- 運動時間建議：對應 doc/運動時間建議.png -->
-          <v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
+          <v-card
+            v-if="EXERCISE_DURATION_RECOMMENDATION_ENABLED"
+            class="rounded-lg elevation-1 mt-4 overflow-hidden"
+          >
             <v-expansion-panels
               v-model="durationTablePanel"
               flat
@@ -398,6 +401,7 @@
 import type { TimeSlot, YesNo } from "@/api/types";
 import { computed, onMounted, ref } from "vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
+import { EXERCISE_DURATION_RECOMMENDATION_ENABLED } from "@/config/features";
 import { COURSE_DETAIL } from "@/data/courseDetail";
 import { useCourseStore } from "@/stores/course";
 

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

@@ -184,7 +184,9 @@
 
       <template v-else>
         <div class="text-center mb-6">
-          <BrandAvatar class="elevation-2" :icon-size="42" :size="72" />
+          <div class="brand-avatar-backdrop">
+            <BrandAvatar :size="128" />
+          </div>
         </div>
 
         <v-card class="rounded-xl elevation-2 mb-4 py-4" color="surface">
@@ -681,4 +683,11 @@ function updateTodayTimeString() {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
 }
+
+.brand-avatar-backdrop {
+  display: inline-flex;
+  padding: 4px;
+  border-radius: 50%;
+  background-color: rgba(var(--v-theme-primary), 0.14);
+}
 </style>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import expoParkOverviewImage from "@/assets/introduction/expo_park/expo_00.png";
+import expoParkOverviewImage from "@/assets/introduction/expo_park_open/open_00.jpg";
-import sportsEmpowerHubImage from "@/assets/introduction/expo_park/expo_01.png";
+import sportsEmpowerHubImage from "@/assets/introduction/expo_park_open/open_01.jpg";
-import fitnessResearchImage from "@/assets/introduction/expo_park/expo_02.png";
+import fitnessResearchImage from "@/assets/introduction/expo_park_open/open_02.jpg";
-import expoParkZonesImage from "@/assets/introduction/expo_park/expo_03.png";
+import expoParkZonesImage from "@/assets/introduction/expo_park_open/open_03.jpg";
 import Layout from "@/components/layout/DefaultLayout.vue";
 
 const slides = [