fashion-ssr-vue3/components/common/login/comp/choice.vue

<script lang='ts' setup>
import useLogin from '../useLogin'

const { onSelectEmail } = useLogin()
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px">
      <span class="custom-title-bg03">Sign In</span> to EJET Spark
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      Use your Email or another service to continue with EJET Spark!
    </div>
    <div class="b-rd-200px bg-#fff text-#333 b-1px b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF flex justify-center items-center cursor-pointer mb-24px text-14px fw-500">
      <img src="@/assets/images/google_logo.png" alt="" class="w-24px h-24px mr-10px">
      Continue with Google
    </div>
    <div class="b-rd-200px bg-#fff b-1px text-#333 b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF flex justify-center items-center cursor-pointer text-14px fw-500" @click="onSelectEmail">
      <img src="@/assets/images/mail_logo.png" class="w-24px h-24px mr-10px" alt="">
      Continue with Email
    </div>

    <div class="mt-40px lh-22px text-14px text-#767676">
      By continuing, you agree to EJET Spark’s <span class="text-#1A1A1A underline cursor-pointer fw-500">Terms of Use⁠.</span> Read our
      <span class="text-#1A1A1A underline cursor-pointer fw-500">Privacy Policy⁠.</span>
    </div>
  </div>
</template>

<style lang='less' scoped>
</style>