[Update] apply RWD for header (min-width: 900,750,500,410,360)
This commit is contained in:
barrystone
parent
b8d6dfdd3e
commit
6c50b53760
20
src/App.vue
20
src/App.vue
@ -7,26 +7,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue, Watch } from "vue-property-decorator";
|
import { Component, Vue, Watch } from 'vue-property-decorator';
|
||||||
|
|
||||||
// components
|
// components
|
||||||
import Header from "@/components/Header.vue";
|
import Header from '@/components/Header.vue';
|
||||||
import FooterSecondary from "@/components/FooterSecondary.vue";
|
import FooterSecondary from '@/components/FooterSecondary.vue';
|
||||||
import FooterPrimary from "@/components/FooterPrimary.vue";
|
import FooterPrimary from '@/components/FooterPrimary.vue';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
Header,
|
Header,
|
||||||
FooterPrimary,
|
FooterPrimary,
|
||||||
FooterSecondary,
|
FooterSecondary
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
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;
|
||||||
@ -34,5 +34,5 @@ export default class App extends Vue {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@/assets/scss/main.scss";
|
@import '@/assets/scss/main.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,55 @@
|
|||||||
@import "./color.scss";
|
@import './color.scss';
|
||||||
@import "./breakpoint.scss";
|
@import './breakpoint.scss';
|
||||||
|
|
||||||
$font-header-link: "Noto Serif CJK TC -Bold";
|
$font-header-link: 'Noto Serif CJK TC -Bold';
|
||||||
$font-header-apply: "Noto Serif CJK TC -Black";
|
$font-header-apply: 'Noto Serif CJK TC -Black';
|
||||||
|
|
||||||
|
@mixin headerWidth {
|
||||||
|
width: 88%;
|
||||||
|
@media screen and (max-width: $max-width-small-0) {
|
||||||
|
width: 92%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin headerHeight {
|
||||||
|
height: 62px;
|
||||||
|
@media screen and (max-width: $max-width-medium-1) {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------
|
||||||
|
|
||||||
|
// header-logo
|
||||||
|
@mixin headerLogoPosition {
|
||||||
|
position: absolute;
|
||||||
|
left: 35px;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin headerLogoWidth {
|
||||||
|
width: 150px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-2) {
|
||||||
|
width: 105px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
width: 98px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------
|
||||||
|
|
||||||
|
// header-links
|
||||||
@mixin headerLinksFontSize {
|
@mixin headerLinksFontSize {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
@media screen and (min-width: $max-width-big) {
|
@media screen and (min-width: $max-width-big) {
|
||||||
@ -23,11 +69,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
width: 680px;
|
width: 680px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin headerLinksMarginRight {
|
@mixin headerLinksMarginRight {
|
||||||
margin-right: 92px;
|
margin-right: 92px;
|
||||||
@media screen and (max-width: $max-width-medium-0) {
|
@media screen and (max-width: $max-width-medium-0) {
|
||||||
margin-right: -20px;
|
margin-right: -35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@mixin headerLinksLiPadding {
|
@mixin headerLinksLiPadding {
|
||||||
@ -37,13 +82,110 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------
|
||||||
|
|
||||||
|
// header-apply
|
||||||
|
@mixin headerApplyWidthAndHeight {
|
||||||
|
width: 92px;
|
||||||
|
height: 38px;
|
||||||
|
@media screen and (max-width: $max-width-medium-1) {
|
||||||
|
width: 85px;
|
||||||
|
height: 43px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
width: 75px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-2) {
|
||||||
|
width: 65px;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
width: 55px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin headerApplyFontsize {
|
||||||
|
font-size: 13pt;
|
||||||
|
@media screen and (max-width: $max-width-medium-1) {
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-2) {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
font-size: 8pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------
|
||||||
|
|
||||||
|
// header-links--mobile
|
||||||
|
@mixin headerLinksMobilePosition {
|
||||||
|
position: relative;
|
||||||
|
left: 40%;
|
||||||
|
top: 12px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $max-width-small-0) {
|
||||||
|
left: 35%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
left: 28%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin headerLinksMobileSelectWidth {
|
||||||
|
width: 150px;
|
||||||
|
@media screen and (max-width: $max-width-small-0) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-1) {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-2) {
|
||||||
|
width: 95px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
width: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin headerLinksMobileSelectFontsize {
|
||||||
|
font-size: 14pt;
|
||||||
|
|
||||||
|
@media screen and (max-width: $max-width-small-0) {
|
||||||
|
font-size: 13pt;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-2) {
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin headerLinksMobileSelectPadding {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $max-width-small-0) {
|
||||||
|
padding-left: 3px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $max-width-small-3) {
|
||||||
|
padding-bottom: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
left: 6%;
|
margin: 0 auto;
|
||||||
width: 88%;
|
@include headerWidth;
|
||||||
height: 62px;
|
@include headerHeight;
|
||||||
border-radius: 73px;
|
border-radius: 73px;
|
||||||
box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
|
box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
@ -51,7 +193,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
&--sticky {
|
&--sticky {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
left: 6%;
|
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
&__left {
|
&__left {
|
||||||
@ -60,16 +201,15 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
position: absolute;
|
@include headerLogoPosition;
|
||||||
left: 35px;
|
@include headerLogoWidth;
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 150px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__right {
|
&__right {
|
||||||
float: right;
|
float: right;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
// background-color: lightslategrey;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-links {
|
&-links {
|
||||||
@ -78,10 +218,49 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
display: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
// background-color: lightyellow;
|
||||||
left: 50%;
|
@include headerLinksMobilePosition;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
left: 40%;
|
||||||
|
select {
|
||||||
|
z-index: 99;
|
||||||
|
@include headerLinksMobileSelectWidth;
|
||||||
|
height: 60px;
|
||||||
|
@include headerLinksMobileSelectPadding;
|
||||||
|
font-family: $font-header-link;
|
||||||
|
@include headerLinksMobileSelectFontsize;
|
||||||
|
background-color: $white;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 4px solid $indigo-blue;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
option {
|
||||||
|
text-align: center;
|
||||||
|
@include headerLinksMobileSelectFontsize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
select:focus ~ &-bg {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
transition: 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bg {
|
||||||
|
z-index: 90;
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
background-color: rgba($black, 0.5);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: $max-width-medium-1) {
|
@media screen and (max-width: $max-width-medium-1) {
|
||||||
display: none;
|
display: none;
|
||||||
@ -126,8 +305,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
|
|
||||||
&-apply {
|
&-apply {
|
||||||
font-family: $font-header-apply;
|
font-family: $font-header-apply;
|
||||||
width: 92px;
|
@include headerApplyWidthAndHeight;
|
||||||
height: 38px;
|
|
||||||
border-radius: 38px;
|
border-radius: 38px;
|
||||||
background-color: $indigo-blue;
|
background-color: $indigo-blue;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -136,7 +314,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-size: 13pt;
|
@include headerApplyFontsize;
|
||||||
color: $white;
|
color: $white;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|||||||
@ -1,87 +1,87 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="footer-container-primary">
|
<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>
|
||||||
<span class="footer-context"
|
<span class="footer-context"
|
||||||
>Students' Information Technology Conference</span
|
>Students' Information Technology Conference</span
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
<p class="footer-contact footer-font-block">
|
<p class="footer-contact footer-font-block">
|
||||||
<span class="footer-context">聯絡我們</span>
|
<span class="footer-context">聯絡我們</span>
|
||||||
<span class="footer-context">contact@sitcon.org</span>
|
<span class="footer-context">contact@sitcon.org</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-right">
|
<div class="footer-right">
|
||||||
<div class="footer-community">
|
<div class="footer-community">
|
||||||
<p class="footer-context">社群媒體</p>
|
<p class="footer-context">社群媒體</p>
|
||||||
<p class="footer-community-icon-container">
|
<p class="footer-community-icon-container">
|
||||||
<span class="footer-community-icon">
|
<span class="footer-community-icon">
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
v-for="community in communityLink"
|
v-for="community in communityLink"
|
||||||
:href="community.link"
|
:href="community.link"
|
||||||
:key="community.title"
|
:key="community.title"
|
||||||
>
|
>
|
||||||
<FontawesomeIcon
|
<FontawesomeIcon
|
||||||
class="community-icon"
|
class="community-icon"
|
||||||
:icon="['fab', community.icon]"
|
:icon="['fab', community.icon]"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-sitesOverYears">
|
<div class="footer-sitesOverYears">
|
||||||
<div class="footer-sitesOverYears__title">
|
<div class="footer-sitesOverYears__title">
|
||||||
<p class="footer-context">歷年網站</p>
|
<p class="footer-context">歷年網站</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-sitesOverYears__links">
|
<div class="footer-sitesOverYears__links">
|
||||||
<a href="https://sitcon.org/2020/">2020</a>
|
<a href="https://sitcon.org/2020/">2020</a>
|
||||||
<a href="https://sitcon.org/2019/">2019</a>
|
<a href="https://sitcon.org/2019/">2019</a>
|
||||||
<a href="https://sitcon.org/2018/">2018</a>
|
<a href="https://sitcon.org/2018/">2018</a>
|
||||||
<a href="https://sitcon.org/2017/">2017</a>
|
<a href="https://sitcon.org/2017/">2017</a>
|
||||||
<a href="https://sitcon.org/2016/">2016</a>
|
<a href="https://sitcon.org/2016/">2016</a>
|
||||||
<a href="https://sitcon.org/2015/">2015</a>
|
<a href="https://sitcon.org/2015/">2015</a>
|
||||||
<a href="https://sitcon.org/2014/">2014</a>
|
<a href="https://sitcon.org/2014/">2014</a>
|
||||||
<a href="https://sitcon.org/2013/">2013</a>
|
<a href="https://sitcon.org/2013/">2013</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</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>
|
||||||
|
|
||||||
|
|||||||
@ -1,72 +1,72 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="footer-container-secondary">
|
<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>
|
||||||
<span class="footer-context"
|
<span class="footer-context"
|
||||||
>Students' Information Technology Conference</span
|
>Students' Information Technology Conference</span
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
<p class="footer-contact footer-font-block">
|
<p class="footer-contact footer-font-block">
|
||||||
<span class="footer-context">聯絡我們</span>
|
<span class="footer-context">聯絡我們</span>
|
||||||
<span class="footer-context">contact@sitcon.org</span>
|
<span class="footer-context">contact@sitcon.org</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-right">
|
<div class="footer-right">
|
||||||
<div class="footer-community">
|
<div class="footer-community">
|
||||||
<p class="footer-context">社群媒體</p>
|
<p class="footer-context">社群媒體</p>
|
||||||
<p class="footer-community-icon-container">
|
<p class="footer-community-icon-container">
|
||||||
<span class="footer-community-icon">
|
<span class="footer-community-icon">
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
v-for="community in communityLink"
|
v-for="community in communityLink"
|
||||||
:href="community.link"
|
:href="community.link"
|
||||||
:key="community.title"
|
:key="community.title"
|
||||||
>
|
>
|
||||||
<FontawesomeIcon
|
<FontawesomeIcon
|
||||||
class="community-icon"
|
class="community-icon"
|
||||||
:icon="['fab', community.icon]"
|
:icon="['fab', community.icon]"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</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>
|
||||||
|
|
||||||
|
|||||||
@ -47,11 +47,12 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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 value="/agenda" :selected="onRoute('Agenda') ? true : false">
|
||||||
<a href="/2021/agenda">議程與活動</a></option
|
<a href="/2021/agenda"> 議程與活動</a></option
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
value="/traffic"
|
value="/traffic"
|
||||||
@ -69,6 +70,7 @@
|
|||||||
><a href="/2021/team">籌備團隊</a></option
|
><a href="/2021/team">籌備團隊</a></option
|
||||||
>
|
>
|
||||||
</select>
|
</select>
|
||||||
|
<div class="header-links--mobile-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-apply">
|
<div class="header-apply">
|
||||||
<a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank">
|
<a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank">
|
||||||
@ -80,10 +82,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from "vue-property-decorator";
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
props: ["route"],
|
props: ['route']
|
||||||
})
|
})
|
||||||
export default class Header extends Vue {
|
export default class Header extends Vue {
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -96,5 +98,5 @@ export default class Header extends Vue {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@/assets/scss/header";
|
@import '@/assets/scss/header';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template> </template>
|
<template> </template>
|
||||||
<script>
|
<script>
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({})
|
@Component({})
|
||||||
export default class Agenda extends Vue {}
|
export default class Agenda extends Vue {}
|
||||||
|
|||||||
@ -108,10 +108,10 @@
|
|||||||
</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({
|
||||||
components: {},
|
components: {}
|
||||||
})
|
})
|
||||||
export default class CFP extends Vue {
|
export default class CFP extends Vue {
|
||||||
@Prop() private msg!: string;
|
@Prop() private msg!: string;
|
||||||
@ -119,5 +119,5 @@ export default class CFP extends Vue {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@/assets/scss/home/home";
|
@import '@/assets/scss/home/home';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template> </template>
|
<template> </template>
|
||||||
<script>
|
<script>
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({})
|
@Component({})
|
||||||
export default class Sponsor extends Vue {}
|
export default class Sponsor extends Vue {}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template> </template>
|
<template> </template>
|
||||||
<script>
|
<script>
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({})
|
@Component({})
|
||||||
export default class Team extends Vue {}
|
export default class Team extends Vue {}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template> </template>
|
<template> </template>
|
||||||
<script>
|
<script>
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({})
|
@Component({})
|
||||||
export default class Traffic extends Vue {}
|
export default class Traffic extends Vue {}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template> </template>
|
<template> </template>
|
||||||
<script>
|
<script>
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component({})
|
@Component({})
|
||||||
export default class Venue extends Vue {}
|
export default class Venue extends Vue {}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user