<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>