1143 lines
31 KiB
Vue
1143 lines
31 KiB
Vue
<template>
|
|
<div class="login_page">
|
|
<div class="page_content">
|
|
<!-- 账号密码和邮箱登录 start-->
|
|
<div class="login_content" v-if="isLogin === 1">
|
|
<div class="login_content_left">
|
|
<!-- 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">{{ t('LoginPersonal.Email') }}</div>
|
|
<input
|
|
class="login_form_input"
|
|
:placeholder="t('LoginPersonal.EnterEmail')"
|
|
v-model="email"
|
|
@keydown.enter="submitPerLogin()"
|
|
/>
|
|
<div class="login_form_title marign_top30">
|
|
<div>{{ t('LoginPersonal.Password') }}</div>
|
|
</div>
|
|
<div class="password_input_block">
|
|
<input
|
|
class="login_form_input"
|
|
:type="passwordType"
|
|
:placeholder="t('LoginPersonal.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('LoginPersonal.EnterCode') }}</div>
|
|
<div class="tip_content">
|
|
<span v-show="time">{{ time }}s</span>
|
|
<span v-show="!time" @click="emailNextStepFun()"
|
|
>{{ t('LoginPersonal.Resend') }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="codeEmail">{{ t('LoginPersonal.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('LoginPersonal.ForgotPassword') }}
|
|
</div>
|
|
</div>
|
|
<div class="login_form_title marign_top40">
|
|
<label :class="{ active: emailStap == 2 }">
|
|
<input :state="emailStap" type="checkbox" v-model="checked" />
|
|
<span>
|
|
{{ t('LoginPersonal.AgreeTo') }}
|
|
<a href="https://code-create.com.hk/aida-terms-and-conditions/" style="text-decoration: underline;color: #000;">{{ t('LoginPersonal.Terms') }}</a>,
|
|
<a href="https://aida.com.hk/privacy-policy.html" target="_blank" style="text-decoration: underline;color: #000;">{{ t('LoginPersonal.PrivacyPolicy') }}</a>,
|
|
{{ t('LoginPersonal.AndFees') }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div
|
|
class="login_submit_button"
|
|
:state="emailStap"
|
|
:class="{'active':animation}"
|
|
@click="submitPerLogin()"
|
|
@mousedown="loginBtnMousedown"
|
|
>
|
|
{{ t('LoginPersonal.SignIn') }}
|
|
</div>
|
|
<div class="NewAccount" @click="newAccount()">{{ t('LoginPersonal.CreateNewAccount') }}</div>
|
|
<div class="segmentation">
|
|
<div class="wire"></div>
|
|
<div class="text">{{ t('LoginPersonal.Or') }}</div>
|
|
<div class="wire"></div>
|
|
</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>
|
|
<!-- 账号密码登录 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">{{ t('LoginPersonal.RetrievePassword') }}</span>
|
|
</div>
|
|
<div v-show="frogetPasswordStep === 1">
|
|
<div class="forget_passored_form_content">
|
|
<div class="forget_passored_form_title">{{ t('LoginPersonal.Email') }}</div>
|
|
<input
|
|
class="forget_passored_form_input"
|
|
:placeholder="t('LoginPersonal.EnterEmail')"
|
|
v-model="forgetPasswordEmail"
|
|
@keydown.enter="forgetPasswordNextStepFun()"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="forget_submit_button marign_top40"
|
|
@click="forgetPasswordNextStepFun()"
|
|
>
|
|
{{ t('LoginPersonal.NextStep') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="frogetPasswordStep === 2">
|
|
<div class="forget_verif_code_des">{{ t('LoginPersonal.VerificationCode') }}</div>
|
|
<div class="email_last_step_des">
|
|
<div class="sent_email_content">
|
|
{{ t('LoginPersonal.SentTo') }} {{ forgetPasswordEmail }}
|
|
</div>
|
|
<div class="tip_content">
|
|
<span v-show="time">{{ time }}s</span>
|
|
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
|
>{{ t('LoginPersonal.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('LoginPersonal.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('LoginPersonal.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('LoginPersonal.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('LoginPersonal.MixUpperLowerNumbers') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input
|
|
class="forget_passored_form_input"
|
|
:placeholder="t('LoginPersonal.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('LoginPersonal.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, 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 { useRouter } from "vue-router";
|
|
import { setLang } from "@/tool/guide";
|
|
import md5 from "md5";
|
|
export default defineComponent({
|
|
components: {
|
|
VerificationCodeInput,
|
|
googleLogin,
|
|
weiXinLogin,
|
|
phoneLogin,
|
|
},
|
|
setup() {
|
|
let timer: any = 0;
|
|
let router = useRouter()
|
|
|
|
// 从父组件注入 i18n
|
|
const i18n = inject('i18n') as { t: any, locale: any };
|
|
const store = useStore();
|
|
let loadingShow = ref(false);
|
|
const newAccount = ()=>{
|
|
router.push({path:'/register'})
|
|
}
|
|
return {
|
|
store,
|
|
timer,
|
|
locale: i18n?.locale,
|
|
t: i18n?.t,
|
|
loadingShow,
|
|
newAccount,
|
|
};
|
|
},
|
|
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('LoginPersonal.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('LoginPersonal.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('');
|
|
if(code.length !== this.emailCode.length){
|
|
message.info(this.t('LoginPersonal.CompleteVerificationCode'));
|
|
}else{
|
|
this.submitEmailLogin(code)
|
|
}
|
|
|
|
//提交验证码
|
|
return;
|
|
} else {
|
|
if (!this.password) {
|
|
message.info(this.t('LoginPersonal.PleaseEnterYourAccountNumberOrPassword'));
|
|
return;
|
|
}
|
|
//输入邮箱
|
|
if (!this.email) {
|
|
message.info(this.t('LoginPersonal.NeedEmail'));
|
|
return;
|
|
}
|
|
//判断邮箱格式是否正确
|
|
if (!isEmail(this.email)) {
|
|
message.info(this.t('LoginPersonal.IncorrectEmailFormat'));
|
|
return;
|
|
}
|
|
//判断是否同意隐私政策
|
|
if (!this.checked) {
|
|
message.info(this.t('Login.AgreePolicies'));
|
|
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'
|
|
// }
|
|
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) => {});
|
|
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,
|
|
};
|
|
this.store.commit('set_loading', true)
|
|
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
|
.then((rv: any) => {
|
|
this.setSuccessLogin(rv);
|
|
this.store.commit('set_loading', false)
|
|
})
|
|
.catch((res) => {
|
|
this.store.commit('set_loading', 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: 500;
|
|
}
|
|
&.active {
|
|
pointer-events: none;
|
|
input {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login_form_content {
|
|
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: .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;
|
|
@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: 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;
|
|
text-align: left;
|
|
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;
|
|
position: relative;
|
|
.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>
|