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

671
src/component/mainPage/signUp/index.vue
View File

@@ -1,37 +1,36 @@
<template>
<div class="signUp">
<div class="selectSignUp" v-show="!isSelectSignUp">
<div class="title">{{ productList[0].Advantages }}</div>
<!-- <div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div> -->
<div class="titleTitle">{{ productList.Advantages }}</div>
<div class="selectMonthlyYearly" :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']">
<div class="bg"></div>
<div class="leftText" @click="setMonthlyOrYearly('monthly')">{{ productList.Monthly }}</div>
<div class="rightText" @click="setMonthlyOrYearly('yearl')">{{ productList.Yearly }}</div>
</div>
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList" :key="item">
<div class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item">
<div class="product_signUp_box">
<img class="img" :src="item?.img" alt="">
<div class="title">{{ item?.title }}</div>
<div class="info">{{ item?.info }}</div>
<div class="detail">{{ item?.detail }}</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
<div class="info" :class="{academic:item.type == 'academic'}">{{ item?.info }}</div>
<div class="price" v-if="item.type != 'academic'">
<div>{{ item?.price }}</div>
<span :class="{yearl:monthlyOrYearly == 'yearl'}">{{ item?.detail }}</span>
</div>
<div class="price academic" v-if="item.type == 'academic'">
<div>{{ item?.custom }}</div>
<span style="font-size: 1.4rem;">{{ item?.customInfo }}</span>
</div>
<ul class="product_detail" :class="{'academic':item.type == 'academic'}">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us'" @click="createAccount">{{ item?.btn }}</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">{{ item?.btn }}</a>
</div>
<ul class="product_detail">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
</div>
</div>
</div>
<div class="introductDetail" v-show="isSelectSignUp">
<div class="title">Product Features</div>
<div class="gallery_list introductList">
<div class="gallery_item" v-for="item in introductList" :key="item">
<div class="itemIcon">
<img :src="item.img" alt="">
</div>
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.info }}</div>
</div>
</div>
<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
<!-- <div class="gallery_btn" v-else style="width: 20rem;" @click="()=>isSelectSignUp=false">Contact us</div> -->
</div>
<registerModel ref="registerModel"></registerModel>
</div>
@@ -53,129 +52,213 @@
})
let data = reactive({
isSelectSignUp:false,
monthlyOrYearly:'monthly',
productList:[],
productListCn:[
{
Advantages:'我们的优势',
title:"个人版",
info:"试用五天(注册后开始免费试用)",
detail:"时尚设计助理",
highlight:"免费试用五天",
detailList:[
'时尚设计助理',
// 'Basic 3D service functions',
'个人信用额度供独立使用',
'作品可以在作品广场中共享',
'支持按 月/年 支付方式',
'适合个人创作者和自由设计师试用'
],
btn:'创建账号',
},
{
title: "教育版",
info: "",
detail: "高校多用户管理系统",
highlight: "",
detailList: [
"高校多用户管理系统",
"全校范围内共享信用额度",
"AI辅助设计教学功能",
"支持草图创意与设计灵感教学",
"基础3D设计功能"
],
btn:'联系我们',
},
{
title: "企业版",
info: "",
detail: "企业级多人协作系统",
highlight: "",
detailList: [
"企业级多人协作系统",
"组织内部信用额度共享",
"品牌DNA管理系统，可定制品牌专属设计偏好",
"云端设计生成与管理",
"完整3D设计功能，支持高清打印输出、专业制版与效果图3D渲染",
"企业级数据安全保障",
"适用于服装设计团队与品牌使用"
],
btn:'联系我们',
}
],
productListEn:[
{
Advantages:'Our Advantages',
title:"Personal version",
info:"Try for 5 days(Free trail starts upon registration)",
detail:"AI Fashion Design Assistant",
highlight:"Free 5-day trial",
detailList:[
'AI Fashion Design Assistant',
// 'Basic 3D service functions',
'Individual Credit Limit for Independent Use',
'Works can be shared in public galleries',
'Support monthly/annual payment options',
'Suitable for individual creators and freelance designers to use'
],
btn:'Create account',
},
{
title:"Education Edition",
info:"",
detail:"Multi user management system for universities",
highlight:"",
detailList:[
'Multi user management system for universities',
'Credit limits are shared across the entire school',
'AI assisted design teaching function',
'Support sketch creativity and design inspiration teaching',
'Basic 3D design functions',
],
btn:'Contact us',
},{
title:"Enterprise Edition",
info:"",
detail:"Enterprise level multi-person collaboration system",
highlight:"",
detailList:[
'Enterprise level multi-person collaboration system',
'Internal Credit Sharing within organization',
'Brand DNA management system, customizable brand exclusive design preferences',
'Cloud based design generation and management',
'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
'Enterprise level data security assurance',
'Suitable for fashion design teams and brands to use',
],
btn:'Contact us',
},
],
introductList:[
{
img:'/image/homeIntroduct/introduct1.png',
title:'Quickly generate images',
info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
},{
img:'/image/homeIntroduct/introduct2.png',
title:'Generate plan',
info:'Upload inspiration moodboards, colors, printboards, and sketches to generate unlimited design suggestions',
},{
img:'/image/homeIntroduct/introduct3.png',
title:'Simple operation',
info:'Just a few clicks to save and retrieve your design',
},{
img:'/image/homeIntroduct/introduct4.png',
title:'Cloud',
info:'After subscribing, you can access it anytime and anywhere through the cloud system',
},{
img:'/image/homeIntroduct/introduct5.png',
title:'Usage',
info:'Simplified operation, it only takes about ten minutes to learn how to use it',
},{
img:'/image/homeIntroduct/introduct6.png',
title:'Email',
info:'By info@code-create.com.hk Contact us to learn more',
},
]
productListCn: {
Advantages: '我们的价格方案',
Monthly: '月度',
Yearly: '年度',
monthly: [
{
title: "个人版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥100',
detail: "每月·50积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共化画廊分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
],
btn: '立即开始',
},
{
title: "个人专业版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥500',
detail: "每月·3500积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共画廊中分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
],
btn: '立即开始',
},{
title: "教育版",
img: '/image/homeIntroduct/academic.png',
type:'academic',
info: "高校多用户管理系统",
price: '',
detail: "",
custom:'定制方案',
customInfo:'可提供专属教育优惠，详情请联系我们',
highlight: "",
discounts: '',
detailList: [
'灵活的自定义程序以满足学校需求',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '联系我们',
},
],
yearl: [
{
title: "个人版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥5,000',
detail: "每年·50000积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'灵活的自定义程序以满足学校需求',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '立即开始',
},{
title: "教育版",
img: '/image/homeIntroduct/academic.png',
type:'academic',
info: "高校多用户管理系统",
price: '',
detail: "",
custom:'定制方案',
customInfo:'可提供专属教育优惠，详情请联系我们',
highlight: "",
discounts: '',
detailList: [
'全校共享积分额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '联系我们',
},
],
},
productListEn:{
Advantages:'Our Pricing Plan',
Monthly: 'Monthly',
Yearly: 'Yearly',
monthly:[
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$100',
detail:"per month · 500 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList: [
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$500',
detail:"per month · 3500 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList:[
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},{
title:"Academic",
img:'/image/homeIntroduct/academic.png',
type:'academic',
info:"Multi User Management System for Universities",
price:'',
detail:"",
custom:'Customize',
customInfo:'Special Academic rate aviable, please contact us for details.',
highlight:"",
discounts:'',
detailList:[
'Flexible Customize Program to Support School Needs',
'Monthly Credit Renewal throughout Program Duration',
'Flexible to Share and Allocate Account Credits among Users',
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
],
btn:'Contact us',
},
],
yearl:[
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$5,000',
detail:"per month · 50000 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList:[
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},{
title:"Academic",
img:'/image/homeIntroduct/academic.png',
type:'academic',
info:"Multi User Management System for Universities",
price:'',
detail:"",
custom:'Customize',
customInfo:'Special Academic rate aviable, please contact us for details.',
highlight:"",
discounts:'',
detailList:[
'Flexible Customize Program to Support School Needs',
'Monthly Credit Renewal throughout Program Duration',
'Flexible to Share and Allocate Account Credits among Users',
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
],
btn:'Contact us',
},
],
}
})
watch(()=>props.isSelectSuccessively,(newVal)=>{
if(newVal){
@@ -186,11 +269,14 @@
},{immediate: true})
const close = ()=>{
}
const setMonthlyOrYearly = (val)=>{
data.monthlyOrYearly = val
}
const createAccount = ()=>{
if(window.innerWidth < 768){
dom.registerModel.pageWidth = '100%'
}
dom.registerModel.init()
dom.registerModel.init(props.isSelectSuccessively)
}
onMounted(()=>{
@@ -199,6 +285,7 @@
...toRefs(dom),
...toRefs(data),
close,
setMonthlyOrYearly,
createAccount,
}
},
@@ -208,6 +295,13 @@
.signUp{
flex: 1;
padding: 0rem 4rem;
margin-top: 5.6rem;
@media (max-width: 767px) {
margin-top: 1.5rem;
padding: 0rem 3.7rem;
flex: 1;
overflow-y: auto;
}
.back{
font-size: 1.6rem;
margin-bottom: 3rem;
@@ -215,12 +309,70 @@
.back,.introduce>span{
cursor: pointer;
}
.title,.introduce{
font-weight: 600;
margin-bottom: 4rem;
.titleTitle{
font-size: 4.6rem;
font-weight: 500;
text-align: center;
margin-bottom: 2rem;
@media (max-width: 767px) {
font-size: 2.68rem;
margin-bottom: 1.1rem;
}
}
.title{
font-size: 3rem;
.selectMonthlyYearly{
border: .7px solid #e7ebff;
background: #FBFBFB;
border-radius: 1rem;
width: 18.5rem;
box-shadow: 0px 0.72px 3.62px 0px #566EE81A inset;
margin: 0 auto;
display: flex;
position: relative;
--selectPadding: .58rem;
padding: var(--selectPadding);
@media (max-width: 767px) {
--selectPadding: .36rem;
border-radius: .58rem;
width: 10.8rem;
}
&.left{
> .bg{
left: var(--selectPadding);
}
> .leftText{
color: #000;
}
}
&.right{
> .bg{
left: calc(50% + var(--selectPadding));
}
> .rightText{
color: #000;
}
}
> .bg{
border: .7px solid #E7EBFF;
box-shadow: 0px 4.35px 26.08px 0px #B5C2FB1A;
background: #ffffff;
width: calc(50% - var(--selectPadding) * 2);
height: calc(100% - var(--selectPadding) * 2);
position: absolute;
transition: all .3s;
}
> .leftText,> .rightText{
cursor: pointer;
font-weight: 400;
font-size: 1.7rem;
width: 50%;
text-align: center;
color: #797878;
position: relative;
font-family: 'pingfang_regular';
@media (max-width: 767px) {
font-size: 1rem;
}
}
}
.introduce{
font-size: 2.4rem;
@@ -228,109 +380,176 @@
}
.gallery_list{
display: flex;
justify-content: space-between;
// justify-content: center;
flex-wrap: wrap;
justify-content: center;
margin-top: 4.3rem;
@media (max-width: 767px) {
margin-top: 2.4rem;
}
.gallery_item{
width: calc(33.333% - 3rem);
.title,.info,.highlight{
font-weight: 600;
width: 44.1rem;
height: 56.9rem;
padding: 2.09rem;
border-radius: 1.8rem;
border: .72px solid #E7EBFF;
margin-right: 8rem;
position: relative;
@media (max-width: 767px) {
width: 100%;
height: auto;
border-radius: 1.3rem;
margin: 0;
margin-bottom: 2.8rem;
padding-bottom: 1.3rem;
}
.product_signUp_box{
display: flex;
flex-direction: column;
height: 100%;
}
&:last-child{
margin-right: 0rem;
margin-bottom: 0rem;
}
.img{
margin-bottom: 1.4rem;
width: 4rem;
height: 4rem;
@media (max-width: 767px) {
width: 2.9rem;
height: 2.9rem;
margin-bottom: 1rem;
}
}
.title{
font-size: 2rem;
margin-bottom: 10px;
font-size: 3.1rem;
margin-bottom: 1rem;
text-align: left;
font-weight: 500;
@media (max-width: 767px) {
font-size: 2.3rem;
margin-bottom: .73rem;
}
}
.info{
line-height: 2rem;
height: 2rem;
font-weight: 400;
font-size: 1.4rem;
color: #797878;
margin-bottom: 1.7rem;
font-family: 'pingfang_regular';
&.academic{
margin-bottom: .4rem;
}
@media (max-width: 767px) {
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
}
.price{
// margin-bottom: 5.2rem;
border-bottom: .72px solid #E7EBFF;
width: 100%;
display: flex;
align-items: flex-end;
@media (max-width: 767px) {
margin-bottom: 2.3rem;
}
&.academic{
align-items: flex-start;
flex-direction: column;
> div{
margin-bottom: .9rem;
font-size: 4.3rem;
line-height: 1;
letter-spacing: -.072rem;
@media (max-width: 767px) {
font-size: 3.1rem;
margin-bottom: .5rem;
}
}
> span{
margin: 0;
}
}
> div{
font-weight: 500;
font-size: 4.3rem;
color: #1B223C;
@media (max-width: 767px) {
font-size: 3.14rem;
}
}
> span{
font-weight: 500;
font-size: 1.7rem;
color: #797878;
margin-bottom: 1.5rem;
margin-left: 1rem;
&.yearl{
font-size: 1.3rem;
}
@media (max-width: 767px) {
font-size: 1.2rem;
margin-left: .7rem;
margin-bottom: 1rem;
}
}
}
.info,.detail,.gallery_btn{
font-size: 1.6rem;
}
.detail{
margin-top: 6rem;
margin-bottom: 7.6rem;
}
.highlight{
font-size: 2.4rem;
font-size: 1.3rem;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
border-radius: 0px 2.8rem 0px 1rem;
padding: 1rem 2rem;
}
.gallery_btn{
line-height: 6rem;
width: 100%;
padding: 0;
}
}
}
.product_list{
.gallery_item{
.product_signUp_box{
border-radius: 3rem;
border: 2px solid #000;
padding: 3rem;
position: relative;
.active{
pointer-events: none;
border-radius: .5rem 1.5rem 0px 1.5rem;
padding: .75rem .5rem;
@media (max-width: 767px) {
padding: .55rem .36rem;
border-radius: .46rem .36rem 0px .9rem;
font-size: 1rem;
}
}
.product_detail{
margin-top: 4rem;
padding-left: 20px;
padding-left: 3.1rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow-y: auto;
&.academic{
justify-content: flex-start
}
li{
list-style: disc;
margin-bottom: 10px;
margin-bottom: .3rem;
font-size: 1.6rem;
font-weight: 500;
@media (max-width: 767px) {
font-size: 1.15rem;
}
}
li:last-child{
margin-bottom: 0;
}
}
}
}
.introductDetail{
>.title{
margin-top: 6rem;
text-align: center;
}
.introductList{
width: 130rem;
margin: 8rem auto 0rem auto;
}
.gallery_item{
margin-bottom: 6rem;
.itemIcon{
width: 8rem;
height: 8rem;
border-radius: 2rem;
background: #000;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.title{
text-align: center;
}
.info{
.gallery_btn{
line-height: 4.6rem;
width: 100%;
padding: 0;
margin-top: auto;
font-size: 1.7rem;
font-weight: 500;
height: 9rem;
@media (max-width: 767px) {
margin-top: 2.5rem;
font-size: 1.25rem;
line-height: 3.4rem;
border-radius: .62rem;
}
}
>div{
margin-bottom: 2rem;
}
>div:last-child{
margin-bottom: 0;
}
}
.gallery_btn{
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
}

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%;