[fix] fixed link and fixed ts warning

This commit is contained in:
mysper 2021-04-01 09:20:59 +08:00
parent 5630c81ea6
commit 647b719401
3 changed files with 239 additions and 196 deletions

View File

@ -22,14 +22,16 @@ import FooterPrimary from '@/components/FooterPrimary.vue';
}
})
export default class App extends Vue {
public isRoot(): boolean {
public isRoot (): boolean {
if (
this.$route.name === 'CFP' ||
this.$route.name === 'news' ||
this.$route.name === 'ocfp-news'
)
) {
return false;
else return true;
} else {
return true;
}
}
}
</script>

View File

@ -1,84 +1,109 @@
<template>
<div 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>
<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 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>
<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-links--mobile">
<select onchange="location = this.value;">
<option value="/"> 年會主題</option>
<option value="/agenda" :selected="onRoute('Agenda') ? true : false">
<a href="/2021/agenda"> 議程與活動</a></option
>
<option
value="/traffic"
:selected="onRoute('Traffic') ? true : false"
>
<a href="/2021/traffic">交通方式</a></option
>
<option value="/venue" :selected="onRoute('Venue') ? true : false"
><a href="/2021/venue">會場地圖</a></option
>
<option value="/sponsor" :selected="onRoute('Sponsor') ? true : false"
><a href="/2021/sponsor">贊助資訊</a></option
>
<option value="/team" :selected="onRoute('Team') ? true : false"
><a href="/2021/team">籌備團隊</a></option
>
</select>
<!-- <div class="header-links--mobile-bg"></div> -->
</div>
<div class="header-apply">
<a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank">
報名去
</a>
</div>
</div>
</div>
<div class="header-links--mobile">
<select onchange="location = this.value;">
<option value="/"> 年會主題</option>
<option
value="/agenda"
:selected="onRoute('Agenda') ? true : false"
>
<a href="/2021/agenda"> 議程與活動</a></option
>
<option
value="/traffic"
:selected="onRoute('Traffic') ? true : false"
>
<a href="/2021/traffic">交通方式</a></option
>
<option
value="/venue"
:selected="onRoute('Venue') ? true : false"
><a href="/2021/venue">會場地圖</a></option
>
<option
value="/sponsor"
:selected="onRoute('Sponsor') ? true : false"
><a href="/2021/sponsor">贊助資訊</a></option
>
<option
value="/team"
:selected="onRoute('Team') ? true : false"
><a href="/2021/team">籌備團隊</a></option
>
</select>
<!-- <div class="header-links--mobile-bg"></div> -->
</div>
<div class="header-apply">
<a
href="https://sitcon.kktix.cc/events/sitcon2021"
target="_blank"
>
報名去
</a>
</div>
</div>
</div>
</template>
<script lang="ts">
@ -88,10 +113,7 @@ import { Component, Vue } from 'vue-property-decorator';
props: ['route']
})
export default class Header extends Vue {
mounted() {
console.log(this.$props.route.name);
}
public onRoute(routeName: String) {
public onRoute (routeName: string) {
return this.$props.route.name === routeName ? true : false;
}
}

View File

@ -1,114 +1,133 @@
<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 class="home__title-box2--p1">
05/29 中央研究院人文社會科學館 免費報名
</p>
<p class="home__title-box2--p2">
05/29 <br /><br />
中央研究院人文社會科學館 免費報名
</p>
</div>
</div>
</section>
<section class="section-content">
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title home__info-title--1">
<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 home__info-title--2">
<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 class="home__title-box2--p1">
05/29 中央研究院人文社會科學館 免費報名
</p>
<p class="home__title-box2--p2">
05/29 <br /><br />
中央研究院人文社會科學館 免費報名
</p>
</div>
</div>
</section>
<section class="section-content">
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title home__info-title--1">
<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 home__info-title--2">
<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"
target="_blank"
class="home-button"
>郵件論壇</a
>
<a
href="https://hackmd.io/@SITCON/SITCON2021"
target="_blank_"
class="home-button"
>會議記錄</a
>
</div>
</div>
</section>
<img
class="home-sponsorsImg"
src="~@/assets/images/home/home-sponsors.png"
width="100%"
/>
</section>
</div>
</template>
<script lang="ts">