From d38a3ae95ce1ca3d736ec0f88f17973fa0d5a914 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 05 六月 2025 13:10:08 +0800
Subject: [PATCH] 页面调整优化
---
src/components/Card.tsx | 60 ++++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 44 insertions(+), 16 deletions(-)
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index d20e32d..97adf32 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -13,23 +13,51 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
return (
<motion.div
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
- className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer"
- onClick={onClick}
+ initial={{ opacity: 0, y: 20 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, margin: "-100px" }}
+ transition={{ duration: 0.5 }}
+ className="h-full"
>
- <div className="relative h-48">
- <Image
- src={imageUrl}
- alt={title}
- fill
- className="object-contain p-4"
- 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>
- <p className="text-gray-600 text-sm">{description}</p>
+ <div
+ onClick={onClick}
+ className="group cursor-pointer h-full flex flex-col bg-white/5 backdrop-blur-sm rounded-xl border border-[var(--ai-secondary)]/10 overflow-hidden transition-all duration-300 hover:shadow-[0_0_20px_rgba(106,219,255,0.15)] hover:border-[var(--ai-secondary)]/30 hover:translate-y-[-2px]"
+ >
+ {/* 鍥剧墖瀹瑰櫒 - 鍥哄畾楂樺害 */}
+ <div className="relative h-[200px] overflow-hidden">
+ <img
+ src={imageUrl}
+ alt={title}
+ className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+ />
+ {/* 鍥剧墖閬僵灞� */}
+ <div className="absolute inset-0 bg-gradient-to-t from-[#131C41]/80 to-transparent opacity-60"></div>
+
+ {/* 瑁呴グ鎬ц竟瑙� */}
+ <div className="absolute top-3 right-3 w-8 h-8 border-t-2 border-r-2 border-[var(--ai-secondary)]/50 opacity-70"></div>
+ <div className="absolute bottom-3 left-3 w-8 h-8 border-b-2 border-l-2 border-[var(--ai-secondary)]/50 opacity-70"></div>
+ </div>
+
+ {/* 鍐呭鍖哄煙 - 鍥哄畾楂樺害 */}
+ <div className="flex flex-col flex-grow p-6">
+ {/* 鏍囬 */}
+ <h3 className="text-xl font-semibold text-[var(--ai-primary)] mb-3 relative">
+ {title}
+ <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] group-hover:w-full transition-all duration-300 ease-out"></div>
+ </h3>
+
+ {/* 鎻忚堪鏂囧瓧 - 鍥哄畾楂樺害锛岃秴鍑烘樉绀虹渷鐣ュ彿 */}
+ <p className="text-gray-200 text-sm line-clamp-3 mb-4 transition-colors duration-300 group-hover:text-gray-400">{description}</p>
+
+ {/* 搴曢儴瑁呴グ */}
+ <div className="mt-auto flex items-center justify-between">
+ <div className="h-1 w-12 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] transform origin-left scale-x-100 group-hover:scale-x-125 transition-transform duration-300"></div>
+
+ <span className="text-[var(--ai-secondary)] text-sm font-medium opacity-0 transform translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
+ 浜嗚В璇︽儏 鈫�
+ </span>
+ </div>
+ </div>
</div>
</motion.div>
);
--
Gitblit v1.9.3