RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2026-01-02 15:44:10 +08:00
parent 4a2a3f82fc
commit 8ee70869ec
7 changed files with 198 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/blog/card.vue
View File

@@ -7,6 +7,7 @@ interface Props {
image?: string;
alt?: string;
tags?: Array<string>;
categories?: Array<string>;
published?: boolean;
}
@@ -19,33 +20,44 @@ withDefaults(defineProps<Props>(), {
alt: "no-alt",
ogImage: "/blogs-img/blog.jpg",
tags: () => [],
categories: () => [],
published: false,
});
</script>
<template>
<article
class="group bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 m-2 overflow-hidden rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 text-zinc-700 dark:text-zinc-300">
<NuxtLink :to="path">
<div class="overflow-hidden">
class="group bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 overflow-hidden rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 text-zinc-700 dark:text-zinc-300 h-full flex flex-col">
<NuxtLink :to="path" class="flex flex-col h-full">
<div class="overflow-hidden aspect-video">
<NuxtImg
class="lg:h-48 md:h-36 w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
width="300"
class="h-full w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
:src="image"
:alt="alt" />
</div>
<div class="px-5 py-5">
<div class="px-5 py-5 flex flex-col flex-grow">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-xs font-medium text-zinc-500 dark:text-zinc-400">
<div
class="flex items-center text-sm font-medium text-zinc-500 dark:text-zinc-400 whitespace-nowrap flex-shrink-0">
<Icon name="mdi:calendar" class="mr-1.5 opacity-70 w-4 h-4" />
{{ date }}
</div>
<div class="flex items-center gap-1.5 flex-wrap">
<template v-for="tag in tags.slice(0, 2)" :key="tag">
<span
class="bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-violet-500/20">
{{ tag }}
</span>
<template v-if="categories && categories.length > 0">
<template v-for="category in categories.slice(0, 2)" :key="category">
<span
class="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-emerald-500/20">
{{ category }}
</span>
</template>
</template>
<template v-else>
<template v-for="tag in tags.slice(0, 2)" :key="tag">
<span
class="bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-violet-500/20">
{{ tag }}
</span>
</template>
</template>
</div>
</div>