132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
import type { NavigationMenuItem } from '@nuxt/ui'
|
||
|
||
// 平台门户布局：平台导航全站常驻 + 平台页脚（企业空间亦使用本布局，导航不消失）
|
||
const navItems = computed<NavigationMenuItem[]>(() => [
|
||
{ label: '首页', to: '/', icon: 'i-lucide-home' },
|
||
{ label: '企业目录', to: '/directory', icon: 'i-lucide-building-2' },
|
||
{ label: '资讯', to: '/news', icon: 'i-lucide-newspaper' }
|
||
])
|
||
|
||
const title = '链通物流 - 物流企业连接平台'
|
||
const description = '物流企业的目录、内容与沟通网络。按航线与服务类型查找物流服务商，浏览企业动态与行业资讯，与企业直接建立联系。'
|
||
|
||
const searchKeyword = ref('')
|
||
|
||
function goToDirectory() {
|
||
const keyword = searchKeyword.value.trim()
|
||
navigateTo(keyword ? `/directory?q=${encodeURIComponent(keyword)}` : '/directory')
|
||
}
|
||
|
||
useSeoMeta({
|
||
title,
|
||
description,
|
||
ogTitle: title,
|
||
ogDescription: description,
|
||
twitterCard: 'summary_large_image'
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<UHeader>
|
||
<template #title>
|
||
<NuxtLink
|
||
to="/"
|
||
class="flex items-center gap-2 font-bold text-highlighted text-lg"
|
||
>
|
||
<UIcon
|
||
name="i-lucide-ship"
|
||
class="size-6 text-primary"
|
||
/>
|
||
<span>链通物流</span>
|
||
</NuxtLink>
|
||
</template>
|
||
|
||
<UNavigationMenu
|
||
:items="navItems"
|
||
:ui="{ item: 'font-semibold' }"
|
||
/>
|
||
|
||
<template #right>
|
||
<UColorModeButton />
|
||
|
||
<UInput
|
||
v-model="searchKeyword"
|
||
icon="i-lucide-search"
|
||
placeholder="搜索企业…"
|
||
size="sm"
|
||
class="w-40 hidden lg:block"
|
||
aria-label="搜索企业"
|
||
@keydown.enter="goToDirectory"
|
||
/>
|
||
<UButton
|
||
icon="i-lucide-search"
|
||
color="neutral"
|
||
variant="ghost"
|
||
to="/directory"
|
||
class="lg:hidden"
|
||
aria-label="搜索企业"
|
||
/>
|
||
<UButton
|
||
icon="i-lucide-message-circle"
|
||
color="neutral"
|
||
variant="ghost"
|
||
disabled
|
||
aria-label="消息（示例阶段未开放）"
|
||
/>
|
||
<UButton
|
||
label="入驻平台"
|
||
to="/directory"
|
||
icon="i-lucide-plus"
|
||
/>
|
||
</template>
|
||
|
||
<template #body>
|
||
<UNavigationMenu
|
||
:items="navItems"
|
||
orientation="vertical"
|
||
class="-mx-2.5"
|
||
/>
|
||
<div class="flex flex-row gap-2 mt-4">
|
||
<UButton
|
||
label="入驻平台"
|
||
to="/directory"
|
||
icon="i-lucide-plus"
|
||
class="flex-1"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</UHeader>
|
||
|
||
<UMain>
|
||
<slot />
|
||
</UMain>
|
||
|
||
<UFooter>
|
||
<template #left>
|
||
<p class="text-sm text-muted">
|
||
链通物流 · 物流企业连接平台 © {{ new Date().getFullYear() }}
|
||
</p>
|
||
</template>
|
||
|
||
<template #right>
|
||
<UButton
|
||
to="/directory"
|
||
label="企业目录"
|
||
color="neutral"
|
||
variant="ghost"
|
||
size="sm"
|
||
/>
|
||
<UButton
|
||
to="/news"
|
||
label="行业资讯"
|
||
color="neutral"
|
||
variant="ghost"
|
||
size="sm"
|
||
/>
|
||
</template>
|
||
</UFooter>
|
||
</div>
|
||
</template>
|