fix join-us captcha

components/Layout/Captcha.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="d-flex flex-column">
+  <div class="d-flex flex-column container">
+    <div id="captchaBox" :class="show ? '' : 'hidden'" />
     <vue-hcaptcha
       :sitekey="siteKey"
       challenge-container="captchaBox"
+      @opened="show = true"
+      @closed="show = false"
       @verify="onVerify"
       @expired="onExpire"
       @challenge-expired="onChallengeExpire"
@@ -13,8 +16,6 @@
       :rules="[validateCaptchaState]"
       class="hidden-ctrl"
     />
-
-    <div id="captchaBox"></div>
   </div>
 </template>
 
@@ -25,6 +26,8 @@ import type { Ref } from 'vue'
 const runtimeConfig = useRuntimeConfig()
 const siteKey = runtimeConfig.public.hCaptchaSiteKey
 
+const show: Ref<boolean> = ref(false)
+
 const verified: Ref<boolean> = ref(false)
 const expired: Ref<boolean> = ref(false)
 const token: Ref<string> = ref('')
@@ -46,6 +49,8 @@ function onVerify(tokenStr: string, ekey: string) {
   token.value = tokenStr
   eKey.value = ekey
   emit('update', true)
+
+  show.value = false
 }
 
 function onExpire() {
@@ -81,4 +86,25 @@ function onError(err: string) {
     display: none;
   }
 }
+
+.container {
+  position: relative;
+}
+
+#captchaBox {
+  z-index: 1000;
+  position: absolute;
+  bottom: 140px;
+  box-shadow: 2px 2px 1px grey;
+  border: solid 1px lightgray;
+  background: white;
+
+  @media (min-width: 600px) {
+    left: -100px;
+  }
+}
+
+.hidden {
+  display: none;
+}
 </style>