| | |
| | | <div className="absolute bottom-3 left-3 w-8 h-8 border-b-2 border-l-2 border-[#6ADBFF]/70 opacity-70"></div> |
| | | </motion.div> |
| | | |
| | | {/* 场景背景 */} |
| | | <motion.div |
| | | className="bg-[#1A2547] rounded-lg p-6" |
| | | initial={{ opacity: 0, x: -20 }} |
| | | animate={{ opacity: 1, x: 0 }} |
| | | transition={{ duration: 0.5, delay: 0.4 }} |
| | | > |
| | | <h3 className="text-lg font-semibold text-[#6ADBFF] mb-4 flex items-center"> |
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2"></div> |
| | | 场景背景 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed"> |
| | | {scene.background || scene.description} |
| | | </p> |
| | | </motion.div> |
| | | {/* 内容区域 */} |
| | | <div className="space-y-5"> |
| | | {/* 场景背景 */} |
| | | <motion.div |
| | | initial={{ opacity: 0, y: 20 }} |
| | | animate={{ opacity: 1, y: 0 }} |
| | | transition={{ |
| | | duration: 0.4, |
| | | delay: 0.2, |
| | | ease: [0.21, 1.11, 0.81, 0.99] |
| | | }} |
| | | className="relative p-6 rounded-lg bg-gradient-to-r from-[#1A2547] to-[#1E2B63] group overflow-hidden" |
| | | > |
| | | {/* 装饰性光效 */} |
| | | <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div> |
| | | |
| | | <div className="relative"> |
| | | <h3 className="text-lg font-semibold mb-4 flex items-center text-white group-hover:text-[#6ADBFF] transition-colors duration-300"> |
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> |
| | | 场景背景 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">{scene.background}</p> |
| | | </div> |
| | | </motion.div> |
| | | |
| | | {/* 使用说明 */} |
| | | <motion.div |
| | | className="bg-[#1A2547] rounded-lg p-6" |
| | | initial={{ opacity: 0, x: -20 }} |
| | | animate={{ opacity: 1, x: 0 }} |
| | | transition={{ duration: 0.5, delay: 0.5 }} |
| | | > |
| | | <h3 className="text-lg font-semibold text-[#6ADBFF] mb-4 flex items-center"> |
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2"></div> |
| | | 使用说明 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed"> |
| | | {scene.instructions || '通过自然语言对话的方式,描述您的具体需求,AI助手将为您提供专业的解决方案。'} |
| | | </p> |
| | | </motion.div> |
| | | {/* 使用说明 */} |
| | | <motion.div |
| | | initial={{ opacity: 0, y: 20 }} |
| | | animate={{ opacity: 1, y: 0 }} |
| | | transition={{ |
| | | duration: 0.4, |
| | | delay: 0.3, |
| | | ease: [0.21, 1.11, 0.81, 0.99] |
| | | }} |
| | | className="relative p-6 rounded-lg bg-gradient-to-r from-[#1E2B63] to-[#1A2547] group overflow-hidden" |
| | | > |
| | | {/* 装饰性光效 */} |
| | | <div className="absolute inset-0 bg-gradient-to-r from-[#FF6A88]/0 via-[#FF6A88]/5 to-[#FF6A88]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div> |
| | | |
| | | <div className="relative"> |
| | | <h3 className="text-lg font-semibold mb-4 flex items-center text-white group-hover:text-[#FF6A88] transition-colors duration-300"> |
| | | <div className="w-1 h-4 bg-[#FF6A88] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> |
| | | 使用说明 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">{scene.instructions}</p> |
| | | </div> |
| | | </motion.div> |
| | | |
| | | {/* 数据说明 - 添加悬浮动画效果 */} |
| | | <motion.div |
| | | className="bg-[#1A2547] rounded-lg p-6 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-[0_0_20px_rgba(106,219,255,0.15)] relative group" |
| | | initial={{ opacity: 0, x: -20 }} |
| | | animate={{ opacity: 1, x: 0 }} |
| | | transition={{ duration: 0.5, delay: 0.6 }} |
| | | > |
| | | <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
| | | <h3 className="text-lg font-semibold text-[#6ADBFF] mb-4 flex items-center relative"> |
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2 group-hover:h-5 transition-all duration-300"></div> |
| | | 数据说明 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed relative"> |
| | | {scene.dataDescription || '本场景所使用的数据均为模拟数据,仅用于演示目的。在实际应用中,将根据您的具体需求使用真实数据进行分析和处理。'} |
| | | </p> |
| | | </motion.div> |
| | | {/* 数据说明 */} |
| | | <motion.div |
| | | initial={{ opacity: 0, y: 20 }} |
| | | animate={{ opacity: 1, y: 0 }} |
| | | transition={{ |
| | | duration: 0.4, |
| | | delay: 0.4, |
| | | ease: [0.21, 1.11, 0.81, 0.99] |
| | | }} |
| | | className="relative p-6 rounded-lg bg-gradient-to-r from-[#1A2547] via-[#1E2B63] to-[#1A2547] group overflow-hidden" |
| | | > |
| | | {/* 装饰性光效 */} |
| | | <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div> |
| | | |
| | | <div className="relative"> |
| | | <h3 className="text-lg font-semibold mb-4 flex items-center text-white group-hover:text-[#6ADBFF] transition-colors duration-300"> |
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> |
| | | 数据说明 |
| | | </h3> |
| | | <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300"> |
| | | {scene.dataDescription || '本场景所使用的数据均为模拟数据,仅用于演示目的。在实际应用中,将根据您的具体需求使用真实数据进行分析和处理。'} |
| | | </p> |
| | | </div> |
| | | </motion.div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |