2023年甘肃省职业院校技能竞赛（中职组）Web前端开发赛项试题B卷

2023年甘肃省职业院校技能竞赛中职学生组《Web前端开发》赛项竞赛试题2023年3月

赛题说明竞赛内容本试卷包含页面设计、前端实现和网站重构三部分内容，满分100分。竞赛时间竞赛时间：共计240分钟。注意事项参赛选手不得携带通信设备等物品进入赛场，违反者按作弊处理。请根据大赛所提供的比赛环境，检查所列的硬件设备、软件清单、材料清单是否齐全，计算机设备是否能正常使用。裁判以各参赛队提交到竞赛服务器上的成果物为评分依据。严禁在作品界面、代码、文件名等任何位置标注竞赛队的任何信息，一经发现按照作弊处理。竞赛结束时，请将试卷和答题纸统一提交，检验提交内容。禁止将比赛所用的所有物品（包括试卷和草稿纸）带离赛场。

任务背景：OMA全称为OnlineMovingAgency，中文译为在线搬家公司,消费者通过网络向搬家服务提供商预定搬家产品或服务，并通过网上支付或者线下付费，即搬家公司主体可以通过网络进行产品营销或产品销售。OMA的出现将原来传统的搬家模式放到网络平台上，更广泛的传递了公司产品信息，互动式的交流更方便了客人的咨询和订购。某搬家公司希望开展线上旅游业务，要从产品和落地服务出发，对公司的业务进行变革。他们要设计并搭建一套符合中国人使用习惯的搬家介绍和订票的网站，用于显示该公司的相关的产品、服务、在线订票申请。任务描述：你需要按照“页面设计”要求完成具有原创性和统一设计风格、符合品牌形象和受众群体的响应式设计，按照“前端实现”要求完成响应式前端开发、并按照“网站重构”要求将静态页面改造成动态页面并部署到服务器。

第一部分：页面设计完成“OMA网站”页面设计，包含电脑端（1330px）、平板端（768px）、移动端（480px）三种设备的适配，一些元素可在特定分辨率中通过交互效果隐藏或显示。选手应在服务器中提交以下内容（若在服务器中未找到以下资源，视作未提交）：电脑端设计稿：XX_Home_1330.jpg、XX_Appointment_1330.jpg（XX为参赛队工位号，下同）平板端设计稿：XX_Home_768.jpg、XX_Appointment.jpg移动端设计稿：XX_Home_480.jpg、XX_Appointment.jpg除设计稿文件之外，你需要提交额外的文件用于解释和描述你的交互设计，例如：XX_Description.doc（XX为参赛队工位号）。请在服务器上传所有包含图层信息的设计图源文件和交互设计说明文件。站点设计图必须用真实像素尺寸单位；若设计图尺寸大于赛题要求，需在设计图中使用小于4px的清晰可见边框（颜色自定）表示对应分辨率宽度，所有页面内的元素需在该边框内完整显示。首页应包含以下元素：页面头部搬家公司Logo公司咨询热线主导航，至少包括首页、在线预约、服务项目、案例展示、搬家须知、联系我们轮播图片至少3张可交互切换的轮播图。服务项目下方展示4个搬家公司推出的项目名称项目名称下面至少展示4个项目内容。展示内容需要涵盖项目图片、项目名称。公司简介，至少包含一段说明文字和一个查看更多按钮。案例展示，至少展示3个搬家案例，每个案例包括案例图片、案例名称。搬家须知，至少展示4篇搬家公司推出的相关文章，包括日期、标题、概要。关于我们（为什么选择我们）至少展示四点搬家公司的高效服务。图片标题摘要在线预约核心业务介绍姓名联系方式备注预约按钮联系我们咨询热线邮箱版权声明预约页应包含以下元素：1.页面头部搬家公司Logo公司咨询热线主导航，至少包括首页、在线预约、服务项目、案例展示、搬家须知、联系我们2.轮播图片至少3张可交互切换的轮播图。3.服务项目侧边栏侧边栏头部名称：服务项目至少展示4个公司推出的项目名称4.搬家须知侧边栏侧边栏头部名称：搬家须知至少展示4个搬家须知文章标题5.在线预约车型列表车型图片收费标准简介姓名联系方式备注预约按钮6.订单状态订单状态显示提交预约的订单信息，展示数据项包括姓名、联系方式、备注信息，以及当前订单状态。7.联系我们咨询热线邮箱版权声明第二部分：前端实现根据“页面设计”完成的设计图，使用HTML5、CSS3、JavaScript等前端技术完成符合W3C组织HTML5和CSS3标准的前端代码。所实现的前端布局应与“页面设计”中完成的设计相同。响应式设计要求的页面应使用响应式技术实现不同分辨率的适配，使页面在三种设备分辨率（1330px、768px、480px）下可以正常浏览，一些元素在特定分辨率下应隐藏或显示。所编写的前端代码应符合W3C组织的HTML5和CSS3标准。所编写的HTML代码应有SEO优化并符合W3CWAI-ARIA规范，具备搜索引擎和无障碍访问友好性。前端交互效果和功能需与设计图中的说明和表现一致，至少包括：首页轮播图，不少于三张并可交互切换的图片。首页服务项目的4个项目名称，每点击一个项目名称，下方展示的项目内容自动切换成相应的内容。预约页，选择任意车型，展示该车型对应的图片。预约页，提交相关信息，完成订票操作，订单状态正确显示提交订单相关信息。页面之间的流转交互设计。HTML/CSS/JavaScript代码应该具备良好的编码风格（各不少于3个可重用模块）和注释（各不少于3个）。选手应在竞服务器中上传成果物项目文件夹，项目文件夹应包含以下内容(网页文件命名如下)：首页HTML文件：index.html预约页HTML文件：appointment.html其他CSS、JavaScript等网页资源文件

第三部分：网站重构公司已经完成了网站后台管理功能开发，并提供了可用于前端的API接口，接口详情见API稳定性测试报告。你需要根据后台接口重构前端页面，将前端页面中某些部分实现数据获取和提交。首页功能模块：使用轮播图API查询轮播图，通过后台返回的轮播图数据，动态实现首页轮播图片。使用服务项目API查询公司推出的项目信息，通过后台返回的数据，动态实现首页服务项目。使用案例列表API查询案例，通过后台返回的案例列表数据，动态实现首页案例展示。使用须知列表API查询搬家须知列表，通过后台返回的搬家须知列表数据，动态实现首页搬家须知。使用关于我们API查询公司相关高效服务信息，通过后台返回的关于我们数据，动态实现首页关于我们。。预约页功能模块：使用预约API提交数据至后端，动态实