<script setup>
	import {
    ref,
    onBeforeMount
  } from "vue";
  import {
    useRoute,
    useRouter
  } from "#imports";
  import {
    useI18n
  } from "vue-i18n";
  import langToCheck from "@/hook/lang.js";
  
  const {
    t
  } = useI18n();
  
  useHead({
    title: t('contact.thank-message'),
  })
  
  const langIs = ref('')
  onBeforeMount(()=>{
     langIs.value = langToCheck() 
  })
  
  const router = useRouter();
  const route = useRoute();
  const BackToMenu = () => {
    router.push("/");
  }
</script>

<template>
	  <div class="container">
      <div class="img-container">
        <img src="/static/contact-us/complete.webp" alt="Icon">
      </div>
      <div class="message">{{t('contact.thank-message')}}</div>
      <button type="button" @click="BackToMenu">{{$t('contact.back')}}</button>
	  </div>
</template>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  height: 100vh; /* 让父容器高度占满视口 */
  .img-container{
    margin-bottom: 71px;
  }
  .message{
    font-size: 0.48rem;
    font-family: MiSans-Regular;
    margin-bottom: 84px;
  }
  button {
    width: 150px;
    height: 45px;
    background: #2164ff;
    border-radius: 31px;
    margin: 1vw auto 0;
    color: #fff;
    font-size: 22px;
    text-transform: capitalize;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

    @media (min-width:1920px) {
      width: 1.5rem;
      height: 0.45rem;
      font-size: 0.22rem;
      border-radius: 0.31rem;
    }

    @media (max-width: 1680px) {
      font-size: 15px;
    }

    @media (max-width: 1280px) {
      font-size: 14px;
    }

    @media (max-width: 1024px) {
      font-size: 12px;
    }

    @media (max-width: 600px) {
      font-size: 14px;
    }
  }
}


</style>