就业班集合页面开发需求与功能详解

"就业班集合页需求1" 在本次就业班集合页面的开发需求中，主要涉及了UI设计、交互效果、数据埋点以及不同平台的链接配置等多个方面。以下是详细的知识点说明： 1. **设计规范**：PSD文件采用2倍图设计，这是为了确保在高分辨率设备上显示清晰，遵循了移动优先的设计原则，同时考虑了Retina屏幕的显示效果。 2. **数据埋点**：“引号蓝色加粗下划线”标记的按钮，以及页面的UV（独立访客）需要添加数据埋点。这要求开发者集成数据分析工具，如Google Analytics或自建的埋点系统，用于追踪用户行为，以便分析页面访问量和按钮点击率。 3. **咨询按钮**：所有咨询按钮无论用户状态如何，点击效果都相同，这意味着按钮的交互逻辑是标准化的，不会根据用户登录状态改变其功能或样式。 4. **页面域名**：页面域名为`jiuye.jikexueyuan.com`，表明该页面属于职业教育平台极客学院的就业板块。 5. **头部与尾部**：使用公共头部和自定义尾部，这样可以保持网站整体风格一致，并方便维护，自定义尾部可能包含特定的版权信息或者用户服务条款。 6. **UI交互**： - “立即咨询”按钮点击后，新窗口打开美洽客服，这需要实现浏览器的新窗口跳转功能，并集成美洽客服系统。 - 鼠标经过“立即咨询”按钮时，有变色特效，需根据PSD文件实现相应的CSS3过渡效果。 - 课程列表的各个色块区域点击后，会新窗口打开不同的链接，且需要按照指定的埋点规则进行数据跟踪。 - “已有X人预约”处的计数器，需要实现点击按钮时计数值递增的逻辑。 - “马上去看”和“上线通知我”按钮也有鼠标经过的变色特效，同样基于PSD文件实现。 7. **课程列表动画**：鼠标放入相应色块和按钮区域，会有切换动画，可以参考给出的网易云课堂示例，这可能涉及到CSS3的动画库或JavaScript的动画实现。 8. **讲师介绍**：这部分采用水平循环播放，每页显示2位讲师，向左滑动切换，停留时间7s。页面上的小豆豆作为手动翻页的控制和页数指示器，需要编写JavaScript代码来实现滑动切换和点击翻页功能。 9. **学员评价**：这部分是全静态内容，意味着不需要动态加载或用户交互，只需将预设的评价展示出来即可。 10. **作业展示**：包含2个视频（Android和Web），点击切换箭头水平滑动切换，视频播放需要集成视频播放器并统计播放次数。这意味着开发者需要处理视频流媒体的加载和播放事件，以及相应的计数统计。 以上是对就业班集合页面需求的详细解析，涵盖了UI设计、前端交互、数据追踪、视频播放等多方面的技术要点。在开发过程中，需确保各个功能的实现符合设计要求，并保持良好的用户体验。