From d0c9d7d10f846a831228663885e015120cdf950c Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 10:08:50 +0800
Subject: [PATCH] 主页优化
---
src/components/Card.tsx | 92 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 75 insertions(+), 17 deletions(-)
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 988aae5..f95594d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -13,25 +13,83 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
return (
<motion.div
- 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 backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all"
+ initial={{ opacity: 0, y: 20 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ duration: 0.5 }}
+ whileHover={{
+ y: -5,
+ transition: { duration: 0.2, ease: 'easeOut' }
+ }}
+ whileTap={{
+ y: 0,
+ scale: 0.98,
+ transition: { duration: 0.1 }
+ }}
+ className="group relative bg-white backdrop-blur-sm bg-opacity-90 rounded-xl overflow-hidden cursor-pointer"
onClick={onClick}
>
- <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 z-10"
- sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
- />
- </div>
- <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 className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] opacity-0 blur group-hover:opacity-70 group-hover:blur-md transition-all duration-500"></div>
+
+ {/* 鍗＄墖鍐呭 */}
+ <div className="relative z-10 bg-white border border-[var(--ai-secondary)]/20 rounded-xl overflow-hidden shadow-lg shadow-[var(--ai-secondary)]/5 group-hover:shadow-[var(--ai-secondary)]/20 transition-all duration-300">
+ {/* 鍥剧墖鍖哄煙 */}
+ <div className="relative h-48 overflow-hidden">
+ {/* 娓愬彉閬僵 */}
+ <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)]/20 to-transparent z-10"></div>
+
+ {/* 鍥剧墖 */}
+ <div className="relative h-full w-full transform group-hover:scale-105 transition-transform duration-700 ease-out">
+ <Image
+ src={imageUrl}
+ alt={title}
+ fill
+ className="object-contain p-4"
+ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+ />
+ </div>
+
+ {/* 鎶�鏈劅瑁呴グ鍏冪礌 */}
+ <div className="absolute top-2 right-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
+ <div className="absolute top-0 right-0 w-full h-[1px] bg-[var(--ai-secondary)]"></div>
+ <div className="absolute top-0 right-0 h-full w-[1px] bg-[var(--ai-secondary)]"></div>
+ </div>
+
+ <div className="absolute bottom-2 left-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
+ <div className="absolute bottom-0 left-0 w-full h-[1px] bg-[var(--ai-highlight)]"></div>
+ <div className="absolute bottom-0 left-0 h-full w-[1px] bg-[var(--ai-highlight)]"></div>
+ </div>
+ </div>
+
+ {/* 鍐呭鍖哄煙 */}
+ <div className="p-5 border-t border-[var(--ai-secondary)]/10 relative overflow-hidden">
+ {/* 鍐呭鑳屾櫙鍔ㄦ晥 */}
+ <div className="absolute -inset-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
+ <div className="absolute right-0 top-0 h-20 w-20 bg-gradient-to-bl from-[var(--ai-secondary)]/5 to-transparent rounded-full blur-xl"></div>
+ </div>
+
+ {/* 鏍囬 */}
+ <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2 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-600 text-sm relative z-10">{description}</p>
+
+ {/* 搴曢儴瑁呴グ */}
+ <div className="mt-4 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>
+
+ <motion.div
+ className="text-[var(--ai-secondary)] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+ initial={{ x: -10 }}
+ whileHover={{ x: 0 }}
+ >
+ 浜嗚В璇︽儏 鈫�
+ </motion.div>
+ </div>
+ </div>
</div>
</motion.div>
);
--
Gitblit v1.9.3