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

[merge] dev and cfpMain

Browse Source
This commit is contained in:
mysper
2021-01-19 17:39:16 +08:00
commit 8abe7576db
102 changed files with 16413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/components/CFP/Agenda.vue Normal file
View File

@@ -0,0 +1,249 @@
<template>
<div class="info-container">
<!-- 議程種類方塊 -->
<div class="info-section">
<h1>議程種類</h1>
<div class="info-section__content">
<div class="info-kind">
<div class="info-kind__itemBox">
<div class=info-kind__itemBox-title>Presentation</div>
<div class="info-kind__itemBox-text">
<p>Presentation 包含完整 30 分鐘的議程與 10 分鐘的問答時間，<strong>共 40
分鐘</strong>，讓您有充分的時間展示想法、描述經歷、和與會者交流。
</p>
</div>
</div>
<div class="info-kind__itemBox">
<div class="info-kind__itemBox-title">Double Espresso</div>
<div class="info-kind__itemBox-text">
<p>
Double Espresso <strong>為 20 分鐘的議程</strong>，相對於僅 10 分鐘的 Espresso，讓您有餘裕補充想法、和與會者進行問答。
</p>
</div>
</div>
<div class="info-kind__itemBox">
<div class="info-kind__itemBox-title">Espresso</div>
<div class="info-kind__itemBox-text">
<p>
Espresso <strong>僅有 10 分鐘</strong>，挑戰最為濃縮與精華的議程，為與會者帶來短而精緻的知識洗禮。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 議程種類方塊 -->
<!-- 流程 -->
<div class="info-section">
<h1>流程</h1>
<div class="info-section__content">
<p>
本年度 SITCON
年會將分為<strong>二階段投稿與審稿</strong>，第一階段決定是否接受稿件，第二階段安排演講廳。審稿委員於第一階段完成審稿後，將對外公告接受稿件清單，並通知投稿者提供第二階段所需之資料。SITCON
議程組於第二階段將依照投稿者提供的資料，以及公開的人氣投票結果，安排年會當日的演講廳與時段。第二階段的資料，不影響稿件接受與否。
</p>
</div>
</div>
<!-- 流程 -->
<!-- 投稿方式 -->
<div class="info-section">
<h1>投稿方式</h1>
<div class="info-section__content">
<p>
稿件均經議程組形式審查，交予該領域之審稿委員審稿；審稿委員由 SITCON 工作人員、業界人士及學界人士組成。
</p>
<div class="info-section__content--sub">
<h2>投稿格式</h2>
<p>
各議程類型的投稿格式相同，除特別標示之資訊外，其餘僅供審稿委員於審稿時閱讀。
<br>
<br>
<ul>
<li><span /><strong>投稿類型：</strong>必填、公開。請寫明所欲投稿為何種議程類型（ Presentation 、Double Espresso、Espresso）。
</li>
<li><span /><strong>題目 Title：</strong>必填、公開。請不要超出 20 字。</li>
<li><span /><strong>摘要 Abstract：</strong>必填、公開。建議含標點符號 150–250 字，使用於宣傳與網站公告。</li>
<li><span /><strong>演講大綱 Outline：</strong>必填。請說明議程的內容大綱與時間分配。若為多位講者共同分享，請說明各個講者如何分配演講內容。</li>
<li><span /><strong>目標受眾 Target
Audience：</strong>必填。請說明您期待該議程的目標受眾，為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「欲精進某技能的後端工程師」等。</li>
<li><span /><strong>先備知識 Prior Knowledge：</strong>必填、公開。請說明該議程的與會者所需具備的先備知識。例如：「能理解 Python
基礎語法」、「能熟練運用 Class 與
OOP」等。
</li>
<li><span /><strong>詳細說明
Description：</strong>必填。不限字數，請說明這個議程您認爲重要的相關細節，以利審稿委員更瞭解您的作品。我們強烈建議您詳細填寫此項，讓審稿委員全面且深入地了解您的稿件，增加入選機率。
</li>
<li><span /><strong>關鍵字 Keywords：</strong>選填、公開。請勾選與議程內容相關的關鍵字，或自行新增。</li>
<li><span /><strong>附件 Attachment：</strong>選填。可以附上程式碼、投影片草稿或任何您認爲有助於我們瞭解您的議程的附件。</li>
</ul>
</p>
</div>
<div class="info-section__content--sub">
<h2>個人資料</h2>
<p>
除了暱稱/姓名被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
<br>
<br>
<ul>
<li><span /><strong>電子郵件 Email：</strong>能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱。）</li>
<li><span /><strong>暱稱/名字 Name：</strong>公開於講者海報及網站的稱呼。</li>
<li><span /><strong>手機號碼 Phone：</strong>用於大會聯絡、確認資訊用的電話號碼。</li>
<li><span /><strong>其他聯絡方式 Other contact information：</strong>其他任何我們能聯絡您的方式（如 Telegram、住處電話等）。
</li>
</ul>
</p>
</div>
</div>
</div>
<!-- 投稿方式 -->
<!-- 審稿方式 -->
<div class="info-section">
<h1>審稿方式</h1>
<div class="info-section__content">
<p>
審稿委員將針對以下項目進行篩選：
<ul>
<li><span /><strong>稿件內容：</strong>知識分享、經驗案例、想法觀點是否獨特等。</li>
<li><span /><strong>表達能力：</strong>提供的資料是否有條理、文句暢通，以及提供資料之完整度。完整的資料能讓審稿委員更清楚了解演講細節。</li>
<li><span /><strong>適合聽眾：</strong>稿件是否適合 SITCON 大多數的與會者。經我們評估比較小眾的議程，將可能安排在較小的演講廳。</li>
</ul>
</p>
</div>
<!-- 審稿方式 -->
<!-- 投稿注意事項 -->
</div>
<div class="info-section">
<h1>投稿注意事項</h1>
<div class="info-section__content">
<p>
<ul>
<li><span />SITCON 2021 採用 Google Forms 接收投稿。</li>
<li><span />SITCON 2021 將會有 4 軌議程同時進行（不計其他議程相關活動）。</li>
<li><span />上述審稿方式不考慮稿件內容的難度。我們以稿件是否能夠吸引人、高品質、適合聽眾（即前述審稿方式）為考量。</li>
為鼓勵投稿，大會提供投稿者一組入場票邀請碼
（投稿者有多個投稿亦同，即為一人一組，非一稿一組），可優先報名參與本年會。若您的稿件被接受，屆時可使用講者身分入場，不需要另外報名，並可以將入場票邀請碼贈與他人使用，邀請親朋好友共襄盛舉。講者身分入場，每組可獲得一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。
<li><span />在截稿之前，投稿者可以隨時使用投稿系統修改已投的稿件。</li>
<li><span />SITCON 議程組得與投稿者討論並經同意後，轉換稿件之投稿類型。</li>
<li><span />無論投稿有無入選，仍然歡迎於年會當天報名其他議程相關活動！</li>
<li><span />凡稿件經接受者，年會將頒予感謝狀以表彰投稿者之熱情付出與貢獻。</li>
<li><span />稿件在第一階段入選後，第二階段補充資料與公開的人氣投票結果，僅作為 SITCON 議程組安排年會當日的演講廳與時段參考，最終結果仍以 SITCON 議程組公告為準。</li>
<li><span />「議程題目」、「摘要」與「先備知識」將放置於官方網站與年會前發行的電子報中。</li>
</ul>
<br />
若有任何問題或投稿建議，請 E-mail 至 SITCON 議程組信箱 session[at]sitcon.org。
</p>
<div class="info-section__content--sub">
<h2>錄影與紀錄</h2>
<p>
所有議程皆會錄影，若不希望被錄影與釋出，可以與議程組聯絡。<br />
本屆 SITCON
提供入選講者試講及彩排的機會。試講除了讓大會工作人員先行對議程內容、演講習慣有初步了解外，也可以讓講者熟悉現場流程、找出能讓簡報更生動精采的模式。彩排則讓講者熟悉現場設備環境、攝影機位置，並且測試
Live
Demo 情境。希望講者能夠共同參與試講及彩排，一起使年會議程品質更臻完美。
</p>
</div>
<div class="info-section__content--sub">
<h2>授權</h2>
<p>
議程錄影將在經過您的同意後，一律以 CC - BY 3.0 授權在 YouTube 釋出。
議程相關素材，例如投影片等，將由您自行決定在何處、以何種方式釋出，或選擇不釋出，我們不會干涉。年會後，我們將向您蒐集素材連結，若您選擇釋出，我們會將連結放置在年會官方網站的議程表上。
</p>
</div>
<div class="info-section__content--sub">
<h2>試講</h2>
<p>
試講提供講者在演講前有練習的機會，比照年會時間安排供講者講完整場演講，並有議程組人員提供建議（如簡報、台風等），講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將與您協調精確時間。
</p>
<p>
所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、東部場等，時間約為四月份，地點另行通知。
補助：依照客運價格標準，補助講者至最近試講場地的全額或部分車馬費。
</p>
</div>
<div class="info-section__content--sub">
<h2>彩排</h2>
<p>
<ul>
<li><span />日期：2021/05/28（五）。</li>
<li><span />場地：使用場地與正式年會相同，細節將於稿件接受後通知。</li>
<li><span />時間：一人約 5–10 分鐘。若有 Live Demo 或特殊需求，可提前與議程組安排時間。</li>
<li><span />流程：講者操作設備，測試 Live Demo 連結及切換方式，也可以演練部分簡報內容。</li>
<li><span />提供設備：與年會當天場地的設備相同，有麥克風、倒數計時器等。</li>
</ul>
</p>
</div>
<div class="info-section__content--sub">
<h2>注意</h2>
<p>
<ul>
<li><span />除非內容明顯偏離講題、違反 CoC 或不符事實，我們不會強制要求講者對演講內容進行修正。</li>
<li><span />為了維護所有講者的權利，試講時間恕不接受更改，請各位講者準時參與。</li>
</ul>
</p>
</div>
<div class="info-section__content--sub">
<h2>Q&A</h2>
<div class="info-qa">
<div class="info-qa__itemBox" v-for="item,index in QA" :key="index" @click="e=>fade(index)">
<span>Q: {{item.Q}}</span>
<p v-if="item.v">{{item.A}}</p>
</div>
</div>
</div>
</div>
<!-- 投稿注意事項 -->
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class Agenda extends Vue {
private QA = [
{
Q: '先備知識與目標受眾有何不同？',
A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
v: false
},
{
Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？',
A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
v: false
},
{
Q: '先備知識與目標受眾有何不同？',
A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
v: false
},
{
Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？',
A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
v: false
},
{
Q: '如果我入選第二階段，可以提供哪些補充資料？',
A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
v: false
},
{
Q: '還有疑問怎麼辦？',
A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
v: false
}
];
private fade = (index: number) => {
this.QA[index].v = !this.QA[index].v;
}
}
</script>

24
src/components/CFP/AgendaCard.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="agenda card">
<a class="image container" :href="ytLink" target="_blank" rel="noopener">
<img :src="img">
</a>
<p class="description">{{ title }} <span v-if="introdLink != ''">(<a :href="introdLink" target="_blank" rel="noopener">簡介</a>)</span></p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class AgendaCard extends Vue {
@Prop({ required: true }) private ytLink!: string;
@Prop({ required: true }) private introdLink!: string;
@Prop({ required: true }) private title!: string;
@Prop({ required: true }) private img!: string;
}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/card.scss';
</style>

79
src/components/CFP/Header.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<header class="sitcon-burnfont">
<div class="spot-box">
<div class="sitcon-2021 text-center spot-box-row">
<img
alt="SITCON2021"
src="~@/assets/image/burnfont/2021.svg"
class="svg"
id="svg-sitcon2021"
/>
</div>
<div class="sitcon-name text-center spot-box-row">
<img
alt="學生計算機年會"
src="~@/assets/image/burnfont/sitcon.svg"
class="svg"
id="svg-sitcon"
/>
</div>
<h1 class="sitcon-topic text-center spot-box-row">
<img
alt="算盤的後裔"
src="~@/assets/image/burnfont/topic.svg"
class="svg"
id="svg-topic"
/>
</h1>
</div>
<div class="info-box">
<div class="cfp-title">
<div class="cfp-svg-wrapper text-center">
<img
src="~@/assets/image/burnfont/cfp.svg"
class="svg"
id="svg-cfp"
/>
</div>
</div>
<div class="date-location">
<div class="date-location-wrapper">
<div class="date-wrapper">
<img
src="~@/assets/image/burnfont/date.svg"
class="svg"
id="svg-date"
/>
</div>
<div class="location-wrapper">
<img
src="~@/assets/image/burnfont/location.svg"
class="svg"
id="svg-location"
/>
</div>
</div>
</div>
<div class="cfp-news">
<div class="cfp-news-wrapper">
<div class="hexagon">
<a href="/news" rel="noopener" class="btn">
<img
src="~@/assets/image/burnfont/news.svg"
class="svg"
id="svg-news"
/>
</a>
</div>
</div>
</div>
</div>
</header>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class CfpHeader extends Vue {}
</script>

139
src/components/CFP/IntrodContainer.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<main class="introduction-container">
<div class="introduction">
<img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/>
<img src="@/assets/images/cfp/Group 10.svg" class="sitcon-icon"/>
<img src="@/assets/images/cfp/Path 733.svg" class="sitcon-pic-2021"/>
<img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh"/>
<img src="@/assets/images/cfp/Path 735.svg" class="sitcon-topic"/>
<img src="@/assets/images/cfp/Path 736.svg" class="sitcon-date"/>
<img src="@/assets/images/cfp/Path 737.svg" class="sitcon-place"/>
<img src="@/assets/images/cfp/Path 738.svg" class="sitcon-qeury"/>
<!-- ../../assets/images/cfp/Mobile/Mobile-background.svg -->
<img src="@/assets/images/cfp/Background.svg" class="background"/>
<!-- src="@/assets/images/cfp/Background.svg" -->
<!-- first part -->
<img src="@/assets/images/cfp/Path 740.svg" class="SITCON-text-path"/>
<svg width="890" height="900" class="first-box">
<rect width="1000" height="1000" style="fill:#ffffff;" />
</svg>
<div class="box-back">
<h1>關於 SITCON</h1>
<div class="about-section">
<p class="context">
學生計算機年會（SITCON）自 2013
年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
</p>
</div>
<h2>歷屆年會網站</h2>
<div class="thumbnails">
<table class="img-table">
<tr>
<td class="td-width">
<img class="cfp-img" src="@/assets/images/cfp/2020.png" />
<p class="tag">SITCON 2020<br /></p>
<p class="tag sub">#define</p>
</td>
<td class="td-width">
<img class="cfp-img" src="@/assets/images/cfp/2019.png" />
<p class="tag">SITCON 2019<br /></p>
<p class="tag sub">開箱演算法</p>
</td>
<td class="td-width">
<img class="cfp-img" src="@/assets/images/cfp/2018.png" />
<p class="tag">SITCON 2018<br /></p>
<p class="small-tag">POPULAR COMPUTER SCIENCE</p>
</td>
</tr>
</table>
</div>
<h2>參與討論！</h2>
<div class="discuss-section">
<p class="context">
SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
上進行<br />
討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
並貢獻你的想法！
</p>
<p class="context" style="margin-top: 22px; margin-bottom: 22px">
若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
的會議記錄。
</p>
</div>
<div>
<button class="buttons"><h3>SITCON 論壇</h3></button>
<button class="buttons"><h3>會議記錄</h3></button>
</div>
</div>
<!-- first part -->
<!-- second part -->
<img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
<svg width="1500" height="1500" class="second-box">
<rect width="1500" height="1500" style="fill:#ffffff;" />
</svg>
<svg width="2000" height="350" class="des-blue-bar">
<rect width="2000" height="350" style="fill:#226BB4;" />
</svg>
<svg width="1500" height="900" class="hiden-box">
<rect width="1500" height="900" style="fill:#ffffff;" />
</svg>
<div class="box-back2" style="margin-top: 1000px;">
<div class="topic-intro">
<h1 class="right">2021 年會主題</h1>
<h1 class="right">
<span class="enlarge">算盤的後裔</span>
</h1>
<p class="context">
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
</p>
<p class="context">
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
</p>
<img src="@/assets/images/cfp/paper/paper.png" class="paper-image" />
<h2>徵稿時間</h2>
<div>
<h2 class="date">01/15 ~ 02/22</h2>
<p class="detail">
詳細時程請見
</p>
<div class="button-post">
<button class="buttons"><h3>投稿資訊</h3></button>
<!-- NOTE: this button's hover won't work because paper.png is too big -->
<button class="buttons"><h3>不用說了，快讓我投稿！</h3></button>
</div>
</div>
</div>
<div class="last-part">
<h3>最後...</h3>
<h1>SITCON 贊助徵求</h1>
<!--style="margin-top:-30px;"-->
<p class="context">
SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
的運作，讓更多交流產生！
</p>
<p class="context">
企業合作歡迎聯繫
<a class="context-hyperlink" href="mailto:contact@sitcon.org">contact@sitcon.org</a>
</p>
<div>
<button class="buttons"><h3>個人贊助方案</h3></button>
</div>
</div>
<!-- second part -->
</div>
</div>
</main>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class IntrodContainer extends Vue {}
</script>

81
src/components/CFP/Schedule.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<div id="info-schedule">
<!-- 重要時程 -->
<section id="schedule">
<h1>重要時程</h1>
<ul>
<li>3 月上旬第一階段審稿結束，公告入選結果並開始收取第二階段補充資料</li>
<li>3 月下旬第二階段補充資料截止收取</li>
<li>4 月中旬第二階段審稿結束，隨後公佈完整議程</li>
<li>2021/05/29（六）SITCON 2021</li>
</ul>
</section>
<!-- 重要時程 -->
<!-- 投稿主題範例 -->
<section id="example">
<article id="theme-example">
<h1>投稿主題範例</h1>
<p>SITCON 作為學生展現自己的舞台，我們特別期待以學生為主體的稿件，例如：從學生角度出發的經驗分享、技術分享，專題研究成果、獨立研究甘苦談，或探討學生相關議題等等。</p>
<p>除此之外，任何與資訊科技、電腦技術相關的講題，也都歡迎投稿！以下為幾個我們最近覺得有趣、和時事相關的主題範疇，可作為主題發想的靈感來源，提供給您參考：</p>
<!-- there is a object arr named 'themeExample', each object have two value ie. title and content -->
<div class="theme container">
<Topic v-for="theme in themeExample" :topic="theme.title" :description="theme.context" :key="theme.title" />
</div>
</article>
<p>
除此之外，您也可以透過參與投稿者小聚或前往 SITCON 歷年網站（<a href="https://sitcon.org/2013" rel="noopener">2013</a>、<a href="https://sitcon.org/2014" rel="noopener">2014</a>、<a href="https://sitcon.org/2015" rel="noopener">2015</a>、<a href="https://sitcon.org/2016" rel="noopener">2016</a>、<a href="https://sitcon.org/2017" rel="noopener">2017</a>、<a href="https://sitcon.org/2018" rel="noopener">2018</a>、<a href="https://sitcon.org/2019" rel="noopener">2019</a>、<a href="https://sitcon.org/2020" rel="noopener">2020</a>）查看過去的議程。
<br>以下是我們以往的熱門議程，提供給您參考：
</p>
<article id="presentation-example">
<h2>Presentation</h2>
<p>Presentation 包含完整 30 分鐘的議程與 10 分鐘的問答時間，共 40 分鐘，讓您有充分的時間展示想法、描述經歷、和與會者交流。</p>
<!-- there is a object arr name 'presentation', each object have 'title' 'ytLink' 'introdLink' 'img' -->
<div class="agenda card container">
<AgendaCard v-for="agenda in presentation" v-bind="agenda" :key="agenda.title" />
</div>
</article>
<article id="espresso-example">
<h2>Espresso</h2>
<p>Espresso 僅有 10 分鐘，挑戰最為濃縮與精華的議程，為與會者帶來短而精緻的知識洗禮。</p>
<!-- there is a object arr name 'espresso', each object have 'title' 'ytLink' 'introdLink' 'img' -->
<div class="agenda card container">
<AgendaCard v-for="agenda in espresso" v-bind="agenda" :key="agenda.title" />
</div>
</article>
</section>
<!-- 投稿主題範例 -->
<!-- Code of Conduct -->
<section id="code-of-conduct">
<h1>Code of Conduct</h1>
<p>SITCON 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 SITCON，我們要求所有參與者閱讀年會的<a href="https://sitcon.org/code-of-conduct/" target="_blank" rel="noopener"><u>行為守則（Code of Conduct）</u></a>，共同創造一個友善的環境。</p>
</section>
<!-- Code of Conduct -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import AgendaCard from './AgendaCard.vue';
import Topic from './Topic.vue';
// import data
import themeExample from '../../../template/themeExample.cfp';
import espresso from '../../../template/espresso.cfp';
import presentation from '../../../template/presentation.cfp';
@Component({
components: {
AgendaCard,
Topic
}
})
export default class Schedule extends Vue {
private themeExample = themeExample;
private espresso = espresso;
private presentation = presentation;
}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/schedule.scss';
</style>

25
src/components/CFP/Topic.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="topic">
<h3 class="title" v-html="title"></h3>
<div class="divider"></div>
<p class="description">{{ description }}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Topic extends Vue {
@Prop({ required: true }) private topic!: string;
@Prop({ required: true }) private description!: string;
get title () {
return this.topic.replace(/(：|？)/, '$1<br data-delimiter="$1">');
}
}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/topic.scss';
</style>

71
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<footer class="footer-container">
<div class="footer-left">
<p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span>
<span class="footer-context"
>Students' Information Technology Conference</span
>
</p>
<p class="footer-contact footer-font-block">
<span class="footer-context">聯絡我們</span>
<span class="footer-context">contact@sitcon.org</span>
</p>
</div>
<div class="footer-right">
<div class="footer-community">
<p class="footer-context">社群媒體</p>
<p class="footer-community-icon-container">
<span class="footer-community-icon">
<a
target="_blank"
rel="noopener"
v-for="community in communityLink"
:href="community.link"
:key="community.title"
>
<FontawesomeIcon
class="community-icon"
:icon="['fab', community.icon]"
/>
</a>
</span>
</p>
</div>
</div>
</footer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class CFP extends Vue {
private communityLink = [
{
title: 'facebook',
icon: 'facebook-f',
link: '#'
},
{
title: 'flickr',
icon: 'flickr',
link: '#'
},
{
title: 'telegram',
icon: 'telegram-plane',
link: '#'
},
{
title: 'twitter',
icon: 'twitter',
link: '#'
},
{
title: 'youtube',
icon: 'youtube',
link: '#'
}
];
}
</script>

116
src/components/NewsHeader.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<header>
<div class="top-bar">
<div class="return-wrapper">
<a class="shape-wrapper diamond" href="/cfp"
><span class="text-wrapper">返回</span></a
>
</div>
<div class="title-wrapper text-center">
<img src="~@/assets/image/burnfont/news.svg" class="svg svg-cfp-news" />
</div>
<div class="contribute-wrapper">
<a class="btn-contribute" href="#">我要投稿</a>
</div>
</div>
<div class="cfp-body">
<div class="spot-wrapper">
<h1 class="text-center">現正徵稿中<span class="ignore">！</span></h1>
<!-- TODO counter -->
<p class="text-center countdown">
距離投稿截止還有
<span class="d-inline-block">
{{ countdown.d }} 天 {{ countdown.h }} 小時 {{ countdown.m }} 分
{{ countdown.s }} 秒</span
>
</p>
</div>
<div class="time-wrapper">
<div class="start-time-wrapper">
<h2>投稿開始</h2>
<p>2021/01/15（五）</p>
</div>
<div class="tilde-wrapper">
<h2><!-- pseudo element --></h2>
<p>～</p>
<p></p>
</div>
<div class="end-time-wrapper">
<h2>投稿結束</h2>
<p>
2021/02/22（一）日出<small class="d-inline-block"
>（清晨 06：23）</small
>
</p>
</div>
</div>
</div>
</header>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
const DEAD_LINE = Math.floor(
new Date('22 Feb 2021 06:24:00 GMT+8').getTime() / 1000
);
interface Countdown {
s: number;
m: number;
h: number;
d: number;
}
@Component
export default class CfpHeader extends Vue {
private timerId!: number;
private countdown: Countdown = {
s: 0,
m: 0,
h: 0,
d: 0
};
public beforeMount () {
this.registerTimer();
}
public unmouted () {
this.unregisterTimer();
}
public async createTimer (f: (t: number) => void): Promise<number> {
const d = new Date();
let t = d.getTime();
const rem = 1000 - (t % 1000);
t = Math.floor(t / 1000);
let downcount = DEAD_LINE - t - 1;
this.onTick(downcount);
const id = setInterval(() => {
f(--downcount);
}, 1000);
return id;
}
private async onTick (t: number) {
this.countdown.s = t % 60;
t = Math.floor(t / 60);
this.countdown.m = t % 60;
t = Math.floor(t / 60);
this.countdown.h = t % 24;
t = Math.floor(t / 24);
this.countdown.d = t;
}
private async registerTimer () {
this.timerId = await this.createTimer(this.onTick);
}
private unregisterTimer () {
clearInterval(this.timerId);
}
}
</script>