52 lines
No EOL
1.1 KiB
Vue
52 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<client-only>
|
|
<el-breadcrumb separator="/" class="breadcrumbs">
|
|
<el-breadcrumb-item
|
|
v-for="(crumb, idx) in breadcrumbs"
|
|
:key="idx"
|
|
>
|
|
<nuxt-link-locale
|
|
v-if="idx !== breadcrumbs.length - 1"
|
|
:to="crumb.link"
|
|
class="breadcrumbs__link"
|
|
>
|
|
{{ crumb.text }}
|
|
</nuxt-link-locale>
|
|
<span v-else class="breadcrumbs__current">
|
|
{{ crumb.text }}
|
|
</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</client-only>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useBreadcrumbs} from '@composables/breadcrumbs';
|
|
|
|
const { breadcrumbs } = useBreadcrumbs();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.breadcrumbs {
|
|
background-color: #f8f8f8;
|
|
padding: 15px 250px 15px 50px;
|
|
line-height: 140%;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
|
&__link {
|
|
cursor: pointer !important;
|
|
transition: 0.2s;
|
|
color: $accent !important;
|
|
font-weight: 600 !important;
|
|
|
|
@include hover {
|
|
color: $accentDark !important;
|
|
}
|
|
}
|
|
|
|
&__current {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
}
|
|
</style> |