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

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

const { onSelectEmail, onGoogleLoginSuccess } = useLogin()
const { closeLoginModal } = useLoginModal()
</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>
    <common-google-login class="mb-24px" @success="onGoogleLoginSuccess" />
    <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">
        <nuxt-link to="/terms-of-service" @click="closeLoginModal">Terms of Use</nuxt-link>
      </span> Read our
      <span class="text-#1A1A1A underline cursor-pointer fw-500">
        <nuxt-link to="/privacy-policy" @click="closeLoginModal">Privacy Policy</nuxt-link>
      </span>
    </div>
  </div>
</template>

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