From 1547c730b3ec100d99d7e45d36b1bd313d165df4 Mon Sep 17 00:00:00 2001
From: mysper <anthony.a3203@gmail.com>
Date: Wed, 31 Mar 2021 15:39:22 +0800
Subject: [PATCH] [Add] add link - home page mailing list group - home page
 sitcon 2021 hackmd - header sitcon 2021 kktix

---
 src/components/Header.vue | 158 ++++++++++++++-----------
 src/pages/Home.vue        | 239 ++++++++++++++++++++------------------
 2 files changed, 216 insertions(+), 181 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9afb5f2..a4f57b2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,84 +1,100 @@
 <template>
-  <!-- <div id="topHeader" class="header"> -->
-  <div id="topHeader" class="header header--sticky">
-    <div class="header__left">
-      <div class="header-logo">
-        <a href="/2021/">
-          <img src="~@/assets/images/home/home-headerIcon.svg" width="100%" />
-        </a>
-      </div>
-    </div>
-    <div class="header__right">
-      <div class="header-links">
-        <ul>
-          <li>
-            <input
-              type="radio"
-              id="1"
-              class="header-link__input"
-              name="checlbox"
-            />
-            <a
-              href="/2021/agenda"
-              v-bind:class="onRoute('Agenda') ? 'header-link--active' : ''"
-              >議程與活動</a
-            >
-          </li>
-          <li>
-            <a
-              href="/2021/traffic"
-              v-bind:class="onRoute('Traffic') ? 'header-link--active' : ''"
-              >交通方式</a
-            >
-          </li>
-          <li>
-            <a
-              href="/2021/venue"
-              v-bind:class="onRoute('Venue') ? 'header-link--active' : ''"
-              >會場地圖</a
-            >
-          </li>
-          <li>
-            <a
-              href="/2021/sponsor"
-              v-bind:class="onRoute('Sponsor') ? 'header-link--active' : ''"
-              >贊助資訊</a
-            >
-          </li>
-          <li>
-            <a
-              href="/2021/team"
-              v-bind:class="onRoute('Team') ? 'header-link--active' : ''"
-              >籌備團隊</a
-            >
-          </li>
-        </ul>
-      </div>
-      <div class="header-apply">
-        <a href="">
-          報名去
-        </a>
-      </div>
-    </div>
-  </div>
+	<!-- <div id="topHeader" class="header"> -->
+	<div id="topHeader" class="header header--sticky">
+		<div class="header__left">
+			<div class="header-logo">
+				<a href="/2021/">
+					<img
+						src="~@/assets/images/home/home-headerIcon.svg"
+						width="100%"
+					/>
+				</a>
+			</div>
+		</div>
+		<div class="header__right">
+			<div class="header-links">
+				<ul>
+					<li>
+						<input
+							type="radio"
+							id="1"
+							class="header-link__input"
+							name="checlbox"
+						/>
+						<a
+							href="/2021/agenda"
+							v-bind:class="
+								onRoute('Agenda') ? 'header-link--active' : ''
+							"
+							>議程與活動</a
+						>
+					</li>
+					<li>
+						<a
+							href="/2021/traffic"
+							v-bind:class="
+								onRoute('Traffic') ? 'header-link--active' : ''
+							"
+							>交通方式</a
+						>
+					</li>
+					<li>
+						<a
+							href="/2021/venue"
+							v-bind:class="
+								onRoute('Venue') ? 'header-link--active' : ''
+							"
+							>會場地圖</a
+						>
+					</li>
+					<li>
+						<a
+							href="/2021/sponsor"
+							v-bind:class="
+								onRoute('Sponsor') ? 'header-link--active' : ''
+							"
+							>贊助資訊</a
+						>
+					</li>
+					<li>
+						<a
+							href="/2021/team"
+							v-bind:class="
+								onRoute('Team') ? 'header-link--active' : ''
+							"
+							>籌備團隊</a
+						>
+					</li>
+				</ul>
+			</div>
+			<div class="header-apply">
+				<a
+					href="https://sitcon.kktix.cc/events/sitcon2021"
+					target="_blank"
+				>
+					報名去
+				</a>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue } from 'vue-property-decorator';
 
 @Component({
-  props: ["route"],
+	props: ['route']
 })
 export default class Header extends Vue {
-  mounted() {
-    console.log(this.$props.route.name);
-  }
-  public onRoute(routeName: String) {
-    return this.$props.route.name === routeName ? true : false;
-  }
+	mounted() {
+		console.log(this.$props.route.name);
+	}
+	public onRoute(routeName: String) {
+		return this.$props.route.name === routeName ? true : false;
+	}
 }
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/header";
+@import '@/assets/scss/header';
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 2108094..4845113 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,123 +1,142 @@
 <template>
-  <div id="home" class="home">
-    <section class="section-title">
-      <div class="home__title">
-        <div class="home__title-box1">
-          <p>SITCON 學生計算機年會 2021</p>
-        </div>
-        <div class="home__title-topic">
-          <img src="~@/assets/images/home/home-topic.svg" width="100%" />
-        </div>
-        <div class="home__title-box2">
-          <p>
-            05/29 • 中央研究院－人文社會科學館 •免費報名
-          </p>
-        </div>
-      </div>
-    </section>
-    <section class="section-content">
-      <section class="home__info">
-        <div class="home__info-container">
-          <div class="home__info-title">
-            <img
-              class="home-squareImg"
-              src="~@/assets/images/home/home-icon-square.svg"
-            />
-            <h1>算盤的後裔</h1>
-            <h2 class="home__info-title-h2--big">Descendants of the abacus</h2>
-          </div>
-          <div class="home__info-paragraph">
-            <p>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
-              <br />
-              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
-              <br />
-              <br />
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
-            </p>
-          </div>
-        </div>
-      </section>
-      <section class="home__info">
-        <div class="home__info-container">
-          <div class="home__info-title">
-            <img
-              class="home-appleImg"
-              src="~@/assets/images/home/home-icon-apple.svg"
-            />
-            <h1>關於 SITCON</h1>
-            <h2 class="home__info-title-h2--small">
-              Students' Information Technology Conference
-            </h2>
-          </div>
-          <div class="home__info-paragraph">
-            <p>
-              學生計算機年會（SITCON）自 2013
-              年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
-            </p>
-          </div>
-        </div>
-      </section>
-      <section class="home__info">
-        <div class="home__info-container">
-          <div class="home__info-title">
-            <h1>行為準則</h1>
-            <h2 class="home__info-title-h2--mid">Code of Conduct</h2>
-          </div>
-          <div class="home__info-paragraph">
-            <p>
-              SITCON
-              歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
-              SITCON，我們要求所有參與者閱讀年會的<a href=""
-                >行為準則（Code of Conduct）</a
-              >，共同創造一個友善的環境。
-            </p>
-          </div>
-        </div>
-      </section>
-      <section class="home__info">
-        <div class="home__info-container">
-          <div class="home__info-title">
-            <h1>參與討論</h1>
-            <h2 class="home__info-title-h2--mid">Join the community</h2>
-          </div>
-          <div class="home__info-paragraph">
-            <p>
-              SITCON
-              是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱
-              SITCON 的郵件論壇並貢獻你的想法！
-              <br />
-              <br />
-              若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
-              的會議記錄。
-            </p>
-          </div>
-          <div class="home__info-buttonsBox">
-            <a href="" class="home-button">郵件論壇</a>
-            <a href="" class="home-button">會議記錄</a>
-          </div>
-        </div>
-      </section>
-      <img
-        class="home-sponsorsImg"
-        src="~@/assets/images/home/home-sponsors.png"
-        width="100%"
-      />
-    </section>
-  </div>
+	<div id="home" class="home">
+		<section class="section-title">
+			<div class="home__title">
+				<div class="home__title-box1">
+					<p>SITCON 學生計算機年會 2021</p>
+				</div>
+				<div class="home__title-topic">
+					<img
+						src="~@/assets/images/home/home-topic.svg"
+						width="100%"
+					/>
+				</div>
+				<div class="home__title-box2">
+					<p>
+						05/29 • 中央研究院－人文社會科學館 •免費報名
+					</p>
+				</div>
+			</div>
+		</section>
+		<section class="section-content">
+			<section class="home__info">
+				<div class="home__info-container">
+					<div class="home__info-title">
+						<img
+							class="home-squareImg"
+							src="~@/assets/images/home/home-icon-square.svg"
+						/>
+						<h1>算盤的後裔</h1>
+						<h2 class="home__info-title-h2--big">
+							Descendants of the abacus
+						</h2>
+					</div>
+					<div class="home__info-paragraph">
+						<p>
+							千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+							<br />
+							俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+							<br />
+							<br />
+							人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+						</p>
+					</div>
+				</div>
+			</section>
+			<section class="home__info">
+				<div class="home__info-container">
+					<div class="home__info-title">
+						<img
+							class="home-appleImg"
+							src="~@/assets/images/home/home-icon-apple.svg"
+						/>
+						<h1>關於 SITCON</h1>
+						<h2 class="home__info-title-h2--small">
+							Students' Information Technology Conference
+						</h2>
+					</div>
+					<div class="home__info-paragraph">
+						<p>
+							學生計算機年會（SITCON）自 2013
+							年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+						</p>
+					</div>
+				</div>
+			</section>
+			<section class="home__info">
+				<div class="home__info-container">
+					<div class="home__info-title">
+						<h1>行為準則</h1>
+						<h2 class="home__info-title-h2--mid">
+							Code of Conduct
+						</h2>
+					</div>
+					<div class="home__info-paragraph">
+						<p>
+							SITCON
+							歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
+							SITCON，我們要求所有參與者閱讀年會的<a href=""
+								>行為準則（Code of Conduct）</a
+							>，共同創造一個友善的環境。
+						</p>
+					</div>
+				</div>
+			</section>
+			<section class="home__info">
+				<div class="home__info-container">
+					<div class="home__info-title">
+						<h1>參與討論</h1>
+						<h2 class="home__info-title-h2--mid">
+							Join the community
+						</h2>
+					</div>
+					<div class="home__info-paragraph">
+						<p>
+							SITCON
+							是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱
+							SITCON 的郵件論壇並貢獻你的想法！
+							<br />
+							<br />
+							若你想進一步了解過往討論的內容，也歡迎在 HackMD
+							上查看 SITCON 2021 的會議記錄。
+						</p>
+					</div>
+					<div class="home__info-buttonsBox">
+						<a
+							href="https://groups.google.com/g/sitcon-general"
+							class="home-button"
+							target="_blank"
+							>郵件論壇</a
+						>
+						<a
+							href="https://hackmd.io/@SITCON/SITCON2021"
+							class="home-button"
+							target="_blank"
+							>會議記錄</a
+						>
+					</div>
+				</div>
+			</section>
+			<img
+				class="home-sponsorsImg"
+				src="~@/assets/images/home/home-sponsors.png"
+				width="100%"
+			/>
+		</section>
+	</div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({
-  components: {},
+	components: {}
 })
 export default class CFP extends Vue {
-  @Prop() private msg!: string;
+	@Prop() private msg!: string;
 }
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/home/home";
+@import '@/assets/scss/home/home';
 </style>