58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
<script setup>
|
||
const friends = [
|
||
{
|
||
name: '示例博客',
|
||
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo1',
|
||
url: 'https://example.com',
|
||
description: '这是一个示例博客'
|
||
},
|
||
{
|
||
name: '另一个博客',
|
||
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo2',
|
||
url: 'https://example2.com',
|
||
description: '这是另一个示例博客'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="mb-8">
|
||
<h1 class="text-3xl font-bold mb-4">友链</h1>
|
||
<div class="text-gray-600">友情链接</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<a v-for="friend in friends" :key="friend.name" :href="friend.url" target="_blank"
|
||
class="block bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-all">
|
||
<div class="flex items-center gap-4">
|
||
<img :src="friend.avatar" :alt="friend.name" class="w-16 h-16 rounded-full" />
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-1">{{ friend.name }}</h3>
|
||
<p class="text-gray-600 text-sm">{{ friend.description }}</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-12 bg-white rounded-lg shadow-sm p-6">
|
||
<h2 class="text-xl font-bold mb-4">申请友链</h2>
|
||
<p class="text-gray-600 mb-4">如果您想要申请友链，请确保您的网站满足以下条件：</p>
|
||
<ul class="list-disc list-inside text-gray-600 mb-6">
|
||
<li>网站内容合法合规</li>
|
||
<li>网站能够正常访问</li>
|
||
<li>网站已添加本站友链</li>
|
||
</ul>
|
||
<p class="text-gray-600">
|
||
符合条件的朋友可以通过以下格式发送邮件至
|
||
<a href="mailto:your@email.com" class="text-blue-600 hover:underline">your@email.com</a>：
|
||
</p>
|
||
<pre class="bg-gray-50 p-4 rounded-lg mt-4 text-sm">
|
||
名称：您的网站名称
|
||
简介：网站简介
|
||
链接：网站链接
|
||
头像：头像链接</pre>
|
||
</div>
|
||
</div>
|
||
</template>
|