65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<template>
|
|
<div class="page-tab">
|
|
<el-segmented
|
|
v-model="activeTab"
|
|
class="segmented"
|
|
:options="options"
|
|
block
|
|
size="large"
|
|
@change="handleSegmentedChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const activeTab = ref(props.modelValue || '');
|
|
const options = [
|
|
{ label: $t('navigation.support'), value: '' },
|
|
{ label: $t('navigation.faq'), value: 'faq' },
|
|
{ label: $t('navigation.documents'), value: 'documents' },
|
|
{ label: $t('navigation.contact-info'), value: 'contact-us' },
|
|
];
|
|
|
|
const handleSegmentedChange = (value: string) => {
|
|
const localePath = useLocalePath();
|
|
navigateTo(localePath(`/support/${value}`));
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.segmented {
|
|
--el-segmented-bg-color: transparent;
|
|
--el-segmented-item-active-color: var(--el-color-primary);
|
|
--el-segmented-item-color: var(--el-text-color-secondary);
|
|
--el-segmented-item-hover-color: var(--el-color-primary);
|
|
--el-segmented-item-border-color: transparent;
|
|
--el-segmented-item-active-border-color: transparent;
|
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
}
|
|
|
|
.segmented :deep(.el-segmented__item-selected) {
|
|
/* --el-border-radius-base: 16px; */
|
|
transition: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.segmented :deep(.el-segmented__item) {
|
|
&:hover {
|
|
background: transparent;
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
&.is-selected {
|
|
color: var(--el-color-primary-dark-2);
|
|
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
|
}
|
|
}
|
|
</style>
|