update all

pages/friends.vue

@@ -0,0 +1,57 @@
+<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>