[ADD] add nav
This commit is contained in:
parent
11f6a723bd
commit
5141a28a50
@ -360,6 +360,7 @@ $max-width-small-3: 360px;
|
||||
|
||||
//cfp-sub-information <subInformation>
|
||||
.info {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: $fontFamily;
|
||||
float: left;
|
||||
|
@ -1,5 +1,7 @@
|
||||
@import '../hyperpoint';
|
||||
@import '../color';
|
||||
$fontFamily: Noto Sans TC, monospace;
|
||||
|
||||
|
||||
// desktop mode
|
||||
#news-header {
|
||||
@ -353,3 +355,65 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-nav {
|
||||
position: fixed;
|
||||
text-align: end;
|
||||
top: 25px;
|
||||
right: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
box-shadow: 3px 3px 15px $mid-blue;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
&-item {
|
||||
margin: 5px 8px;
|
||||
color: $mid-blue;
|
||||
font-family: $fontFamily;
|
||||
cursor: point;
|
||||
}
|
||||
&-button {
|
||||
color: $mid-blue;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 20px;
|
||||
cursor: point;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control-button {
|
||||
color: $mid-blue;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
top: 25px;
|
||||
right: 50px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
position: flex;
|
||||
flex-direction: column;
|
||||
width: 55px;
|
||||
background-color: white;
|
||||
box-shadow: -2px 0 15px $mid-blue;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
p {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.nav-control-button {
|
||||
top: 250px;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
@ -7,6 +7,7 @@
|
||||
$fontFamily: 'Noto Sans CJK TC', monospace;
|
||||
|
||||
#news-schedule {
|
||||
position: relative;
|
||||
max-width: 80vw;
|
||||
margin: 0 auto;
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
.topic {
|
||||
padding: 30px 0;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 256px min-content 1fr;
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="info">
|
||||
<div class="info-container">
|
||||
<!-- 議程種類方塊 -->
|
||||
<section class="info-section">
|
||||
<section class="info-section" id="info-section">
|
||||
<h1>議程種類</h1>
|
||||
<article class="info-section__content">
|
||||
<div class="info-kind">
|
||||
@ -35,7 +35,7 @@
|
||||
</section>
|
||||
<!-- 議程種類方塊 -->
|
||||
<!-- 流程 -->
|
||||
<section class="info-section">
|
||||
<section class="info-section" id="process">
|
||||
<h1>流程</h1>
|
||||
<article class="info-section__content">
|
||||
<p>
|
||||
@ -47,7 +47,7 @@
|
||||
</section>
|
||||
<!-- 流程 -->
|
||||
<!-- 投稿方式 -->
|
||||
<section class="info-section">
|
||||
<section class="info-section" id="methods">
|
||||
<h1>投稿方式</h1>
|
||||
<article class="info-section__content">
|
||||
<p>
|
||||
@ -100,7 +100,7 @@
|
||||
</section>
|
||||
<!-- 投稿方式 -->
|
||||
<!-- 審稿方式 -->
|
||||
<section class="info-section">
|
||||
<section class="info-section" id="review">
|
||||
<h1>審稿方式</h1>
|
||||
<article class="info-section__content">
|
||||
<p>
|
||||
@ -115,7 +115,7 @@
|
||||
<!-- 審稿方式 -->
|
||||
<!-- 投稿注意事項 -->
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<section class="info-section" id="precautions">
|
||||
<h1>投稿注意事項</h1>
|
||||
<article class="info-section__content">
|
||||
<p>
|
||||
|
@ -46,6 +46,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav v-if="navVisible">
|
||||
<div class="news-nav">
|
||||
<a class="news-nav-item" href="#schedule">重要時程</a>
|
||||
<a class="news-nav-item" href="#example">投稿主題範例</a>
|
||||
<a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
|
||||
<a class="news-nav-item" href="#info-section">議程種類</a>
|
||||
<a class="news-nav-item" href="#process">流程</a>
|
||||
<a class="news-nav-item" href="#methods">投稿方式</a>
|
||||
<a class="news-nav-item" href="#review">審稿方式</a>
|
||||
<a class="news-nav-item" href="#precautions">投稿注意事項</a>
|
||||
<a class="news-nav-item" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
|
||||
<button class="news-nav-button" @click="(e)=>navVisible=!navVisible">▲</button>
|
||||
</div>
|
||||
</nav>
|
||||
<button v-if="!navVisible" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
|
||||
<p>▲</p>
|
||||
<p>▼</p>
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@ -66,6 +84,7 @@ interface Countdown {
|
||||
@Component
|
||||
export default class CfpHeader extends Vue {
|
||||
private timerId!: number;
|
||||
private navVisible = false;
|
||||
private countdown: Countdown = {
|
||||
s: 0,
|
||||
m: 0,
|
||||
@ -112,6 +131,7 @@ export default class CfpHeader extends Vue {
|
||||
private unregisterTimer () {
|
||||
clearInterval(this.timerId);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user