fashion-ssr-vue3/components/common/login/comp/email/google.vue

<script lang='ts' setup>
import type { FormInstance, FormRules } from 'element-plus'
import useLogin from '../../useLogin'

const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep } = useLogin()
const ruleFormRef = ref<FormInstance>()

const rules = ref<FormRules>({
  code: [
    { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
  ],
})
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px flex items-center">
      <img src="@/assets/images/login_back_arrow.png" alt="" class="w-16px h-16px mr-4px cursor-pointer" @click="backStep">
      Continue with Google
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      Your Google account is connected to this EJET Spark account. Sign in using the email
    </div>
    <div class="my-10px text-14px text-#9B6CFF mb-24px">
      {{ loginForm.mail }}
    </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>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
  &.error-txt{
    .el-input__wrapper{
      border: 1px solid red!important;
   }
  }
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>