From 818aa628aacc106bf7482c1963f760b7110690ba Mon Sep 17 00:00:00 2001
From: Yu-Jia Huang <shiusun246@gmail.com>
Date: Tue, 14 Nov 2023 23:37:00 +0800
Subject: [PATCH] feat: add activity modal

---
 assets/image/cursor.svg                  |  9 +++
 assets/scss/style.scss                   |  5 +-
 components/UI/BaseButton.vue             | 12 ++--
 components/UI/BaseSwiper.vue             | 89 ++++++++++++++++++------
 components/UI/Dialog/ActivityContent.vue | 39 ++++++-----
 components/UI/Dialog/BaseDialog.vue      | 24 +++++--
 components/UI/Dialog/PolicyContent.vue   | 19 +++--
 components/UI/Dialog/ServiceContent.vue  |  2 +-
 layouts/BaseFooter.vue                   |  3 +
 layouts/default.vue                      |  5 +-
 pages/index.vue                          |  2 -
 stores/home.ts                           |  2 +-
 utils/constant.ts                        | 27 +++----
 13 files changed, 162 insertions(+), 76 deletions(-)
 create mode 100644 assets/image/cursor.svg

diff --git a/assets/image/cursor.svg b/assets/image/cursor.svg
new file mode 100644
index 0000000..1d9f3a1
--- /dev/null
+++ b/assets/image/cursor.svg
@@ -0,0 +1,9 @@
+<svg width="39" height="33" viewBox="0 0 39 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1827 5.92046C13.1837 2.88029 16.0464 0.685638 19.4217 0.685638C22.8695 0.685638 25.7825 2.97562 26.7227 6.11759C27.9792 5.20436 29.5255 4.66572 31.1977 4.66572C35.4059 4.66572 38.8174 8.07717 38.8174 12.2854C38.8174 15.7892 36.4525 18.7406 33.2318 19.6305C32.666 26.7625 26.6991 32.3736 19.4217 32.3736C12.1079 32.3736 6.11772 26.7061 5.60357 19.5232C2.56538 18.521 0.372559 15.6593 0.372559 12.2854C0.372559 8.07717 3.78401 4.66572 7.99224 4.66572C9.54026 4.66572 10.9805 5.12735 12.1827 5.92046Z" fill="url(#paint0_linear_4848_1863)"/>
+<defs>
+<linearGradient id="paint0_linear_4848_1863" x1="0.965672" y1="20.0519" x2="37.996" y2="20.0519" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6793B"/>
+<stop offset="1" stop-color="#FF4185"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index bb55591..5160ab1 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -3,7 +3,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
 
-
 @font-face {
   font-family: 'mantou-sans';
   src: url('/assets/fonts/MantouSans-Regular.ttf') format('truetype');
@@ -174,7 +173,7 @@ position:absolute,
   }
 
   .cursor-pointer{
-    cursor: pointer;
+    cursor: url('~/assets/image/cursor.svg'),auto;
     &:hover{
       background: linear-gradient(90deg, #E6793B 1.54%, #FF4185 97.86%);
       background: -webkit-linear-gradient(90deg, #E6793B 1.54%, #FF4185 97.86%);
@@ -184,4 +183,4 @@ position:absolute,
     }
   }
 
-}
\ No newline at end of file
+}
diff --git a/components/UI/BaseButton.vue b/components/UI/BaseButton.vue
index d08080c..4b718d9 100644
--- a/components/UI/BaseButton.vue
+++ b/components/UI/BaseButton.vue
@@ -1,7 +1,7 @@
 <template>
   <v-btn variant="flat" plain :class="['baseButton', 'rounded-pill', 'pa-0', props.fullWidth ? 'w-100' : '']">
-    <p
-      :class="[props.fullWidth ? '':'text-h6', 'my-5', 'ml-6', props.icon ? 'mr-2' : 'mr-6', props.theme === 'primary' ? 'text-white' : 'text-text-primary']" :style="{'fontWeight': props.fullWidth ? '600':''}">
+    <p :class="[props.fullWidth ? '' : 'text-h6', 'my-5', 'ml-6', props.icon ? 'mr-2' : 'mr-6', props.theme === 'primary' ? 'text-white' : 'text-text-primary']"
+      :style="{ 'fontWeight': props.fullWidth ? '600' : '' }">
       {{
         props.title }}</p>
     <v-icon v-if="props.icon" :icon="props.icon"
@@ -38,17 +38,19 @@ const color = computed(() => props.theme === 'primary' ? "#DA7D4A" : props.theme
 </script>
 
 <style scoped lang="scss">
-.v-btn--variant-tonal .v-btn__underlay{
-  background: white
+.v-btn--variant-tonal .v-btn__underlay {
+  background: white;
+
 }
+
 .v-btn.baseButton {
   width: fit-content;
   height: fit-content;
   background-color: v-bind(color) !important;
+  cursor: url('~/assets/image/cursor.svg'), auto;
 
   .v-btn__underlay {
     background: none;
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/components/UI/BaseSwiper.vue b/components/UI/BaseSwiper.vue
index 028ae68..73c1877 100644
--- a/components/UI/BaseSwiper.vue
+++ b/components/UI/BaseSwiper.vue
@@ -1,6 +1,6 @@
 <template>
-  <swiper :effect="'coverflow'" :spaceBetween="0" :grabCursor="true" :centeredSlides="true" :slidesPerView="'auto'"
-    :pagination="customPagination" :modules="modules" :loop="true" class="mySwiper">
+  <swiper :navigation="customNavigation" :effect="'coverflow'" :spaceBetween="0" :grabCursor="true" :centeredSlides="true"
+    :slidesPerView="'auto'" :pagination="customPagination" :modules="modules" :loop="true" class="mySwiper">
     <swiper-slide v-for="policy in  [...POLICY, ...POLICY]   " :key="policy.id" class="bg-white d-flex">
       <v-img :src="policy.imgSrc" width="428px" class="ga-6" />
       <v-container class="pa-0 ml-lg-8 d-flex flex-column justify-center">
@@ -11,18 +11,27 @@
         }}</h4>
         <base-button title="查看" theme="primary" icon="mdi-arrow-right" @click="activateDialog(policy.id)"></base-button>
       </v-container></swiper-slide>
-    <div class="swiper-pagination"></div>
+    <div class="actions mt-3">
+      <div class="swiper-button-prev"><v-btn class="ma-2" variant="outlined" icon="mdi-arrow-left"></v-btn></div>
+      <div class="swiper-pagination"></div>
+      <div class="swiper-button-next"><v-btn class="ma-2" variant="outlined" icon="mdi-arrow-right"></v-btn></div>
+    </div>
+
+
+
   </swiper>
 </template>
 <script lang="ts">
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
 import 'swiper/css/pagination'
-import { Pagination } from 'swiper/modules'
+import 'swiper/css/navigation';
+import { Pagination, Navigation } from 'swiper/modules'
 import { POLICY } from '~/utils/constant'
 import BaseButton from '~/components/UI/BaseButton.vue';
 import { useHomeStore } from '~/stores/home'
 
+
 export default {
   components: {
     Swiper,
@@ -31,20 +40,26 @@ export default {
   },
   setup() {
     const homeStore = useHomeStore()
-    const activateDialog = (id:string) => {
-      homeStore.handleActiveDialog(Dialog.POLICY,id)
+    const activateDialog = (id: string) => {
+      homeStore.handleActiveDialog(Dialog.POLICY, id)
     }
     const customPagination = {
       el: '.swiper-pagination',
-      renderBullet: (index:number, className:string) => {
-        return `<span class="${className} mx-2 bg-primary" style="width:12px;height:12px" key={${index}} value={${index}}></span>`
+      renderBullet: (index: number, className: string) => {
+        return `<span class="${className} mx-2  bg-primary" style="width:12px;height:12px" key={${index}} value={${index}}></span>`
       }
     }
-    
+
+    const customNavigation = {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev'
+    }
+
     return {
-      modules: [Pagination],
+      modules: [Pagination, Navigation],
       customPagination,
-      activateDialog
+      activateDialog,
+      customNavigation
     }
   },
 }
@@ -67,28 +82,58 @@ export default {
   border-radius: 32px;
   overflow: hidden;
   transform: scale(0.9);
+
   &.swiper-slide-active {
     transform: scale(1);
   }
+
   img {
-  display: block;
-  width: 100%;
-}
+    display: block;
+    width: 100%;
+  }
 }
 
 .swiper-pagination {
-  bottom: var(--swiper-pagination-bottom, 8px);
-  top: var(--swiper-pagination-top, auto);
-  left: 0;
-  width: 100%;
+  width: fit-content;
+  position: static;
+  display: flex;
+  align-items: center;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
 }
 
-@media(max-width: 960px){
 
-  .swiper-slide{
+.swiper-button-next,
+.swiper-button-prev {
+  position: static;
+  display: block;
+  width: fit-content;
+  height: fit-content;
+  margin-top: 0px;
+
+  .v-btn--variant-outlined {
+    border: none;
+    background-color: white;
+    color: #DA7D4A
+  }
+
+  &::after {
+    content: "";
+    display: none;
+  }
+}
+
+
+
+@media(max-width: 960px) {
+
+  .swiper-slide {
     width: 311px;
-    height:508px;
-    display:flex;
+    height: 508px;
+    display: flex;
     flex-direction: column;
   }
 }
diff --git a/components/UI/Dialog/ActivityContent.vue b/components/UI/Dialog/ActivityContent.vue
index c81acc4..95df1ca 100644
--- a/components/UI/Dialog/ActivityContent.vue
+++ b/components/UI/Dialog/ActivityContent.vue
@@ -1,9 +1,10 @@
 <template>
-  <div :class="['d-flex', props.isDesktop ? 'flex-row' : 'flex-column', 'ga-8']">
+  <div :class="['d-flex', props.isDesktop ? 'flex-row' : 'flex-column', 'ga-8', 'h-100']">
     <div :class="['d-flex', 'flex-column', 'text-text-primary', 'text-body-1']"
-      :style="{ width: props.isDesktop ? '40%' : '' }"><img :src="activities.main?.imgSrc" class="rounded-lg"
-        :style="{ 'width': '100%', 'aspect-ratio': '507/400' }" />
-      <p :class="['mt-4', 'mb-2', props.isDesktop ? 'text-caption' : 'text-body-1']">{{ activities.main?.title}}
+      :style="{ width: props.isDesktop ? '40%' : '', position: props.isDesktop ? 'sticky' : undefined, height: '100%', top: '0px' }">
+      <img :src="activities.main?.imgSrc" class="rounded-lg"
+        :style="{ 'width': '100%', 'aspect-ratio': '343/251', 'objectFit': 'cover' }" />
+      <p :class="['mt-4', 'mb-2', props.isDesktop ? 'text-caption' : 'text-body-1']">{{ activities.main?.title }}
       </p>
       <div class="d-flex align-center ga-2">
         <p>分享</p><v-btn class="rounded-pill px-0 bg-white" style="height:32px;min-width:32px" variant="text"
@@ -11,21 +12,21 @@
             :class="item.class || ''"></v-icon></v-btn>
       </div>
     </div>
-    <div :style="{ width: props.isDesktop ? '60%' : '' }">
+    <div class="h-100" :style="{ width: props.isDesktop ? '60%' : '' }">
       <div>
-        <h4 class="text-primary text-h4 mb-10">{{ activities.main?.title }}</h4>
-        <!-- <div v-for="item in activities.main?.content" class="mb-6">
-          <h5 class="text-h5 mb-2">{{ item.title }}</h5>
-          <p>{{ item.content }}</p>
-        </div> -->
-        <v-card class="bg-gray-50 rounded-lg pa-4 d-flex flex-column w-100" style="margin-top:88px;box-shadow: none">
+        <h4 class="text-primary text-h4 mb-2">{{ activities.main?.title }}</h4>
+        <p class="text-text-caption mb-10">{{ activities.main?.date }}</p>
+        <p class="text-text-body-1 text-text-primary mb-6">{{ activities.main?.content }}</p>
+        <p class="text-text-body-1 text-text-primary mb-6" v-for="sub in activities.main?.subContent">{{ sub }}</p>
+        <v-card class="bg-gray-50 rounded-lg pa-4 d-flex flex-column w-100 mt-16" style="box-shadow: none">
           <p class="text-body-1 mb-4" style="font-weight: 600;">更多政策議題</p>
           <div class="d-flex ga-4"><v-card class="bg-transparent"
-              :style="{ 'box-shadow': 'none', 'max-width': props.isDesktop ? '244px' : '' }"
-              v-for="policy in activities.other">
-              <img :src="policy.imgSrc" class="rounded-lg w-100"
-                :style="{ height: props.isDesktop ? '134px' : undefined, objectFit: props.isDesktop ? 'cover' : undefined }" />
-              <p class="text-body-1 mt-3 text-text-primary">{{ policy.title }}</p>
+              :style="{ 'box-shadow': 'none', 'max-width': props.isDesktop ? '244px' : '', 'width': props.isDesktop ? '' : '50%' }"
+              v-for="activity in activities.other">
+              <img :src="activity.imgSrc" class="rounded-lg w-100"
+                :style="{ height: props.isDesktop ? '134px' : undefined, aspectRatio: '244/134', objectFit: 'cover' }" />
+              <p class="text-body-1 mt-3 text-text-primary cursor-pointer" @click="handleSelectActivity(activity.id)">{{
+                activity.title }}</p>
             </v-card>
           </div>
         </v-card>
@@ -45,6 +46,10 @@ const props = defineProps({
   }
 })
 const activities = computed(() => {
-  return { main: ACTIVITY.find(policy => policy.id === homeStore.activeDialog.id), other: ACTIVITY.filter(policy => policy.id !== homeStore.activeDialog.id) }
+  return { main: ACTIVITY.find(activity => activity.id === homeStore.activeDialog.id), other: ACTIVITY.filter(activity => activity.id !== homeStore.activeDialog.id) }
 })
+
+const handleSelectActivity = (id: string) => {
+  homeStore.handleActiveDialog(Dialog.ACTIVITY, id)
+}
 </script>
\ No newline at end of file
diff --git a/components/UI/Dialog/BaseDialog.vue b/components/UI/Dialog/BaseDialog.vue
index a78a084..00b5dd7 100644
--- a/components/UI/Dialog/BaseDialog.vue
+++ b/components/UI/Dialog/BaseDialog.vue
@@ -1,15 +1,15 @@
 <template>
   <v-row justify="center">
-    <v-dialog scrollable v-model="isActive" :width="props.isDesktop ? '95%' : undefined" style="max-width: 1440px"
+    <v-dialog scrollable v-model="isActive" :width="props.isDesktop ? '100%' : undefined" style="max-width: 1440px"
       :fullscreen="props.isDesktop ? false : true" :scrim="props.isDesktop ? true : false"
       @close="homeStore.handleActiveDialog(Dialog.NULL)" :attach="true" transition="dialog-bottom-transition">
-      <v-card class="rounded-xl pa-4" style="height:95%;box-shadow: none;">
+      <v-card :class="['rounded-xl', props.isDesktop ? 'pt-6 px-12 pb-12' : 'pa-4']" style="height:95%;box-shadow: none;">
         <v-card-title class="d-flex align-center justify-space-between pa-0">
           <h4 class="text-h5" style="font-weight: 700;">{{ title }}</h4><v-icon
             @click="homeStore.handleActiveDialog(Dialog.NULL)" icon="mdi-close-circle"
             :style="{ 'font-size': props.isDesktop ? '32px' : '24px' }"></v-icon>
         </v-card-title>
-        <v-card-text :class="['pa-0', props.isDesktop ? 'mt-4' : 'mt-2']">
+        <v-card-text :class="['pa-0', props.isDesktop ? 'mt-4' : 'mt-2']" ref="contentRef">
           <service-content :isDesktop="props.isDesktop"
             v-if="homeStore.activeDialog.type === Dialog.SERVICE"></service-content>
           <donate-content :isDesktop="props.isDesktop"
@@ -31,7 +31,10 @@ import DonateContent from '~/components/UI/Dialog/DonateContent.vue';
 import ActivityContent from '~/components/UI/Dialog/ActivityContent.vue';
 import PolicyContent from '~/components/UI/Dialog/PolicyContent.vue';
 import { DIALOG_TITLE } from '~/utils/constant';
+import { ref, watch } from 'vue';
+
 const homeStore = useHomeStore()
+const contentRef = ref<HTMLDivElement & { $el: HTMLDivElement } | null>(null)
 const isActive = computed(() => { return homeStore.activeDialog.type !== Dialog.NULL })
 const props = defineProps({
   isDesktop: {
@@ -40,8 +43,21 @@ const props = defineProps({
   }
 })
 
+watch(() => [homeStore.activeDialog.id, homeStore.activeDialog.type, contentRef.value], () => {
+  if (homeStore.activeDialog.id && (homeStore.activeDialog.type === Dialog.ACTIVITY || homeStore.activeDialog.type === Dialog.POLICY) && contentRef.value) {
+    contentRef.value.$el.scrollTop = 0
+  }
+})
+
 
 const title = computed(() => {
   return DIALOG_TITLE[`${homeStore.activeDialog.type as keyof typeof DIALOG_TITLE}`]
 })
-</script>
\ No newline at end of file
+
+</script>
+
+<style lang="scss" scoped>
+.v-card-text{
+  scroll-behavior: smooth;
+}
+</style>
\ No newline at end of file
diff --git a/components/UI/Dialog/PolicyContent.vue b/components/UI/Dialog/PolicyContent.vue
index 92015d9..7bea9a2 100644
--- a/components/UI/Dialog/PolicyContent.vue
+++ b/components/UI/Dialog/PolicyContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="['d-flex', props.isDesktop ? 'flex-row' : 'flex-column', 'ga-8']">
-    <div :class="['d-flex', 'flex-column', 'text-text-primary', 'text-body-1']"
-      :style="{ width: props.isDesktop ? '40%' : '' }"><img :src="policies.main?.imgSrc" class="rounded-lg"
+  <div :class="['d-flex', props.isDesktop ? 'flex-row' : 'flex-column', 'ga-8','h-100']" >
+    <div :class="['d-flex', 'flex-column', 'text-text-primary', 'text-body-1','h-100']"
+      :style="{ width: props.isDesktop ? '40%' : '',position: props.isDesktop ? 'sticky':undefined,top:'0px'}"><img :src="policies.main?.imgSrc" class="rounded-lg"
         :style="{ 'width': '100%', 'aspect-ratio': '507/400' }" />
       <p :class="['mt-4', 'mb-2', props.isDesktop ? 'text-caption' : 'text-body-1']">{{ policies.main?.title.join("") }}
       </p>
@@ -11,8 +11,8 @@
             :class="item.class || ''"></v-icon></v-btn>
       </div>
     </div>
-    <div :style="{ width: props.isDesktop ? '60%' : '' }">
-      <div>
+    <div :style="{ width: props.isDesktop ? '60%' : '' }" >
+
         <h4 class="text-primary text-h4 mb-10">{{ policies.main?.title.join("") }}</h4>
         <div v-for="item in policies.main?.list" class="mb-6">
           <h5 class="text-h5 mb-2">{{ item.title }}</h5>
@@ -24,11 +24,10 @@
               v-for="policy in policies.other">
               <img :src="policy.imgSrc" class="rounded-lg w-100"
                 :style="{ height: props.isDesktop ? '134px' : undefined, objectFit: props.isDesktop ? 'cover' : undefined }" />
-              <p class="text-body-1 mt-3 text-text-primary">{{ policy.title.join("") }}</p>
+              <p class="text-body-1 mt-3 text-text-primary cursor-pointer" @click="handleSelectItem(policy.id)" >{{ policy.title.join("") }}</p>
             </v-card>
           </div>
         </v-card>
-      </div>
     </div>
   </div>
 </template>
@@ -46,4 +45,10 @@ const props = defineProps({
 const policies = computed(() => {
   return { main: POLICY.find(policy => policy.id === homeStore.activeDialog.id), other: POLICY.filter(policy => policy.id !== homeStore.activeDialog.id) }
 })
+
+const handleSelectItem = (id:string) => {
+  homeStore.handleActiveDialog(Dialog.POLICY, id)
+}
+
+
 </script>
\ No newline at end of file
diff --git a/components/UI/Dialog/ServiceContent.vue b/components/UI/Dialog/ServiceContent.vue
index a7d71c7..b36a568 100644
--- a/components/UI/Dialog/ServiceContent.vue
+++ b/components/UI/Dialog/ServiceContent.vue
@@ -35,7 +35,7 @@
 
       <base-button title="送出意見" theme="primary" :fullWidth="true" :disabled="false" @click="handleMail"></base-button>
     </v-col>
-    <v-col v-else class="d-flex flex-column align-center h-100 justify-center ga-8">
+    <v-col v-else :class="['d-flex' ,'flex-column' ,'align-center', props.isDesktop? '': 'h-100', 'justify-center', 'ga-8']">
       <h3 class="text-h3">感謝您的意見</h3><v-img :src="donate_finish" :width="187"
         style="max-height:166px"></v-img><base-button style="width: 187px" title="關閉" theme="gray"
         @click="homeStore.handleActiveDialog(Dialog.NULL)"></base-button>
diff --git a/layouts/BaseFooter.vue b/layouts/BaseFooter.vue
index 9238319..af4c01a 100644
--- a/layouts/BaseFooter.vue
+++ b/layouts/BaseFooter.vue
@@ -61,5 +61,8 @@ import { LEGISLATOR } from '~/utils/constant';
       max-width: 100%;
     }
   }
+  .v-application .px-26{
+    padding:104px 0px 172px 0px
+  }
 }
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 2657593..567650a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,8 +3,7 @@
     <div>
       <v-app-bar :elevation="0" class="py-4 px-6 mr-4" style="background-color: transparent">
         <div class="w-100 d-flex justify-space-between align-center py-4 px-6 rounded-xl"
-          style="background: rgba(255, 255, 255, 0.8)">
-
+          style="background: rgba(255, 255, 255, 0.8);cursor: pointer;">
           <NuxtLink to="/" class="d-flex align-center">
             <v-img class="mr-2" :width="52" :height="43" :src="logo"></v-img>
             <h4 class="text-h4 text-primary">{{ LEGISLATOR.name }} {{ LEGISLATOR.englishName }}</h4>
@@ -18,6 +17,7 @@
       </v-app-bar>
       <v-container fluid class="main">
         <slot />
+        <base-footer></base-footer>
       </v-container>
       <bottom-nav></bottom-nav>
     </div>
@@ -29,6 +29,7 @@ import { LEGISLATOR, SOCIAL } from '@/utils/constant'
 import logo from '@/assets/image/logo.svg'
 import TopNav from '~/layouts/Nav/TopNav.vue';
 import BottomNav from '~/layouts/Nav/BottomNav.vue';
+import BaseFooter from './BaseFooter.vue';
 </script>
 <style scoped lang="scss">
 .main {
diff --git a/pages/index.vue b/pages/index.vue
index f5e7457..df1b960 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -49,7 +49,6 @@
         :imgSrc="item.imgSrc" :button="item.button"></base-action-card>
     </v-container>
     <bottom-intro></bottom-intro>
-<base-footer></base-footer>
 <base-dialog :isDesktop="isDesktop"></base-dialog>
   </div>
 </template>
@@ -65,7 +64,6 @@ import TopIntro from '~/components/Home/Intro/TopIntro.vue'
 import MainTitle from '~/components/UI/MainTitle.vue';
 import BaseSwiper from '~/components/UI/BaseSwiper.vue';
 import BaseActionCard from '~/components/UI/BaseActionCard.vue';
-import BaseFooter from '~/layouts/BaseFooter.vue';
 import BottomIntro from '~/components/Home/Intro/BottomIntro.vue';
 import BaseDialog from '~/components/UI/Dialog/BaseDialog.vue';
 import { useHomeStore } from '~/stores/home';
diff --git a/stores/home.ts b/stores/home.ts
index f7af93f..5afbcd3 100644
--- a/stores/home.ts
+++ b/stores/home.ts
@@ -9,7 +9,7 @@ export enum Dialog {
 }
 
 export const useHomeStore = defineStore('home', () => {
-  const activeDialog: { type: Dialog, id?: string } = reactive({ type: Dialog.POLICY, id: 'policy_1' })
+  const activeDialog: { type: Dialog, id?: string } = reactive({ type: Dialog.NULL})
   const handleActiveDialog = (type: Dialog, id?: string) => {
     activeDialog.type = type
     if (!id) {
diff --git a/utils/constant.ts b/utils/constant.ts
index 3293dea..5d45ef4 100644
--- a/utils/constant.ts
+++ b/utils/constant.ts
@@ -32,14 +32,14 @@ export const NAV = [{
   title: "小額捐款", route: "/donate", icon: nav_donate, activeIcon: nav_active_donate
 }, {
   title: "服務信箱", route: "/service", icon: nav_service, activeIcon: nav_active_service
-  }]
+}]
 
 export const DIALOG_TITLE = {
   [Dialog.POLICY]: "政策議題",
   [Dialog.ACTIVITY]: "最新活動",
   [Dialog.DONATE]: "小額捐款",
-  [Dialog.SERVICE]:"民眾信箱"
-  }
+  [Dialog.SERVICE]: "民眾信箱"
+}
 
 export const SOCIAL = [{
   color: "primary",
@@ -51,9 +51,9 @@ export const SOCIAL = [{
 }, {
   color: "primary",
   icon: "youtube"
-  }, {
+}, {
   color: 'primary',
-  icon:'twitter'
+  icon: 'twitter'
 }]
 
 export const PROMOTION = ["為喵星人，護台灣！", "從喵的眼中，看見台灣！", "喵的未來，人的希望！"]
@@ -66,22 +66,25 @@ export const ADVOCATE_CONTENT = "畢竟，民眾的身心健康與工作熱情
 
 
 export const ACTIVITY = [
-  { id:"activity_1",title: "參與台北寵物論壇，爭取貓咪友善環境", date: "2023/12/26", content: "炎炎夏日的周六，我走進了台北寵物論壇，帶著一副貓耳髮箍，決定要全力宣傳「貓咪至上」的理念！", imgSrc: seminar },
-  { id:"activity_2",title: "收容所模特兒大比拼！", date: "2023/12/20", content: "今天的收容所不再是一片寂靜。為了讓更多人認識到這裡的毛孩子，我們舉辦了一場前所未有的「模特兒走秀」！", imgSrc: show },
-  { id:"activity_3",title: "掃街模式開啟！帶著你的貓耳，來和我一起走！", date: "2023/12/24", content: "街上氣氛真的很棒，從小孩到大人，甚至有些狗狗朋友都帶著貓耳來找我握手，真的太可愛了！", imgSrc: walk },
+  {
+    id: "activity_1", title: "參與台北寵物論壇，爭取貓咪友善環境", date: "2023/12/26", content: "炎炎夏日的周六，我走進了台北寵物論壇，帶著一副貓耳髮箍，決定要全力宣傳「貓咪至上」的理念！", subContent: ['這不僅是一場為了擁護貓咪權益而參與的論壇，更是一場為建立貓咪友善環境而奮鬥的冒險。', '在這個嘈雜的城市裡，許多貓咪因為種種原因而面臨著挑戰，包括遭受遺棄、缺乏適切的醫療照護，以及環境不友善的問題。因此，我們進入了寵物論壇，積極參與並推動改變，讓這座城市成為貓咪們更幸福的家園。', '身穿一襲輕盈的貓咪圖案T恤，我向著論壇的參與者們展示了一份關於貓咪友善環境的提案。首先，我呼籲大家加強對貓咪的認識，鼓勵領養而非購買，並推廣絕育的重要性，以減少流浪貓的數量。同時，我提出建立更多的貓咪友善公共空間，如貓咪咖啡廳、貓主題公園等，提供更多機會讓人們與貓咪互動，促進彼此之間的情感連結。', '這場論壇不僅讓我們能夠發表意見，更讓我們與其他熱愛貓咪的人們建立起深厚的交流。我在現場結識了一位貓飼養專家，她分享了許多關於貓咪照顧的實用建議，從飲食到玩具，讓我更了解如何提供最好的生活品質給我的毛茸寶貝。', '在論壇中，我也得知了一個關於志願服務團隊的計畫，他們致力於協助貓咪收容所提供更良好的環境和更多的關愛。我毫不猶豫地參與了這個團隊，期望能透過實際行動，讓更多的貓咪有機會找到一個永遠的家。', '我們相信，每一隻貓咪都應該擁有一個安全、溫馨且充滿愛的家。這不僅僅是一場論壇，更是一個集結力量的契機，為了打造一個貓咪友善的城市而努力。未來，我們將持續參與類似的活動，不斷倡導和實踐「貓咪至上」的理念，讓每一隻貓咪都能在這座城市中感受到無盡的關愛。', '', ''], imgSrc: seminar
+  },
+  { id: "activity_2", title: "收容所模特兒大比拼！", date: "2023/12/20", content: "今天的收容所不再是一片寂靜。為了讓更多人認識到這裡的毛孩子，我們舉辦了一場前所未有的「模特兒走秀」！", subContent: ['這不僅是一場讓收容所的狗狗和貓咪展現風采的比拼，更是一場感動人心的活動，呼籲大眾給予這些可愛生命一個機會。', '長久以來，收容所一直是一個被忽視的角落，許多毛孩子默默地等待著一個機會，一個能夠真正被愛的家。為了改變這種現象，我們決定以舞台上的風采，將這些可愛的生命呈現給更多人。', '今天，收容所不再是一片寂靜。隨著音樂的節奏，來自收容所的狗狗和貓咪們在T字舞台上走來走去，展現出各種不同的風格和個性。有的毛孩子自信滿滿地走上舞台，有的則顯得害羞卻同樣可愛。他們身上的每一個動作，每一個眼神，都在述說著他們獨特的故事。', '這場「模特兒走秀」不僅是一場給予這群被遺忘的毛孩子關注的機會，更是一場感動人心的藝術表演。觀眾們紛紛拿出手機記錄下這些可愛瞬間，心中的愛心悄悄滋長。', '在活動現場，我們也邀請了一位知名寵物溝通師，進行與毛孩子的心靈對話。透過這種方式，我們更深入地了解了這些毛孩子的真實感受和期望。有些狗狗向觀眾傳達著對愛的渴望，而有些貓咪則表現出對一個安靜家庭的渴望。', '除了模特兒走秀，我們也設置了領養區，提供現場觀眾與這些可愛生命近距離接觸的機會。不少人在感受了毛孩子的溫暖後，紛紛決定展開領養程序，給予這些可憐的生命一個真正屬於牠們的家。', '這場活動讓我們看到了人與動物之間深刻的情感聯繫。透過模特兒走秀，我們成功喚起了大眾對於收容所毛孩子的興趣和愛心。我們希望這樣的活動能夠成為一個開端，讓更多人認識到，每一隻收容所的毛孩子都值得擁有一個充滿愛的家。未來，我們將繼續舉辦類似的活動，讓更多收容所的毛孩子找到愛的依歸，讓每一個故事都有一個幸福的結局。'], imgSrc: show },
+  { id: "activity_3", title: "掃街模式開啟！帶著你的貓耳，來和我一起走！", date: "2023/12/24", content: "街上氣氛真的很棒，從小孩到大人，甚至有些狗狗朋友都帶著貓耳來找我握手，真的太可愛了！", subContent: ["這是一場滿懷歡笑和驚奇的探險，我們以「掃街模式」的方式，穿梭在繁華的市區，與每一位喜歡可愛風格的朋友們互動。街上的氣氛熱烈非凡，彷彿置身於一個充滿夏日陽光和歡樂的童話世界。", "走在街頭，隨處可見戴著各式貓耳的行人，不論是年輕的孩童、時尚的青少年，還是成熟的大人，大家都沉浸在這場可愛風潮中。有的人戴著逗趣的貓耳髮箍，有的人選擇了搭配服裝的貓耳頭飾，每個人都展現著屬於自己獨特的貓咪風格。", "這次的掃街活動，更是吸引了不少狗狗的目光。有些主人特地為心愛的狗狗戴上可愛的貓耳，讓牠們也成為這場時尚派對的焦點。街上瀰漫著歡笑聲和狗狗們的歡快叫聲，讓整個街區都充滿了生機。", "不僅如此，我們還在街頭設置了一個特別的「貓耳握手區」，邀請大家齊聚一堂，分享彼此對貓咪風潮的熱愛。這裡成為了大家交流的樂園，每一位戴著貓耳的朋友都敞開心扉，分享著彼此對於貓耳文化的獨特見解和心得。", "在這場時尚掃街中，我們也邀請了一位專業的貓咪造型師，為戴著貓耳的參與者進行現場造型。不少人趁機改變了自己的髮型，讓整個活動增添了一份時尚與獨特。", "這次的「掃街模式」不僅讓人們感受到歡樂，更促使大家對於貓咪文化的關注。透過這樣的活動，我們期望喚起更多人對於貓咪的愛與關懷，同時也讓貓耳文化在城市中繼續發光發熱。", "未來，我們將持續舉辦類似的活動，為城市注入更多歡笑和愛的元素。無論你是喜歡可愛風格的愛貓人士，還是只是想要享受歡樂氛圍的大眾，都歡迎加入我們的「掃街模式」，一同走在這充滿愛和溫馨的城市街頭！"], imgSrc: walk },
 ]
 
 export const POLICY = [
-  {id:"policy_1",
-    color: "#BEEADB", title: ["打造休閒天堂！", "推廣寵物休閒與娛樂場所"], subTitle: "喵的福利", list: [{ title: "設立寵物醫療基金", content: "每年撥款新台幣 10 億元，專款專用於支援家庭寵物的醫療費用" }, { title: "提供醫療補助", content: "每隻寵物每年可獲得高達新台幣 20,000 元的醫療補助，減輕飼主的經濟壓力" }, { title: "合作動物醫院", content: "目前已有和超過 200 家動物醫院進行初步的合作討論" }], imgSrc: heaven
+  {
+    id: "policy_1",
+    color: "#BEEADB", title: ["打造休閒天堂！", "推廣寵物娛樂休閒場所"], subTitle: "喵的福利", list: [{ title: "建立寵物友善公園", content: "在城市各處建立寵物友善公園，提供足夠的休憩區域和寵物遊樂設施。這不僅讓毛小孩有更多空間活動，也讓飼主們能在安全愉悅的環境中放鬆身心。" }, { title: "舉辦寵物友善活動", content: "組織各種寵物友善活動，如寵物遊行、寵物市集等，提供社區居民一個互動的平台。透過這些活動，不僅能增進飼主之間的交流，也能促進寵物與寵物之間的社交。" }, { title: "設立室內寵物活動場地", content: "在城市中設立室內的寵物活動場地，提供各種娛樂設施，如障礙物訓練區、寵物游泳池等，讓寵物在不受天氣影響的情況下，擁有更多運動和娛樂的機會。" }, { title: "支持寵物咖啡廳", content: "提供相關的政府支持，鼓勵開設寵物友善的咖啡廳。這不僅提供了一個輕鬆的社交場所，也為寵物主人們提供了一個可以一邊品味美食、一邊與毛小孩們共度時光的場所。" }, { title: "推動寵物友善商店認證", content: "創建寵物友善商店認證機制，鼓勵商店提供寵物友善服務，如提供水源、寵物進入許可等，以推動整個城市的寵物友善氛圍。" }, { title: "建立寵物志願服務團隊", content: "鼓勵組織寵物志願服務團隊，提供寵物陪伴、照顧等服務，尤其是針對有需要的社區成員，如老年人、殘障者等。這不僅讓寵物有更多社交機會，同時也為社區帶來更多愛的力量。" }], imgSrc: heaven
   },
   {
     id: "policy_2",
-    color: "#F7ECE1", title: ["為毛孩子謀福利！", "推動寵物醫療保障方案"], subTitle: "喵的保障", list: [{ title: "設立寵物醫療基金", content: "每年撥款新台幣 10 億元，專款專用於支援家庭寵物的醫療費用" }, { title: "提供醫療補助", content: "每隻寵物每年可獲得高達新台幣 20,000 元的醫療補助，減輕飼主的經濟壓力" }, { title: "合作動物醫院", content: "目前已有和超過 200 家動物醫院進行初步的合作討論" }], imgSrc: medical
+    color: "#F7ECE1", title: ["為毛孩子謀福利！", "推動寵物醫療保障方案"], subTitle: "喵的保障", list: [{ title: "創建寵物醫療保障基金", content: "建立一個專門的寵物醫療保障基金，用於補助低收入家庭的寵物醫療費用，確保每一隻毛孩子都能夠獲得及時且適切的醫療照護。" }, { title: "推動政府補助計畫", content: "提出政府補助計畫，鼓勵動物醫院提供低收入家庭優惠價格，同時降低寵物醫療服務的整體成本。透過政府資助，醫療負擔可減輕，提高寵物健康水平。" }, { title: "設立寵物健康保險", content: "推動建立寵物健康保險體系，提供不同種類的保障方案，包括預防接種、疾病治療、手術等。讓飼主可以根據需要選擇適合自己毛孩子的保障計畫。" }, { title: "訓練寵物急救志工隊伍", content: "建立寵物急救志工隊伍，進行寵物急救培訓，提高社區居民處置寵物急救情況的能力。同時，建立急救基地，提供免費的寵物急救服務。" }, { title: "鼓勵動物醫學研究", content: "增加對動物醫學研究的投資，推動更先進的醫療技術和藥物的開發，提升對於寵物疾病的治療水平，同時提高寵物的生存率和生活品質。" }, { title: "舉辦寵物健康宣導活動", content: "定期舉辦寵物健康宣導活動，向社區居民提供有關寵物保健知識，包括預防措施、日常護理等。提高飼主的寵物保健意識，減少疾病發生的可能性。" }], imgSrc: medical
   },
   {
     id: "policy_3",
-    color: "#FFDDDD", title: ["推廣寵物飼養教育！", "讓愛更加專業"], subTitle: "喵的教育", list: [{ title: "設立寵物醫療基金", content: "每年撥款新台幣 10 億元，專款專用於支援家庭寵物的醫療費用" }, { title: "提供醫療補助", content: "每隻寵物每年可獲得高達新台幣 20,000 元的醫療補助，減輕飼主的經濟壓力" }, { title: "合作動物醫院", content: "目前已有和超過 200 家動物醫院進行初步的合作討論" }], imgSrc: learn
+    color: "#FFDDDD", title: ["推廣寵物飼養教育！", "讓愛更加專業"], subTitle: "喵的教育", list: [{ title: "舉辦寵物飼養講座", content: "建立定期的寵物飼養講座，邀請專業的寵物行為師、獸醫等進行分享。這將提供飼主有系統的寵物飼養知識，包括營養、行為管理等方面。" }, { title: "建立寵物飼養手冊", content: "編撰寵物飼養手冊，提供飼主基本的飼養指南。手冊包含飼養習慣、飲食建議、常見疾病預防等資訊，讓飼主隨時可以查閱。" }, { title: "推動寵物飼養培訓課程", content: "協助成立寵物飼養培訓課程，鼓勵飼主參與，學習如何與毛小孩溝通、基本的醫學知識等。提高飼主的專業水平，確保毛小孩得到適當的照顧。" }, { title: "設立寵物領養諮詢中心", content: "建立寵物領養諮詢中心，提供潛在飼主領養前的諮詢服務。透過專業人員的建議，確保領養的動物符合飼主的生活習慣，降低領養後的問題發生率。" }, { title: "鼓勵學校開設寵物教育課程", content: "推動學校開設寵物教育課程，從小培養孩子們對於寵物的尊重和愛護。這不僅是對孩子們的教育，也是對未來飼主的培養。" }, { title: "舉辦寵物飼主交流會", content: "定期舉辦寵物飼主交流會，提供一個飼主們分享經驗、解決問題的平台。透過交流，不同的飼主可以相互學習，建立更加專業的飼養經驗。" }], imgSrc: learn
   },
 ]