fix: 更換研究報告圖片

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

@@ -1,45 +1,31 @@
 <script setup lang="ts">
+import coverImage from '@/assets/introduction/functional _fitness_all_ages/00_cover.jpg'
+import overviewImage01 from '@/assets/introduction/functional _fitness_all_ages/01_overview.jpg'
+import methodsImage from '@/assets/introduction/functional _fitness_all_ages/02_methods.jpg'
+import resultsImage from '@/assets/introduction/functional _fitness_all_ages/03_results.jpg'
+import overviewImage02 from '@/assets/introduction/functional _fitness_all_ages/04_overview.jpg'
 import Layout from '@/components/layout/DefaultLayout.vue'
 
 const slides = [
   {
-    title: '公益普測計畫',
-    src: new URL('../assets/introduction/公益普測計畫.jpg', import.meta.url).href,
-  },
-  {
-    title: '全齡功能性體適能衰退之研究',
-    src: new URL(
-      '../assets/introduction/全齡功能性體適能衰退之研究/0- 全齡功能性體適能衰退之研究.jpg',
-      import.meta.url,
-    ).href,
+    title: '封面',
+    src: coverImage,
   },
   {
     title: '研究總覽',
-    src: new URL(
-      '../assets/introduction/全齡功能性體適能衰退之研究/1 - 研究總覽.jpg',
-      import.meta.url,
-    ).href,
+    src: overviewImage01,
   },
   {
     title: '方法與指標',
-    src: new URL(
-      '../assets/introduction/全齡功能性體適能衰退之研究/2 - 方法與指標.jpg',
-      import.meta.url,
-    ).href,
+    src: methodsImage,
   },
   {
     title: '主要結果',
-    src: new URL(
-      '../assets/introduction/全齡功能性體適能衰退之研究/3 - 主要結果.jpg',
-      import.meta.url,
-    ).href,
+    src: resultsImage,
   },
   {
     title: '研究總覽',
-    src: new URL(
-      '../assets/introduction/全齡功能性體適能衰退之研究/4 - 研究總覽.jpg',
-      import.meta.url,
-    ).href,
+    src: overviewImage02,
   },
 ]
 </script>
@@ -48,7 +34,7 @@ const slides = [
   <Layout>
     <template #main>
       <v-card variant="flat">
-        <v-card-title class="font-weight-bold text-primary d-flex align-center">
+        <v-card-title class="font-weight-bold text-primary d-flex align-center py-0">
           <v-icon class="mr-4" color="accent" icon="mdi-information-outline" />
           計畫簡介
         </v-card-title>
@@ -74,8 +60,9 @@ const slides = [
 
 <style scoped>
 .introduction-carousel {
-  height: min(58vh, 560px) !important;
-  min-height: 220px;
+  height: calc(100dvh - 220px) !important;
+  min-height: 420px;
+  max-height: 680px;
 }
 
 .introduction-carousel :deep(.v-window__container),
@@ -90,6 +77,13 @@ const slides = [
   object-position: center;
 }
 
+@media (max-width: 600px) {
+  .introduction-carousel {
+    height: calc(100dvh - 180px) !important;
+    min-height: 520px;
+  }
+}
+
 .introduction-carousel :deep(.v-carousel__controls__item .v-icon) {
   color: rgb(var(--v-theme-accent)) !important;
   opacity: 1;