diff --git a/public/mobile.html b/public/mobile.html
index 0b59a19..af93b1d 100755
--- a/public/mobile.html
+++ b/public/mobile.html
@@ -23,7 +23,7 @@
         min-width: 90%;
         border-radius: 4px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        padding: 0.19rem 0.16rem; 
+        padding: 0.19rem 0.16rem;
         padding-right: 5rem;
         z-index: 1;
       }
@@ -38,9 +38,6 @@
         margin-top: 0.2rem;
         color: #fff;
       }
-      .headerbtn:hover .dropdown-content {
-        display: block;
-      }
     </style>
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico" />
     <script>
@@ -83,7 +80,9 @@
             style="display: none"
           ></a>
           <div class="dropdown-content">
-            <a href="/recommend" id="sign_href" style="display: none;">Sign up</a>
+            <a href="/recommend" id="sign_href" style="display: none"
+              >Sign up</a
+            >
             <a href="/rankinglist" id="quest_info">Quest Info</a>
             <a href="javascript:void(0)" id="logout_btn">Log out</a>
           </div>
@@ -341,13 +340,14 @@
     <script src="js/time.js"></script>
     <script>
       function getUrlParam(name) {
-          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-          var r = window.location.search.substr(1).match(reg);
-          if (r != null) return unescape(r[2]); return null;
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]);
+        return null;
       }
-      var invitecode = getUrlParam('code')
+      var invitecode = getUrlParam("code");
       if (invitecode) {
-        localStorage.setItem('invite_code', invitecode)
+        localStorage.setItem("invite_code", invitecode);
       }
       var loadPic = [];
       for (var i = 1; i < 101; i++) {
@@ -473,12 +473,12 @@
           }
         };
         checkLogin();
-        $("#wallet_login_btn").click(function () {  
+        $("#wallet_login_btn").click(function () {
           location.href = "/sinup";
         });
-        $('#logout_btn').click(function(){
-          localStorage.removeItem('userinfo')
-        })
+        $("#logout_btn").click(function () {
+          localStorage.removeItem("userinfo");
+        });
       });
 
       $(".anmode").each(function () {
@@ -498,110 +498,104 @@
             if (!th.hasClass("animated")) {
               th.addClass("animated");
             }
-        }
-      })
-      })
-        $(function () {
-            
-            $(".rule_sliders").click(function () {
-                
-                if (!$(this).hasClass("sliderOn")) {
-                    
-                    $(".rule_sliders").removeClass("sliderOn");
-                    $(this).addClass("sliderOn");
-                    $(".rule_descprition").slideUp();
-                    $(this).find(".rule_descprition").slideDown();
+          }
+        });
+      });
+      $(function () {
+        $(".rule_sliders").click(function () {
+          if (!$(this).hasClass("sliderOn")) {
+            $(".rule_sliders").removeClass("sliderOn");
+            $(this).addClass("sliderOn");
+            $(".rule_descprition").slideUp();
+            $(this).find(".rule_descprition").slideDown();
+          } else {
+            $(this).removeClass("sliderOn");
+            $(this).find(".rule_descprition").slideUp();
+          }
+        });
+        var address = "";
+        var token = "";
 
-                } else {
-                    $(this).removeClass("sliderOn");
-                    $(this).find(".rule_descprition").slideUp();
+        var checkActivity = function (address, cb) {
+          var settings = {
+            url: "http://192.168.100.83:3000/aa1/user_status",
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            data: JSON.stringify({
+              account: address,
+            }),
+          };
 
-                }
-            })
-            var address = '';
-            var token = ''
-            
-            var checkActivity = function(address, cb) {
-                var settings = {
-                    "url": "http://192.168.100.83:3000/aa1/user_status",
-                    "method": "POST",
-                    "headers": {
-                        "Content-Type": "application/json"
-                    },
-                    "data": JSON.stringify({
-                        "account": address
-                    })
-                };
-
-                $.ajax(settings).done(function (res) {
-                    if (!res.errcode) {
-                        if (res.status == 4) {
-                            $('#page_login_btn').hide();
-                            $('#page_quest_btn').show();
-                        } else if (res.status == 1) {
-                            $('#page_login_btn').show();
-                            $('#page_quest_btn').hide();
-                            $('#page_login_btn').attr('href', '/recommend');
-                        }else {
-                            $('#page_login_btn').show();
-                            $('#page_quest_btn').hide();
-                            $('#page_login_btn').attr('href', '/login');
-                        }
-                    }
-                });
+          $.ajax(settings).done(function (res) {
+            if (!res.errcode) {
+              if (res.status == 4) {
+                $("#page_login_btn").hide();
+                $("#page_quest_btn").show();
+              } else if (res.status == 1) {
+                $("#page_login_btn").show();
+                $("#page_quest_btn").hide();
+                $("#page_login_btn").attr("href", "/recommend");
+              } else {
+                $("#page_login_btn").show();
+                $("#page_quest_btn").hide();
+                $("#page_login_btn").attr("href", "/login");
+              }
             }
-            var checkLogin = function() {
-                let userinfo = window.localStorage.getItem("userinfo");
-                if (!userinfo) {
-                    return false
-                }
-                try {
-                    let udata = JSON.parse(userinfo)
-                    console.log(udata);
-                    address = udata.account;
-                    token = udata.token;
-                    if (address) {
-                        $('#logined_btn').html(formatAddress(address));
-                        $('#wallet_login_btn').hide();
-                        $('#logined_btn').show();
-                        $('#page_login_btn').attr('href', '/signup');
-                        checkActivity(address, function() {
-                            
-                        });
-                    }
-                    return true;
-                } catch (err) {
-                    return false;
-                }
+          });
+        };
+        var checkLogin = function () {
+          let userinfo = window.localStorage.getItem("userinfo");
+          if (!userinfo) {
+            return false;
+          }
+          try {
+            let udata = JSON.parse(userinfo);
+            console.log(udata);
+            address = udata.account;
+            token = udata.token;
+            if (address) {
+              $("#logined_btn").html(formatAddress(address));
+              $("#wallet_login_btn").hide();
+              $("#logined_btn").show();
+              $("#page_login_btn").attr("href", "/signup");
+              checkActivity(address, function () {});
             }
-            checkLogin();
-            $('#wallet_login_btn').click(function() {
-                location.href = '/sinup'
-            })
-            
-        })
+            return true;
+          } catch (err) {
+            return false;
+          }
+        };
+        checkLogin();
+        $("#wallet_login_btn").click(function () {
+          location.href = "/sinup";
+        });
+      });
 
-        $(".anmode").each(function () {
-            var th = $(this);
-            var dura = th.data("dura");
-            var delay = th.data("delay");
-            th.css("animation-duration", dura);
-            th.css("animation-delay", delay);
-        })
-
-        $(window).scroll(function () {
-            var windowtop = $(window).scrollTop();
-            $(".section").each(function (index, element) {
-                var th = $(this);
-                var thtops = th.offset().top;
-                if (windowtop >= (thtops - $(window).height() * 0.8)) {
-                    if (!th.hasClass("animated")) {
-                        th.addClass("animated");
-                    }
-                }
-            });
-        })
+      $(".anmode").each(function () {
+        var th = $(this);
+        var dura = th.data("dura");
+        var delay = th.data("delay");
+        th.css("animation-duration", dura);
+        th.css("animation-delay", delay);
+      });
 
+      $(window).scroll(function () {
+        var windowtop = $(window).scrollTop();
+        $(".section").each(function (index, element) {
+          var th = $(this);
+          var thtops = th.offset().top;
+          if (windowtop >= thtops - $(window).height() * 0.8) {
+            if (!th.hasClass("animated")) {
+              th.addClass("animated");
+            }
+          }
+        });
+      });
+      $(".headerbtn").click(function () {
+        $(".dropdown-content").show();
+      });
     </script>
   </body>
 </html>
diff --git a/src/views/layout/Header.vue b/src/views/layout/Header.vue
index 26f3dc2..85a5c6e 100644
--- a/src/views/layout/Header.vue
+++ b/src/views/layout/Header.vue
@@ -4,13 +4,14 @@
       <div class="logo-img">
         <img class="imgs" src="../../assets/mobile/logo.png" alt="" />
       </div>
-      <div class="header-login">
-        <span >WALLET CONNECT</span>
-        <div 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 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>
@@ -18,23 +19,30 @@
 <script>
 export default {
   name: "Header",
+  data() {
+    return {
+      hide:false
+    };
+  },
   created() {
     chain.chainManager.init().then(() => {
-      console.log('header wallet init')
-    })
+      console.log("header wallet init");
+    });
   },
   methods: {
+    header(){
+       this.hide = true
+    },
     logout() {
       chain.logout();
-      localStorage.removeItem('userinfo');
-      location.href = '/desktop.html'
+      localStorage.removeItem("userinfo");
+      location.href = "/desktop.html";
     },
     toQuest(e) {
-      this.$router.push('rankinglist')
-    }
-  }
+      this.$router.push("rankinglist");
+    },
+  },
 };
-
 </script>
 
 <style lang="less">
@@ -53,6 +61,7 @@ export default {
 }
 .header-login {
   width: 9rem;
+  margin-top: 0.2vh;
   border-radius: 50px;
   line-height: 4vh;
   background: rgb(12, 0, 0);
@@ -65,20 +74,17 @@ export default {
 }
 
 .dropdown-content {
-  display: none;
-  top:4.2vh;
+  top: 4.2vh;
+  width: 36vw;
   position: absolute;
   background-color: rgb(18, 18, 18);
-  min-width: 100%;
   border-radius: 4px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   // padding: 12px 16px;
   z-index: 1;
 }
 
-.header-login:hover .dropdown-content {
-  display: block;
-}
+
 .dropdown-content a {
   text-decoration: none;
   padding: 0.2vw 0.3vw;