登录页面

src/views/login/login-dialog.vue

@@ -10,7 +10,6 @@
 		:close-on-click-modal="false"
 	>
 		<div class="login-dialog-content">
-			<img class="bg" src="@/assets/images/login/bg.jpg" />
 			<img class="logo" src="@/assets/images/logo.png" />
 			<div class="close" @click="show = false"><svg-icon name="close" /></div>
 			<div class="content" v-if="curentTabInfo">
@@ -22,8 +21,10 @@
 					<div class="nav" v-show="!curentTabInfo.title">
 						<div
 							class="item"
-							:class="{ active: currentTab === TabNames.sign_up }"
-							@click="currentTab = TabNames.sign_up"
+							:class="{
+								active: [TabNames.register, TabNames.register_success].includes(currentTab)
+							}"
+							@click="currentTab = TabNames.register"
 						>
 							SIGN UP
 						</div>
@@ -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
+		}
 	}
 </script>
 
@@ -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);