2023年甘肅省職業(yè)院校技能競(jìng)賽中職學(xué)生組《Web前端開發(fā)》賽項(xiàng)競(jìng)賽試題2023年3月

賽題說明競(jìng)賽內(nèi)容本試卷包含頁(yè)面設(shè)計(jì)、前端實(shí)現(xiàn)和網(wǎng)站重構(gòu)三部分內(nèi)容，滿分100分。競(jìng)賽時(shí)間競(jìng)賽時(shí)間：共計(jì)240分鐘。注意事項(xiàng)參賽選手不得攜帶通信設(shè)備等物品進(jìn)入賽場(chǎng)，違反者按作弊處理。請(qǐng)根據(jù)大賽所提供的比賽環(huán)境，檢查所列的硬件設(shè)備、軟件清單、材料清單是否齊全，計(jì)算機(jī)設(shè)備是否能正常使用。裁判以各參賽隊(duì)提交到競(jìng)賽服務(wù)器上的成果物為評(píng)分依據(jù)。嚴(yán)禁在作品界面、代碼、文件名等任何位置標(biāo)注競(jìng)賽隊(duì)的任何信息，一經(jīng)發(fā)現(xiàn)按照作弊處理。競(jìng)賽結(jié)束時(shí)，請(qǐng)將試卷和答題紙統(tǒng)一提交，檢驗(yàn)提交內(nèi)容。禁止將比賽所用的所有物品（包括試卷和草稿紙）帶離賽場(chǎng)。

任務(wù)背景：OMA全稱為OnlineMovingAgency，中文譯為在線搬家公司,消費(fèi)者通過網(wǎng)絡(luò)向搬家服務(wù)提供商預(yù)定搬家產(chǎn)品或服務(wù)，并通過網(wǎng)上支付或者線下付費(fèi)，即搬家公司主體可以通過網(wǎng)絡(luò)進(jìn)行產(chǎn)品營(yíng)銷或產(chǎn)品銷售。OMA的出現(xiàn)將原來傳統(tǒng)的搬家模式放到網(wǎng)絡(luò)平臺(tái)上，更廣泛的傳遞了公司產(chǎn)品信息，互動(dòng)式的交流更方便了客人的咨詢和訂購(gòu)。某搬家公司希望開展線上旅游業(yè)務(wù)，要從產(chǎn)品和落地服務(wù)出發(fā)，對(duì)公司的業(yè)務(wù)進(jìn)行變革。他們要設(shè)計(jì)并搭建一套符合中國(guó)人使用習(xí)慣的搬家介紹和訂票的網(wǎng)站，用于顯示該公司的相關(guān)的產(chǎn)品、服務(wù)、在線訂票申請(qǐng)。任務(wù)描述：你需要按照“頁(yè)面設(shè)計(jì)”要求完成具有原創(chuàng)性和統(tǒng)一設(shè)計(jì)風(fēng)格、符合品牌形象和受眾群體的響應(yīng)式設(shè)計(jì)，按照“前端實(shí)現(xiàn)”要求完成響應(yīng)式前端開發(fā)、并按照“網(wǎng)站重構(gòu)”要求將靜態(tài)頁(yè)面改造成動(dòng)態(tài)頁(yè)面并部署到服務(wù)器。

第一部分：頁(yè)面設(shè)計(jì)完成“OMA網(wǎng)站”頁(yè)面設(shè)計(jì)，包含電腦端（1330px）、平板端（768px）、移動(dòng)端（480px）三種設(shè)備的適配，一些元素可在特定分辨率中通過交互效果隱藏或顯示。選手應(yīng)在服務(wù)器中提交以下內(nèi)容（若在服務(wù)器中未找到以下資源，視作未提交）：電腦端設(shè)計(jì)稿：XX_Home_1330.jpg、XX_Appointment_1330.jpg（XX為參賽隊(duì)工位號(hào)，下同）平板端設(shè)計(jì)稿：XX_Home_768.jpg、XX_Appointment.jpg移動(dòng)端設(shè)計(jì)稿：XX_Home_480.jpg、XX_Appointment.jpg除設(shè)計(jì)稿文件之外，你需要提交額外的文件用于解釋和描述你的交互設(shè)計(jì)，例如：XX_Description.doc（XX為參賽隊(duì)工位號(hào)）。請(qǐng)?jiān)诜?wù)器上傳所有包含圖層信息的設(shè)計(jì)圖源文件和交互設(shè)計(jì)說明文件。站點(diǎn)設(shè)計(jì)圖必須用真實(shí)像素尺寸單位；若設(shè)計(jì)圖尺寸大于賽題要求，需在設(shè)計(jì)圖中使用小于4px的清晰可見邊框（顏色自定）表示對(duì)應(yīng)分辨率寬度，所有頁(yè)面內(nèi)的元素需在該邊框內(nèi)完整顯示。首頁(yè)應(yīng)包含以下元素：頁(yè)面頭部搬家公司Logo公司咨詢熱線主導(dǎo)航，至少包括首頁(yè)、在線預(yù)約、服務(wù)項(xiàng)目、案例展示、搬家須知、聯(lián)系我們輪播圖片至少3張可交互切換的輪播圖。服務(wù)項(xiàng)目下方展示4個(gè)搬家公司推出的項(xiàng)目名稱項(xiàng)目名稱下面至少展示4個(gè)項(xiàng)目?jī)?nèi)容。展示內(nèi)容需要涵蓋項(xiàng)目圖片、項(xiàng)目名稱。公司簡(jiǎn)介，至少包含一段說明文字和一個(gè)查看更多按鈕。案例展示，至少展示3個(gè)搬家案例，每個(gè)案例包括案例圖片、案例名稱。搬家須知，至少展示4篇搬家公司推出的相關(guān)文章，包括日期、標(biāo)題、概要。關(guān)于我們（為什么選擇我們）至少展示四點(diǎn)搬家公司的高效服務(wù)。圖片標(biāo)題摘要在線預(yù)約核心業(yè)務(wù)介紹姓名聯(lián)系方式備注預(yù)約按鈕聯(lián)系我們咨詢熱線郵箱版權(quán)聲明預(yù)約頁(yè)應(yīng)包含以下元素：1.頁(yè)面頭部搬家公司Logo公司咨詢熱線主導(dǎo)航，至少包括首頁(yè)、在線預(yù)約、服務(wù)項(xiàng)目、案例展示、搬家須知、聯(lián)系我們2.輪播圖片至少3張可交互切換的輪播圖。3.服務(wù)項(xiàng)目側(cè)邊欄側(cè)邊欄頭部名稱：服務(wù)項(xiàng)目至少展示4個(gè)公司推出的項(xiàng)目名稱4.搬家須知側(cè)邊欄側(cè)邊欄頭部名稱：搬家須知至少展示4個(gè)搬家須知文章標(biāo)題5.在線預(yù)約車型列表車型圖片收費(fèi)標(biāo)準(zhǔn)簡(jiǎn)介姓名聯(lián)系方式備注預(yù)約按鈕6.訂單狀態(tài)訂單狀態(tài)顯示提交預(yù)約的訂單信息，展示數(shù)據(jù)項(xiàng)包括姓名、聯(lián)系方式、備注信息，以及當(dāng)前訂單狀態(tài)。7.聯(lián)系我們咨詢熱線郵箱版權(quán)聲明第二部分：前端實(shí)現(xiàn)根據(jù)“頁(yè)面設(shè)計(jì)”完成的設(shè)計(jì)圖，使用HTML5、CSS3、JavaScript等前端技術(shù)完成符合W3C組織HTML5和CSS3標(biāo)準(zhǔn)的前端代碼。所實(shí)現(xiàn)的前端布局應(yīng)與“頁(yè)面設(shè)計(jì)”中完成的設(shè)計(jì)相同。響應(yīng)式設(shè)計(jì)要求的頁(yè)面應(yīng)使用響應(yīng)式技術(shù)實(shí)現(xiàn)不同分辨率的適配，使頁(yè)面在三種設(shè)備分辨率（1330px、768px、480px）下可以正常瀏覽，一些元素在特定分辨率下應(yīng)隱藏或顯示。所編寫的前端代碼應(yīng)符合W3C組織的HTML5和CSS3標(biāo)準(zhǔn)。所編寫的HTML代碼應(yīng)有SEO優(yōu)化并符合W3CWAI-ARIA規(guī)范，具備搜索引擎和無障礙訪問友好性。前端交互效果和功能需與設(shè)計(jì)圖中的說明和表現(xiàn)一致，至少包括：首頁(yè)輪播圖，不少于三張并可交互切換的圖片。首頁(yè)服務(wù)項(xiàng)目的4個(gè)項(xiàng)目名稱，每點(diǎn)擊一個(gè)項(xiàng)目名稱，下方展示的項(xiàng)目?jī)?nèi)容自動(dòng)切換成相應(yīng)的內(nèi)容。預(yù)約頁(yè)，選擇任意車型，展示該車型對(duì)應(yīng)的圖片。預(yù)約頁(yè)，提交相關(guān)信息，完成訂票操作，訂單狀態(tài)正確顯示提交訂單相關(guān)信息。頁(yè)面之間的流轉(zhuǎn)交互設(shè)計(jì)。HTML/CSS/JavaScript代碼應(yīng)該具備良好的編碼風(fēng)格（各不少于3個(gè)可重用模塊）和注釋（各不少于3個(gè)）。選手應(yīng)在競(jìng)服務(wù)器中上傳成果物項(xiàng)目文件夾，項(xiàng)目文件夾應(yīng)包含以下內(nèi)容(網(wǎng)頁(yè)文件命名如下)：首頁(yè)HTML文件：index.html預(yù)約頁(yè)HTML文件：appointment.html其他CSS、JavaScript等網(wǎng)頁(yè)資源文件

第三部分：網(wǎng)站重構(gòu)公司已經(jīng)完成了網(wǎng)站后臺(tái)管理功能開發(fā)，并提供了可用于前端的API接口，接口詳情見API穩(wěn)定性測(cè)試報(bào)告。你需要根據(jù)后臺(tái)接口重構(gòu)前端頁(yè)面，將前端頁(yè)面中某些部分實(shí)現(xiàn)數(shù)據(jù)獲取和提交。首頁(yè)功能模塊：使用輪播圖API查詢輪播圖，通過后臺(tái)返回的輪播圖數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁(yè)輪播圖片。使用服務(wù)項(xiàng)目API查詢公司推出的項(xiàng)目信息，通過后臺(tái)返回的數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁(yè)服務(wù)項(xiàng)目。使用案例列表API查詢案例，通過后臺(tái)返回的案例列表數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁(yè)案例展示。使用須知列表API查詢搬家須知列表，通過后臺(tái)返回的搬家須知列表數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁(yè)搬家須知。使用關(guān)于我們API查詢公司相關(guān)高效服務(wù)信息，通過后臺(tái)返回的關(guān)于我們數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁(yè)關(guān)于我們。。預(yù)約頁(yè)功能模塊：使用預(yù)約API提交數(shù)據(jù)至后端，動(dòng)態(tài)實(shí)