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.base">
				<el-option
					class="el-select__option"
					v-for="v in data.baseList"
					: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="onNext">{{ $t('Nuic.allSet') }}</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const router = useRouter()
	const emit = defineEmits(['next'])
	const data = reactive({
		baseList: [
			{ label: t('Country.unitedStates'), value: 'United States' },
			{ label: t('Country.singapore'), value: 'Singapore' },
			{ label: t('Country.australia'), value: 'Australia' },
			{ label: t('Country.southKorea'), value: 'South Korea' },
			{ label: t('Country.china'), value: 'China' },
			{ label: t('Country.italy'), value: 'Italy' },
			{ label: t('Country.france'), value: 'France' },
			{ label: t('Country.japan'), value: 'Japan' },
			{ label: t('Country.canada'), value: 'Canada' },
			{ label: t('Country.germany'), value: 'Germany' }
		],
		roleList: [
			{ label: t('Role.designer'), value: 'Designer' },
			{ label: t('Role.student'), value: 'Student' },
			{ label: t('Role.teacher'), value: 'Teacher' },
			{ label: t('Role.parent'), value: 'Parent' },
			{ label: t('Role.other'), value: 'Other' }
		],
		base: 'China',
		role: 'Student'
	})
	const onNext = () => {
		const data_ = {
			base: data.base,
			role: data.role
		}
		emit('next', data_)
	}
</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;
			}
			&:deep(> .el-select) {
				width: 100%;
				--el-border-radius-base: 0.8rem;

				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>