estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加blog首页列表

Browse Source
This commit is contained in:
estel
2025-08-07 15:00:06 +08:00
parent 4c8334b7bd
commit 0beda86667
1 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/components/blog/indexBlog.vue
View File

@@ -37,56 +37,60 @@ const formatDate = (date: string | Date | null | undefined) => {
<template>
<div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
<div class="max-w-4xl mx-auto px-4 py-8">
<!-- 页面标题 -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
博客文章
</h1>
<p class="text-gray-600 dark:text-gray-400">
分享技术见解和心得体会
</p>
</div>
<div class="max-w-4xl mx-auto ">
<!-- 文章列表 -->
<div class="space-y-6">
<div class="space-y-6 w-full">
<NuxtLink
v-for="item in articles"
:key="item.path"
:to="item.path"
class="block"
class="block w-full"
>
<article
class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-all duration-200 cursor-pointer group"
class="pr-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-all duration-200 cursor-pointer group"
>
<!-- 文章头部 -->
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{{ item.title }}
</h2>
<!-- 文章描述 -->
<p
v-if="item.description"
class="text-gray-600 dark:text-gray-300 text-sm mb-3 line-clamp-2"
>
{{ item.description }}
</p>
<!-- 文章内容布局 -->
<div class="flex flex-row">
<!-- 图片预览区域 -->
<div class="md:w-48 h-32 w-32 mt-2 ml-2 mb-2 md:mr-2 -mr-1 bg-gray-100 dark:bg-gray-700 rounded-xl overflow-hidden">
<img
:src="item.img || '/images/default-blog.jpg'"
:alt="item.title"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
</div>
<!-- 文字内容区域 -->
<div class="flex-1 p-4 md:p-6">
<!-- 文章头部 -->
<div class="mb-4">
<h2 class="md:text-2xl text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{{ item.title }}
</h2>
</div>
<!-- 文章描述 -->
<p
v-if="item.description"
class="text-gray-600 dark:text-gray-300 md:text-sm text-xs line-clamp-2"
>
{{ item.description }}
</p>
</div>
<!-- 文章元信息 -->
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-4">
<!-- 文章时间 -->
<div class="flex items-center gap-1">
<UIcon
name="lucide-clock"
size="14"
/>
<span>{{ formatDate(item.date) }}</span>
<!-- 文章元信息 -->
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-4">
<!-- 文章时间 -->
<div class="flex items-center gap-1">
<UIcon
name="lucide-clock"
size="14"
/>
<span>{{ formatDate(item.date) }}</span>
</div>
</div>
</div>
</div>
</div>