2021/src/components/Footer.vue
2021-01-19 17:39:16 +08:00

71 lines
1.7 KiB
Vue

<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>