t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[fix] fixed link and fixed ts warning

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

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

188
src/components/Header.vue
View File

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

239
src/pages/Home.vue
View File

@ -1,114 +1,133 @@
<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 class="home__title-box2--p1"> />
05/29 • 中央研究院－人文社會科學館 •免費報名 </div>
</p> <div class="home__title-box2">
<p class="home__title-box2--p2"> <p class="home__title-box2--p1">
05/29 <br /><br /> 05/29 • 中央研究院－人文社會科學館 •免費報名
中央研究院－人文社會科學館 •免費報名 </p>
</p> <p class="home__title-box2--p2">
</div> 05/29 <br /><br />
</div> 中央研究院－人文社會科學館 •免費報名
</section> </p>
<section class="section-content"> </div>
<section class="home__info"> </div>
<div class="home__info-container"> </section>
<div class="home__info-title home__info-title--1"> <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 home__info-title--1">
/> <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 home__info-title--2"> </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 home__info-title--2">
<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> 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> </template>
<script lang="ts"> <script lang="ts">