Refactor friends page layout and styles
This commit is contained in:
mckero authored and 
GitHub committed
1 parent
880ed4632b
commit
51fde55958
1 file changed
+42
-24
+42
-24
@@ -2,7 +2,6 @@
|
|||||||
import MainGridLayout from "@layouts/MainGridLayout.astro";
|
import MainGridLayout from "@layouts/MainGridLayout.astro";
|
||||||
import { Icon } from "astro-icon/components";
|
import { Icon } from "astro-icon/components";
|
||||||
|
|
||||||
// 1. 这里是数据区，以后要加友链，就在这里加！
|
|
||||||
const friends = [
|
const friends = [
|
||||||
{
|
{
|
||||||
name: "Ad_closeNN の Blog",
|
name: "Ad_closeNN の Blog",
|
||||||
@@ -68,37 +67,55 @@ const friends = [
|
|||||||
---
|
---
|
||||||
|
|
||||||
<MainGridLayout title="友链">
|
<MainGridLayout title="友链">
|
||||||
<!-- 页面头部 -->
|
<!-- 头部 -->
|
||||||
<div class="flex items-center gap-4 mb-8 mt-4 px-2">
|
<div class="flex items-center gap-4 mb-8 mt-4 px-2">
|
||||||
<div class="avatar placeholder">
|
<div class="avatar">
|
||||||
<div class="bg-primary text-primary-content rounded-xl w-14 shadow-lg">
|
<!-- 使用主题的主色调 (bg-primary) -->
|
||||||
|
<div class="bg-[var(--primary)] text-white rounded-xl w-14 flex items-center justify-center shadow-lg">
|
||||||
<Icon name="material-symbols:diversity-3" class="text-3xl" />
|
<Icon name="material-symbols:diversity-3" class="text-3xl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-3xl font-bold text-base-content">我的朋友们</h1>
|
<h1 class="text-3xl font-bold text-[var(--primary)]">我的朋友们</h1>
|
||||||
<p class="text-base-content/60 mt-1">在这里发现更多有趣的世界</p>
|
<p class="opacity-60 mt-1">在这里发现更多有趣的世界</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 友链卡片网格 -->
|
<!-- 卡片网格 -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||||
{
|
{
|
||||||
friends.map((friend) => (
|
friends.map((friend) => (
|
||||||
<a
|
<a
|
||||||
href={friend.url}
|
href={friend.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="card bg-base-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200"
|
class="group relative block"
|
||||||
>
|
>
|
||||||
<div class="card-body p-5 flex flex-row items-center gap-4">
|
<!-- 关键修改：使用了 card-base 类
|
||||||
<div class="avatar">
|
这是 Fuwari 全局定义的类，它会自动处理：
|
||||||
<div class="w-14 mask mask-squircle bg-base-200">
|
1. 白天/黑夜背景色
|
||||||
<img src={friend.avatar} loading="lazy" alt={friend.name} />
|
2. 透明度
|
||||||
|
3. 边框颜色
|
||||||
|
-->
|
||||||
|
<div class="card-base flex items-center gap-4 p-4 rounded-xl transition-all duration-300
|
||||||
|
hover:scale-[1.02] hover:shadow-lg
|
||||||
|
border border-black/5 dark:border-white/5">
|
||||||
|
|
||||||
|
<!-- 头像 -->
|
||||||
|
<div class="avatar flex-shrink-0">
|
||||||
|
<div class="w-16 h-16 rounded-full overflow-hidden shadow-sm">
|
||||||
|
<img src={friend.avatar} loading="lazy" alt={friend.name} class="object-cover w-full h-full bg-white" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 文字信息 -->
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<h3 class="card-title text-base font-bold truncate text-base-content">{friend.name}</h3>
|
<!-- text-75 是 Fuwari 的常用透明度写法，或者直接用 opacity -->
|
||||||
<p class="text-xs text-base-content/60 line-clamp-2 mt-1">{friend.desc}</p>
|
<h3 class="text-lg font-bold truncate group-hover:text-[var(--primary)] transition-colors">
|
||||||
|
{friend.name}
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm opacity-60 line-clamp-2 mt-1">
|
||||||
|
{friend.desc}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@@ -106,19 +123,20 @@ const friends = [
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 申请友链区域 -->
|
<!-- 底部申请框 -->
|
||||||
<div class="alert shadow-lg bg-base-100 border-l-4 border-primary">
|
<!-- 同样使用了 card-base 保持统一风格 -->
|
||||||
<Icon name="material-symbols:add-link" class="text-2xl text-primary" />
|
<div class="card-base rounded-xl p-6 flex items-center gap-4 border border-black/5 dark:border-white/5">
|
||||||
<div>
|
<div class="p-3 bg-[var(--primary)] text-white rounded-full">
|
||||||
<h3 class="font-bold">想交换友链？</h3>
|
<Icon name="material-symbols:add-link" class="text-2xl" />
|
||||||
<div class="text-sm opacity-80">
|
</div>
|
||||||
欢迎互换友链。请确保您的网站可以正常访问。
|
<div class="flex-1">
|
||||||
</div>
|
<h3 class="font-bold text-[var(--primary)]">想交换友链？</h3>
|
||||||
|
<p class="text-sm opacity-60">欢迎优秀博客互换友链。</p>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/MCKero6423/fuwari/blob/main/src/pages/friends.astro"
|
href="https://github.com/MCKero6423/fuwari/blob/main/src/pages/friends.astro"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="btn btn-sm btn-primary"
|
class="px-4 py-2 bg-[var(--primary)] hover:brightness-110 text-white text-sm font-bold rounded-lg transition-all"
|
||||||
>
|
>
|
||||||
提交申请
|
提交申请
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in new issue
Block a user