Aida_Purchaser_Front/src/views/login/register-success.vue

<template>
	<div class="register-success">
		<div class="icon"><svg-icon name="dui" size="20" /></div>
		<div class="title">{{ t('RegisterSuccess.title1') }}</div>
		<div class="title">{{ t('RegisterSuccess.title2') }}</div>
		<div class="footer">
			<div class="title">
				<span class="text">{{ t('RegisterSuccess.title3') }}</span>
				<span class="icon"><svg-icon name="arrow_right" size="11" /></span>
			</div>
			<div class="content">
				<div>
					<div class="title">{{ t('RegisterSuccess.item1title') }}</div>
					<div class="tip">{{ t('RegisterSuccess.item1tip') }}</div>
				</div>
				<div>
					<div class="title">{{ t('RegisterSuccess.item2title') }}</div>
					<div class="tip">{{ t('RegisterSuccess.item2tip') }}</div>
				</div>
				<div>
					<div class="title">{{ t('RegisterSuccess.item3title') }}</div>
					<div class="tip">{{ t('RegisterSuccess.item3tip') }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
</script>

<style lang="less" scoped>
	.register-success {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 7.7rem;
		> .icon {
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			background-color: #fff;
			border: 0.1rem solid #e8e8e8;
			margin-bottom: 1.8rem;
		}
		> .title {
			font-size: 1.6rem;
			line-height: 2.4rem;
			text-align: center;
			color: #232323;
		}
		> .footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 7rem;
			padding: 0 6rem;
			> .title {
				font-family: KaiseiOpti-Regular;
				font-size: 1.4rem;
				line-height: 2.4rem;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-bottom: 1.2rem;
				> .icon {
					margin-left: 1.2rem;
					transform: rotate(90deg);
				}
			}
			> .content {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 1.8rem;
				> div {
					padding: 2.4rem 1.5rem 0;
					height: 14.8rem;
					background: rgba(255, 255, 255, 0.9);
					box-shadow: 3px 4px 8px 0px rgba(0, 0, 0, 0.11);
					flex: 1;
					&:first-child {
						flex: 0.84;
					}
					> .title {
						font-family: KaiseiOpti-Bold;
						font-size: 1.6rem;
						line-height: 2.4rem;
						margin-bottom: 1.2rem;
						color: #232323;
					}
					> .tip {
						font-family: KaiseiOpti-Regular;
						font-size: 1.2rem;
						line-height: 1.7rem;
						color: #585858;
					}
				}
			}
		}
	}
</style>