99 lines
4.5 KiB
Vue
99 lines
4.5 KiB
Vue
<script setup lang="ts">
|
||
import { Icon } from '@iconify/vue'
|
||
import { siteConfig } from '~/config/site'
|
||
|
||
useSeoMeta({
|
||
title: `关于 - ${siteConfig.siteName}`,
|
||
description: `关于 ${siteConfig.siteName} 的介绍`,
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container mx-auto max-w-3xl px-4 py-12">
|
||
|
||
<div class="mb-12 text-center anim-fade-in-up">
|
||
<h1 class="mb-4 text-4xl font-bold">关于</h1>
|
||
<p class="text-lg text-muted-foreground">关于这个站点和我</p>
|
||
</div>
|
||
|
||
<!-- 站点介绍 -->
|
||
<div class="mb-8 anim-fade-in-up anim-delay-1">
|
||
<div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-4 text-xl font-semibold">关于本站</h2>
|
||
<div class="prose">
|
||
<p>欢迎来到 <strong>{{ siteConfig.siteName }}</strong>！这是一个专注于技术分享与实践的个人博客。</p>
|
||
<p>在这里，我会记录一些技术学习笔记、踩坑经验和项目实践，希望能帮到同样在学习路上的你。</p>
|
||
<p>本站基于 <a href="https://nuxt.com" target="_blank" rel="noopener noreferrer">Nuxt 3</a> 构建，使用 <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 作为样式方案，UI 参考了 <a href="https://2x.nz" target="_blank" rel="noopener noreferrer">二叉树树</a> 的设计，感谢大佬的开源精神！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术栈 -->
|
||
<div class="mb-8 anim-fade-in-up anim-delay-2">
|
||
<div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-4 text-xl font-semibold">技术栈</h2>
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||
<div v-for="tech in [
|
||
{ name: 'Nuxt 3', icon: 'simple-icons:nuxtdotjs', color: '#00DC82' },
|
||
{ name: 'Vue 3', icon: 'simple-icons:vuedotjs', color: '#4FC08D' },
|
||
{ name: 'TypeScript', icon: 'simple-icons:typescript', color: '#3178C6' },
|
||
{ name: 'Tailwind CSS', icon: 'simple-icons:tailwindcss', color: '#06B6D4' },
|
||
{ name: 'Nuxt Content', icon: 'mdi:file-document-outline', color: '#00DC82' },
|
||
{ name: 'Giscus', icon: 'simple-icons:github', color: '#333' },
|
||
{ name: 'Golang', icon: 'simple-icons:go', color: '#00ADD8' },
|
||
{ name: 'Erlang', icon: 'simple-icons:erlang', color: '#A90533' },
|
||
]" :key="tech.name"
|
||
class="flex items-center gap-2 rounded-lg p-3 transition-colors"
|
||
style="background: var(--color-bg-hover);"
|
||
>
|
||
<img
|
||
:src="`https://api.iconify.design/${tech.icon}.svg?color=${encodeURIComponent(tech.color)}`"
|
||
:alt="tech.name"
|
||
class="w-5 h-5"
|
||
/>
|
||
<span class="text-sm font-medium">{{ tech.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系方式 -->
|
||
<div class="mb-8 anim-fade-in-up anim-delay-3">
|
||
<div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-4 text-xl font-semibold">联系我</h2>
|
||
<p class="mb-4 text-sm text-muted-foreground">如果你有任何问题或建议，欢迎通过以下方式联系我：</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a
|
||
v-for="link in siteConfig.socialLinks"
|
||
:key="link.name"
|
||
:href="link.url"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-pill"
|
||
>
|
||
<img
|
||
:src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
|
||
:alt="link.name"
|
||
class="w-5 h-5"
|
||
/>
|
||
<span>{{ link.name }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 免责声明 -->
|
||
<div class="anim-fade-in-up anim-delay-4">
|
||
<div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-4 text-xl font-semibold">免责声明</h2>
|
||
<div class="prose">
|
||
<p>本站所有文章仅代表个人观点，与任何组织或公司无关。</p>
|
||
<p>本站部分内容来源于网络，如有侵权请联系删除。</p>
|
||
<p>本站提供的资源仅供参考学习，请于下载后 24 小时内删除。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|