修改分享到微信按钮至HeaderLinks

组件.  并修改博客文章头样式,加入日期显示
This commit is contained in:
2025-08-10 16:01:03 +08:00
parent 85863cb249
commit c557e6980c
5 changed files with 117 additions and 40 deletions

View File

@@ -2,7 +2,7 @@
import { useSeoMeta } from '#imports'
definePageMeta({
layout: 'docs'
layout: 'default'
})
useSeoMeta({
@@ -14,18 +14,18 @@ useSeoMeta({
</script>
<template>
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<div class="px-4 py-3 md:py-6 bg-gradient-to-b from-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<!-- Hero 区域 -->
<div class="max-w-6xl mx-auto px-4 py-20">
<div class="max-w-6xl mx-auto py-1">
<!-- 主要内容 -->
<div class="text-center mb-16">
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
<div class="text-center mb-8 md:mb-16">
<h1 class="text-4xl md:text-7xl font-bold text-gray-900 dark:text-white mb-3 md:mb-6">
Estel Hub
</h1>
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-4 md:mb-8 max-w-3xl mx-auto">
简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
</p>
<p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
<p class="md:text-lg text-sm text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
基于 Nuxt 4 构建支持 Markdown 文档管理和博客发布提供完整的现代化内容管理解决方案
</p>
</div>
@@ -35,10 +35,10 @@ useSeoMeta({
<!-- 文档系统 -->
<NuxtLink
to="/docs"
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
>
<div class="text-center">
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
<div class="w-12 h-12 md:w-16 md:h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
<UIcon
name="lucide-book-open"
class="text-3xl text-blue-600 dark:text-blue-400"
@@ -47,8 +47,8 @@ useSeoMeta({
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
文档系统
</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">
技术文档API 文档使用指南一切尽在掌握
<p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
技术文档API 文档使用指南
</p>
<div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
<span class="mr-2">开始阅读</span>
@@ -63,10 +63,10 @@ useSeoMeta({
<!-- 博客系统 -->
<NuxtLink
to="/blog"
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
>
<div class="text-center">
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
<div class="w-12 md:w-16 h-12 md:h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
<UIcon
name="lucide-pen-tool"
class="text-3xl text-green-600 dark:text-green-400"
@@ -75,8 +75,8 @@ useSeoMeta({
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
博客系统
</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">
技术分享心得体会生活感悟记录每一个精彩瞬间
<p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
技术分享心得体会生活感悟
</p>
<div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
<span class="mr-2">开始阅读</span>