Merge pull request #24 from gdsc-ncku/yeyeleaf

add: members & activities photo and pwa logo

src/components/ActivityContent.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="lg:max-w-[1200px] max-w-[360px] mx-auto">
+  <div class="lg:max-w-[1200px] max-w-[370px] 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 class="relative w-full lg:h-[400px] h-[200px] mb-5">
+        <img :src="img" class="rounded-2xl object-cover w-full mb-[400px] absolute h-full" />
+        <div style="border-radius: 16px;
+background: linear-gradient(0deg, #404040 0%, rgba(217, 217, 217, 0.00) 100%);" class="absolute z-10 w-full h-full"></div>
+        <h1 class="text-white lg:text-5xl text-4xl font-bold absolute z-10 lg:top-80 top-32 lg:right-10 lg:left-auto left-5">{{ props.title }}</h1>
+      </div>
+
       <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>
+        <h2 :id="'item_' + index" class="text-3xl font-bold mb-5 bg-[#FF5C0045] w-auto inline-block">{{ 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>
@@ -23,10 +30,11 @@
 
 <script setup>
 import { ref } from 'vue';
-
+import activities from '../data/activities.json';
 const props = defineProps({
   title: String,
   list: Array, //subproject list
+  img: String
 });
 
 const num = ref(0); //tab target

src/components/Footer.vue

@@ -16,7 +16,7 @@
             <div class="lg:flex hidden">
                 <RouterLink to="/about">關於單車節</RouterLink>
                 <p>　｜　</p>
-                <RouterLink to="/info">參加資訊</RouterLink>
+                <RouterLink to="/info/traffic">參加資訊</RouterLink>
             </div>
             <div class="lg:flex hidden">
                 <RouterLink to="/activities">主題活動</RouterLink>

src/components/MemberCard.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-[1200px] flex flex-wrap lg:justify-between justify-center mt-16">
         <div v-for="(item, index) in memberInfo" :key=index class="w-[362px] h-[177px] border border-content rounded-[40px] bg-white flex p-6 items-center justify-between mb-7">
-            <div class="lg:w-[100px] lg:h-[100px] w-[80px] h-[80px] rounded-full bg-gray-500"></div>
+            <img :src="item.img" class="lg:w-[100px] lg:h-[100px] w-[80px] h-[80px] rounded-full" />
             <div class="lg:w-[200px] w-[160px]">
                 <p class="text-primary text-xs mb-2">{{ item.department }}・{{ item.class }}</p>
                 <p class="text-content font-bold text-xl mb-2">{{ item.name }}</p>

src/components/TabBar.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex lg:my-8 my-4 flex-wrap">
+    <div v-for="(tab, index) in props.tabs" :key="index" @click="target = index" class="border-2 border-primary p-3 rounded-xl text-primary text-xl w-36 mr-8 mb-4" :class="index === target ? 'bg-primary text-white' : ''">
+      <RouterLink :to="tab.url" class="flex justify-around items-center" @click="$emit('tab-index', index)"><div v-html="index === target ? tab.icon : tab.icon_orange"></div>{{ tab.title }}</RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  tabs: Array
+});
+
+const target = ref(0);
+</script>

src/data/activities.json

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

src/data/memberInfo.json

@@ -1,24 +1,24 @@
 [
-    {"department": "總籌部", "name": "陳俊安", "class": "資訊 115", "tags": "#Colten #現在是早上六點嗎  #我幫你留了一些 bug 等你去修", "song": "琳誼 Ring - 在某個角落努力的你"},
-    {"department": "總籌部", "name": "張百鴻", "class": "資訊 115", "tags": "#水豚愛好者 #我只有腳踏車 #晚餐吃拉麵好不好", "song": "The Crane - Don't Mind"},
-    {"department": "秘書部", "name": "廖芃蓁", "class": "企管 114", "tags": "#古靈精怪可可愛愛 #減肥困難戶 #深夜聽歌emo的INFP", "song": "Newleans - ETA"},
-    {"department": "秘書部", "name": "黃友誠", "class": "牙醫 117", "tags": "#咖喱飯一定要拌在一起 #重度選擇障礙 #路上觀察學家", "song": "葉璦菱 - 我心已打烊"},
-    {"department": "公關部", "name": "陳毅洋", "class": "政治 114", "tags": "#ENFP轉INFP #天氣之子  #小池不揪", "song": "Newleans - Super Shy"},
-    {"department": "公關部", "name": "廖韻淇", "class": "企管 115", "tags": "#我怕鬼 #防曬大師 #一餐要一個半小時", "song": "Lauv - Steal The Show"},
-    {"department": "學術部", "name": "趙蓁妤", "class": "會計 115", "tags": "#粉紅泡泡  #奶茶控 #熬夜技能加載中", "song": "IU - Hold My Hand"},
-    {"department": "學術部", "name": "楊郁涵", "class": "會計 115", "tags": "#極度龜毛 #藍色小精靈 #一天一拿鐵", "song": "Justin Bieber - Love Yourself"},
-    {"department": "學術部", "name": "詹博堯", "class": "資訊 115", "tags": "#傑博瑞是一隻水母  #感冒要吃冰 #人生是場派對而我是pinata", "song": "SZA - Snooze"},
-    {"department": "策展部", "name": "陳雨婕", "class": "生技 115", "tags": "#看起來永遠想睡覺  #jajas #喜歡吃東西（也喜歡減肥）", "song": "Dua Lipa - Dance The Night"},
-    {"department": "策展部", "name": "張鈞傑", "class": "能源 115", "tags": "#潔癖  #路怒症  #我最瘦", "song": "林宥嘉 - 我不是神，我只是平凡卻直拗愛著你的人"},
-    {"department": "策展部", "name": "游棨巖", "class": "光電 115", "tags": "#暈船症候群 #愛吃鬼巧達 #小遲五分鐘後到", "song": "Justin Bieber - Off My Face"},
-    {"department": "影紀部", "name": "藍宇杰", "class": "工資 115", "tags": "#B壞A事Bang不N見G  #若能放棄絕不努力 #沒有什麼是Photoshop解決不了的事情", "song": "聖結石 - 朋友BANG不見"},
-    {"department": "影紀部", "name": "陳詠涵", "class": "醫技 115", "tags": "#說走就走型 #探店小天才 #內向悶騷but大喇喇", "song": "AJ Mitchell - Hi-Lo"},
-    {"department": "影紀部", "name": "周怡潔", "class": "中文 114", "tags": "#躲貓貓 #好餓吃啥 #太宇宙了！", "song": "163braces - 小船"},
-    {"department": "設計部", "name": "黃庭葳", "class": "工設 115", "tags": "#蟑螂作息＃拖延症末期 #蕃茄醬工作法", "song": "Mysta Rias - DETECT MY LOVE"},
-    {"department": "設計部", "name": "余嘉潓", "class": "工設 114", "tags": "#自然捲 #晚上做設計 #最喜歡喝仙女紅茶了", "song": "deca joins - 快樂"},
-    {"department": "設計部", "name": "文遠睿", "class": "工設 115", "tags": "#不愛吃早餐 #摔車仔 #吃火鍋只吃白飯", "song": "Harry Styles - Fine Line"},
-    {"department": "行銷部", "name": "張晏玟", "class": "企管 115", "tags": "#選擇困難 #冰淇淋怪獸 #減肥只是說說而已", "song": "厭世少年 - 比比"},
-    {"department": "行銷部", "name": "周沛儀", "class": "企管 115", "tags": "#台南油女 #熬夜小能手 #你要不要喝芭樂汁", "song": "The Crane- 還不想睡"},
-    {"department": "行銷部", "name": "方文廷", "class": "不分 114", "tags": "#方教授(?) #好像都沒睡 #irent愛用者", "song": "deca joins - 浴室"}
+    {"img": "members/總籌 陳俊安.webp", "department": "總籌部", "name": "陳俊安", "class": "資訊 115", "tags": "#Colten #現在是早上六點嗎  #我幫你留了一些 bug 等你去修", "song": "琳誼 Ring - 在某個角落努力的你"},
+    {"img": "members/總籌 張百鴻_14.webp", "department": "總籌部", "name": "張百鴻", "class": "資訊 115", "tags": "#水豚愛好者 #我只有腳踏車 #晚餐吃拉麵好不好", "song": "The Crane - Don't Mind"},
+    {"img": "members/秘書 廖芃蓁_9.webp", "department": "秘書部", "name": "廖芃蓁", "class": "企管 114", "tags": "#古靈精怪可可愛愛 #減肥困難戶 #深夜聽歌emo的INFP", "song": "Newleans - ETA"},
+    {"img": "members/秘書 黃友誠_10.webp", "department": "秘書部", "name": "黃友誠", "class": "牙醫 117", "tags": "#咖喱飯一定要拌在一起 #重度選擇障礙 #路上觀察學家", "song": "葉璦菱 - 我心已打烊"},
+    {"img": "members/公關 陳毅洋_2.webp", "department": "公關部", "name": "陳毅洋", "class": "政治 114", "tags": "#ENFP轉INFP #天氣之子  #小池不揪", "song": "Newleans - Super Shy"},
+    {"img": "members/公關 廖韻淇_1.webp", "department": "公關部", "name": "廖韻淇", "class": "企管 115", "tags": "#我怕鬼 #防曬大師 #一餐要一個半小時", "song": "Lauv - Steal The Show"},
+    {"img": "members/學術 趙蓁妤_5.webp", "department": "學術部", "name": "趙蓁妤", "class": "會計 115", "tags": "#粉紅泡泡  #奶茶控 #熬夜技能加載中", "song": "IU - Hold My Hand"},
+    {"img": "members/學術 楊郁涵_3.webp", "department": "學術部", "name": "楊郁涵", "class": "會計 115", "tags": "#極度龜毛 #藍色小精靈 #一天一拿鐵", "song": "Justin Bieber - Love Yourself"},
+    {"img": "members/學術 詹博堯_4.webp", "department": "學術部", "name": "詹博堯", "class": "資訊 115", "tags": "#傑博瑞是一隻水母  #感冒要吃冰 #人生是場派對而我是pinata", "song": "SZA - Snooze"},
+    {"img": "members/策展 陳雨婕_13.webp", "department": "策展部", "name": "陳雨婕", "class": "生技 115", "tags": "#看起來永遠想睡覺  #jajas #喜歡吃東西（也喜歡減肥）", "song": "Dua Lipa - Dance The Night"},
+    {"img": "members/策展 張鈞傑_11.webp", "department": "策展部", "name": "張鈞傑", "class": "能源 115", "tags": "#潔癖  #路怒症  #我最瘦", "song": "林宥嘉 - 我不是神，我只是平凡卻直拗愛著你的人"},
+    {"img": "members/策展 游棨巖_12.webp", "department": "策展部", "name": "游棨巖", "class": "光電 115", "tags": "#暈船症候群 #愛吃鬼巧達 #小遲五分鐘後到", "song": "Justin Bieber - Off My Face"},
+    {"img": "members/影記 藍宇杰_7.webp", "department": "影紀部", "name": "藍宇杰", "class": "工資 115", "tags": "#B壞A事Bang不N見G  #若能放棄絕不努力 #沒有什麼是Photoshop解決不了的事情", "song": "聖結石 - 朋友BANG不見"},
+    {"img": "members/影記 陳詠涵_8.webp", "department": "影紀部", "name": "陳詠涵", "class": "醫技 115", "tags": "#說走就走型 #探店小天才 #內向悶騷but大喇喇", "song": "AJ Mitchell - Hi-Lo"},
+    {"img": "members/影記 周怡潔_6.webp", "department": "影紀部", "name": "周怡潔", "class": "中文 114", "tags": "#躲貓貓 #好餓吃啥 #太宇宙了！", "song": "163braces - 小船"},
+    {"img": "members/設計 黃庭葳.webp", "department": "設計部", "name": "黃庭葳", "class": "工設 115", "tags": "#蟑螂作息＃拖延症末期 #蕃茄醬工作法", "song": "Mysta Rias - DETECT MY LOVE"},
+    {"img": "members/設計 余嘉潓.webp", "department": "設計部", "name": "余嘉潓", "class": "工設 114", "tags": "#自然捲 #晚上做設計 #最喜歡喝仙女紅茶了", "song": "deca joins - 快樂"},
+    {"img": "members/設計 文遠睿.webp", "department": "設計部", "name": "文遠睿", "class": "工設 115", "tags": "#不愛吃早餐 #摔車仔 #吃火鍋只吃白飯", "song": "Harry Styles - Fine Line"},
+    {"img": "members/行銷 張晏玟.webp", "department": "行銷部", "name": "張晏玟", "class": "企管 115", "tags": "#選擇困難 #冰淇淋怪獸 #減肥只是說說而已", "song": "厭世少年 - 比比"},
+    {"img": "members/行銷 周沛儀.webp", "department": "行銷部", "name": "周沛儀", "class": "企管 115", "tags": "#台南油女 #熬夜小能手 #你要不要喝芭樂汁", "song": "The Crane- 還不想睡"},
+    {"img": "members/行銷 方文廷.webp", "department": "行銷部", "name": "方文廷", "class": "不分 114", "tags": "#方教授(?) #好像都沒睡 #irent愛用者", "song": "deca joins - 浴室"}
 ]