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