<template>
  <div class="login_page">
    <div class="page_content">
      <!-- 账号密码和邮箱登录  start-->
      <div class="login_content" v-if="isLogin === 1">
        <div class="login_content_left">
          <!-- 账号密码登录 start -->
          <!-- v-show="loginType == 'username'" -->
          <div>
            <div class="login_form_content" :state="emailStap">
              <div v-show="emailStap === 1">
                <div class="login_form_title marign_top30">{{ t('LoginSchool.School') }}</div>
                <div class="generalModel_state">
                  <div
                    class="generalModel_state_item"
                    style="width: 100%; margin: 0"
                  >
                    <a-select
                      :placeholder="t('LoginSchool.SelectSchool')"
                      v-model:value="selectSchool"
                      :options="schoolList"
                      @change="schoolListChange"
                      style="width: 100%"
                      show-search
                      size="large"
                      :fieldNames="{ label: 'name', value: 'value' }"
                      :filter-option="filterOption"
                      @focus="handleFocus"
                    >
                      <template #suffixIcon
                        ><span
                          class="icon iconfont icon-xiala"
                          style="color: #000"
                        ></span
                      ></template>
                    </a-select>
                  </div>
                </div>
                <div class="login_form_title marign_top30">{{ t('LoginSchool.Email') }}</div>
                <input
                  class="login_form_input"
                  :placeholder="t('LoginSchool.EnterEmail')"
                  v-model="email"
                  @keydown.enter="submitPerLogin()"
                />
                <div class="login_form_title marign_top30">
                  <div>{{ t('LoginSchool.Password') }}</div>
                </div>
                <div class="password_input_block">
                  <input
                    class="login_form_input"
                    :type="passwordType"
                    :placeholder="t('LoginSchool.EnterPassword')"
                    v-model="password"
                    @keydown.enter="submitPerLogin()"
                  />
                  <div
                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
                    @click="changePasswordType()"
                  ></div>
                </div>
              </div>

              <!-- 邮箱登录 start -->
              <div
                v-show="emailStap === 2"
                class="login_form_email"
                :class="{ active: emailStap === 2 }"
              >
                <div v-show="emailStap === 2" class="email_last_step">
                  <!-- <div class="email_last_step_block">
                    <span class="email_last_step_content"
                      >Verify using a one-time verification code</span
                    >
                    <i
                      class="fi fi-br-cross email_last_step_block_icon"
                      @click="emailLastStepFun()"
                    ></i>
                  </div> -->
                  <div class="email_last_step_bottom">
                    <div class="email_last_step_des">
                      <div class="sent_email_content">{{ t('LoginSchool.EnterCode') }}</div>
                      <div class="tip_content">
                        <span v-show="time">{{ time }}s</span>
                        <span v-show="!time" @click="emailNextStepFun()"
                          >{{ t('LoginSchool.Resend') }}</span
                        >
                      </div>
                    </div>
					<div class="codeEmail">{{ t('LoginSchool.SentCodeToEmail') }} <span>{{ email }}</span></div>
					<div class="codeEmailInput">
						<VerificationCodeInput
						ref="verificationCodeInputDom"
						:ct="emailCode"
						@sendCaptcha="submitEmailLogin($event)"
						></VerificationCodeInput>
					</div>
                  </div>
                </div>
              </div>
            </div>
			<div class="login_text" v-show="emailStap !== 2">
				<div class="forget_password_text" @click="changeIsLogin(2)">
				{{ t('LoginSchool.ForgotPassword') }}
				</div>
			</div>
            <div class="login_form_title marign_top30">
              <label :class="{ active: emailStap == 2 }">
                <input :state="emailStap" type="checkbox" v-model="checked" />
				<span>
					{{ t('LoginSchool.AgreeTo') }} 
					<a href="https://code-create.com.hk/aida-terms-and-conditions/" style="text-decoration: underline;color: #000;">{{ t('LoginSchool.Terms') }}</a>, 
					<a href="https://aida.com.hk/privacy-policy.html" target="_blank" style="text-decoration: underline;color: #000;">{{ t('LoginSchool.PrivacyPolicy') }}</a>, 
					{{ t('LoginSchool.AndFees') }}
				</span>
              </label>
            </div>
            <!-- <div class="thirdPartyLogin marign_top30">
							<div class="label">
								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
								<googleLogin @googelLogin="googelLogin"></googleLogin>
							</div>
							<div class="label">
								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
								<weiXinLogin></weiXinLogin>
							</div>
						</div> -->
            <div
			class="login_submit_button"
              :state="emailStap"
			  :class="{'active':animation}"
              @click="submitPerLogin()"
			  @mousedown="loginBtnMousedown"
            >
              {{ t('LoginSchool.SignIn') }}
            </div>

            <!-- <div class="login_text">
                            <div
                                class="forget_password_text"
                                @click="changeIsLogin(2)"
                            >
                                Forgot your password
                            </div>
                        </div> -->
          </div>
          <!-- 账号密码登录 end -->
        </div>

        <!-- 邮箱登录 end -->
      </div>

      <!-- 忘记密码 start -->
      <div class="forget_password_content" v-else>
        <div
          class="forget_password_content_block"
          @click="forgetPasswordLastStepFun()"
        >
          <!-- <i class="fi fi-br-arrow-left"></i> -->
			<i class="fi fi-br-angle-left"></i>
          <span class="forget_password_content_title">{{ t('LoginSchool.RetrievePassword') }}</span>
        </div>
        <div v-show="frogetPasswordStep === 1">
          <div class="forget_passored_form_content">
            <div class="forget_passored_form_title">{{ t('LoginSchool.Email') }}</div>
            <input
              class="forget_passored_form_input"
              :placeholder="t('LoginSchool.EnterEmail')"
              v-model="forgetPasswordEmail"
              @keydown.enter="forgetPasswordNextStepFun()"
            />
          </div>
          <div
            class="forget_submit_button marign_top40"
            @click="forgetPasswordNextStepFun()"
          >
            {{ t('LoginSchool.NextStep') }}
          </div>
        </div>

        <div v-show="frogetPasswordStep === 2">
          <div class="forget_verif_code_des">{{ t('LoginSchool.VerificationCode') }}</div>
          <div class="email_last_step_des">
            <div class="sent_email_content">
              {{ t('LoginSchool.SentTo') }} {{ forgetPasswordEmail }}
            </div>
            <div class="tip_content">
              <span v-show="time">{{ time }}s</span>
              <span v-show="!time" @click="forgetPasswordNextStepFun()"
                >{{ t('LoginSchool.Resend') }}</span
              >
            </div>
          </div>
          <VerificationCodeInput
            :ct="emailCode"
            @sendCaptcha="submitPasswordCode($event)"
          ></VerificationCodeInput>
        </div>

        <div v-show="frogetPasswordStep === 3">
          <div class="forget_passored_form_content">
            <div class="forget_passored_form_title">{{ t('LoginSchool.Password') }}</div>
			<div v-show="passwordConditionShow" class="conditionShow">
				<div class="item">
					<div class="icon">
					<i
						v-show="!passwordCondition.length"
						class="fi fi-br-cross-small"
					></i>
					<i
						v-show="passwordCondition.length"
						class="fi fi-br-check"
					></i>
					</div>
					<div class="text">{{ t('LoginSchool.AtLeast8Chars') }}</div>
				</div>
				<div class="item">
					<div class="icon">
					<i
						v-show="!passwordCondition.special"
						class="fi fi-br-cross-small"
					></i>
					<i
						v-show="passwordCondition.special"
						class="fi fi-br-check"
					></i>
					</div>
					<div class="text">{{ t('LoginSchool.MustContainSpecial') }}</div>
				</div>
				<div class="item">
					<div class="icon">
					<i
						v-show="!passwordCondition.group"
						class="fi fi-br-cross-small"
					></i>
					<i
						v-show="passwordCondition.group"
						class="fi fi-br-check"
					></i>
					</div>
					<div class="text">
					{{ t('LoginSchool.MixUpperLowerNumbers') }}
					</div>
				</div>
			</div>
            <input
              class="forget_passored_form_input"
              :placeholder="t('LoginSchool.EnterNewPassword')"
              v-model="newPassword"
			  @focus="() => (passwordConditionShow = true)"
			@blur="() => (passwordConditionShow = false)"
				@input="passwordInput"
              @keydown.enter="submitResetPassword()"
            />
          </div>
          <div
            class="forget_submit_button marign_top40"
            @click="submitResetPassword()"
          >
            {{ t('LoginSchool.Submit') }}
          </div>
        </div>
      </div>
      <!-- 忘记密码 end -->
    </div>
    <div class="mark_loading" v-show="loadingShow">
      <a-spin size="large" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs, inject } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie, WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import googleLogin from "@/component/LoginPage/googleLogin.vue";
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
import { useStore } from "vuex";
import { setLang } from "@/tool/guide";
import md5 from "md5";
export default defineComponent({
  components: {
    VerificationCodeInput,
    googleLogin,
    weiXinLogin,
    phoneLogin,
  },
  setup() {
    let timer: any = 0;
    // 从父组件注入 i18n
    const i18n = inject('i18n') as { t: any, locale: any };
    const store = useStore();
    let loadingShow = ref(false);
    const data = reactive({
      selectSchool: "",
      schoolList: [] as any,
    });
    const schoolListChange = (e: any) => {};
    const filterOption = (e: any,option: any) => {
		return option.value.toLowerCase().indexOf(e.toLowerCase()) >= 0;
      
    };
	const getSchoolList = ()=>{
		let params = {
			name: '',
			type: "School",
		};
		Https.axiosPost(
			Https.httpUrls.organizationNameSearch,
			{},
			{ params: params }
		).then((rv: any) => {
			data.schoolList = rv.map((item: any) => {
			return {
				label: item,
				value: item,
			};
			});
		});
	}
    const handleFocus = () => {
      if (data.schoolList.length == 0) {
        getSchoolList();
      }
    };
    return {
      ...toRefs(data),
      store,
      timer,
      locale: i18n?.locale,
      t: i18n?.t,
      loadingShow,
      schoolListChange,
      filterOption,
      handleFocus,
    };
  },
  data() {
    return {
      checked: false,
      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
      loginType: "username",
      emailStap: 1, // 邮箱登录步骤
      emailCode: ["", "", "", "", "", ""], //邮箱验证码
      emailNextStep: true,
      username: "",
      password: localStorage.getItem("loginPassword") || "",
      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
      frogetPasswordStep: 1, //忘记密码的步骤
      forgetPasswordEmail: "",
      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
      newPassword: "", //新密码
      isCheckRobot: false,
      time: 60, //60秒倒计时
      passwordType: "password",
      userId: "",
      loginTime: true,
	  animation: false,
	  inputCodeTime: null as any,
	  passwordConditionShow:false,
	  passwordCondition: {
        length: false,
        special: false,
        group: false,
      },
    };
  },
  onBeforeUnmount() {
    this.clearTimer();
  },
  methods: {
    changeLoginType(type: string) {
      this.loginType = type;
    },

    //是否忘记密码页面
    changeIsLogin(isLogin: number) {
      if (isLogin === 1) {
        //登录
        this.forgetPasswordEmail = "";
        this.frogetPasswordStep = 1;
        this.forgetEmailCode = ["", "", "", "", "", ""];
        this.emailStap = 1;
        this.clearTimer();
      } else {
        this.username = "";
        this.password = "";
      }
      this.isLogin = isLogin;
    },

    //邮箱登录的下一步
    emailNextStepFun() {
      if (!isEmail(this.email)) {
        message.info(this.t('LoginSchool.IncorrectEmailFormat'));
        return;
      }
      let data = {
        email: this.email,
        operationType: "LOGIN",
      };
      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
        if (rv) {
          this.emailStap = 2;
          this.time = 60;
          this.emailCode = ["", "", "", "", "", ""];
          this.createTimer();
        }
      });
    },

    //邮箱登录的上一步
    emailLastStepFun() {
      this.emailStap = 1;
    //   (this.username = ""), (this.password = ""), (this.email = "");
      (this.checked = false),
        (this.loginType = "username"),
        (this.emailCode = ["", "", "", "", "", ""]),
        this.clearTimer();
    },

    //忘记密码的下一步
    forgetPasswordNextStepFun() {
      if (!isEmail(this.forgetPasswordEmail)) {
        message.info(this.t('LoginSchool.IncorrectEmail'));
        return;
      }
      let data = {
        email: this.forgetPasswordEmail,
        operationType: "FORGET_PWD",
      };
      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
        if (rv) {
          this.frogetPasswordStep = 2;
          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
        }
      });
    },
    //忘记密码的上一步
    forgetPasswordLastStepFun() {
      if (this.frogetPasswordStep === 1) {
        this.changeIsLogin(1);
      } else {
        this.frogetPasswordStep = this.frogetPasswordStep - 1;
        this.forgetPasswordEmail = "";
        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
      }
    },

    //忘记密码填写完邮箱验证码进行下一步
    submitPasswordCode(emailVerifyCode: any) {
      // console.log(123123);
      let data = {
        email: this.forgetPasswordEmail,
        emailVerifyCode: emailVerifyCode,
        password: "",
        verifyEmail: true,
      };
      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
        if (rv) {
          this.forgetEmailValue = emailVerifyCode;
          this.frogetPasswordStep = 3;
          this.clearTimer();
        }
      });
    },

    //改变勾选是否是机器人
    checkRobot() {
      this.isCheckRobot = !this.isCheckRobot;
    },

    //提交账号密码预先登录
    submitPerLogin() {
      //输入账号密码
      if (this.emailStap >= 2) {
        let verificationCodeInputDom:any = this.$refs.verificationCodeInputDom
		let code =  verificationCodeInputDom.getCtData.map(item => item).join('');
		console.log(code)
		if(code.length !== this.emailCode.length){
			message.info(this.t('LoginSchool.CompleteVerificationCode'));
		}else{
			this.submitEmailLogin(code)
		}

		//提交验证码
        return;
      } else {
        if (!this.password) {
          message.info(this.t('LoginSchool.PleaseEnterYourAccountNumberOrPassword'));
          return;
        }
        //输入邮箱
        if (!this.email) {
          message.info(this.t('LoginSchool.NeedEmail'));
          return;
        }
        if (!this.selectSchool) {
          message.info(this.t('LoginSchool.SelectSchool'));
          return;
        }
        //判断邮箱格式是否正确
        if (!isEmail(this.email)) {
          message.info(this.t('LoginSchool.IncorrectEmailFormat'));
          return;
        }
        //判断是否同意隐私政策
        if (!this.checked) {
          message.info(this.t('Login.AgreePolicies'));
          return;
        }
        let data = {
          password: md5(this.password + "abc"),
          userName: "a",
          // userName: this.username,
          organizationName: this.selectSchool,
          email: this.email,
          operationType: "LOGIN",
          ip: "",
        };

        if (this.loginTime) {
          this.loginTime = false;
          Https.axiosPost(Https.httpUrls.schoolLogin, data)
            .then((rv: any) => {
              if (rv) {
                this.clearTimer();
                this.time = 60;
                this.emailStap = 2;
                this.emailCode = ["", "", "", "", "", ""];
                this.createTimer();
                this.userId = rv.userId;
                this.loginType = "email";
                localStorage.setItem("loginEmail", this.email);
                localStorage.setItem("loginPassword", this.password);
              }
            })
            .catch((res) => {
              this.emailStap = 1;
            });
          setTimeout(() => {
            this.loginTime = true;
          }, 2000);
        }
      }
    },

    changePasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },

    //邮箱登录提交
    submitEmailLogin(emailVerifyCode: any) {
		clearTimeout(this.inputCodeTime)
		this.inputCodeTime = setTimeout(()=>{
			let data = {
				email: this.email,
				emailVerifyCode: emailVerifyCode,
				loginType: "EMAIL",
				userId: this.userId,
				organizationName: this.selectSchool,
			};
			this.$emit('update:isMask',true)
			Https.axiosPost(Https.httpUrls.accountLogin, data)
				.then((rv: any) => {
				this.setSuccessLogin(rv);
				})
				.catch((res) => {
					this.$emit('update:isMask',false)
				});
		},1000)
    },
    isCheckAgreement() {
      message.info(this.t('Login.AgreePolicies'));
    },
    //谷歌登录
    googelLogin(value: any) {
      let data = { credential: value, type: 2 };
      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
        .then((rv: any) => {
          this.setSuccessLogin(rv);
        })
        .catch((res) => {});
    },
    //登陆成功设置参数
    setSuccessLogin(rv: any) {
      if (rv) {
        if (rv.systemUser == 4) {
          rv.systemUser = 1;
        }
        this.createTimer();
        let isTest = rv.systemUser == 3 ? true : false;
        let isBeginner = rv?.isBeginner == 1 ? true : false;
        let token = rv.token;
        setCookie("isMurmur", false);
        setCookie("token", token);
        setCookie("isTest", isTest);
        setCookie("isBeginner", isBeginner);
        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
        setCookie("userInfo", JSON.stringify(rv));
        let userid: any = {
          ueserId: rv.userId,
          systemUser: rv.systemUser,
        };
        if (rv.email) userid.email = rv.email;
        this.store.commit("upUserDetail", userid);

        if (window.innerWidth < 768) {
          message.info(
            this.t('Login.Device')
          );
          this.turnToHomePage("/Square");
        } else {
          this.turnToHomePage("/home");
        }
        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
        let randomNum: any =
          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
        sessionStorage.setItem("sessionId", randomNum);
        sessionStorage.setItem("record", JSON.stringify([]));
      }
    },
	passwordInput(e) {
      this.isPassword(this.newPassword);
    },
	isPassword(password: any) {
      this.passwordCondition.length = /.{8,}/.test(password);
      this.passwordCondition.special =
        /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
      this.passwordCondition.group =
        /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password);
      return Object.values(this.passwordCondition).filter(
        (value) => value === true
      ).length;
    },
    //修改密码提交
    submitResetPassword() {
		if (this.isPassword(this.newPassword) < 3) {
          message.info(this.t('Login.PasswordConditions'));
          return;
        }
      let data = {
        email: this.forgetPasswordEmail,
        emailVerifyCode: this.forgetEmailValue,
        password: md5(this.newPassword + "abc"),
        verifyEmail: false,
      };
      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
        if (rv) {
          message.success("Changing the password successfully");
          this.changeIsLogin(1);
        }
      });
    },

   //创建定时器
    createTimer() {
      clearInterval(this.timer);
	  this.time = 60;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) this.clearTimer(0);
      }, 1000);
    },

    //清除定时器
    clearTimer(time?: number) {
      this.time = time == undefined ? 60 : time;
      if (this.timer) clearInterval(this.timer);
    },

    //跳转到首页
    turnToHomePage(str: any) {
      // this.getLang();
      // this.$router.push("/home");
      // console.log(window.location.search.substring(1));
      this.store.commit("clearAllData");
      this.store.commit("clearAllCollection");
      this.store.commit("setAllBoardDataChoose", {});
      this.store.commit("clearShowSketchboard", {});
      this.$router.push(str);
    },
    //获取当前语言
    // getLang() {
    //     let data = {};
    //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
    //         (rv: any) => {
    //             if (rv) {
    //                 this.locale = rv;
    //                 setLang(rv);
    //             }
    //         }
    //     );
    // },
	loginBtnMousedown(){
		this.animation = true
		let mouseup = ()=>{
			this.animation = false
			document.removeEventListener('mouseup',mouseup)
		}
		document.addEventListener('mouseup',mouseup)
	},
  },
  mounted() {
  },
});
</script>
<style lang="less" scoped>
.login_page {
  width: 100%;
  height: 100%;
   .conditionShow {
		bottom: 0;
		position: absolute;
		right: 0;
		left: auto;
		transform: translateY(-5rem);
		background: #404040;
		color: #fff;
		font-size: 1.4rem;
		padding: 2rem;
		border-radius: 2rem;
		z-index: 2;
		> .item {
			display: flex;
			align-items: center;
			margin-bottom: 0.5rem;
			&:last-child {
			margin-bottom: 0;
			}
			> .icon {
			margin-right: 1rem;
			i {
				display: flex;
				// &.fi-br-cross-small{
				// 	color: red;
				// }
			}
			}
		}
	}
  .page_content {
    .login_content {
      margin: 0 auto;
      position: relative;
      width: 100%;
      // height: 100%;
      // width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (max-width: 768px) {
        width: 100%;
      }
      .login_content_left {
        width: 100%;
        @media (max-width: 768px) {
          width: 100%;
        }
		.login_form_email {
          margin-top: 3rem;
          position: relative;
          width: 100%;
          height: 100%;
          background: #fff;
          transform: scale(0);
          transition: 0.3s all;
        //   border: 2px solid;
          border-radius: 20px;
          .email_last_step {
            width: 100%;
            height: 100%;
            #app {
              height: auto;
            }
          }
        }
        .active {
          transform: scale(1);
        }
      }
      .login_form_title {
        font-size: 1.8rem;
        // color: #666666;
        font-weight: 500;
        color: #000;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        label {
          display: flex;
          span {
            font-size: 1.6rem;
            margin-left: 10px;
            font-weight: normal;
          }
          &.active {
            pointer-events: none;
            input {
              pointer-events: none;
            }
          }
        }
      }
      .generalModel_state {
        > .generalModel_state_item {
          :deep(.ant-select-selector) {
            border: 0.1rem solid #000;
			background: transparent;
			border-radius: 2.5rem;
            height: 5rem !important;
            width: 100%;
            box-sizing: border-box;
            &:hover {
              border: 0.1rem solid #000;
            }
          }
        }
      }
      .login_form_content {
        margin-top: 4rem;
        position: relative;

        &[state="2"] {
          > * {
            opacity: 0;
          }
          .login_form_email {
            opacity: 1;
          }
        }
        .password_input_block {
          position: relative;

          .password_show_icon {
            position: absolute;
            font-size: 2.4rem;
            right: 2rem;
            top: 3.3rem;
            cursor: pointer;
          }
        }

        .login_form_input {
			width: 100%;
			height: 6.75rem;
			margin-top: 2rem;
			border: 0.1rem solid #dfdfdf;
			border-radius: 4.2rem;
			padding-left: 2.1rem;
			line-height: 5rem;
			font-size: 1.6rem;
			box-sizing: border-box;
			outline: none;
			transition: all .3s;
          &:hover {
            border: 0.1rem solid #000;
          }
          &::placeholder {
            color: #a5b0c2;
          }
        }
      }

      .email_last_step {
        // margin-top: 4rem;
       
        .email_last_step_block {
          padding: 10px;
        //   border-bottom: 2px solid;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .email_last_step_content {
            margin-left: 1rem;
            font-size: 2.2rem;
            font-weight: bold;
            color: #030303;
          }
          .email_last_step_block_icon {
            cursor: pointer;
            margin-right: 1rem;
            height: 20px;
          }
        }

        .fi-br-arrow-left {
          font-size: 2.5rem;
          font-weight: bold;
          color: #030303;
          transform: translateY(1rem);
          display: inline-block;
        }
      }

      .login_submit_button {
        height: 6.3rem;
        background: #000;
        border-radius: 4rem;
        line-height: 6.3rem;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;
		margin-top: 5rem;
		font-weight: 600;
		&.active{
			transform: scale(.9);
		}
        &:hover {
          background: #3c3c3c;
        }
      }
	  .NewAccount{
		font-size: 1.6rem;
		text-decoration: underline;
		font-weight: 500;
		margin-top: 1.2rem;
		text-align: left;
		cursor: pointer;
		width: min-content;
		white-space: nowrap;
	  }
	  .segmentation{
		margin-top: 4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> .wire{
			width: 30rem;
			height: 0.1rem;
			background: #dfdfdf;
		}
		> .text{
			font-weight: 400;
			font-size: 1.6rem;
			color: #999999;
		}

	  }
      .login_text {
        font-size: 1.6rem;
        margin-top: 1.2rem;
		font-weight: 500;
		text-decoration: underline;
        color: #151515;
        display: flex;
        justify-content: flex-end;

        .forget_password_text {
          cursor: pointer;
        }
      }
    }

    .forget_password_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 77rem;
      background: #ffffff;
      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
      border-radius: 1rem;
      padding: 3rem 6rem 6.5rem;
      box-sizing: border-box;

      .forget_password_content_block {
        cursor: pointer;
		font-size: 3.6rem;
		  font-weight: 500;
          display: flex;
          align-items: center;
		  margin-bottom: 1.2rem;
          > i {
            margin-right: 2.8rem;
            font-size: 2rem;
            display: flex;
            cursor: pointer;
            align-items: center;
			width: 4.6rem;
			height: 4.6rem;
			border-radius: 1.2rem;
			display: flex;
			justify-content: center;
			border: 1px solid #D8DADC;
          }
      }

      .fi-br-arrow-left {
        font-size: 3.8rem;
        font-weight: bold;
        color: #030303;
        transform: translateY(1rem);
        display: inline-block;
      }
      .forget_password_content_title {
        font-size: 3.2rem;
        font-weight: bold;
        color: #030303;
        margin-left: 2rem;
      }

      .forget_passored_form_content {
        margin-top: 3.5rem;

        .forget_passored_form_title {
          font-size: 2.4rem;
          font-weight: bold;
          color: #030303;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
        }

        .forget_passored_form_input {
          width: 100%;
          height: 5rem;
          margin-top: 1rem;
          border: 0.1rem solid #dfdfdf;
          border-radius: 2.5rem;
          padding-left: 2.1rem;
          line-height: 5rem;
          font-size: 1.4rem;
          box-sizing: border-box;
          outline: none;

          &::placeholder {
            color: #a5b0c2;
          }
        }
      }

      .forget_verif_code_des {
        font-size: 2.4rem;
        font-weight: bold;
        color: #030303;
        margin-top: 3.5rem;
		text-align: left;
      }

      .forget_submit_button {
        height: 5rem;
        background: #000;
        border-radius: 2.5rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }

  .login_footer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    bottom: 3.5rem;
    width: 100%;
    padding: 0 4rem;

    .login_footer_item {
      display: flex;
      align-items: center;

      .login_footer_item_text {
        font-size: 1.3rem;
        color: #151515;
      }

      .footer_item_text_pointer {
        cursor: pointer;
      }

      .login_footer_line {
        width: 0.1rem;
        height: 2rem;
        margin: 0 2rem;
        background: #b9b9b9;
      }
    }
  }

  .marign_top20 {
    margin-top: 2rem;
  }

  .marign_top22 {
    margin-top: 2.2rem;
  }

  .marign_top30 {
    margin-top: 2.7rem;
  }
  .marign_top40 {
    margin-top: 4rem;
  }
  .thirdPartyLogin {
    display: flex;
    // justify-content: flex-start;
    > div {
      position: relative;
      margin-right: 1rem;
	  width: 50%;
	  &:last-child{
		margin: 0;
	  }
      > .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
        cursor: pointer;
      }
    }
  }
  .tip_content {
    font-size: 1.3rem;
    font-weight: bold;
    color: #000;
    cursor: pointer;
  }
  .codeEmail{
	font-weight: 400;
	font-size: 2rem;
	color: #a5b0c2;
	text-align: left;
	span{
		font-family: 'pingfang_regular';
		font-size: 2rem;
	}
  }
  .codeEmailInput{
	margin: 4.8rem auto;
	width: 61rem;
	padding: 1.2rem;
  }
  .email_last_step_des {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.4rem;
    margin-bottom: 1.4rem;

    .sent_email_content {
      font-size: 3.8rem;
      font-weight: 500;
    }
  }
}
</style>
