aida_front/src/component/mainPage/signUp/registerModel.vue

<template>
  <div ref="register"></div>
  <a-modal
    class="register generalModel"
    :get-container="() => $refs.register"
    v-model:visible="registerModel"
    :footer="null"
    :width="pageWidth"
	height="auto"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="registerModelMask"
    :keyboard="false"
    :destroyOnClose="true"
    :zIndex="1000"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <!-- <i class="fi fi-rr-cross-small"></i> -->
        <svg
          width="100%" height="100%"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
          <rect
            x="32.5063"
            y="12"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(45 32.5063 12)"
            fill="white"
          />
          <rect
            x="34.6274"
            y="32.5059"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(135 34.6274 32.5059)"
            fill="white"
          />
        </svg>
      </div>
    </div>
    <div class="login_page">
      <div class="page_content">
        <!-- 账号密码和邮箱登录  start-->
        <div class="login_content" v-if="isLogin === 1">
          <div class="login_content_left">
            <div class="login_type_list">
              <div
                :class="[
                  'login_type_item',
                  'username_login_item',
                  'login_active',
                ]"
              >
                {{ userI18n[selectUserI18n].title }}
              </div>
            </div>
            <!-- 账号密码登录 start -->
            <!-- v-show="loginType == 'username'" -->
            <div>
              <div class="login_form_content" :state="emailStap">
                <div class="login_form_title">{{ userI18n[selectUserI18n].Name }}</div>
                <input
                  class="login_form_input"
                  :placeholder="userI18n[selectUserI18n].inputName"
                  v-model="username"
                />

                <div class="login_form_title marign_top30">
                  <div>{{ userI18n[selectUserI18n].Password }}</div>
                  <!-- <div class="tip_content" @click="changeIsLogin(2)">
										Forgot password？
									</div> -->
                </div>
                <div class="password_input_block" v-show="emailStap !== 2">
                  <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">{{ userI18n[selectUserI18n].passwordLength }}</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">{{ userI18n[selectUserI18n].passwordSpecial }}</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">
                        {{ userI18n[selectUserI18n].passwordMaxLength }}
                      </div>
                    </div>
                  </div>
                  <input
                    class="login_form_input"
                    :class="{
                      active:
                        Object.values(passwordCondition).filter(
                          (value) => value === true
                        ).length < 3,
                    }"
                    :type="passwordType"
                    :placeholder="userI18n[selectUserI18n].inputPassword"
                    v-model="password"
                    @keydown.enter="submitPerLogin()"
                    @input="passwordInput"
                    @focus="() => (passwordConditionShow = true)"
                    @blur="() => (passwordConditionShow = false)"
                  />
                  <div
                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
                    @click="changePasswordType()"
                  ></div>
                </div>
                <span style="font-weight: 400; opacity: 0.7"  v-show="emailStap !== 2"
                  >{{ userI18n[selectUserI18n].inputPasswordTip }}</span
                >
                <div class="login_form_title marign_top30"  v-show="emailStap !== 2">{{ userI18n[selectUserI18n].Email }}</div>
                <input
                  class="login_form_input"
				   v-show="emailStap !== 2"
                  :placeholder="userI18n[selectUserI18n].inputEmail"
                  v-model="email"
                  @keydown.enter="submitPerLogin()"
                />

                <!-- 邮箱登录 start -->
                <div
                  class="login_form_email"
                  :class="{ active: emailStap === 2 }"
                >
                  <!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
                  <!-- <div v-show="emailStap === 1" class="forget_password_content">
								<div class="forget_password_content_block" @click="changeLoginType('username')">
									<span class="icon iconfont fi-br-arrow-left"></span
									><span class="forget_password_content_title"
										>Log on to AiDA</span
									>
								</div>
								<div class="login_form_content">
									<div class="login_form_title">Email</div>
									<input
										class="login_form_input"
										placeholder="Enter your email address"
										v-model="email"
										@keydown.enter="emailNextStepFun()"
									/>
								</div>
								<div
									class="login_submit_button marign_top40"
									@click="emailNextStepFun()"
								>
									Sign In
								</div>
							</div> -->

                  <div v-show="emailStap === 2" class="email_last_step">
                    <div class="email_last_step_block">
                      <span class="email_last_step_content"
                        >{{userI18n[selectUserI18n].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">
							{{userI18n[selectUserI18n].SentTo}} {{ email }}
                        </div>
                        <div class="tip_content">
                          <span v-show="time">{{ time }}s</span>
                          <span v-show="!time" @click="emailNextStepFun()"
                            >{{userI18n[selectUserI18n].Resend}}</span
                          >
                        </div>
                      </div>
                      <VerificationCodeInput
                        :ct="emailCode"
                        @sendCaptcha="submitEmailLogin($event)"
                      ></VerificationCodeInput>

                      <div class="email_last_step_des">
                        <div class="sent_email_content email_tip_content">
							{{userI18n[selectUserI18n].PleaseCheck}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="login_form_title marign_top30">
                <label :class="{ active: emailStap == 2 }">
                  <input :state="emailStap" type="checkbox" v-model="checked" />
                  <span>{{userI18n[selectUserI18n].articles}}</span>
                </label>
              </div>
              <div class="thirdPartyLogin marign_top30">
                <div class="label">
                  <div
                    class="mask"
                    v-show="!checked"
                    @click="isCheckAgreement"
                  ></div>
                  <googleLogin
                    @googelLogin="googelLogin"
                    :text="userI18n[selectUserI18n].google"
                  ></googleLogin>
                </div>
                <div class="label">
                  <div
                    class="mask"
                    v-show="!checked"
                    @click="isCheckAgreement"
                  ></div>
                  <weiXinLogin :text="userI18n[selectUserI18n].wechat"></weiXinLogin>
                </div>
                <!-- <phoneLogin></phoneLogin> -->
              </div>
              <div
                class="login_submit_button marign_top40"
                style="width: 100%"
                :state="emailStap"
                @click="submitPerLogin()"
              >
			  {{userI18n[selectUserI18n].Register}}
              </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()"
          >
            <!-- <span class="icon iconfont fi-br-arrow-left"></span
						> -->
            <!-- <i class="fi fi-br-arrow-left"></i> -->
			<i class="fi fi-br-angle-left"></i>
            <span class="forget_password_content_title">Retrieve password</span>
          </div>
          <div v-show="frogetPasswordStep === 1">
            <div class="forget_passored_form_content">
              <div class="forget_passored_form_title">Email</div>
              <input
                class="forget_passored_form_input"
                placeholder="Enter your email"
                v-model="forgetPasswordEmail"
                @keydown.enter="forgetPasswordNextStepFun()"
              />
            </div>
            <div
              class="forget_submit_button marign_top40"
              @click="forgetPasswordNextStepFun()"
            >
              Next step
            </div>
          </div>

          <div v-show="frogetPasswordStep === 2">
            <div class="forget_verif_code_des">Verification Code</div>
            <div class="email_last_step_des">
              <div class="sent_email_content">
                Sent to {{ forgetPasswordEmail }}
              </div>
              <div class="tip_content">
                <span v-show="time">{{ time }}s</span>
                <span v-show="!time" @click="forgetPasswordNextStepFun()"
                  >Resend</span
                >
              </div>
            </div>
          </div>

          <div v-show="frogetPasswordStep === 3">
            <div class="forget_passored_form_content">
              <div class="forget_passored_form_title">Password</div>
              <input
                class="forget_passored_form_input"
                placeholder="Enter a new password"
                v-model="newPassword"
                @keydown.enter="submitResetPassword()"
              />
            </div>
            <div
              class="forget_submit_button marign_top40"
              @click="submitResetPassword()"
            >
              Submit
            </div>
          </div>
        </div>
        <!-- 忘记密码 end -->
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } 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 { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
import md5 from "md5";
export default defineComponent({
  components: {
    VerificationCodeInput,
    googleLogin,
    weiXinLogin,
    phoneLogin,
  },
  setup() {
    let timer: any = 0;
    const { locale } = useI18n();
    const store = useStore();
    let register = reactive({
      registerModel: false,
      registerModelMask: true,
      pageWidth: "50%",
      passwordConditionShow: false,
	  userI18n: {
		en:{
			title:'Register for AiDA',
			Name:'Name',
			inputName:'Enter your username',
			Password:'Password',
			passwordLength:'At least 8 characters long',
			passwordSpecial:'Must contain special characters',
			passwordMaxLength:'Mix of uppercase, lowercase and numbers',
			inputPassword:'Enter your password',
			inputPasswordTip:'You must satisfy ALL password conditions to register.',
			Email:'Email',
			inputEmail:'Enter your email address',
			code:'Verify using a one-time verification code',
			SentTo:'Sent to',
			Resend:'Resend',
			PleaseCheck:"Please check the junk box if you haven't received verification code",
			articles:'I agree to the Terms, Privacy Policy, and Fees.',
			Register:'Register',
			google:'Register with Google',
			wechat:'Register with wechat',
		},
		cn:{
			title:'注册 AiDA',
			Name:'用户名',
			inputName:'请输入用户名',
			Password:'密码',
			passwordLength:'至少8个字符',
			passwordSpecial:'必须包含特殊符号',
			passwordMaxLength:'大小写字母与数字混合组合',
			inputPassword:'请输入密码',
			inputPasswordTip:'您必须满足所有密码设置条件才能完成注册',
			Email:'邮箱',
			inputEmail:'请输入邮箱',
			code:'使用一次性验证码进行验证',
			SentTo:'发送到',
			Resend:'重新发送',
			PleaseCheck:"如果没有收到验证码，请检查垃圾邮件",
			articles:'我同意相关条款、隐私政策以及费用规定。',
			Register:'注册',
			google:'使用谷歌进行注册',
			wechat:'使用微信进行注册',
		}
      },
	  selectUserI18n:'en',
      passwordCondition: {
        length: false,
        special: false,
        group: false,
      },
    });
    return {
      store,
      timer,
      ...toRefs(register),
      locale,
    };
  },
  data() {
    return {
      checked: false,
      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
      loginType: "username",
      emailStap: 1, // 邮箱登录步骤
      emailCode: ["", "", "", "", "", ""], //邮箱验证码
      emailNextStep: true,
      username: "",
      password: "",
      email: "", //邮箱登录邮箱
      frogetPasswordStep: 1, //忘记密码的步骤
      forgetPasswordEmail: "",
      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
      newPassword: "", //新密码
      isCheckRobot: false,
      time: 60, //60秒倒计时
      passwordType: "password",
      userId: "",
      loginTime: true,
    };
  },
  mounted() {
    const data = this.$route.query;
    if (data?.state == "weiXin") {
      this.wechatLogin(data);
    }
  },
  methods: {
    init(boolean: boolean) {
		if(boolean){
			this.selectUserI18n = 'cn'
		}else{
			this.selectUserI18n = 'en'
		}
      this.registerModel = true;
      this.emailLastStepFun();
    },
    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("The email format is incorrect");
        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("The email format is incorrect");
        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();
      }
    },

    //改变勾选是否是机器人
    checkRobot() {
      this.isCheckRobot = !this.isCheckRobot;
    },
    passwordInput() {
      this.isPassword(this.password);
    },
    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;
    },
    //提交账号密码预先登录
    submitPerLogin() {
      //输入账号密码
      if (this.emailStap >= 2) {
        return;
      } else {
        if (/aida/i.test(this.username)) {
          message.info(
            'The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.'
          );
          return;
        }
        if (!this.username || !this.password) {
          message.info("Please enter your account number or password");
          return;
        }
        //输入邮箱
        if (!this.email) {
          message.info("Please enter your email address");
          return;
        }
        //判断邮箱格式是否正确
        if (!isEmail(this.email)) {
          message.info("The email format is incorrect");
          return;
        }
        //判断是否同意隐私政策
        if (!this.checked) {
          message.info("Agree to all terms, privacy fees and policies");
          return;
        }
        if (this.isPassword(this.password) < 3) {
          message.info("You must satisfy ALL password conditions to register.");
          return;
        }

        let data = {
          userPassword: md5(this.password + "abc"),
          userName: this.username,
          userEmail: this.email,
          browserIdentifiers: "",
          country: "",
          createDate: "",
          credits: 0,
          id: 0,
          isBeginner: 0,
          isTrial: 0,
          language: "",
          systemUser: 0,
          updateDate: "",
          validEndTime: 0,
          validStartTime: 0,
        };
        // this.loginType = 'email'
        if (this.loginTime) {
          this.loginTime = false;
          Https.axiosPost(Https.httpUrls.designWorksRegister, data)
            .then((rv: any) => {
              // if (rv) {
              //     this.loginType = 'email'
              // }
              this.emailStap = 2;
              if (rv) {
                this.userId = rv.userId;
                this.loginType = "email";
                this.time = 60;
                this.emailCode = ["", "", "", "", "", ""];
                this.createTimer();
              }
            })
            .catch((res) => {
              this.emailStap = 1;
            });
          setTimeout(() => {
            this.loginTime = true;
          }, 2000);
        }
      }
    },
    isCheckAgreement() {
      message.info("Agree to all terms, privacy fees and policies");
    },
    changePasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    //微信登录
    wechatLogin(value: any) {
      let data = {
        code: value.code,
        type: 1,
      };
      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
        .then((rv: any) => {
          this.setSuccessLogin(rv);
        })
        .catch((res) => {});
    },
    //谷歌登录
    googelLogin(value: any) {
      let data = { credential: value, type: 1 };
      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("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(
            "If you need to design, please log in using an iPad or computer."
          );
          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([]));
      }
    },
    //邮箱登录提交
    submitEmailLogin(emailVerifyCode: any) {
      let affiliateRef = sessionStorage.getItem("affiliateRef");
      let data = {
        email: this.email,
        emailVerifyCode: emailVerifyCode,
        loginType: "EMAIL",
        userId: this.userId,
        userEmail: this.email,
        userName: this.username,
        userPassword: md5(this.password + "abc"),
        invitationCode: affiliateRef ? affiliateRef : "",
      };
      Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data)
        .then((rv: any) => {
          this.setSuccessLogin(rv);
        })
        .catch((res) => {});
    },

    //修改密码提交
    submitResetPassword() {
      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) {
          clearInterval(this.timer);
        }
      }, 1000);
    },

    //清除定时器
    clearTimer() {
      this.time = 60;
      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);
        }
      });
    },
    turnToWindow(url: any) {
      window.open(url);
    },
    cancelDsign() {
      this.registerModel = false;
    },
  },
});
</script>
<style lang="less" scoped>
:deep(.register) {
  @media (max-width: 768px) {
    // box-shadow: none;
    // height: 100%;
    margin: 0;
    max-width: 95%;
    &.generalModel {
      .ant-modal-content {
        // height: 100%;
      }
      .ant-modal-body {
			padding: 4.3rem 3rem;
        // height: 100%;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.login_page {
  width: 100%;
  height: 100%;
  .page_content {
    // position: relative;
    .login_content {
      // position: relative;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%,-50%);
      // width: 60rem;
      // width: 80%;
      background: #ffffff;
      // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
      padding: 2rem 6rem 2rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (max-width: 768px) {
        padding: 0;
      }
      .login_content_left {
        width: 100%;
        .login_form_email {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
          top: 0;
          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_type_list {
        width: 100%;
        display: flex;
		@media (max-width: 768px) {
			justify-content: center;
		}
        .login_type_item {
          text-align: center;
          font-size: 3.6rem;
          font-weight: bold;
          color: #d7d7d7;
          cursor: pointer;
          line-height: 4rem;
		  height: 4rem;
		  @media (max-width: 768px) {
				line-height: 2rem;
				font-size: 2.5rem;
				height: 2rem;
			}
          &.login_active {
            color: #030303;
          }
        }
      }
      .login_form_title {
        font-size: 1.8rem;
        // color: #666666;
        font-weight: 500;
        color: #000;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
		@media (max-width: 768px) {
			font-size: 1.3rem;
		}
		
        label {
          display: flex;
          span {
            font-size: 1.6rem;
            margin-left: 10px;
            font-weight: normal;
			@media (max-width: 768px) {
				font-size: 1.3rem;
			}
          }
          &.active {
            pointer-events: none;
            input {
              pointer-events: none;
            }
          }
        }
      }

      .login_form_content {
        margin-top: 4rem;
        position: relative;
		@media (max-width: 768px) {
			margin-top: 2.4rem;
			height: 20rem;
		}
        &[state="2"] {
          > * {
            opacity: 0;
          }
          .login_form_email {
            opacity: 1;
          }
        }
		> span{
			@media (max-width: 768px) {
				font-size: 1.2rem;
			}	
		}
        .password_input_block {
          position: relative;

          .password_show_icon {
            position: absolute;
            font-size: 2.4rem;
            right: 2rem;
            top: 3.3rem;
            cursor: pointer;
			@media (max-width: 768px) {
				right: 2rem;
				top: 1.4rem;
				font-size: 1.8rem;
			}	
          }
          > .conditionShow {
            bottom: 0;
            position: absolute;
            right: 0;
            left: auto;
            transform: translateY(-7rem);
            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;
                  // }
                }
              }
            }
          }
        }

        .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;
		  @media (max-width: 768px) {
				height: 3.8rem;
				margin-top: .7rem;
				border: 0.1rem solid #dfdfdf;
				border-radius: 2rem;
				padding-left: 1.6rem;
				line-height: 3.8rem;
				font-size: 1.2rem;
			}
          &:hover {
            border: 0.1rem solid #000;
          }
          &::placeholder {
            color: #a5b0c2;
          }
          &.active {
            border: 0.1rem solid red;
          }
        }
      }

      .email_last_step {
        // margin-top: 4rem;
        .email_last_step_bottom {
          padding: 0 40px;
			@media (max-width: 767px) {
				padding: 0 2rem;	
			}
        }
        .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;
			@media (max-width: 767px) {
				font-size: 1.2rem;
				margin-left: .5rem;
			}
          }
          .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: 5rem;
        background: #000;
        border-radius: 2.5rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;
		@media (max-width: 768px) {
			height: 3.8rem;
			font-size: 1.3rem;
			line-height: 3.8rem;
		}
        &:hover {
          background: #3c3c3c;
        }
        &[state="2"] {
          cursor: not-allowed;
        }
      }
      .login_text {
        font-size: 1.6rem;
        margin-top: 4rem;
        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;
      }

      .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;
      }
    }
  }

  .marign_top20 {
    margin-top: 2rem;
  }

  .marign_top22 {
    margin-top: 2.2rem;
  }

  .marign_top30 {
    margin-top: 2.7rem;
	@media (max-width: 768px) {
		margin-top: 1.5rem;
	}
  }
  .marign_top40 {
    margin-top: 4rem;
	@media (max-width: 768px) {
		margin-top: 2rem;
	}
  }
  .thirdPartyLogin {
    display: flex;
	@media (max-width: 768px) {
	// flex-direction: column;
	  }	
    > div {
      position: relative;
      margin-right: 1rem;
	  @media (max-width: 768px) {
		width: 100%;
		margin: 0;
		margin-bottom: 1rem;
	  }	
      > .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;
	@media (max-width: 767px) {
		font-size: 1rem;
	}
  }

  .email_last_step_des {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4rem;
    margin-bottom: 2rem;
	@media (max-width: 767px) {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}
    .sent_email_content {
      font-size: 1.8rem;
      font-weight: bold;
      color: #a5b0c2;
	  @media (max-width: 767px) {
		font-size: 1.2rem;
	  }
    }

    .email_tip_content {
      font-size: 1.4rem;
      color: #030303;
		@media (max-width: 767px) {
			font-size: 1.2rem;
		}
    }
  }
}
</style>