135 lines
3.7 KiB
Vue
135 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { getArticle, getCompany, getLatestArticles } from '~/data/mock'
|
|
|
|
const route = useRoute()
|
|
|
|
const article = getArticle(route.params.id as string)
|
|
|
|
if (!article) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: '文章不存在',
|
|
fatal: true
|
|
})
|
|
}
|
|
|
|
const company = getCompany(article.companySlug)
|
|
const related = getLatestArticles(4).filter(a => a.id !== article.id).slice(0, 3)
|
|
|
|
useSeoMeta({
|
|
title: `${article.title} - 链通物流`,
|
|
description: article.summary,
|
|
ogTitle: article.title,
|
|
ogDescription: article.summary,
|
|
articlePublishedTime: article.date
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UPage>
|
|
<UPageBody>
|
|
<UContainer class="max-w-3xl">
|
|
<UBreadcrumb
|
|
:items="[{
|
|
label: '资讯',
|
|
to: '/news'
|
|
}, {
|
|
label: article.category
|
|
}]"
|
|
class="mb-6"
|
|
/>
|
|
|
|
<article v-if="article">
|
|
<!-- 文章头部 -->
|
|
<div class="flex items-center gap-2 mb-3 text-sm text-dimmed">
|
|
<UBadge
|
|
:color="article.category === '行业资讯' ? 'primary' : article.category === '案例分享' ? 'info' : 'neutral'"
|
|
variant="soft"
|
|
>
|
|
{{ article.category }}
|
|
</UBadge>
|
|
<span class="flex items-center gap-1">
|
|
<UIcon
|
|
name="i-lucide-calendar"
|
|
class="size-4"
|
|
/>
|
|
{{ article.date }}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<UIcon
|
|
name="i-lucide-clock"
|
|
class="size-4"
|
|
/>
|
|
{{ article.readMinutes }} 分钟阅读
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-highlighted leading-tight mb-8">
|
|
{{ article.title }}
|
|
</h1>
|
|
|
|
<!-- 内容 -->
|
|
<div class="space-y-5 text-default leading-relaxed">
|
|
<p
|
|
v-for="(paragraph, i) in article.content"
|
|
:key="i"
|
|
>
|
|
{{ paragraph }}
|
|
</p>
|
|
</div>
|
|
|
|
<USeparator class="my-10" />
|
|
|
|
<!-- 来源企业 -->
|
|
<NuxtLink
|
|
v-if="company"
|
|
:to="`/company/${company.slug}`"
|
|
class="flex items-center gap-3 rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-4 transition-colors"
|
|
>
|
|
<CompanyLogo
|
|
:name="company.name"
|
|
:color="company.color"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-dimmed">发布自</p>
|
|
<p class="font-semibold text-default truncate">{{ company.name }}</p>
|
|
</div>
|
|
<UBadge
|
|
v-if="company.verified"
|
|
icon="i-lucide-badge-check"
|
|
color="primary"
|
|
variant="soft"
|
|
>
|
|
认证企业
|
|
</UBadge>
|
|
<UIcon
|
|
name="i-lucide-arrow-right"
|
|
class="size-5 text-muted"
|
|
/>
|
|
</NuxtLink>
|
|
|
|
<!-- 相关阅读 -->
|
|
<div
|
|
v-if="related.length"
|
|
class="mt-10"
|
|
>
|
|
<h2 class="font-semibold text-highlighted mb-4">
|
|
相关阅读
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<ArticleCard
|
|
v-for="rel in related"
|
|
:key="rel.id"
|
|
:article="rel"
|
|
:company="getCompany(rel.companySlug)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<div class="h-12" />
|
|
</UContainer>
|
|
</UPageBody>
|
|
</UPage>
|
|
</template>
|