```json
{
"summary": "已为讲师卡片添加了丰富的hover交互效果,包括卡片

By admin, 12 September, 2025
角色
assistant
content

```json
{
"summary": "已为讲师卡片添加了丰富的hover交互效果,包括卡片缩放、阴影增强、边框颜色变化、头像边框动画等效果,提升用户体验和视觉吸引力。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"py-16 px-8 bg-white\">\n <div class=\"container mx-auto flex flex-col items-center gap-12\">\n <div class=\"flex flex-col items-center gap-4\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800 text-center\">资深ROS开发&授课经验的一线工程师授课,带你只学有用的</h2>\n <div class=\"w-24 h-1.5 rounded-full bg-gradient-to-r from-indigo-500 via-blue-500 to-emerald-500\"></div>\n </div>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 w-full\">\n <!-- 赵虚左 -->\n <div class=\"bg-white rounded-2xl border border-solid border-gray-200 shadow-lg p-8 flex flex-col gap-6 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:border-indigo-300\">\n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/01.jpeg\" class=\"w-20 h-20 rounded-full border-4 border-solid border-indigo-400 transition-all duration-300 ease-in-out hover:border-indigo-600 hover:scale-110\" alt=\"赵虚左\">\n <div class=\"absolute inset-0 rounded-full border-2 border-transparent hover:border-white opacity-0 hover:opacity-100 transition-all duration-300\"></div>\n </div>\n <div class=\"flex flex-col gap-1\">\n <h3 class=\"text-xl font-bold text-gray-800 transition-colors duration-300 hover:text-indigo-600\">赵虚左</h3>\n <p class=\"text-sm text-gray-600 transition-colors duration-300 hover:text-gray-800\">大木科技创始人</p>\n </div>\n </div>\n <div class=\"w-full h-px bg-gray-200 transition-colors duration-300 hover:bg-indigo-200\"></div>\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">9年机器人与自动驾驶研发经验,曾在高校研发负责人,B站百万播放量UP主《ROS 理论与实践》《ROS2 理论与实践》系列书籍作者</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">AgileROS 品牌委员会委员 · 猛将团队智能车队前研发负责人</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">宇树 & 松灵 ROS 课程专家 · 百度 Apollo 布道师</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">项目经验:</span>工业物流机器人、自动驾驶叉车、农业采摘机器人视觉优化。</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">专长:</span>ROS2架构、多传感器融合、决策规划。</p>\n </div>\n </div>\n </div>\n\n <!-- 徐大中 -->\n <div class=\"bg-white rounded-2xl border border-solid border-gray-200 shadow-lg p-8 flex flex-col gap-6 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:border-indigo-300\">\n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/02.jpeg\" class=\"w-20 h-20 rounded-full border-4 border-solid border-indigo-400 transition-all duration-300 ease-in-out hover:border-indigo-600 hover:scale-110\" alt=\"徐大中\">\n <div class=\"absolute inset-0 rounded-full border-2 border-transparent hover:border-white opacity-0 hover:opacity-100 transition-all duration-300\"></div>\n </div>\n <div class=\"flex flex-col gap-1\">\n <h3 class=\"text-xl font-bold text-gray-800 transition-colors duration-300 hover:text-indigo-600\">徐大中</h3>\n <p class=\"text-sm text-gray-600 transition-colors duration-300 hover:text-gray-800\">前清华猛狮自动驾驶车队队长</p>\n </div>\n </div>\n <div class=\"w-full h-px bg-gray-200 transition-colors duration-300 hover:bg-indigo-200\"></div>\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">WIDC、CIVC、IVSTA等国内外自动驾驶比赛冠军</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">WRC 世界机器人大赛赛事承办教练</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">猛狮未来科学家俱乐部赛事负责人 · 猛狮未来科学家俱乐部创始人</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">项目经验:</span>自动驾驶线控改装、感知方案部署、自动驾驶系统优化、嵌入式开发机器人平台设计、国际赛事大赛经验</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">专长:</span>人工智能深度学习、线控底盘、硬件设计</p>\n </div>\n </div>\n </div>\n\n <!-- 恩意 -->\n <div class=\"bg-white rounded-2xl border border-solid border-gray-200 shadow-lg p-8 flex flex-col gap-6 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:border-indigo-300\">\n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/03.jpeg\" class=\"w-20 h-20 rounded-full border-4 border-solid border-indigo-400 transition-all duration-300 ease-in-out hover:border-indigo-600 hover:scale-110\" alt=\"恩意\">\n <div class=\"absolute inset-0 rounded-full border-2 border-transparent hover:border-white opacity-0 hover:opacity-100 transition-all duration-300\"></div>\n </div>\n <div class=\"flex flex-col gap-1\">\n <h3 class=\"text-xl font-bold text-gray-800 transition-colors duration-300 hover:text-indigo-600\">恩意</h3>\n <p class=\"text-sm text-gray-600 transition-colors duration-300 hover:text-gray-800\">资深讲师</p>\n </div>\n </div>\n <div class=\"w-full h-px bg-gray-200 transition-colors duration-300 hover:bg-indigo-200\"></div>\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">7年机器人开发与教学经验,曾任感知算法负责人,有丰富的机器学习、深度学习、计算机视觉、自然语言处理的项目实战经验,内蒙古科技大学特聘讲师,精通C++、Python,多年相关授课经验</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">项目经验:</span>自动驾驶沙盘视觉感知、城市道路BEV感知、工业质检缺陷检测。</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">专长:</span>OpenCV 算法、深度学习检测、多模态感知。</p>\n </div>\n </div>\n </div>\n\n <!-- 石老师 -->\n <div class=\"bg-white rounded-2xl border border-solid border-gray-200 shadow-lg p-8 flex flex-col gap-6 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:border-indigo-300\">\n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/04.jpeg\" class=\"w-20 h-20 rounded-full border-4 border-solid border-indigo-400 transition-all duration-300 ease-in-out hover:border-indigo-600 hover:scale-110\" alt=\"石老师\">\n <div class=\"absolute inset-0 rounded-full border-2 border-transparent hover:border-white opacity-0 hover:opacity-100 transition-all duration-300\"></div>\n </div>\n <div class=\"flex flex-col gap-1\">\n <h3 class=\"text-xl font-bold text-gray-800 transition-colors duration-300 hover:text-indigo-600\">石老师</h3>\n <p class=\"text-sm text-gray-600 transition-colors duration-300 hover:text-gray-800\">资深讲师</p>\n </div>\n </div>\n <div class=\"w-full h-px bg-gray-200 transition-colors duration-300 hover:bg-indigo-200\"></div>\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">13年机器人开发与教育经验,参与多项国家级项目,现任公司CTO,太原理工等多所大学实训讲师</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\">osta 国家职业资格四级认证,先后就职于麦可听、传智播客等公司,有丰富的互联网研发及授课经验,前传智播客优秀讲师</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">项目经验:</span>机器人运动控制算法、自动驾驶决策系统、复杂场景路径规划。</p>\n </div>\n <div class=\"flex gap-2 group\">\n <div class=\"w-1.5 h-1.5 bg-gray-300 rounded-full mt-2 flex-shrink-0 transition-all duration-300 group-hover:bg-indigo-500 group-hover:scale-125\"></div>\n <p class=\"text-sm text-gray-700 leading-relaxed transition-colors duration-300 group-hover:text-gray-800\"><span class=\"text-indigo-600 font-bold transition-colors duration-300 group-hover:text-indigo-700\">专长:</span>运动控制、决策算法、实时系统优化。</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": ["添加点击展开详情","添加讲师评分系统","添加课程链接按钮","添加社交分享功能","添加讲师视频介绍"]
}
```

total_tokens
15448