129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<template>
|
|
<SettingsSection
|
|
:title="t('Settings.region.title')"
|
|
:description="t('Settings.region.description')"
|
|
>
|
|
<div class="region-row">
|
|
<div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
|
|
<div v-show="!isEditing" class="security-static field-box">
|
|
{{ displayLanguageLabel }}
|
|
</div>
|
|
<div v-show="isEditing" class="outlined-field select-field">
|
|
<el-select
|
|
:model-value="language"
|
|
:placeholder="t('Settings.region.selectLanguage')"
|
|
@update:model-value="emit('update:language', $event as LanguageValue)"
|
|
>
|
|
<el-option
|
|
v-for="item in languageOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="region-row">
|
|
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
|
<div v-show="!isEditing" class="security-static field-box">
|
|
{{ displayRegionLabel }}
|
|
</div>
|
|
<div v-show="isEditing" class="outlined-field select-field">
|
|
<el-select
|
|
:model-value="region"
|
|
:placeholder="t('Settings.region.selectRegion')"
|
|
@update:model-value="emit('update:region', $event as RegionValue)"
|
|
>
|
|
<el-option
|
|
v-for="item in regionOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</SettingsSection>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import SettingsSection from './SettingsSection.vue'
|
|
import type { LanguageValue, RegionValue, SettingOption } from '../types'
|
|
|
|
defineProps<{
|
|
language: LanguageValue
|
|
region: RegionValue
|
|
displayLanguageLabel: string
|
|
displayRegionLabel: string
|
|
isEditing: boolean
|
|
languageOptions: SettingOption<LanguageValue>[]
|
|
regionOptions: SettingOption<RegionValue>[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:language', value: LanguageValue): void
|
|
(event: 'update:region', value: RegionValue): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.field-text() {
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-size: 1.6rem;
|
|
line-height: 2.4rem;
|
|
color: #232323;
|
|
}
|
|
|
|
.field-frame() {
|
|
width: 100%;
|
|
min-height: 4rem;
|
|
border: 0.1rem solid #979797;
|
|
}
|
|
|
|
.control-wrapper() {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.region-row + .region-row {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.security-label {
|
|
margin-bottom: 0.8rem;
|
|
font-family: 'KaiseiOpti-Medium';
|
|
font-size: 1.4rem;
|
|
line-height: 2.4rem;
|
|
letter-spacing: 0.04em;
|
|
color: #585858;
|
|
}
|
|
|
|
.security-static,
|
|
.field-box {
|
|
.field-frame();
|
|
.field-text();
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.8rem 2rem;
|
|
}
|
|
|
|
.outlined-field {
|
|
.field-frame();
|
|
|
|
:deep(.el-select) {
|
|
width: 100%;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
:deep(.el-select__wrapper) {
|
|
.control-wrapper();
|
|
min-height: 4rem;
|
|
}
|
|
}
|
|
</style>
|