新用户信息收集

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>