63 lines
2.0 KiB
Vue
63 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import type { Company } from '~/data/mock'
|
||
|
||
const props = defineProps<{
|
||
company: Company
|
||
}>()
|
||
|
||
const route = useRoute()
|
||
|
||
// 企业空间的纯导航（平台导航收敛为左端一个弱化入口，栏内不显示公司信息）
|
||
const tabs = computed(() => [
|
||
{ label: '主页', to: `/company/${props.company.slug}` },
|
||
{ label: '关于', to: `/company/${props.company.slug}/about` },
|
||
{ label: '服务', to: `/company/${props.company.slug}/services` },
|
||
{ label: '新闻', to: `/company/${props.company.slug}/articles` },
|
||
{ label: '联系', to: `/company/${props.company.slug}/contact` }
|
||
])
|
||
|
||
const homePath = computed(() => `/company/${props.company.slug}`)
|
||
|
||
function isActive(tab: { to: string }): boolean {
|
||
if (tab.to === homePath.value) {
|
||
return route.path === homePath.value
|
||
}
|
||
return route.path.startsWith(tab.to)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="sticky top-0 z-50 border-b border-default bg-elevated/90 backdrop-blur">
|
||
<UContainer class="max-w-6xl">
|
||
<div class="flex items-center justify-between gap-4 h-14">
|
||
<!-- 平台入口：极简弱化，仅一个返回平台的低调入口，让企业页更“纯” -->
|
||
<div class="flex items-center shrink-0">
|
||
<UButton
|
||
to="/"
|
||
icon="i-lucide-ship"
|
||
label="链通物流"
|
||
color="neutral"
|
||
variant="ghost"
|
||
size="sm"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 企业菜单：纯导航，栏内不显示公司信息 -->
|
||
<nav class="flex gap-1 overflow-x-auto">
|
||
<NuxtLink
|
||
v-for="tab in tabs"
|
||
:key="tab.to"
|
||
:to="tab.to"
|
||
class="flex items-center gap-1.5 px-3.5 py-3 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors"
|
||
:class="isActive(tab)
|
||
? 'border-primary text-primary'
|
||
: 'border-transparent text-muted hover:text-default hover:border-muted'"
|
||
>
|
||
{{ tab.label }}
|
||
</NuxtLink>
|
||
</nav>
|
||
</div>
|
||
</UContainer>
|
||
</div>
|
||
</template>
|