72 lines
3.2 KiB
Vue
72 lines
3.2 KiB
Vue
<template>
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- 个人信息卡片 -->
|
|
<div class="bg-white rounded-2xl shadow-sm p-8 mb-8">
|
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
|
<div class="w-48 h-48 rounded-full overflow-hidden">
|
|
<img src="/avatar.jpg" alt="头像" class="w-full h-full object-cover"
|
|
onerror="this.src='https://api.dicebear.com/7.x/adventurer/svg?seed=custom'"/>
|
|
</div>
|
|
<div class="flex-1 text-center md:text-left">
|
|
<h1 class="text-3xl font-bold mb-4">ZiBright</h1>
|
|
<div class="text-lg text-gray-600 mb-6">这里是我的博客</div>
|
|
<div class="flex justify-center md:justify-start gap-4">
|
|
<NuxtLink to="/about" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
|
|
<span>关于我</span>
|
|
</NuxtLink>
|
|
<NuxtLink to="/friends" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
|
|
<span>朋友们</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最新文章 -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-bold">最新文章</h2>
|
|
<NuxtLink to="/articles" class="text-gray-600 hover:text-gray-900">
|
|
查看全部 →
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="grid gap-6">
|
|
<ContentList path="/" :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
|
|
<div v-for="article in list.slice(0, 5)" :key="article._path"
|
|
class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
<NuxtLink :to="article._path" class="block group">
|
|
<div class="flex justify-between items-start gap-4">
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-2 group-hover:text-blue-600 transition-colors">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-2">{{ article.description }}</p>
|
|
<div class="flex items-center text-sm text-gray-500 gap-4">
|
|
<span>
|
|
{{ new Date(article.date).toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
}) }}
|
|
</span>
|
|
<span v-if="article.tags" class="flex gap-2">
|
|
<span v-for="tag in article.tags" :key="tag"
|
|
class="px-2 py-1 bg-gray-100 rounded-full text-xs">
|
|
{{ tag }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="article.cover" class="flex-shrink-0">
|
|
<img :src="article.cover" :alt="article.title"
|
|
class="w-32 h-24 object-cover rounded-lg" />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</ContentList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|