61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Article, Company } from '~/data/mock'
|
|
|
|
const props = defineProps<{
|
|
article: Article
|
|
company?: Company
|
|
showCompany?: boolean
|
|
}>()
|
|
|
|
const company = computed(() => props.company ?? null)
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="`/news/${article.id}`"
|
|
class="group flex flex-col gap-2.5 rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-5 transition-colors"
|
|
>
|
|
<div class="flex items-center gap-2 text-xs text-dimmed">
|
|
<UBadge
|
|
:color="article.category === '行业资讯' ? 'primary' : article.category === '案例分享' ? 'info' : 'neutral'"
|
|
variant="soft"
|
|
size="sm"
|
|
>
|
|
{{ article.category }}
|
|
</UBadge>
|
|
<span class="flex items-center gap-1">
|
|
<UIcon
|
|
name="i-lucide-calendar"
|
|
class="size-3.5"
|
|
/>
|
|
{{ article.date }}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<UIcon
|
|
name="i-lucide-clock"
|
|
class="size-3.5"
|
|
/>
|
|
{{ article.readMinutes }} 分钟
|
|
</span>
|
|
</div>
|
|
|
|
<h3 class="font-semibold text-default leading-snug group-hover:text-primary transition-colors">
|
|
{{ article.title }}
|
|
</h3>
|
|
|
|
<p class="text-sm text-muted line-clamp-2">{{ article.summary }}</p>
|
|
|
|
<div
|
|
v-if="showCompany && company"
|
|
class="flex items-center gap-2 mt-auto pt-1"
|
|
>
|
|
<CompanyLogo
|
|
:name="company.name"
|
|
:color="company.color"
|
|
size="sm"
|
|
/>
|
|
<span class="text-sm text-toned truncate">{{ company.name }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|