From d464f452c2ad713bb90227e8edce358be0740a4a Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期二, 31 十二月 2024 17:30:19 +0800 Subject: [PATCH] 民航礼仪视频插入 --- src/books/aviationEtiquette/view/components/chpater002.vue | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 165 insertions(+), 14 deletions(-) diff --git a/src/books/aviationEtiquette/view/components/chpater002.vue b/src/books/aviationEtiquette/view/components/chpater002.vue index 0bf7123..945ef52 100644 --- a/src/books/aviationEtiquette/view/components/chpater002.vue +++ b/src/books/aviationEtiquette/view/components/chpater002.vue @@ -627,6 +627,32 @@ <p> 鐗х缁擄細涓濆肪瀵规姌鍛堝�掍笁瑙掑舰锛屽啀浠庨暱绔彔鍔犲憟3锝�4涓ざ鐨憋紝涓濆肪鏈涓庡钩缁撶郴娉曚竴鑷达紝绯诲湪鑴栭澶勬暣鐞嗐�� </p> + <div class="bk-video fl"> + <p class="bj4-qjms fl al-c"><span class="span-text-video">瑙嗛搴�</span><span class="span-svg"><svg t="1729840629103" + class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34778" + xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="40"> + <path + d="M531.117831 720.79677l341.333334-170.641145a42.673047 42.673047 0 0 0 0-76.566472L531.117831 303.20323a42.673047 42.673047 0 0 0-61.814665 38.130103v341.333334a42.673047 42.673047 0 0 0 61.814665 38.130103zM1237.724282 0H127.612523A128.376452 128.376452 0 0 0 0.001736 128.580629V895.317282a128.019142 128.019142 0 0 0 127.610787 128.682718h1110.111759a128.427496 128.427496 0 0 0 127.610787-128.682718V128.580629a127.968097 127.968097 0 0 0-127.610787-128.580629zM255.988974 895.572504a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V811.094163a42.417826 42.417826 0 0 1 43.081402-43.132446h84.580429a42.417826 42.417826 0 0 1 42.979313 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.081401 42.979313H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V469.607697a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429A42.417826 42.417826 0 0 1 255.988974 469.607697z m0-341.333334a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V128.427496a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429a42.417826 42.417826 0 0 1 42.979313 43.081402z m768.012762 725.748069H341.335069V85.346094H1023.950691v853.307812z m255.987238-43.081402a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V811.094163a42.46887 42.46887 0 0 1 43.081401-43.132446h84.58043a42.46887 42.46887 0 0 1 43.030357 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.132446 43.081401h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081401V469.607697a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z m0-341.333334a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V128.427496a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z" + fill="#92A1CB" p-id="34779"></path> + </svg></span></p> + <div class="fl jc-fs fw-w"> + <div style="width: 200px; height: auto; margin: 0 5px;" v-for="(item, index) in chapter002.videoMd5" + :key="index"> + <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" + x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" + class="video-border w100" :src="item.handleMd5"></video> + <div class="fl al-c jc-c"> + <p class="td-0" style="font-size: 12px;">寰灏忚鍫傦細{{ item.name }}</p> + <el-tooltip class="item" effect="dark" :content="item.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" + placement="top-start"> + <img + :src="collectResourceList.findIndex(citem => citem.id == item.md5) > -1 ? collectCheck : collectImg" + alt="" class="collect-btn1" @click="handleCollect(item)" /> + </el-tooltip> + </div> + </div> + </div> + </div> <h6 id="f009">2.棰嗗甫浣╂埓瑙勮寖</h6> <p> 涓嶇鏄埗鏈嶈繕鏄竴鑸晢鍔¤タ鏈嶏紝棣栧厛瑕佷笌棰嗗甫鎼厤銆傞甯︿篃鏄敺澹湪浠〃鏂归潰鐨勪竴涓爣蹇楋紝閰嶄笂鍚堜綋鐨勮タ鏈嶏紝鍙互浣跨┛鑰呮樉寰楁絿娲掋�佺簿绁炪�佺粎澹�佺ǔ閲嶏紝鍚屾椂涔熶綋鐜板嚭瀵瑰満鍚堢殑閲嶈銆� @@ -979,6 +1005,25 @@ </p> <h5 id="e058">锛堜笁锛夎亴涓氬绋嬪簭</h5> <p>鑱屼笟濡嗙殑鍖栧绋嬪簭涓庢棩甯稿涓�鑷达紝璇锋煡鐪嬭棰戙��</p> + <div class="video-box"> + <p class="center text td-0"> + <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" + x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video> + </p> + <p class="center videoname"> + <span>瑙嗛锛氭棩甯稿姝ラ</span> + <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌' + " placement="top-start"> + <img :src="collectResourceList.findIndex( + (item) => item.id == 'dfa8717a72ef7a1e6349b6ba21455739' + ) > -1 + ? collectCheck + : collectImg + " alt="" class="collect-btn" @click="handleCollect('video-01')" /> + </el-tooltip> + </p> + </div> <h4 id="d047">鍏�佺敺澹潰閮ㄥ寲濡�</h4> <p> 閫氳繃閬憰鍜屼慨瀹癸紝灏嗛潰閮ㄨ偆鑹茶皟鏁村緱鏇村姞鍧囧寑锛屼娇姘旇壊绾㈡鼎锛屽睍鐜版渶濂界殑绮剧闈㈣矊銆傞伄鐟曚富瑕佹帺鐩栬劯閮ㄧ憰鐤碉紝浣挎暣涓潰閮ㄥ共鍑�娓呯埥锛涗慨瀹逛富瑕佹槸澧炲姞闈㈤儴绔嬩綋鎰燂紱鐪夌殑淇グ涓昏鏄幓闄ゆ潅鐪夛紝璋冩暣鍜屼慨琛ョ湁褰紙瑙佸浘2-1-17锛夈�� @@ -1043,6 +1088,25 @@ <p class="block"> 鍗搁櫎绮夊簳绛夎劯閮ㄧ殑搴曞鏃讹紝鍙敤娌炬湁鍗稿娑茬殑妫夌墖鍒嗗埆鎸夐澶淬�侀蓟瀛愩�佽劯棰娿�佸彛鍛ㄧ殑椤哄簭鏉ュ嵏闄ゃ�傚繀椤讳竴閬嶄竴閬嶅湴鍗搁櫎锛屽苟鎸夐潰閮ㄨ倢鑲夌殑绾圭悊鍙婅蛋鍚戞摝鎷�� </p> + <div class="video-box"> + <p class="center text td-0"> + <video :src="videoPathTwo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" + x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video> + </p> + <p class="center videoname"> + <span>瑙嗛锛氬嵏濡�</span> + <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo01 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌' + " placement="top-start"> + <img :src="collectResourceList.findIndex( + (item) => item.id == '1f4b5a2bee9544f3b357f4cdf7d09e87' + ) > -1 + ? collectCheck + : collectImg + " alt="" class="collect-btn" @click="handleCollect('video-02')" /> + </el-tooltip> + </p> + </div> </div> </div> </div> @@ -1271,6 +1335,25 @@ <p> 鈶ф鏌ワ細姝i潰鏃犵鍙戯紝绾圭悊鏁撮綈锛岃〃闈㈠厜婊戯紱渚ч潰鍙戝す瀵圭О锛屽彂楂诲簳绔笉浣庝簬涓よ�冲瀭锛涜儗闈㈠彂楂诲渾娑︺�侀ケ婊★紝鐩村緞涓嶅皬浜�8cm銆� </p> + <div class="video-box"> + <p class="center text td-0"> + <video :src="videoPathThree" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" + x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video> + </p> + <p class="center videoname"> + <span>瑙嗛锛氭皵璐ㄥ瀷鍙戝瀷</span> + <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo02 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌' + " placement="top-start"> + <img :src="collectResourceList.findIndex( + (item) => item.id == '26aaec2c0eb64bed629e13f68b9ce848' + ) > -1 + ? collectCheck + : collectImg + " alt="" class="collect-btn" @click="handleCollect('video-03')" /> + </el-tooltip> + </p> + </div> <p> 锛�2锛変紭闆呭瀷銆備紭闆呭瀷鍙戝瀷浜︽槸鏂滃垬娴峰彂鍨嬶紝鍗冲墠棰濈暀鏈夊垬娴蜂慨楗帮紝鏍规嵁鑴搁儴闀垮害閫傚綋璋冩暣澶撮《寮у害鍙婂垬娴峰尯鍩燂紝鍒樻捣涓哄渾寮у舰锛屽彂楂讳负鑺暰寮忔垨鍙戦寮忥紝鍓嶅悗宸﹀彸纰庡彂搴斾互鍙戣兌鍜屽彂澶瑰浐瀹氾紝鍙戝す銆佺毊绛嬨�佸彂缃戝潎涓洪粦鑹诧紝澶村彂涓婂彂澶逛笉瓒呰繃鍥涗釜銆傞�傚悎妞渾褰㈣劯銆侀暱鏂瑰舰鑴稿強涓婂涵鍋忛暱鍋忓鐨勮劯鍨嬨�� </p> @@ -1311,6 +1394,25 @@ <p> 鈶ㄦ鏌ワ細姝i潰鍒樻捣鍖虹汗鐞嗘暣榻愶紝琛ㄩ潰鍏夋粦锛屽垬娴锋渶浣庣偣涓庣湁灏炬湁涓�鎸囪嚦涓ゆ寚瀹借窛绂汇�備晶闈㈡棤纰庡彂锛屽垎缂濈嚎涓嶅闇层�傚彂楂诲渾娑︺�侀ケ婊★紝鐩村緞涓嶅皬浜�8cm銆� </p> + <div class="video-box"> + <p class="center text td-0"> + <video :src="videoPathFour" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" + x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video> + </p> + <p class="center videoname"> + <span>瑙嗛锛氫紭闆呭瀷鍙戝瀷</span> + <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo03 ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌' + " placement="top-start"> + <img :src="collectResourceList.findIndex( + (item) => item.id == 'e5ac247c68c93dbb8fb3eb56ea4bb3aa' + ) > -1 + ? collectCheck + : collectImg + " alt="" class="collect-btn" @click="handleCollect('video-04')" /> + </el-tooltip> + </p> + </div> <p class="td-0 mb-10 mt-10"><span class="bj2">路绀间箣瀹炶返路</span></p> <p class="center"> <img class="img-0" alt="" src="../../assets/images/0077-2.jpg" /> @@ -2183,6 +2285,9 @@ collectImg: require("../../assets/images/icon/heart.png"), collectCheck: require("../../assets/images/icon/heart-check.png"), videoPathOne: "", + videoPathTwo: "", + videoPathThree: "", + videoPathFour: "", collectResourceList: [], questionData: { isComplete: false, @@ -2388,20 +2493,40 @@ { isCollectVideo: false, handleMd5: "", - md5: "7454A10BD25ED828FF31D0702DA63D55", - name: "浠�涔堟槸蹇冪悊鍋ュ悍", + md5: "965022b1a3d52fc4d943b7762c5f8041", + name: "骞崇粨", }, { isCollectVideo: false, handleMd5: "", - md5: "E4AC28F178D660E96355C17E6F283E66", - name: "蹇冪悊鍋ュ悍鐨�10椤规爣鍑�", + md5: "d4e22792df09639f5c30b40be57f220c", + name: "鐧捐ざ鑺辩粨", + }, + { + isCollectVideo: false, + handleMd5: "", + md5: "1d674e01378bb9ddf1dff6f905073b80", + name: "鐧炬姌鎵囩粨", + }, + { + isCollectVideo: false, + handleMd5: "", + md5: "005f3af9c76e4d807280f29aa92c0951", + name: "鐗х缁�", + }, + { + isCollectVideo: false, + handleMd5: "", + md5: "186c971393948f45d0df637e1fa1a7d7", + name: "棰嗗甫绯绘硶", }, ], }, chapterData: { isCollectVideo: false, isCollectVideo01: false, + isCollectVideo02: false, + isCollectVideo03: false, }, }; }, @@ -2434,10 +2559,16 @@ methods: { async getVidoePath() { this.videoPathOne = await getResourcePath( - "f230fd8fd7952a4ad4dd05d94df7e797" + "dfa8717a72ef7a1e6349b6ba21455739" ); this.videoPathTwo = await getResourcePath( - "700cfdb8b85b372045b1e97e3356ae3a" + "1f4b5a2bee9544f3b357f4cdf7d09e87" + ); + this.videoPathThree = await getResourcePath( + "26aaec2c0eb64bed629e13f68b9ce848" + ); + this.videoPathFour = await getResourcePath( + "e5ac247c68c93dbb8fb3eb56ea4bb3aa" ); for (let index = 0; index < this.chapter002.videoMd5.length; index++) { const item = this.chapter002.videoMd5[index]; @@ -2455,13 +2586,13 @@ handleChapterData() { localStorage.setItem( - "civilAviatyonSevervices-book-chapter02-Data", + "aviationEtiquette-book-chapter02-Data", JSON.stringify(this.chapterData) ); }, handleChapter002() { localStorage.setItem( - "civilAviatyonSevervices-book-chapter002", + "aviationEtiquette-book-chapter002", JSON.stringify(this.chapter002) ); }, @@ -2485,24 +2616,44 @@ e.isCollectVideo = !e.isCollectVideo; } else if (e == "video-01") { this.handleCollectResource( - "f230fd8fd7952a4ad4dd05d94df7e797", - "f230fd8fd7952a4ad4dd05d94df7e797", + "dfa8717a72ef7a1e6349b6ba21455739", + "dfa8717a72ef7a1e6349b6ba21455739", "", "瑙嗛", "bits", - "瑙嗛锛氬績鐞嗗鐨勬祦娲�" + "瑙嗛锛氭棩甯稿姝ラ" ); this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; } else if (e == "video-02") { this.handleCollectResource( - "700cfdb8b85b372045b1e97e3356ae3a", - "700cfdb8b85b372045b1e97e3356ae3a", + "1f4b5a2bee9544f3b357f4cdf7d09e87", + "1f4b5a2bee9544f3b357f4cdf7d09e87", "", "瑙嗛", "bits", - "瑙嗛锛氬績鐞嗗鐨勭爺绌跺唴瀹�" + "瑙嗛锛氬嵏濡�" ); this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01; + } else if (e == "video-03") { + this.handleCollectResource( + "26aaec2c0eb64bed629e13f68b9ce848", + "26aaec2c0eb64bed629e13f68b9ce848", + "", + "瑙嗛", + "bits", + "瑙嗛锛氭皵璐ㄥ瀷鍙戝瀷" + ); + this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo01; + }else if (e == "video-04") { + this.handleCollectResource( + "e5ac247c68c93dbb8fb3eb56ea4bb3aa", + "e5ac247c68c93dbb8fb3eb56ea4bb3aa", + "", + "瑙嗛", + "bits", + "瑙嗛锛氫紭闆呭瀷鍙戝瀷" + ); + this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo01; } this.handleChapter002(); this.handleChapterData(); -- Gitblit v1.9.1