<template>
  <ui-page-layout class="bg-white" :showLeft="false" title="登录">

    <div>
      <img class="w-full h-520rem " src="/imgs/h5-login-banner.png" />
    </div>
    <div class="h-58rem">

    </div>
    <div class="flex flex-col items-center  bg-white login overflow-hidden">

      <div class="w-400rem h-56rem rounded-full border-[#E7E7E7] border-1rem border-solid mb-60rem flex">
        <div @click="loginType = 'email'" :class="`custom-tab ${loginType === 'email' ? 'select' : ''}`">
          {{ $t("邮箱验证登录") }}
        </div>
        <div @click="loginType = 'account'" :class="`custom-tab ${loginType === 'account' ? 'select' : ''}`">
          {{ $t("账号密码登录") }}
        </div>
      </div>
      <div v-if="loginType === 'email'" class="flex flex-col items-center">
        <ui-input class="!h-98rem !w-600rem mb-60rem" :placeholder="$t('请输入邮箱号码')">
          <div slot="prefix" class="flex items-center h-full ml-20rem">
            <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
          </div>
        </ui-input>
        <ui-input class="!h-98rem !w-600rem mb-60rem " :placeholder="$t('请输入邮箱验证码')">
          <div slot="prefix" class="flex items-center h-full ml-20rem">
            <img src="/imgs/vcode_icon.png" class="w-40rem h-auto" />
          </div>

          <div slot="suffix" class="flex items-center h-full">
            <div
              class="bg-primary rounded-full text-white flex justify-center items-center h-70rem w-200rem !text-size-30rem !font-light !px-0"
              type="primary" round>{{
                  $t("获取验证码")
              }}</div>
          </div>
        </ui-input>
      </div>
      <div v-if="loginType === 'account'" class="flex flex-col items-end">
        <ui-input class="!h-98rem !w-600rem mb-60rem" :placeholder="$t('请输入账号')">
          <div slot="prefix" class="flex items-center h-full ml-20rem">
            <img slot="prefix" src="/imgs/email_icon.png" class="w-37rem h-auto" />
          </div>
        </ui-input>
        <ui-input class="!h-98rem !w-600rem mb-15rem" :placeholder="$t('请输入账号密码')">
          <div slot="prefix" class="flex items-center h-full ml-20rem">
            <img src="/imgs/password_icon.png" class="w-40rem h-auto" />
          </div>
          <div slot="suffix" class="flex items-center h-full mr-20rem">
            <!-- <img src="/imgs/eye_icon.png" class="w-30rem h-auto" /> -->
            <img src="/imgs/eye_close_icon.png" class="w-40rem h-auto cursor-pointer" />
          </div>
        </ui-input>
        <el-button @click="$router.push('/change-pass')" type="text" class="!font-normal !mb-27rem !p-0">
          {{ $t("忘记密码") }}
        </el-button>
      </div>

      <el-button @click="$router.push('/home')" class="h-88rem w-600rem !rounded-full !text-size-24rem !font-normal" type="primary" round>{{
          $t("登录")
      }}</el-button>
      <div @click="$router.push('/register')" class="mt-30rem">
        <span class="text-[#B8B8B8]">
          还没有账号， 点击
        </span><span class="text-primary">
          注册
        </span>
      </div>

    </div>
  </ui-page-layout>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      loginType: "email",
    };
  },
};
</script>

<style>
.login .el-input__inner {
  background: #f7f7f7;
  font-size: 30rem;
  padding-left: 100rem !important;
}

.login .tab-pane {
  @apply flex flex-col items-center pt-10rem;
}

.login .el-tabs__nav {
  @apply !w-full;
}

.login .first>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
  @apply text-size-24rem font-normal !w-1/2 text-center !rem-0;
}

.login .el-tabs .el-tabs__item.is-active {
  @apply !text-size-36rem font-normal;
}

.login .custom-tab {
  @apply flex-1 flex justify-center items-center bg-[#F7F7F7] text-size-30rem cursor-pointer;
}

.login .custom-tab.select {
  @apply bg-white text-primary;
}

.login .custom-tab:first-child {
  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-l-full;
}

.login .custom-tab:nth-child(2) {
  @apply border-r-1rem border-solid border-r-[#E7E7E7] rounded-r-full;
}
</style>
