<script setup>
import {useAuth} from "@/store/auth/index.js";
const {clickSendCode,telNum,code,clickLogin}= useAuth()

</script>

<template>
  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/za3343@2x.png')] flex items-center flex-col">
    <div class="flex items-center flex-col absolute top-0 right-[164px]">
      <div class="">
        <img class="w-[210px] h-[35px] mt-[121px] mb-[45px]" src="@/assets/image/zu3310@2x.png" alt="">
      </div>
      <div class="bg-[url('@/assets/image/z3321@2x.png')] flex flex-col items-center w-[469px] h-[545px] bg-center bg-no-repeat bg-cover pt-[61px] pr-[78px] pl-[78px]">
        <div class="flex items-center">
          <div class="text-primary text-[14px] font-bold w-[66px]" >手机号</div>
          <div>
            <input  v-no-space v-model="telNum" class="pl-[16px] pr-[16px] w-[341px] h-[34px] focus:outline-none placeholder:text-primary placeholder:text-[14px] focus: bg-[#DCE5E9]   border-none" placeholder="请输入手机号" type="text">
          </div>
        </div>
        <div  class="flex items-center mt-[18px]">
          <div class="text-primary text-[14px] font-bold w-[66px]">验证码</div>
          <div class="flex items-center justify-between w-[341px]  grow-1">
            <input v-model="code" v-no-space class="pl-[16px] pr-[16px] w-[211px]  h-[34px] focus:outline-none placeholder:text-primary placeholder:text-[14px] focus: bg-[#DCE5E9]   border-none" placeholder="请输入验证码" type="text">
            <div class="w-[120px] h-[34px] bg-primary text-#fff flex items-center text-[14px] justify-center shrink-0 cursor-pointer" @click="clickSendCode">获取验证码</div>
          </div>
        </div>
        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-[240px] h-[39px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[16px] mt-[73px] cursor-pointer" @click="clickLogin">登录/注册</div>
      </div>
      <div class="mt-[116px]">
        <img class="w-[248px] h-[28px]" src="@/assets/image/zu733@2x.png" alt="">
      </div>
    </div>

  </div>
</template>
