页面调整优化

hongjli

2025-06-16 e435f2ebd11633c555a8b49fc54d3c7a4e0ff0ba

 src/components/Card.tsx

@@ -13,25 +13,51 @@
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"
      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 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 
        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>
  );