150 lines
4.7 KiB
Vue
150 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import { companies, getLatestArticles, getCompany } from '~/data/mock'
|
|
|
|
const latestCompanies = companies.slice(0, 3)
|
|
const latestArticles = getLatestArticles(3)
|
|
|
|
const stats = [
|
|
{ label: '入驻物流企业', value: `${companies.length * 37}+` },
|
|
{ label: '覆盖航线', value: '8 大航线' },
|
|
{ label: '行业资讯文章', value: `${companies.length * 26}+` },
|
|
{ label: '认证企业占比', value: '85%' }
|
|
]
|
|
|
|
useSeoMeta({
|
|
title: '链通物流 - 物流企业连接平台',
|
|
description: '按航线与服务类型查找物流服务商，浏览企业动态与行业资讯，与物流企业直接建立联系。'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UPageHero
|
|
title="找到你的下一位物流合作伙伴"
|
|
description="链通物流是物流企业的目录、内容与沟通网络。按航线、服务类型与地区查找认证物流服务商，浏览企业动态与行业资讯，在线建立联系。"
|
|
:links="[{
|
|
label: '浏览企业目录',
|
|
to: '/directory',
|
|
icon: 'i-lucide-search',
|
|
size: 'xl'
|
|
}, {
|
|
label: '入驻平台',
|
|
to: '/directory',
|
|
color: 'neutral',
|
|
variant: 'subtle',
|
|
icon: 'i-lucide-building-2',
|
|
size: 'xl'
|
|
}]"
|
|
/>
|
|
|
|
<!-- 平台数据 -->
|
|
<UPageSection
|
|
:ui="{
|
|
container: 'py-8 sm:py-10',
|
|
title: 'sr-only',
|
|
description: 'sr-only'
|
|
}"
|
|
title="平台数据"
|
|
>
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="stat in stats"
|
|
:key="stat.label"
|
|
class="flex flex-col items-center gap-1 rounded-lg bg-elevated ring ring-default py-6"
|
|
>
|
|
<span class="text-2xl sm:text-3xl font-bold text-primary">{{ stat.value }}</span>
|
|
<span class="text-sm text-muted">{{ stat.label }}</span>
|
|
</div>
|
|
</div>
|
|
</UPageSection>
|
|
|
|
<!-- 平台价值 -->
|
|
<UPageSection
|
|
headline="为什么选择链通物流"
|
|
title="一个平台，连接整个物流行业"
|
|
description="从发现到建立联系，物流企业间的合作在这里完成。"
|
|
:features="[{
|
|
icon: 'i-lucide-search',
|
|
title: '精准发现',
|
|
description: '按航线、服务类型、地区与认证状态筛选，快速定位匹配的物流服务商。'
|
|
}, {
|
|
icon: 'i-lucide-file-text',
|
|
title: '内容与实力背书',
|
|
description: '企业空间 + 行业资讯与案例分享，让合作决策有据可依。'
|
|
}, {
|
|
icon: 'i-lucide-messages-square',
|
|
title: '直接建立联系',
|
|
description: '站内私信与行业群聊，从「找到对方」到「谈成合作」一站完成。'
|
|
}, {
|
|
icon: 'i-lucide-badge-check',
|
|
title: '平台认证',
|
|
description: '营业执照审核认证体系，降低企业间合作的信任成本。'
|
|
}]"
|
|
/>
|
|
|
|
<!-- 最新入驻企业 -->
|
|
<UPageSection
|
|
headline="企业目录"
|
|
title="最新入驻企业"
|
|
description="来自全国各地的海运、空运、铁路与跨境物流服务商。"
|
|
:ui="{ container: 'py-8 sm:py-12' }"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<CompanyCard
|
|
v-for="company in latestCompanies"
|
|
:key="company.slug"
|
|
:company="company"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<UButton
|
|
to="/directory"
|
|
label="查看全部企业"
|
|
trailing-icon="i-lucide-arrow-right"
|
|
color="neutral"
|
|
variant="outline"
|
|
/>
|
|
</div>
|
|
</UPageSection>
|
|
|
|
<!-- 最新资讯 -->
|
|
<UPageSection
|
|
headline="资讯"
|
|
title="行业动态与企业分享"
|
|
description="运价走势、航线动态、实操案例，来自平台企业的真实分享。"
|
|
:ui="{ container: 'py-8 sm:py-12' }"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<ArticleCard
|
|
v-for="article in latestArticles"
|
|
:key="article.id"
|
|
:article="article"
|
|
:company="getCompany(article.companySlug)"
|
|
show-company
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<UButton
|
|
to="/news"
|
|
label="浏览全部资讯"
|
|
trailing-icon="i-lucide-arrow-right"
|
|
color="neutral"
|
|
variant="outline"
|
|
/>
|
|
</div>
|
|
</UPageSection>
|
|
|
|
<UPageCTA
|
|
title="让物流同行找到你"
|
|
description="创建企业空间，发布服务与文章，被需要你的客户与同行看见。"
|
|
:links="[{
|
|
label: '入驻平台',
|
|
to: '/directory',
|
|
icon: 'i-lucide-building-2'
|
|
}]"
|
|
/>
|
|
</div>
|
|
</template>
|