67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { articles, articleCategories, getCompany } from '~/data/mock'
|
|
|
|
const activeCategory = ref('')
|
|
|
|
const sorted = computed(() =>
|
|
[...articles].sort((a, b) => b.date.localeCompare(a.date))
|
|
)
|
|
|
|
const filtered = computed(() =>
|
|
activeCategory.value
|
|
? sorted.value.filter(a => a.category === activeCategory.value)
|
|
: sorted.value
|
|
)
|
|
|
|
useSeoMeta({
|
|
title: '资讯 - 链通物流',
|
|
description: '物流行业运价走势、航线动态与企业实操案例分享，来自平台企业的真实内容。'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UPage>
|
|
<UPageHeader
|
|
headline="资讯"
|
|
title="行业动态与企业分享"
|
|
description="运价走势、航线动态、实操案例，来自平台物流企业的真实分享。"
|
|
/>
|
|
|
|
<UPageBody>
|
|
<UContainer>
|
|
<!-- 分类筛选 -->
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<UButton
|
|
label="全部"
|
|
:color="activeCategory === '' ? 'primary' : 'neutral'"
|
|
:variant="activeCategory === '' ? 'soft' : 'ghost'"
|
|
size="sm"
|
|
@click="activeCategory = ''"
|
|
/>
|
|
<UButton
|
|
v-for="category in articleCategories"
|
|
:key="category"
|
|
:label="category"
|
|
:color="activeCategory === category ? 'primary' : 'neutral'"
|
|
:variant="activeCategory === category ? 'soft' : 'ghost'"
|
|
size="sm"
|
|
@click="activeCategory = category"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<ArticleCard
|
|
v-for="article in filtered"
|
|
:key="article.id"
|
|
:article="article"
|
|
:company="getCompany(article.companySlug)"
|
|
show-company
|
|
/>
|
|
</div>
|
|
|
|
<div class="h-12" />
|
|
</UContainer>
|
|
</UPageBody>
|
|
</UPage>
|
|
</template>
|