118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
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>
|