新用户信息收集

src/assets/icons/close-border.svg

@@ -0,0 +1,4 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4882 10.4882C11.139 9.83728 12.1943 9.83728 12.8452 10.4882L16.6667 14.3096L20.4882 10.4882C21.139 9.83728 22.1943 9.83728 22.8452 10.4882C23.4961 11.139 23.4961 12.1943 22.8452 12.8452L19.0237 16.6667L22.8452 20.4882C23.4961 21.139 23.4961 22.1943 22.8452 22.8452C22.1943 23.4961 21.139 23.4961 20.4882 22.8452L16.6667 19.0237L12.8452 22.8452C12.1943 23.4961 11.139 23.4961 10.4882 22.8452C9.83728 22.1943 9.83728 21.139 10.4882 20.4882L14.3096 16.6667L10.4882 12.8452C9.83728 12.1943 9.83728 11.139 10.4882 10.4882Z" fill="#666666"/>
+<path d="M16.6667 3.33333C9.30287 3.33333 3.33333 9.30287 3.33333 16.6667C3.33333 24.0305 9.30287 30 16.6667 30C24.0305 30 30 24.0305 30 16.6667C30 9.30287 24.0305 3.33333 16.6667 3.33333ZM0 16.6667C0 7.46192 7.46192 0 16.6667 0C25.8714 0 33.3333 7.46192 33.3333 16.6667C33.3333 25.8714 25.8714 33.3333 16.6667 33.3333C7.46192 33.3333 0 25.8714 0 16.6667Z" fill="#666666"/>
+</svg>

src/assets/icons/refresh-single.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.55859 12C2.55859 6.75329 6.81189 2.5 12.0586 2.5C14.5738 2.5 16.8599 3.47759 18.5586 5.07197V3.5C18.5586 2.94772 19.0063 2.5 19.5586 2.5C20.1109 2.5 20.5586 2.94772 20.5586 3.5V7.97591C20.559 7.99622 20.5588 8.01651 20.5579 8.03674C20.5386 8.572 20.0986 9 19.5586 9H15.0586C14.5063 9 14.0586 8.55228 14.0586 8C14.0586 7.44772 14.5063 7 15.0586 7H17.6491C16.275 5.46469 14.279 4.5 12.0586 4.5C7.91646 4.5 4.55859 7.85786 4.55859 12C4.55859 16.1421 7.91646 19.5 12.0586 19.5C15.9015 19.5 19.0706 16.6089 19.5072 12.8836C19.5715 12.3351 20.0683 11.9425 20.6168 12.0068C21.1653 12.0711 21.5579 12.5679 21.4936 13.1164C20.9403 17.8375 16.9279 21.5 12.0586 21.5C6.81189 21.5 2.55859 17.2467 2.55859 12Z" fill="#252727"/>
+</svg>

src/router/index.ts

@@ -29,6 +29,11 @@ const router = createRouter({
 			name: 'register',
 			component: () => import('../views/login/register.vue'),
 		},
+		{
+			path: '/nuic',
+			name: 'nuic',
+			component: () => import('../views/nuic/index.vue'),
+		},
 		{
 			path: '/home',
 			name: 'home',

src/views/login/register.vue

@@ -97,7 +97,7 @@
 	}
 	const onVerifyCode = (code: string) => {
 		console.log(code)
-		router.push({ name: 'home' })
+		router.push({ name: 'nuic' })
 	}
 	const onClickPrivacy = () => {}
 	const onClickLogin = () => {

src/views/nuic/index.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="nuic background-pink">
+		<div class="logo">
+			<img src="@/assets/images/logo.png" />
+			<span>FiDA</span>
+		</div>
+		<div class="header">
+			<div class="close" @click="onClose">
+				<svg-icon name="close-border" size="33" />
+			</div>
+
+			<div
+				class="item"
+				v-for="(v, i) in list"
+				:key="i"
+				:state="active === i ? 1 : active > i ? 0 : 2"
+			>
+				<img v-show="i === active" src="@/assets/images/nuic/nav-active.png" draggable="false" />
+			</div>
+		</div>
+		<component class="view" :is="list[active]" @next="onNext" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw } from 'vue'
+	import nuic1 from './nuic-1.vue'
+	import nuic2 from './nuic-2.vue'
+	import nuic3 from './nuic-3.vue'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const active = computed(() => Number(route.query.index || 0))
+	const list = markRaw([nuic1, nuic2, nuic3])
+	const onClose = () => {
+		router.push({ name: 'home' })
+	}
+	const onNext = () => {
+		const index = active.value + 1
+		if (index < list.length) {
+			router.push({ query: { index } })
+		} else {
+			router.push({ name: 'home' })
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.nuic {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		// align-items: center;
+		// justify-content: center;
+		> .logo {
+			position: absolute;
+			top: 3.8rem;
+			left: 3.8rem;
+
+			> img {
+				width: 6rem;
+				height: auto;
+			}
+
+			> span {
+				font-weight: 600;
+				font-size: 3.3rem;
+			}
+		}
+		> .header {
+			margin-top: 5rem;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: flex-end;
+			height: 11.2rem;
+			> * {
+				margin-right: 3rem;
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+			> .close {
+				margin-bottom: -0.65rem;
+				cursor: pointer;
+			}
+			> .item {
+				width: 30.2rem;
+				&[state='1'] {
+					height: 100%;
+				}
+				&[state='2'],
+				&[state='0'] {
+					height: 2rem;
+					border-radius: 2rem;
+				}
+				&[state='0'] {
+					background: linear-gradient(90deg, #ff8ca2 0%, #ffa497 49.04%, #ff8d55 100%);
+				}
+				&[state='2'] {
+					background-color: #dfdfdf;
+				}
+				> img {
+					width: 100%;
+					height: auto;
+				}
+			}
+		}
+		&::v-deep > .view {
+			margin-top: 5rem;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			color: #252727;
+			text-align: center;
+			> .btns {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> button {
+					width: 29.6rem;
+					height: 6rem;
+					border-radius: 6rem;
+					border: none;
+					outline: none;
+					font-size: 2.4rem;
+					font-weight: 600;
+					color: #252727;
+					cursor: pointer;
+					margin-right: 3.4rem;
+					background-color: #fff;
+					&:last-child {
+						margin-right: 0;
+					}
+					&.skip {
+						color: #8d8d8d;
+					}
+					&:active {
+						opacity: 0.8;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/nuic/nuic-1.vue

@@ -0,0 +1,55 @@
+<template>
+	<div class="nuic-1">
+		<img src="@/assets/images/nuic/nuic-1-bg.png" />
+		<p class="hi">Hi, Aaa.</p>
+		<p class="title">Help Fiphant discover the <b>'YOU'</b> in your space.</p>
+		<p class="tip">
+			Let's set up your profile. A few quick details will help Fiphant understand
+			<br />
+			your needs and find exactly what you're looking for.
+		</p>
+		<div class="btns">
+			<button class="next" @click="emit('next')">Let’s go, Fiphant!</button>
+			<button class="skip" @click="onSkip">Skip</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['next'])
+	const onSkip = () => {
+		router.push({ name: 'home' })
+	}
+</script>
+
+<style lang="less" scoped>
+	.nuic-1 {
+		> img {
+			width: 44.7rem;
+			height: auto;
+			margin-bottom: 4.8rem;
+		}
+		> .hi {
+			font-weight: 500;
+			font-size: 4rem;
+			margin-bottom: 1rem;
+		}
+		> .title {
+			font-weight: 500;
+			font-size: 4rem;
+			margin-bottom: 2rem;
+			> b {
+				font-size: 4.8rem;
+			}
+		}
+		> .tip {
+			font-weight: 400;
+			font-size: 2rem;
+			color: #585858;
+			margin-bottom: 8.7rem;
+		}
+	}
+</style>

src/views/nuic/nuic-2.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="nuic-2">
+		<!-- <img src="@/assets/images/nuic/nuic-1-bg.png" /> -->
+		<p class="title">What's your dream <b>home vibe</b> ?</p>
+		<div class="list">
+			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
+				<img :src="v.url" draggable="false" />
+				<div class="active" v-show="v.active">
+					<span>Constructivism</span>
+				</div>
+			</div>
+		</div>
+		<div class="btns">
+			<button class="more" @click="onLoadMore">
+				<span>Load more</span>
+				<div><svg-icon name="refresh-single" size="24" /></div>
+			</button>
+			<button class="next" @click="emit('next')">Next</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['next'])
+	const list = ref([
+		{ id: 1, url: '/image/nuic/style-1.png', active: false },
+		{ id: 2, url: '/image/nuic/style-2.png', active: false },
+		{ id: 3, url: '/image/nuic/style-3.png', active: false },
+		{ id: 4, url: '/image/nuic/style-4.png', active: false },
+		{ id: 5, url: '/image/nuic/style-5.png', active: false },
+		{ id: 6, url: '/image/nuic/style-6.png', active: false },
+		{ id: 7, url: '/image/nuic/style-7.png', active: false },
+		{ id: 8, url: '/image/nuic/style-8.png', active: false }
+	])
+	const onLoadMore = () => {
+
+	}
+</script>
+
+<style lang="less" scoped>
+	.nuic-2 {
+		> .title {
+			font-weight: 500;
+			font-size: 4rem;
+			margin-bottom: 6rem;
+			> b {
+				font-size: 4.8rem;
+			}
+		}
+		> .list {
+			margin-bottom: 13rem;
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			user-select: none;
+			grid-gap: 3rem;
+			> div {
+				width: 21.9rem;
+				height: 21.9rem;
+				position: relative;
+				> img {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.6rem;
+				}
+				> .active {
+					position: absolute;
+					z-index: 1;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+					border-radius: 1.6rem;
+					border: 0.4rem solid #ff945e;
+					background: linear-gradient(
+						180deg,
+						rgba(255, 255, 255, 0) 0%,
+						rgba(255, 138, 140, 0.09) 68.75%,
+						#f98848 100%
+					);
+					display: flex;
+					flex-direction: column-reverse;
+					> span {
+						font-weight: 600;
+						font-size: 2rem;
+						color: #fff;
+						margin-bottom: 1rem;
+						text-shadow: 1px 1px 4.7px #d9692b;
+					}
+				}
+			}
+		}
+		> .btns {
+			> .more {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				>span{
+					margin-right: 1.2rem;
+				}
+				
+			}
+		}
+	}
+</style>

src/views/nuic/nuic-3.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="nuic-3">
+		<p class="title"><b>Where</b> are you based? What do you <b>do</b> ?</p>
+
+		<div class="select-item">
+			<div class="title">Based in</div>
+			<el-select v-model="data.based">
+				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value">
+				</el-option>
+			</el-select>
+		</div>
+		<div class="select-item">
+			<div class="title">Role</div>
+			<el-select v-model="data.based">
+				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value">
+				</el-option>
+			</el-select>
+		</div>
+		<div class="btns">
+			<button class="next" @click="emit('next')">All set!</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, reactive } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['next'])
+	const data = reactive({
+		basedList: [
+			{ value: '1', label: 'Student' },
+			{ value: '2', label: 'Teacher' },
+			{ value: '3', label: 'Parent' },
+			{ value: '4', label: 'Other' }
+		],
+		roleList: [
+			{ value: '1', label: 'Student' },
+			{ value: '2', label: 'Teacher' },
+			{ value: '3', label: 'Parent' },
+			{ value: '4', label: 'Other' }
+		],
+		based: '',
+		role: ''
+	})
+</script>
+
+<style lang="less" scoped>
+	.nuic-3 {
+		> .title {
+			font-weight: 500;
+			font-size: 4rem;
+			margin-bottom: 9.8rem;
+			> b {
+				font-size: 4.8rem;
+			}
+		}
+		> .select-item {
+			margin-bottom: 8rem;
+			width: 50rem;
+			text-align: left;
+			> .title {
+				margin-bottom: 3rem;
+				font-size: 3.6rem;
+				font-weight: 800;
+				color: #252727;
+			}
+			> .el-select {
+				width: 100%;
+				--el-border-radius-base: 0.8rem;
+				&::v-deep {
+					.el-select__wrapper {
+						min-height: auto;
+						height: 6rem;
+						font-size: 2rem;
+						padding: 0 1.8rem;
+					}
+				}
+			}
+		}
+		> .btns {
+			margin-top: 15.8rem;
+		}
+	}
+</style>