<template>
  <div
    class="w-1200px ml-auto mr-auto mt-100px m-h-624px bg-white flex forget overflow-hidden mb-0"
  >
    <div class="w-700px h-full">
      <img src="/imgs/login-banner.png" class="w-full object-cover" />
    </div>

    <div class="flex-1 flex justify-center">
      <el-tabs v-model="activeName" class="w-410px mt-50px first">
        <el-tab-pane class="tab-pane" :label="$t('修改密码')" name="first">
          <div>
            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入邮箱号码')">
              <div slot="prefix" class="flex items-center h-full ml-20px">
                <img slot="prefix" src="/imgs/email_icon.png" class="w-30px h-auto" />
              </div>
            </ui-input>
            <ui-input class="h-60px !w-400px mb-24px" :placeholder="$t('请输入账号密码')">
              <div slot="prefix" class="flex items-center h-full ml-20px">
                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
              </div>
              <div slot="suffix" class="flex items-center h-full mr-20px">
                <img src="/imgs/eye_icon.png" class="w-30px h-auto" />
                <!-- <img src="/imgs/eye_close_icon.png" class="w-30px h-auto" /> -->
              </div>
            </ui-input>
            <ui-input
              class="h-60px !w-400px mb-24px"
              :placeholder="$t('请再次输入账号密码')"
            >
              <div slot="prefix" class="flex items-center h-full ml-20px">
                <img src="/imgs/password_icon.png" class="w-30px h-auto" />
              </div>
              <div slot="suffix" class="flex items-center h-full mr-20px">
                <img src="/imgs/eye_icon.png" class="w-30px h-auto" />
                <!-- <img src="/imgs/eye_close_icon.png" class="w-30px h-auto" /> -->
              </div>
            </ui-input>
            <ui-input
              class="h-60px !w-400px mb-24px"
              :placeholder="$t('请输入邮箱验证码')"
            >
              <div slot="prefix" class="flex items-center h-full ml-20px">
                <img src="/imgs/vcode_icon.png" class="w-30px h-auto" />
              </div>

              <div slot="suffix" class="flex items-center h-full">
                <el-button
                  class="h-40px w-120px !text-size-14px !font-normal !px-0"
                  type="primary"
                  round
                  >{{ $t("获取邮箱验证码") }}</el-button
                >
              </div>
            </ui-input>

            <div class="text-size-14px pl-30px mb-39px">
              按下【完成注册】，即表示您同意<span class="text-primary cursor-pointer"
                >用户注册协议</span
              >
            </div>
            <el-button
              class="h-60px w-400px !rounded-50px !text-size-24px !font-normal"
              type="primary"
              round
              disabled
              >{{ $t("完成注册") }}</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

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

<style>
.forget .el-input__inner {
  background: #f7f7f7;
  font-size: 16px;
  padding-left: 60px !important;
}
.forget .tab-pane {
  @apply flex flex-col items-center pt-10px;
}
.forget .el-tabs__nav {
  @apply !w-full;
}

.forget
  .first
  > .el-tabs__header
  > .el-tabs__nav-wrap
  > .el-tabs__nav-scroll
  > .el-tabs__nav
  > .el-tabs__item {
  @apply text-size-24px font-normal !w-full text-center !px-0;
}
.forget .el-tabs .el-tabs__item.is-active {
  @apply !text-size-36px font-normal;
}
.forget .el-tabs .el-tabs__active-bar {
  @apply !w-1/2 transform last:translate-x-1/2;
}
</style>
