[fixed] fixed footer in cfp color

This commit is contained in:
mysper 2021-03-31 10:58:05 +08:00
parent acdd7ac920
commit add1f3bc82
4 changed files with 393 additions and 395 deletions

View File

@ -1,4 +1,4 @@
@import "breakpoint.scss"; @import 'breakpoint.scss';
// varible declare // varible declare
$fontColor: white; $fontColor: white;
@ -6,7 +6,7 @@ $fontColor: white;
//for footer-primary //for footer-primary
$backgroundColor: #000098; $backgroundColor: #000098;
$fontFamily: "Noto Sans TC", monospace; $fontFamily: 'Noto Sans TC', monospace;
@mixin fontSize() { @mixin fontSize() {
font-size: 14pt; font-size: 14pt;
@ -81,8 +81,7 @@ $fontFamily: "Noto Sans TC", monospace;
} }
} }
} }
.footer-container-primary {
.footer-container {
background: $backgroundColor; background: $backgroundColor;
// position // position
// position: absolute; // position: absolute;

View File

@ -78,8 +78,7 @@ $fontFamily: 'Noto Sans TC', monospace;
} }
} }
} }
.footer-container-secondary {
.footer-container {
background: $backgroundColor; background: $backgroundColor;
// position // position
// position: absolute; // position: absolute;

View File

@ -1,5 +1,5 @@
<template> <template>
<footer class="footer-container"> <footer class="footer-container-primary">
<div class="footer-left"> <div class="footer-left">
<p class="footer-brand footer-font-block"> <p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span> <span class="footer-context">學生計算機年會</span>
@ -52,39 +52,39 @@
</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
export default class CFP extends Vue { export default class CFP extends Vue {
private communityLink = [ private communityLink = [
{ {
title: "facebook", title: 'facebook',
icon: "facebook-f", icon: 'facebook-f',
link: "https://sitcon.org/fb", link: 'https://sitcon.org/fb'
}, },
{ {
title: "flickr", title: 'flickr',
icon: "flickr", icon: 'flickr',
link: "https://sitcon.org/flickr", link: 'https://sitcon.org/flickr'
}, },
{ {
title: "telegram", title: 'telegram',
icon: "telegram-plane", icon: 'telegram-plane',
link: "https://sitcon.org/tg", link: 'https://sitcon.org/tg'
}, },
{ {
title: "twitter", title: 'twitter',
icon: "twitter", icon: 'twitter',
link: "https://sitcon.org/twitter", link: 'https://sitcon.org/twitter'
}, },
{ {
title: "youtube", title: 'youtube',
icon: "youtube", icon: 'youtube',
link: "https://sitcon.org/yt", link: 'https://sitcon.org/yt'
}, }
]; ];
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/assets/scss/footer-primary"; @import '@/assets/scss/footer-primary';
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<footer class="footer-container"> <footer class="footer-container-secondary">
<div class="footer-left"> <div class="footer-left">
<p class="footer-brand footer-font-block"> <p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span> <span class="footer-context">學生計算機年會</span>
@ -37,39 +37,39 @@
</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
export default class CFP extends Vue { export default class CFP extends Vue {
private communityLink = [ private communityLink = [
{ {
title: "facebook", title: 'facebook',
icon: "facebook-f", icon: 'facebook-f',
link: "https://sitcon.org/fb", link: 'https://sitcon.org/fb'
}, },
{ {
title: "flickr", title: 'flickr',
icon: "flickr", icon: 'flickr',
link: "https://sitcon.org/flickr", link: 'https://sitcon.org/flickr'
}, },
{ {
title: "telegram", title: 'telegram',
icon: "telegram-plane", icon: 'telegram-plane',
link: "https://sitcon.org/tg", link: 'https://sitcon.org/tg'
}, },
{ {
title: "twitter", title: 'twitter',
icon: "twitter", icon: 'twitter',
link: "https://sitcon.org/twitter", link: 'https://sitcon.org/twitter'
}, },
{ {
title: "youtube", title: 'youtube',
icon: "youtube", icon: 'youtube',
link: "https://sitcon.org/yt", link: 'https://sitcon.org/yt'
}, }
]; ];
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/assets/scss/footer-secondary"; @import '@/assets/scss/footer-secondary';
</style> </style>