145 lines
3.2 KiB
Vue
145 lines
3.2 KiB
Vue
<template>
|
|
<header class="header fixed">
|
|
<div class="logo">
|
|
<img src="@/assets/main/p1/icon_logo_t.png">
|
|
</div>
|
|
<ul class="menu-list">
|
|
<li :class="{'active': currentSection === 'gameplay'}"><a href="/gameplay">GamePlay</a></li>
|
|
<li :class="{'active': currentSection === 'nft'}"><a href="/nft">NFT</a></li>
|
|
<li :class="{'active': currentSection === 'tokennomic'}"><a href="/tokennomic">Tokennomic</a></li>
|
|
<li :class="{'active': currentSection === 'team'}" ><a href="/team">Team</a></li>
|
|
<li :class="{'active': currentSection === 'roadmap'}"><a href="/roadmap">Roadmap</a></li>
|
|
</ul>
|
|
<div class="right-part">
|
|
<div class="login-btn" v-if="!accountId" @click="collectToWallet">
|
|
<img src="@/assets/202202/loginbutton@2x.png" alt="login"/>
|
|
</div>
|
|
<div class="login-btn" v-if="accountId" @click="disconnectWallet">
|
|
Logout
|
|
</div>
|
|
<div class="market-btn" @click="comingSoon">
|
|
<img src="@/assets/202202/btn-market@2x.png" alt="marketplace"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import { Message } from 'element-ui'
|
|
import { AppModule } from '@/store/modules/app'
|
|
import { BlockChain } from '@/utils/blockchain'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
currentSection?: string
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
name: 'DesktopHeader',
|
|
components: {
|
|
},
|
|
props: ['currentSection']
|
|
})
|
|
export default class extends Vue {
|
|
private dropShow = false
|
|
bc = new BlockChain();
|
|
|
|
changeSection(e: PointerEvent) {
|
|
this.dropShow = false
|
|
const target = e.currentTarget as HTMLElement
|
|
if (target) {
|
|
this.$emit('section-change', target.dataset.menuanchor)
|
|
}
|
|
}
|
|
|
|
async disconnectWallet() {
|
|
return this.bc.disconnect()
|
|
}
|
|
|
|
async collectToWallet() {
|
|
return this.bc.connect()
|
|
}
|
|
|
|
toggleDrop() {
|
|
this.dropShow = !this.dropShow
|
|
}
|
|
|
|
get accountId() {
|
|
return AppModule.accountId
|
|
}
|
|
|
|
comingSoon() {
|
|
Message({
|
|
message: 'coming soon',
|
|
type: 'info',
|
|
duration: 5 * 1000
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 66px;
|
|
.logo{
|
|
width: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img{
|
|
width: 55px;
|
|
height: 55px;
|
|
}
|
|
}
|
|
.menu-list{
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 60px;
|
|
li{
|
|
color: #5B5B5B;
|
|
padding-top: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
a {
|
|
color: unset;
|
|
text-decoration: unset;
|
|
}
|
|
&.active{
|
|
color: #C5C5C5;
|
|
position: relative;
|
|
}
|
|
&.active::after{
|
|
content: "\2022";
|
|
color: #FFA32E;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
width: 1em;
|
|
bottom: -1em;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
.right-part{
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 44px;
|
|
.login-btn{
|
|
cursor: pointer;
|
|
color: #5B5B5B;
|
|
}
|
|
.market-btn{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|