diff --git a/src/assets/icons/dui.svg b/src/assets/icons/dui.svg new file mode 100644 index 0000000..03f4227 --- /dev/null +++ b/src/assets/icons/dui.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lang/en.ts b/src/lang/en.ts index 42fe27c..925d091 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -7,9 +7,11 @@ export default { name: 'Name', email: 'Email', password: 'Password', + passwordConfirmation: 'Password Confirmation', enterName: 'Enter your name', enterEmail: 'Enter your email', enterPassword: 'Enter your password', + enterPasswordAgain: 'Enter your password again', forgotPassword: 'Forget password?', pleaseInputName: 'Please input the name', nameLengthError: 'Name length must be between {min} and {max} characters', @@ -28,7 +30,7 @@ export default { havenAccountToLogin: `Already have an account? Log in`, verifyEmail: 'Verify your email address', verifyCodeHasSent: 'A verification code has been sent to
{email}', - verify: 'Verify', + verify: 'VERIFY', resendCode: 'Resend Code', resendCodeIn: 'Resend Code in {time}', orContinueWith: 'or continue with', diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index 1afe79a..4e078c4 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -8,9 +8,11 @@ export default { name: '姓名', email: '邮箱', password: '密码', + passwordConfirmation: '密码确认', enterName: '请输入姓名', enterEmail: '请输入邮箱', enterPassword: '请输入密码', + enterPasswordAgain: '请输入密码确认', forgotPassword: '忘记密码？', pleaseInputName: '请输入姓名', nameLengthError: '姓名长度必须在 {min} 到 {max} 个字符之间', diff --git a/src/views/login/css/style.css b/src/views/login/css/style.css index d2a446c..ffb085f 100644 --- a/src/views/login/css/style.css +++ b/src/views/login/css/style.css @@ -38,7 +38,7 @@ --el-input-border-radius: 0; --el-input-text-color: #232323; --el-border-color: #C4C4C4; - font-size: 1.4rem; + font-size: 1rem; } .retrieve-password:deep(.el-form) .el-input::placeholder, .register:deep(.el-form) .el-input::placeholder, diff --git a/src/views/login/email-verify.vue b/src/views/login/email-verify.vue index e402574..7aacbba 100644 --- a/src/views/login/email-verify.vue +++ b/src/views/login/email-verify.vue @@ -1,5 +1,5 @@ @@ -29,7 +29,8 @@ type: String as () => 'LOGIN' | 'REGISTER' | 'FORGOT_PWD', required: true }, - password: { type: String, default: '' } + password: { type: String, default: '' }, + isShowOtherLogin: { type: Boolean, default: true } }) const code = ref('') const time = ref(60) @@ -96,7 +97,7 @@ diff --git a/src/views/login/less/style.less b/src/views/login/less/style.less index bac666c..a423d11 100644 --- a/src/views/login/less/style.less +++ b/src/views/login/less/style.less @@ -32,7 +32,7 @@ --el-input-border-radius: 0; --el-input-text-color: #232323; --el-border-color: #C4C4C4; - font-size: 1.4rem; + font-size: 1rem; &::placeholder { color: #9F9F9F; diff --git a/src/views/login/login-dialog.vue b/src/views/login/login-dialog.vue index 1d9c038..2bf3ed2 100644 --- a/src/views/login/login-dialog.vue +++ b/src/views/login/login-dialog.vue @@ -10,7 +10,6 @@ :close-on-click-modal="false" >
-
@@ -22,8 +21,10 @@
SIGN UP
@@ -42,6 +43,7 @@ @login="onLogin" @register="onRegister" @submit-email-code="onSubmitEmailCode" + @back="onBack" :name="data.name" :email="data.email" :password="data.password" @@ -58,6 +60,8 @@ import login from './login.vue' import register from './register.vue' import emailVerify from './email-verify.vue' + import registerSuccess from './register-success.vue' + import retrievePassword from './retrieve-password.vue' import myEvent from '@/utils/myEvent' const data = ref({ name: '', @@ -65,11 +69,11 @@ password: '', type: '' }) - const show = ref(false) const TabNames = { login: 'login', - sign_up: 'sign_up', + register: 'register', email_verify: 'email_verify', + register_success: 'register_success', retrieve_password: 'retrieve_password' } const tabList = markRaw([ @@ -78,7 +82,7 @@ component: login }, { - name: TabNames.sign_up, + name: TabNames.register, component: register }, { @@ -89,15 +93,20 @@ { name: TabNames.retrieve_password, title: 'RETRIEVE PASSWORD', - component: login + component: retrievePassword + }, + { + name: TabNames.register_success, + component: registerSuccess } ]) + const show = ref(false) const currentTab = ref(TabNames.login) const curentTabInfo = computed(() => tabList.find((v) => v.name === currentTab.value)) const lastTab = ref('') watch(currentTab, (v, o) => (lastTab.value = o)) const onBack = () => { - if (lastTab.value) currentTab.value = lastTab.value + currentTab.value = lastTab.value || TabNames.login } const open = (type?: string) => { currentTab.value = TabNames[type] || TabNames.login @@ -118,13 +127,17 @@ } const onRegister = (res: any) => { data.value = res - data.value.type = TabNames.sign_up + data.value.type = TabNames.register currentTab.value = TabNames.email_verify } const onSubmitEmailCode = (code: string) => { - // data.value.code = code - console.log(code) - show.value = false + if (data.value.type === TabNames.login) { + console.log('登录', code) + show.value = false + } else { + console.log('注册', code) + currentTab.value = TabNames.register_success + } } @@ -147,14 +160,16 @@ height: 100%; overflow: hidden; position: relative; + background: url('@/assets/images/login/bg.jpg') no-repeat center center / 100% 100%; + > *:not(.content) { + position: absolute; + } > .bg { width: 100%; height: 100%; display: block; } - > * { - position: absolute; - } + > .logo { width: auto; height: 4rem; @@ -170,9 +185,10 @@ } > .content { width: 34rem; - top: 5rem; - right: 6rem; height: calc(100% - 10rem); + margin: 5rem 6rem auto auto; + display: flex; + flex-direction: column; > .header { --padding-bottom: 1.2rem; padding-bottom: var(--padding-bottom); diff --git a/src/views/login/password-tip.vue b/src/views/login/password-tip.vue index 0ca3f14..4f7f087 100644 --- a/src/views/login/password-tip.vue +++ b/src/views/login/password-tip.vue @@ -40,15 +40,15 @@ .password-tip { background: #404040; color: #fff; - font-size: 1.4rem; - padding: 2rem; - border-radius: 2rem; + font-size: 1.1rem; + padding: 1.5rem; + border-radius: 1.5rem; line-height: normal; > div { display: flex; align-items: center; - margin-bottom: 0.5rem; + margin-bottom: 1rem; &:last-child { margin-bottom: 0; } diff --git a/src/views/login/register-success.vue b/src/views/login/register-success.vue new file mode 100644 index 0000000..d619448 --- /dev/null +++ b/src/views/login/register-success.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/src/views/login/retrieve-password.vue b/src/views/login/retrieve-password.vue index 1f65234..30a657e 100644 --- a/src/views/login/retrieve-password.vue +++ b/src/views/login/retrieve-password.vue @@ -1,120 +1,183 @@