462 lines
11 KiB
Vue
462 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="top-header" v-if="!mobile" style="">
|
|
<div class="viewLogo">
|
|
<a href="/">
|
|
<img
|
|
class="logo"
|
|
alt="logo"
|
|
src="@/assets/main/p1/icon_logo_t.png" />
|
|
</a>
|
|
</div>
|
|
<div class="header-menu">
|
|
<a class="menu-item" href="/">
|
|
<div class="item" >Home</div>
|
|
</a>
|
|
<a class="menu-item" href="/mall" >
|
|
<div class="item" :class="{'active': currentTab==='official'}">
|
|
Official Shop
|
|
<div class="active-bottom" v-if="currentTab==='official'"></div>
|
|
</div>
|
|
</a>
|
|
<a class="menu-item" href="/market" >
|
|
<div class="item " :class="{'active': currentTab==='market'}">
|
|
Marketplace
|
|
<div class="active-bottom" v-if="currentTab==='market'"></div>
|
|
</div>
|
|
</a>
|
|
<a class="menu-item" href="/mysteryboxes" v-if="!hidePart" >
|
|
<div class="item " :class="{'active': currentTab==='mystery'}">
|
|
MysteryBoxes
|
|
<div class="active-bottom" v-if="currentTab==='mystery'"></div>
|
|
</div>
|
|
</a>
|
|
<a class="menu-item" href="/mynft" v-if="logined" >
|
|
<div class="item " :class="{'active': currentTab==='mynft'}">
|
|
MyNFT
|
|
<div class="active-bottom" v-if="currentTab==='mynft'"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="rightContainer">
|
|
<!-- <div class="contact">-->
|
|
<!-- <span class="span">Contact Us</span>-->
|
|
<!-- </div>-->
|
|
<div v-if="!logined" @click="collectToWallet" class="walletBtn active">
|
|
<span>Connect Wallet</span>
|
|
</div>
|
|
<!-- <div v-if="logined" @click="disconnectWallet" class="walletBtn">-->
|
|
<!-- <span>Logout</span>-->
|
|
<!-- </div>-->
|
|
<img
|
|
draggable="false"
|
|
v-if="logined"
|
|
class="avatar"
|
|
ref="avatar"
|
|
src="@/assets/main/avatar/n_aoi.png"
|
|
alt="avatar"
|
|
@click="infoPanelShow=!infoPanelShow"
|
|
>
|
|
</div>
|
|
</div>
|
|
<top-user-info
|
|
v-show="infoPanelShow && logined"
|
|
v-on:close-self="onClose"
|
|
></top-user-info>
|
|
<div class="mobile-header" v-if="mobile" style="">
|
|
<a href="/"
|
|
><img
|
|
class="logo"
|
|
src="@/assets/main/p1/icon_logo_t.png"
|
|
alt="logo"
|
|
/></a>
|
|
<anim-menu :menu-show="menuShow" @menu-stat-change="toggleMenu"></anim-menu>
|
|
</div>
|
|
<div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
|
|
<a class="navItem" href="/">Home</a>
|
|
<a class="navItem" href="/official" >Official Shop</a>
|
|
<a class="navItem dash" href="/market">Marketplace</a>
|
|
<a class="navItem dash" href="/mysteryboxes" v-if="!hidePart" >MysteryBoxes</a>
|
|
<a class="navItem" href="/mynft" v-if="logined">MyNFT</a>
|
|
<label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
|
|
<button v-if="!logined" class="general-btn connectButton mobile" @click="collectToWallet">
|
|
<span>Connect Wallet</span>
|
|
</button>
|
|
<!-- <label class="navItem contact">Contact us</label>-->
|
|
<label class="navItem profile" v-if="logined" @click="subShow=!subShow">
|
|
<div>My Profile</div>
|
|
<img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
|
|
</label>
|
|
<label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
|
|
<div class="navChild" :class="{'show': subShow}">
|
|
<label class="navItem profile" @click="subShow=!subShow">
|
|
<img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
|
|
<div class="lbl">My Profile</div>
|
|
</label>
|
|
<a class="navItem" href="/mynft">MyNFT</a>
|
|
<a class="navItem" href="javascript:void(0)" @click="comingSoon">Account Setting</a>
|
|
<a class="navItem" href="javascript:void(0)" @click="comingSoon">Wallet</a>
|
|
<!-- <label class="navItem contact">Contact us</label>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import TopUserInfo from '@/components/market/TopUserInfo.vue'
|
|
import { AppModule, DeviceType } from '@/store/modules/app'
|
|
import ChainManager from '@/chain/ChainManager'
|
|
import { UserModule } from '@/store/modules/user'
|
|
import AnimMenu from '@/components/core/AnimMenu.vue'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
currentTab?: string
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
name: 'Navbar',
|
|
components: { AnimMenu, TopUserInfo },
|
|
props: ['currentTab']
|
|
})
|
|
export default class extends Vue {
|
|
infoPanelShow = false
|
|
menuShow = false
|
|
subShow = false
|
|
chainManager = new ChainManager()
|
|
get mobile() {
|
|
return AppModule.device === DeviceType.Mobile
|
|
}
|
|
|
|
async created() {
|
|
await this.chainManager.init()
|
|
}
|
|
|
|
get hidePart() {
|
|
return !!process.env.VUE_APP_PART_CLOSE
|
|
}
|
|
|
|
get logined() {
|
|
return this.chainManager.isLogined
|
|
}
|
|
|
|
async collectToWallet() {
|
|
return this.chainManager.login()
|
|
}
|
|
|
|
async disconnectWallet() {
|
|
return this.chainManager.logout()
|
|
}
|
|
|
|
toggleMenu(stat: boolean) {
|
|
this.menuShow = stat
|
|
if (!this.menuShow) {
|
|
this.subShow = false
|
|
}
|
|
}
|
|
|
|
onClose() {
|
|
this.infoPanelShow = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(20, 16, 59, 0.8);
|
|
box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.15);
|
|
backdrop-filter: blur(5em);
|
|
z-index: 8;
|
|
height: 5.25em;
|
|
--tooltip-text-color: white;
|
|
--tooltip-margin: 1.875em;
|
|
--tooltip-arrow-size: 0.75em;
|
|
}
|
|
|
|
.top-header .header-menu {
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
flex: auto;
|
|
}
|
|
|
|
.top-header .header-menu .menu-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.top-header .header-menu .menu-item .item {
|
|
font-weight: bold;
|
|
font-size: 1.125em;
|
|
color: #fff;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
width: 13.438em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.top-header .header-menu .menu-item .active {
|
|
background: linear-gradient(
|
|
90deg,
|
|
#FFA81E 73.48%,
|
|
rgba(54, 43, 109, 0) 161.57%
|
|
);
|
|
margin-left: -2em;
|
|
clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
|
|
}
|
|
|
|
.active-bottom {
|
|
border-bottom: 0.3125em #FF8815 solid;
|
|
width: 120%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.top-header .viewLogo {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 20vw;
|
|
}
|
|
|
|
.logo {
|
|
height: 3rem;
|
|
}
|
|
|
|
.rightContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 2.5em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rightContainer .contact {
|
|
margin-right: 1.875em;
|
|
}
|
|
|
|
.rightContainer .contact .span {
|
|
cursor: pointer;
|
|
font-size: 1.125em;
|
|
color: #a796e1;
|
|
}
|
|
|
|
.connectButton {
|
|
border-radius: 0.25em;
|
|
background: radial-gradient(
|
|
123.41% 70.85% at 47.63% 49.99%,
|
|
#558ada 0%,
|
|
#1b68db 100%
|
|
) !important;
|
|
cursor: pointer;
|
|
height: 2.75em !important;
|
|
padding: 0 1.688em;
|
|
font-size: 1.125em !important;
|
|
}
|
|
|
|
.connectButton span {
|
|
text-decoration: none;
|
|
|
|
font-weight: bold;
|
|
font-size: 1.125em;
|
|
line-height: 1.33;
|
|
color: white;
|
|
}
|
|
|
|
.avatar {
|
|
width: 3.125em;
|
|
height: 3.125em;
|
|
border-radius: 1.563em;
|
|
cursor: pointer;
|
|
}
|
|
.walletBtn {
|
|
font-size: 18px;
|
|
color: white;
|
|
text-decoration: none;
|
|
line-height: 80px;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
}
|
|
.walletBtn span{
|
|
vertical-align: bottom;
|
|
}
|
|
.walletBtn.active{
|
|
background-image: url('../../assets/main/p1/btn_bg.png');
|
|
background-repeat: repeat-x;
|
|
background-position: 0 17px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.mobile-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: rgba(20,16,59,.8);
|
|
box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
|
|
backdrop-filter: blur(5em);
|
|
z-index: 18;
|
|
height: 4.75em;
|
|
position: fixed;
|
|
padding: 0 5%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 16px;
|
|
align-items: center;
|
|
}
|
|
.logo {
|
|
max-width: 15vw;
|
|
}
|
|
.mobile-menu-icon {
|
|
|
|
}
|
|
.nav {
|
|
width: 292px;
|
|
font-size: 16px;
|
|
max-width: 100%;
|
|
background: #261858;
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
transform: translateX(100%);
|
|
display: flex;
|
|
z-index: 17;
|
|
opacity: 0;
|
|
transition: transform linear 0.2s, opacity linear 0.2s;
|
|
padding: 1.5em 1.5em;
|
|
padding-top: 4.75em;
|
|
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
|
|
&.overflow {
|
|
overflow: auto;
|
|
}
|
|
&.show{
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.connectButton {
|
|
width: 100%;
|
|
border-radius: 0.25em;
|
|
background: radial-gradient(
|
|
123.41% 70.85% at 47.63% 49.99%,
|
|
#558ada 0%,
|
|
#1b68db 100%
|
|
) !important;
|
|
cursor: pointer;
|
|
height: 2.75em !important;
|
|
padding: 0 1.688em;
|
|
font-size: 1.125em !important;
|
|
&.mobile {
|
|
margin-top: 1.5em;
|
|
}
|
|
}
|
|
|
|
.navItem {
|
|
font-weight: bold;
|
|
font-size: 1.125em;
|
|
line-height: 1.5em;
|
|
color: #ffffff;
|
|
padding: 1.5em 0;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid #3d2a84;
|
|
}
|
|
|
|
&.contact {
|
|
border-top: none;
|
|
color: #a796e1;
|
|
font-weight: normal;
|
|
}
|
|
&.profile {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-right: 0.75em;
|
|
}
|
|
&.dash {
|
|
border-bottom: 1px solid #3d2a84;
|
|
}
|
|
}
|
|
|
|
.navChild {
|
|
transform: translateX(100%);
|
|
position: absolute;
|
|
overflow: auto;
|
|
top: 0;
|
|
width: 100%;
|
|
bottom: 0;
|
|
padding-top: 4.75em;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #261858;
|
|
// transition: transform linear 0.15s;
|
|
&.show {
|
|
transform: translateX(0%);
|
|
}
|
|
.navItem {
|
|
font-weight: bold;
|
|
font-size: 1.125em;
|
|
line-height: 1.5em;
|
|
color: #ffffff;
|
|
padding: 1.5em 0;
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid #3d2a84;
|
|
}
|
|
|
|
&.contact {
|
|
border-top: none;
|
|
color: #a796e1;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&.profile {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.arrowIcon {
|
|
transform: rotate(180deg);
|
|
margin-right: 1.188em;
|
|
}
|
|
.lbl {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ipCkProfile {
|
|
display: none;
|
|
&:checked {
|
|
~ .navChild {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|