<template>
    <div class="login_page">
        <div class="page_content">
            <img
                class="login_logo"
                src="@/assets/images/loginPage/aida_Logo_login.png"
            />
            <!-- 账号密码和邮箱登录  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',
                            ]"
                        >
                            Log on to AiDA 3.0
                        </div>
                    </div>
                    <!-- 账号密码登录 start -->
                    <!-- v-show="loginType == 'username'" -->
                    <div>
                        <div class="login_form_content" :state="emailStap">
                            <!-- <div class="login_form_title">Name</div>
                            <input
                                class="login_form_input"
                                placeholder="Enter your username"
                                v-model="username"
                            /> -->
							<div v-show="emailStap === 1">
								<div class="login_form_title marign_top30">
									Email
								</div>
								<input
									class="login_form_input"
									placeholder="Enter your email address"
									v-model="email"
									@keydown.enter="submitPerLogin()"
								/>
								<div class="login_form_title marign_top30">
									<div>Password</div>
								</div>
								<div class="password_input_block">
									<input
										class="login_form_input"
										:type="passwordType"
										placeholder="Enter your password"
										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 with 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">
                                                Sent to {{ email }}
                                            </div>
                                            <div class="tip_content">
                                                <span v-show="time"
                                                    >{{ time }}s</span
                                                >
                                                <span
                                                    v-show="!time"
                                                    @click="emailNextStepFun()"
                                                    >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"
                                            >
                                                Please check the junk box if you
                                                haven't received verification
                                                code
                                            </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
                                    >I agree to all Term, Privacy Policy and
                                    Fees</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>
							<!-- <phoneLogin></phoneLogin> -->
						</div>
                        <div
                            class="login_submit_button marign_top40"
                            :state="emailStap"
                            @click="submitPerLogin()"
                        >
                            Sign in
                        </div>

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

                <!-- 邮箱登录 end -->
                <div class="login_content_right mdhidden">
                    <img
                        src="@/assets/images/loginPage/aida_logo_centent.jpg"
                    />
                    <!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
                </div>
            </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>
                    <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>
                    <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">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 class="login_footer">
            <div class="login_footer_item">
                <div class="login_footer_item_text">
                    ©2025 Code-Create Limited
                </div>
            </div>
            <div class="login_footer_item">
                <div
                    class="login_footer_item_text footer_item_text_pointer"
                    @click="
                        turnToWindow(
                            'https://code-create.com.hk/aida-terms-and-conditions/'
                        )
                    "
                >
                    Terms&Conditions
                </div>
                <div class="login_footer_line"></div>
                <div
                    class="login_footer_item_text footer_item_text_pointer"
                    @click="
                        turnToWindow(
                            'https://code-create.com.hk/aida-subscription-agreement/'
                        )
                    "
                >
                    Privacy Policy
                </div>
            </div>
        </div> -->
		<div class="mark_loading" v-show="loadingShow">
			<a-spin size="large" />
		</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, 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";
const md5 = require("md5");
export default defineComponent({
    components: {
        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
    },
    setup() {
        let timer: any = 0;
        const { locale } = useI18n();
        const store = useStore();
		let loadingShow = ref(false)
        return {
            store,
            timer,
            locale,
			loadingShow,
        };
    },
    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,
        };
    },
	
    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("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();
            }
        },

        //忘记密码填写完邮箱验证码进行下一步
        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) {
                return;
            } else {
                if (!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;
                }
                let data = {
                    password: md5(this.password + "abc"),
                    userName: 'a',
                    // userName: this.username,
                    email: this.email,
                    operationType: "LOGIN",
                    ip: "",
                };
                // this.loginType = 'email'
                if (this.loginTime) {
                    this.loginTime = false;
                    Https.axiosPost(Https.httpUrls.preLogin, 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();
								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) {
            let data = {
                email: this.email,
                emailVerifyCode: emailVerifyCode,
                loginType: "EMAIL",
                userId: this.userId,
            };
            Https.axiosPost(Https.httpUrls.accountLogin, data)
                .then((rv: any) => {
					this.setSuccessLogin(rv)
                })
                .catch((res) => {});
        },
		isCheckAgreement(){
			message.info(
					"Agree to all terms, privacy fees and policies"
				);
		},
		//微信登录
		wechatLogin(value:any) {
			let data = {
				code : value.code,
				type:2
			}
			this.loadingShow = true
		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
                .then((rv: any) => {
					this.loadingShow = false
					this.setSuccessLogin(rv)
                })
                .catch((res) => {this.loadingShow = false});
		},
		//谷歌登录
		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(
						"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([]));
			}
		},
        //修改密码提交
        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() {
            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);
        //             }
        //         }
        //     );
        // },
    },
	mounted() {
		const data = this.$route.query
		if(data?.state == 'weiXin'){
			this.wechatLogin(data)
		}
	},
});
</script>
<style lang="less" scoped>
.login_page {
    width: 100%;
    height: 100%;
    .page_content {
        // position: relative;

        .login_logo {
            position: absolute;
            left: 4rem;
            top: 2.5rem;
            width: 11rem;
        }

        .login_content {
            position: relative;
			// width: 100%;
			// height: 100%;
			width: 70%;
            display: flex;
            justify-content: space-between;
            align-items: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
            @media (max-width: 768px) {
                width: 100%;
            }
            .login_content_left {
                width: 60%;
                // padding: 0 20rem;
				padding-right: 20rem;
                @media (max-width: 768px) {
                    width: 100%;
                }
                .login_form_email {
                    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_content_right {
				height: 100%;
                width: 50%;
                img {
                    width: 100%;
					height: 100%;
					object-fit: contain;
                }
            }
            .login_type_list {
                width: 100%;
                display: flex;

                .login_type_item {
                    text-align: center;
                    font-size: 3.6rem;
                    font-weight: bold;
                    color: #d7d7d7;
                    cursor: pointer;
                    height: 4rem;
                    line-height: 4rem;

                    &.login_active {
                        color: #030303;
                    }
                }
            }
            .login_form_title {
                font-size: 1.6rem;
                // color: #666666;
                font-weight: 900;
                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;
                        }
                    }
                }
            }

            .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: 1.7rem;
                        cursor: pointer;
                    }
                }

                .login_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;
					transition: all .3s;
					&:hover{
						border: 0.1rem solid #000;
					}
                    &::placeholder {
                        color: #a5b0c2;
                    }
                }
            }

            .email_last_step {
                // margin-top: 4rem;
                .email_last_step_bottom {
                    padding: 0 40px;
                }
                .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: 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 .3s;
				&: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: 60rem;
            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;
            }

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

    .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: 3rem;
    }
    .marign_top40 {
        margin-top: 4rem;
    }
	.thirdPartyLogin{
		display: flex;
		// justify-content: flex-start;
		> div{
			position: relative;
			margin-right: 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: #343579;
        cursor: pointer;
    }

    .email_last_step_des {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4rem;
        margin-bottom: 2rem;

        .sent_email_content {
            font-size: 1.8rem;
            font-weight: bold;
            color: #a5b0c2;
        }

        .email_tip_content {
            font-size: 1.4rem;
            color: #030303;
        }
    }
}
</style>