aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改 部分bug修复

Browse Source
This commit is contained in:
X1627315083
2025-08-22 10:27:48 +08:00
parent 141821a843
commit 594bf5ce0a
275 changed files with 5675 additions and 13049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/component/mainPage/signUp/registerModel.vue
View File

@@ -6,6 +6,7 @@
v-model:visible="registerModel"
:footer="null"
:width="pageWidth"
height="auto"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -18,13 +19,12 @@
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg
width="46"
height="46"
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="white" fill-opacity="0.3" />
<circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
<rect
x="32.5063"
y="12"
@@ -59,22 +59,22 @@
'login_active',
]"
>
Register for AiDA 3.0
{{ userI18n[selectUserI18n].title }}
</div>
</div>
<!-- 账号密码登录 start -->
<!-- v-show="loginType == 'username'" -->
<div>
<div class="login_form_content" :state="emailStap">
<div class="login_form_title">Name</div>
<div class="login_form_title">{{ userI18n[selectUserI18n].Name }}</div>
<input
class="login_form_input"
placeholder="Enter your username"
:placeholder="userI18n[selectUserI18n].inputName"
v-model="username"
/>
<div class="login_form_title marign_top30">
<div>Password</div>
<div>{{ userI18n[selectUserI18n].Password }}</div>
<!-- <div class="tip_content" @click="changeIsLogin(2)">
Forgot password？
</div> -->
@@ -92,7 +92,7 @@
class="fi fi-br-check"
></i>
</div>
<div class="text">At least 8 characters long</div>
<div class="text">{{ userI18n[selectUserI18n].passwordLength }}</div>
</div>
<div class="item">
<div class="icon">
@@ -105,7 +105,7 @@
class="fi fi-br-check"
></i>
</div>
<div class="text">Must contain special characters</div>
<div class="text">{{ userI18n[selectUserI18n].passwordSpecial }}</div>
</div>
<div class="item">
<div class="icon">
@@ -119,7 +119,7 @@
></i>
</div>
<div class="text">
Mix of uppercase, lowercase and numbers
{{ userI18n[selectUserI18n].passwordMaxLength }}
</div>
</div>
</div>
@@ -132,7 +132,7 @@
).length < 3,
}"
:type="passwordType"
placeholder="Enter your password"
:placeholder="userI18n[selectUserI18n].inputPassword"
v-model="password"
@keydown.enter="submitPerLogin()"
@input="passwordInput"
@@ -145,12 +145,12 @@
></div>
</div>
<span style="font-weight: 400; opacity: 0.7"
>You must satisfy ALL password conditions to register.</span
>{{ userI18n[selectUserI18n].inputPasswordTip }}</span
>
<div class="login_form_title marign_top30">Email</div>
<div class="login_form_title marign_top30">{{ userI18n[selectUserI18n].Email }}</div>
<input
class="login_form_input"
placeholder="Enter your email address"
:placeholder="userI18n[selectUserI18n].inputEmail"
v-model="email"
@keydown.enter="submitPerLogin()"
/>
@@ -188,7 +188,7 @@
<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
>{{userI18n[selectUserI18n].code}}</span
>
<i
class="fi fi-br-cross email_last_step_block_icon"
@@ -198,12 +198,12 @@
<div class="email_last_step_bottom">
<div class="email_last_step_des">
<div class="sent_email_content">
Sent to {{ email }}
{{userI18n[selectUserI18n].SentTo}} {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>Resend</span
>{{userI18n[selectUserI18n].Resend}}</span
>
</div>
</div>
@@ -214,8 +214,7 @@
<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
{{userI18n[selectUserI18n].PleaseCheck}}
</div>
</div>
</div>
@@ -226,7 +225,7 @@
<div class="login_form_title marign_top30">
<label :class="{ active: emailStap == 2 }">
<input :state="emailStap" type="checkbox" v-model="checked" />
<span>I agree to the Terms, Privacy Policy, and Fees.</span>
<span>{{userI18n[selectUserI18n].articles}}</span>
</label>
</div>
<div class="thirdPartyLogin marign_top30">
@@ -238,7 +237,7 @@
></div>
<googleLogin
@googelLogin="googelLogin"
text="Register with Google"
:text="userI18n[selectUserI18n].google"
></googleLogin>
</div>
<div class="label">
@@ -247,7 +246,7 @@
v-show="!checked"
@click="isCheckAgreement"
></div>
<weiXinLogin text="Register with wechat"></weiXinLogin>
<weiXinLogin :text="userI18n[selectUserI18n].wechat"></weiXinLogin>
</div>
<!-- <phoneLogin></phoneLogin> -->
</div>
@@ -257,7 +256,7 @@
:state="emailStap"
@click="submitPerLogin()"
>
Register
{{userI18n[selectUserI18n].Register}}
</div>
<!-- <div class="login_text" >
@@ -368,6 +367,51 @@ export default defineComponent({
registerModelMask: true,
pageWidth: "50%",
passwordConditionShow: false,
userI18n: {
en:{
title:'Register for AiDA 3.0',
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 3.0',
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,
@@ -411,7 +455,12 @@ export default defineComponent({
}
},
methods: {
init() {
init(boolean: boolean) {
if(boolean){
this.selectUserI18n = 'cn'
}else{
this.selectUserI18n = 'en'
}
this.registerModel = true;
this.emailLastStepFun();
},
@@ -625,7 +674,7 @@ export default defineComponent({
}
this.createTimer();
let isTest = rv.systemUser == 3 ? true : false;
let isBeginner = rv.isBeginner == 1 ? true : false;
let isBeginner = rv?.isBeginner == 1 ? true : false;
let token = rv.token;
setCookie("token", token);
setCookie("isTest", isTest);
@@ -750,7 +799,7 @@ export default defineComponent({
// height: 100%;
}
.ant-modal-body {
padding: 6rem 4rem;
padding: 4.3rem 3rem;
// height: 100%;
}
}
@@ -808,35 +857,48 @@ export default defineComponent({
.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;
height: 4rem;
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.6rem;
font-size: 1.8rem;
// color: #666666;
font-weight: 900;
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;
@@ -850,6 +912,9 @@ export default defineComponent({
.login_form_content {
margin-top: 4rem;
position: relative;
@media (max-width: 768px) {
margin-top: 2.4rem;
}
&[state="2"] {
> * {
opacity: 0;
@@ -858,6 +923,11 @@ export default defineComponent({
opacity: 1;
}
}
> span{
@media (max-width: 768px) {
font-size: 1.2rem;
}
}
.password_input_block {
position: relative;
@@ -865,20 +935,26 @@ export default defineComponent({
position: absolute;
font-size: 2.4rem;
right: 2rem;
top: 1.7rem;
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(-5rem);
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;
@@ -900,17 +976,26 @@ export default defineComponent({
}
.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 0.3s;
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;
}
@@ -968,6 +1053,11 @@ export default defineComponent({
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;
}
@@ -993,7 +1083,7 @@ export default defineComponent({
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60rem;
width: 77rem;
background: #ffffff;
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
border-radius: 1rem;
@@ -1078,17 +1168,30 @@ export default defineComponent({
}
.marign_top30 {
margin-top: 3rem;
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;
// justify-content: flex-start;
@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%;