From 846f92d2fe08ab9b8b14e8b949f00bb4529974d2 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 15:09:17 +0800
Subject: [PATCH] 导航栏优化
---
src/components/Card.tsx | 14 ++++++++------
1 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index d20e32d..988aae5 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -13,23 +13,25 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
return (
<motion.div
- whileHover={{ scale: 1.02 }}
+ whileHover={{ scale: 1.02, boxShadow: '0 10px 25px -5px rgba(0, 184, 212, 0.1), 0 10px 10px -5px rgba(0, 184, 212, 0.05)' }}
whileTap={{ scale: 0.98 }}
- className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer"
+ className="bg-white backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all"
onClick={onClick}
>
- <div className="relative h-48">
+ <div className="relative h-48 overflow-hidden">
+ <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)] to-transparent opacity-10 z-0"></div>
<Image
src={imageUrl}
alt={title}
fill
- className="object-contain p-4"
+ className="object-contain p-4 z-10"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
- <div className="p-4">
- <h3 className="text-lg font-semibold text-[#2F3C7E] mb-2">{title}</h3>
+ <div className="p-5 border-t border-[var(--ai-secondary)] border-opacity-10">
+ <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2">{title}</h3>
<p className="text-gray-600 text-sm">{description}</p>
+ <div className="mt-4 h-1 w-16 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)]"></div>
</div>
</motion.div>
);
--
Gitblit v1.9.3