105 lines
2.1 KiB
Vue
105 lines
2.1 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.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;
|
|
&::v-deep > b {
|
|
font-size: 4.8rem;
|
|
font-family: Migra-Extrabold;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
> .select-item {
|
|
margin-bottom: 8rem;
|
|
width: 50rem;
|
|
text-align: left;
|
|
> .title {
|
|
margin-bottom: 3rem;
|
|
font-size: 3.6rem;
|
|
font-weight: 800;
|
|
color: #252727;
|
|
font-family: Migra-Extrabold;
|
|
font-style: italic;
|
|
}
|
|
> .el-select {
|
|
width: 100%;
|
|
--el-border-radius-base: 0.8rem;
|
|
&::v-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>
|