45 lines
4.0 KiB
Vue
45 lines
4.0 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>
|
||
<p class="text-gray-600 mb-4">在不停学习中~</p>
|
||
<div class="flex justify-center md:justify-start space-x-4">
|
||
<a href="https://github.com/yourusername" target="_blank"
|
||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||
<svg class="h-6 w-6 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://space.bilibili.com/yourid" target="_blank"
|
||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||
<svg class="h-6 w-6 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="mailto:your@email.com"
|
||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||
<svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-sm p-8">
|
||
<h2 class="text-2xl font-bold mb-6">关于我</h2>
|
||
<div class="prose max-w-none">
|
||
<p>这里是一段关于我的介绍，你可以写一些个人经历、兴趣爱好等。</p>
|
||
<p>支持 Markdown 格式，可以自由发挥～</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|