Merge pull request #15 from gdsc-ncku/yeyeleaf

add: Activities Page and its subPages

public/manifest.json

@@ -0,0 +1,26 @@
+{
+    "name": "NCKU Bike Festival 17th",
+    "short_name": "成大單車節",
+    "theme_color": "#ff7b1a",
+    "background_color": "#ff7b1a",
+    "display": "fullscreen",
+    "scope": "/",
+    "start_url": "index.html",
+    "icons": [
+        {
+          "src": "./ncku-bike-festival-logo.JPG",
+          "type": "image/jpg",
+          "sizes": "72x72"
+        },
+        {
+          "src": "./ncku-bike-festival-logo.JPG",
+          "type": "image/jpg",
+          "sizes": "96x96"
+        },
+        {
+          "src": "./ncku-bike-festival-logo.JPG",
+          "type": "image/jpg",
+          "sizes": "144x144"
+        }
+      ]
+}

src/components/ActivityContent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="lg:max-w-[1200px] max-w-[360px] mx-auto">
+    <div class="bg-white rounded-2xl px-5 py-3 h-fit min-w-[250px] lg:fixed mb-10">
+      <h1 class="font-bold text-primary text-2xl mb-5">{{ props.title }}</h1>
+      <a @click="setNum(index)" :href="'#item_' + index" v-for="(item, index) in list" :key="index"><h2 class="text-content text-xl mb-5 hover:bg-[#FFE0CA] rounded-lg p-1" :class="num === index ? 'bg-[#FFE0CA]' : ''">{{ item.subtitle }}</h2></a>
+    </div>
+    <div class="lg:w-3/4 lg:ml-[300px]">
+      <div v-for="(item, index) in props.list" :key=index class="text-content text-xl mb-72">
+        <h2 :id="'item_' + index" class="text-3xl font-bold mb-5">{{ item.subtitle }}</h2>
+        <h3 class="text-2xl font-bold mb-5">活動介紹</h3>
+        <div v-html=item.intro class="mb-5"></div>
+        <h3 class="text-2xl font-bold mb-5">活動地點</h3>
+        <p class="mb-5">{{ item.info }}</p>
+        <h3 class="text-2xl font-bold mb-5">報名方式</h3>
+        <div v-html=item.register class="mb-5"></div>
+        <h3 class="text-2xl font-bold mb-5">相關活動行程</h3>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: String,
+  list: Array, //subproject list
+});
+
+const num = ref(0); //tab target
+
+const setNum = (index) => {
+  num.value = index;
+}
+</script>

src/data/activities.json

@@ -0,0 +1,44 @@
+[
+  {
+    "img": "",
+    "url": "/activities/mainStage",
+    "title": "主舞台〈曦瓣〉",
+    "intro": "<p>今年舞台以<span class='text-primary'>晨曦中的鬱金花海</span>為主題，鬱金香的花語有著乘載美好回憶以及祝福的寓意，結合代表希望升起的日出以及令人嚮往的海灘，我們希望透過多樣化的舞台表演，建立各地高中生們間的連結感，也經由大學社團的表演向與會者展示大學社團的豐富和精采，使得高中生更加了解大學生活，也帶給每位與會者豐富的感官享受。另外，舞台也將扮演資訊集散地的角色，透過在台上的宣傳及公告，傳達單車節各區訊息。也希望能透過本次活動，發揮成大的影響力，善盡成大的社會教育責任。</p>"
+  },
+  {
+    "img": "",
+    "url": "/activities/departmentExpo",
+    "title": "科系博覽",
+    "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
+  },
+  {
+    "img": "",
+    "url": "/activities/universityBlueprint",
+    "title": "大學藍圖",
+    "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
+  },
+  {
+    "img": "",
+    "url": "/activities/educationalGuide",
+    "title": "升學指南",
+    "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
+  },
+  {
+    "img": "",
+    "url": "/activities/lifeCrossroads",
+    "title": "人生叉路口",
+    "intro": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque consequatur commodi quam. Est veniam, suscipit delectus perspiciatis fugiat expedita enim deserunt velit nulla magnam similique animi assumenda fuga mollitia laudantium."
+  },
+  {
+    "img": "",
+    "url": "/activities/immersiveExperience",
+    "title": "沈浸式體驗",
+    "intro": "<p>以「成大體驗」、「大學生活」為出發點，去建構及蒐集大學生日常的面向，以沈浸式戲劇手法讓高中生一窺大學真實樣貌，降低未知所帶來的恐懼感，為成為大學生這件事更有心理準備，也能透過不同生活的視野讓高中生探索、想像未來的可能性。</p>"
+  },
+  {
+    "img": "",
+    "url": "/activities/unworriedTeaHouse",
+    "title": "解憂茶軒",
+    "intro": "<p>在 108 課綱的改制下，越來越多高中生被要求提早確定未來目標，產出豐富的學習歷程。在這條路上，總是充滿著迷惘與焦慮，同為走過課綱改制一員的我們，希望能以過來人的身份為現在的高中生指點迷津，提供一個對話平台，幫助高中生解決升學遇到的問題、生活上的煩惱。</p>"
+  }
+]

src/data/activityDetails.json

@@ -0,0 +1,100 @@
+{
+  "mainStage": [
+    {
+      "subtitle": "主舞台〈曦瓣〉",
+      "intro": "<p>今年舞台以<span class='text-primary'>晨曦中的鬱金花海</span>為主題，鬱金香的花語有著乘載美好回憶以及祝福的寓意，結合代表希望升起的日出以及令人嚮往的海灘，我們希望透過多樣化的舞台表演，建立各地高中生們間的連結感，也經由大學社團的表演向與會者展示大學社團的豐富和精采，使得高中生更加了解大學生活，也帶給每位與會者豐富的感官享受。另外，舞台也將扮演資訊集散地的角色，透過在台上的宣傳及公告，傳達單車節各區訊息。也希望能透過本次活動，發揮成大的影響力，善盡成大的社會教育責任。</p>",
+      "info": "光復校區 榕園",
+      "register": "開放活動不須事前報名"
+    }
+  ],
+  "departmentExpo": [
+    {
+      "subtitle": "深入科系｜科系體驗坊",
+      "intro": "<p>科系體驗坊是以科系為單位，透過課程或是遊戲之形式進行。將會有<span class='text-primary'>互動與實際體驗課程</span>，搭配上<span class='text-primary'>重點式系館導覽介紹</span>，以及前往參觀特殊教室、工廠等。</p>",
+      "info": "各科系館",
+      "register": "？？？"
+    },
+    {
+      "subtitle": "深入科系｜系館導覽",
+      "intro": "<p>系館導覽是分佈於各校區進行科系的系所參訪。於指定地點集合後，會由學長姊帶領高中生，搭配解說並參觀該科系實際上課的場域、實驗室等，期許參與者認識該科系的硬體設備與教學環境。</p>",
+      "info": "各科系館",
+      "register": "？？？"
+    },
+    {
+      "subtitle": "科系帳篷",
+      "intro": "<p>由各學系學長姊，講解該系特色、學術活動、系所資源、課程介紹與年級規劃、學生需具備的特質、未來出路等。此講解不限時間，可自由提問。</p>",
+      "info": "光復校區",
+      "register": "開放活動不須事前報名"
+    }
+  ],
+  "educationalGuide": [
+    {
+      "subtitle": "教授面試技巧演講",
+      "intro": "<p>邀請五位成大教授在單車節當天進行演講，分享面試及書審資料準備的建議，幫助前來單車節的高中生們在個人申請表現上有所突破。</p>",
+      "info": "光復校區 國際會議廳第二演講室",
+      "register": "<p>1.KKTIX 預先報名（優先入場）<br>2.學術部帳篷現場報名<br>3.國際會議廳第二演講室報到區現場報名<p>"
+    },
+    {
+      "subtitle": "學習歷程特邀講座",
+      "intro": "<p>本屆單車節與104人力銀行合作，除了共同協作免費線上懶人包供不論是否能前來單車節的高中生領取，亦邀請到了104人力銀行的職涯教育長 - 王榮春先生，於單車節當日舉辦演講分享學習歷程撰寫心法。</p>",
+      "info": "光復校區 國際會議廳第二演講室",
+      "register": "<p>1.KKTIX 預先報名（優先入場）<br>2.學術部帳篷現場報名<br>3.國際會議廳第二演講室報到區現場報名<p>"
+    },
+    {
+      "subtitle": "申請入學經驗談",
+      "intro": "<p>邀請成大12個不同科系的在學學生在單車節當天和高中生們分享過去準備申請入學時的經歷和心路歷程，給予他們更清楚的個申準備方向，同時也解答他們在升學路上可能遇到的種種疑問。</p>",
+      "info": "光復校區 唯農大樓",
+      "register": "<p>1.KKTIX 預先報名（優先入場）<br>2.學術部帳棚現場報名<br>3.唯農大樓報到教室現場報名</p>"
+    },
+    {
+      "subtitle": "學習歷程攻略 - 靜態展",
+      "intro": "<p>以展覽形式展出學習歷程範本及海報，提供高中生們製作學習歷程、二階書審以及準備面試的參考方向。現場亦提供留言板讓參與者留下對展覽及單車節的回饋。</p>",
+      "info": "光復校區 多功能廳",
+      "register": "開放活動不須事前報名"
+    }
+  ],
+  "universityBlueprint": [
+    {
+      "subtitle": "What Matters Most 工作坊",
+      "intro": "<p>引導高中生一步步尋找何者人、事、物對自己而言最重要，進一步安排往後大學藍圖，在面對未來人生旅途的挑戰中能夠相信自己、堅持信念並付諸行動，實現其個人的夢想。</p>",
+      "info": "光復校區 唯農大樓",
+      "register": "<p>？？？<p>"
+    },
+    {
+      "subtitle": "傑出校友生涯講座",
+      "intro": "<p>邀請校友講者在講座中分享多元化的、生涯分享、經驗,讓高中生從不同角度瞭解高中、大學與社會，引導他們更深入思考未來的發展方向。</p>",
+      "info": "光復校區 唯農大樓",
+      "register": "<p>？？？</p>"
+    },
+    {
+      "subtitle": "校園論壇",
+      "intro": "<p>透過學長姐經驗分享以及互動討論帶出大學生活藍圖。</p>",
+      "info": "？？？",
+      "register": "？？？"
+    }
+  ],
+  "lifeCrossroads": [
+    {
+      "subtitle": "人生叉路口",
+      "intro": "<p>？？？</p>",
+      "info": "光復校區 學生第一活動中心 B1",
+      "register": "？？？"
+    }
+  ],
+  "immersiveExperience": [
+    {
+      "subtitle": "沈浸式體驗",
+      "intro": "<p>以「成大體驗」、「大學生活」為出發點，去建構及蒐集大學生日常的面向，以沈浸式戲劇手法讓高中生一窺大學真實樣貌，降低未知所帶來的恐懼感，為成為大學生這件事更有心理準備，也能透過不同生活的視野讓高中生探索、想像未來的可能性。</p>",
+      "info": "光復校區 學生第一活動中心",
+      "register": "？？？"
+    }
+  ],
+  "unworriedTeaHouse": [
+    {
+      "subtitle": "解憂茶軒",
+      "intro": "<p>在 108 課綱的改制下，越來越多高中生被要求提早確定未來目標，產出豐富的學習歷程。在這條路上，總是充滿著迷惘與焦慮，同為走過課綱改制一員的我們，希望能以過來人的身份為現在的高中生指點迷津，提供一個對話平台，幫助高中生解決升學遇到的問題、生活上的煩惱。</p>",
+      "info": "光復校區 歷史文物館 & 成功湖前空地",
+      "register": "開放活動不須事前報名"
+    }
+  ]
+}

src/style.css

@@ -5,6 +5,7 @@
 @layer base {
     html {
         font-family: "Noto Sans TC", sans-serif;
+        scroll-behavior: smooth;
     }
     body {
         background-image: url(/bg_noise_texture.svg);

src/views/About.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="max-w-[1200px] mx-auto text-xl text-content px-10">
-    <h1 class="text-[40px] font-bold my-5">活動宗旨</h1>
+    <h1 class="text-[40px] font-bold mb-5">活動宗旨</h1>
     <div class="py-8 lg:px-12">
       <p>成功大學自立校以來，累積深厚學術與人文底蘊，孕育無數學子於專業殿堂及社會各處無私奉獻；
       歷來以社會參與為經營目標，形塑特殊使命與學生特質。冀透過本次活動，向大眾展示成功大學作為全臺綜合型大學所能提供的學習資源、師資設備、產學合作，

src/views/activities/Activities.vue

@@ -1,7 +1,17 @@
 <template>
   <Breadcrumb />
+  <div v-for="(item, index) in activities" :key=index class="text-content flex lg:max-w-[1200px] max-w-[300px] lg:flex-row flex-col justify-between lg:items-start items-center mx-auto mb-20">
+    <div class="lg:w-[376px] lg:h-[222px] w-[300px] h-[200px] bg-gray-500 rounded-lg lg:mr-20 mr-2 mb-5"></div>
+    <div class="lg:max-w-[800px] max-w-[300px]">
+      <RouterLink class="font-bold text-2xl mb-4 block hover:underline" :to=item.url>{{ item.title }}</RouterLink>
+      <div v-html="item.intro" class="lg:text-xl text-sm"></div>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import { RouterLink } from "vue-router";
+import activities from "../../data/activities.json";
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/DepartmentExpo.vue

@@ -1,7 +1,10 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.departmentExpo title="科系博覽"/>
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/EducationalGuide.vue

@@ -1,7 +1,10 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.educationalGuide title="升學指南" />
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/ImmersiveExperience.vue

@@ -1,7 +1,9 @@
 <template>
-  <Breadcrumb />
+   <Breadcrumb />
+  <ActivityContent :list=activityDetails.immersiveExperience title="沉浸式體驗" />
 </template>
 
 <script setup>
-import Breadcrumb from '@/components/Breadcrumb.vue';
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 </script>

src/views/activities/LifeCrossroads.vue

@@ -1,7 +1,10 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.lifeCrossroads title="人生叉路口"/>
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/MainStage.vue

@@ -1,7 +1,10 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.mainStage title="主舞台〈曦瓣〉"/>
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/UniversityBlueprint.vue

@@ -1,7 +1,10 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.universityBlueprint title="大學藍圖" />
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
 </script>

src/views/activities/UnworriedTeaHouse.vue

@@ -1,7 +1,9 @@
 <template>
   <Breadcrumb />
+  <ActivityContent :list=activityDetails.unworriedTeaHouse title="解憂茶軒" />
 </template>
 
 <script setup>
+import ActivityContent from '../../components/ActivityContent.vue';
+import activityDetails from '../../data/activityDetails.json';
 import Breadcrumb from '@/components/Breadcrumb.vue';
-</script>