101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header">
|
|
<div class="logo-img">
|
|
<img class="imgs" src="../../assets/mobile/logo.png" alt="" />
|
|
</div>
|
|
<div class="header-login" @click="header">
|
|
<span>WALLET CONNECT</span>
|
|
<div v-show="hide" class="dropdown-content">
|
|
<a href="javascript:void(0)" @click.stop="toQuest">Quest Info</a>
|
|
<a href="javascript:void(0);" @click="logout">Log out</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Header",
|
|
data() {
|
|
return {
|
|
hide:false
|
|
};
|
|
},
|
|
created() {
|
|
chain.chainManager.init().then(() => {
|
|
console.log("header wallet init");
|
|
});
|
|
},
|
|
methods: {
|
|
header(){
|
|
this.hide = true
|
|
},
|
|
logout() {
|
|
chain.logout();
|
|
localStorage.removeItem("userinfo");
|
|
location.href = "/desktop.html";
|
|
},
|
|
toQuest(e) {
|
|
this.$router.push("rankinglist");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: linear-gradient(179deg, #775437, #f2c082);
|
|
justify-content: space-between;
|
|
height: 4.8vh;
|
|
}
|
|
.imgs {
|
|
padding-left: 2vw;
|
|
margin-top: 1vh;
|
|
width: 7vw;
|
|
height: 7vw;
|
|
}
|
|
.header-login {
|
|
width: 9rem;
|
|
margin-top: 0.2vh;
|
|
border-radius: 50px;
|
|
line-height: 4vh;
|
|
background: rgb(12, 0, 0);
|
|
text-align: center;
|
|
font-size: 0.6rem;
|
|
height: 4vh;
|
|
margin-right: 1.5vw;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
top: 4.2vh;
|
|
width: 36vw;
|
|
position: absolute;
|
|
background-color: rgb(18, 18, 18);
|
|
border-radius: 4px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
// padding: 12px 16px;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.dropdown-content a {
|
|
text-decoration: none;
|
|
padding: 0.2vw 0.3vw;
|
|
font-size: 0.46rem;
|
|
border-radius: 13px;
|
|
display: block;
|
|
text-align: center;
|
|
font-family: OPPOSans;
|
|
font-weight: normal;
|
|
background: linear-gradient(90deg, #714f34, #f5c384);
|
|
margin-top: 0.2rem;
|
|
color: #fff;
|
|
}
|
|
</style> |