FiDA_Front/src/views/nuic/nuic-3.vue

<template>
	<div class="nuic-3">
		<p class="title" v-html="$t('Nuic.nuic3Title')"></p>

		<div class="select-item">
			<div class="title">{{ $t('Nuic.basedIn') }}</div>
			<el-select v-model="data.based">
				<el-option
					class="el-select__option"
					v-for="v in data.basedList"
					:key="v.value"
					:label="v.label"
					:value="v.value"
				/>
			</el-select>
		</div>
		<div class="select-item">
			<div class="title">{{ $t('Nuic.role') }}</div>
			<el-select v-model="data.role">
				<el-option
					class="el-select__option"
					v-for="v in data.roleList"
					:key="v.value"
					:label="v.label"
					:value="v.value"
				/>
			</el-select>
		</div>
		<div class="btns">
			<button class="next" @click="emit('next')">{{ $t('Nuic.allSet') }}</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;
			&:deep(b) {
				font-size: 4.8rem;
				font-family: MBold;
			}
		}
		> .select-item {
			margin-bottom: 8rem;
			width: 50rem;
			text-align: left;
			> .title {
				margin-bottom: 1.5rem;
				font-size: 3.6rem;
				font-weight: 800;
				color: #252727;
				font-family: LBold;
			}
			> .el-select {
				width: 100%;
				--el-border-radius-base: 0.8rem;
				&:deep {
					font-family: Regular;
					.el-select__wrapper {
						min-height: auto;
						height: 6rem;
						font-size: 2rem;
						padding: 0 1.8rem;
					}
				}
			}
		}
		> .btns {
			margin-top: 15.8rem;
		}
	}

	.el-select__option {
		padding: 0 1.8rem;
	}
</style>