<script setup lang="ts">
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import { ref, onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['view-type'])
	onMounted(() => {
		emit('view-type', 1)
	})
	const onExit = () => {
		console.log('exit')
	}
</script>

<template>
	<header-title />
	<div class="end">
		<div class="content">
			<div class="title">Thank you.</div>
			<div class="tip">
				We are starting to learn your preferences, Looking forward to see you again,
			</div>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.header-title {
		--header-title-color: #000;
		--header-title-background: #fff;
	}
	.end {
		width: 100%;
		flex: 1;
		position: relative;
		color: #fff;
		background: url('@/assets/images/workshop/bg/end_bg.png') no-repeat center center;
		background-size: cover;
		> .content {
			position: absolute;
			top: 12.9rem;
			left: 6rem;
			// width: 100%;
			display: flex;
			flex-direction: column;
			> .title {
				font-family: satoshiBold;
				font-size: 14.7rem;
				line-height: 124%;
			}
			> .tip {
				margin-top: 2.5rem;
				width: 58.2rem;
				font-family: satoshiRegular;
				font-size: 4.1rem;
				line-height: 132%;
			}
		}
	}
</style>
