| src/books/aviationBasicSkills/view/components/chapter001.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/aviationEtiquette/assets/main.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/aviationEtiquette/view/components/chapter001.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/aviationEtiquette/view/components/chapter005.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/aviationEtiquette/view/components/chpater002.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/aviationEtiquette/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/books/aviationBasicSkills/view/components/chapter001.vue
@@ -1757,8 +1757,6 @@ JSON.stringify(this.chapterData) ); }, setBookQuestion() { localStorage.setItem( src/books/aviationEtiquette/assets/main.less
@@ -700,9 +700,14 @@ .event-header-text-bc { background-color: #bbd4ec; } //视频 .video-box-cover { border: 1px dashed #895B2E; padding: 2% 2%; } .video-box { margin: 20px 0 20px 8%; margin: 20px 0 20px 0; border: 1px dashed #895B2E; padding: 2% 2%; } @@ -1578,6 +1583,38 @@ margin-left: -1.6em; } .bk-video{ border: 0.15em dashed #92A1CB; padding: 1.8em 5px; margin-bottom: 2em; margin-top: 2em; border-radius: 0em; position: relative; } p.bj4-qjms { background-color: #fff; color: #92A1CB; font-size: 20px; font-weight: bold; border-radius: 1.5em; margin-left: 0em; text-align: center; text-indent: 0em; position: absolute; top: -32px; } .span-text-video { padding: 0em 0.15em 0em 0.3em; } .span-svg { padding: 0.3em 0.15em 0em 0.3em; } .ts-1 { font-weight: bold; } src/books/aviationEtiquette/view/components/chapter001.vue
@@ -7,7 +7,7 @@ <li class="headerText pNum">1</li> <img class="headerImg mr-10" src="../../assets/images/yemei.png" alt="" /> </ul> <div class="bodystyle p-even"> <div class="bodystyle"> <h1 id="a005"> <span class="h1-bj">模块一</span><span class="h1-bk">民航礼仪与服务能力认知</span> </h1> @@ -47,11 +47,11 @@ </div> <div class="bj3"> <p>1.什么是“避席”？</p> <textarea v-model="questionData.askAbout.one" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.one" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.曾子为何要“避席”？</p> <textarea v-model="questionData.askAbout.two" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.two" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -69,7 +69,7 @@ <img class="w80" src="../../assets/images/yemei01.png" alt="" /> </li> </ul> <div class="bodystyle p-odd"> <div class="bodystyle"> <h3 id="c001"> <span class="h3-zt1">任务1</span><span class="h3-bk">礼仪起源认知</span> </h3> @@ -106,11 +106,13 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">3</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle p-even"> <div class="bodystyle"> <h6 id="f004">4.礼为人性和环境矛盾的产物</h6> <p> “颜渊问仁。子曰：‘克己复礼为仁。一日克己复礼，天下归仁焉。”（《论语·颜渊》）克己是对自我的管理，人与环境会产生矛盾，而解决这种矛盾的方法就是“克己”。孔子一直把对人性的约束和管理作为恢复周礼的重要途径，人有各种欲望，需通过道德、礼仪、法律等形式进行规范，故礼为人性和环境矛盾的产物。 @@ -133,7 +135,7 @@ 周公的“制礼作乐”，实际上就是建立周代的一系列制度，它涉及政治、经济、法律、礼仪、祭祀、教育等制度及乐舞活动，是对周代的社会政治文化各个方面的较全面的规范。在制定周代礼制过程中，周公不是简单地重复前代礼仪，而是把礼仪贯穿于所有活动中，从而建立了一套完整、周密甚至烦琐的礼仪系统，使礼仪在周代具有全新的意义。 </p> <p> 春秋时期，社会生产力的发展，新兴地主阶级的出现导致“礼崩乐坏”，社会十分混乱，新旧势力的斗争尖锐。孔子在这一时期提出“仁”的思想，并把它同“礼”有机结合在一起，形成了儒家思想体系的核心，构成了儒家思想的社会道德规范。在中国早期文明史上，周王朝礼乐文明持续数百载，对中华民族文化心理的塑造产生了 春秋时期，社会生产力的发展，新兴地主阶级的出现导致“礼崩乐坏”，社会十分混乱，新旧势力的斗争尖锐。孔子在这一时期提出“仁”的思想，并把它同“礼”有机结合在一起，形成了儒家思想体系的核心，构成了儒家思想的社会道德规范。在中国早期文明史上，周王朝礼乐文明持续数百载，对中华民族文化心理的塑造产生了重要影 </p> </div> </div> @@ -150,8 +152,8 @@ <img class="w80" src="../../assets/images/yemei01.png" alt="" /> </li> </ul> <div class="bodystyle p-odd"> <p class="td-0">重要影响，最终确立了中国“礼仪之邦”的历史地位。</p> <div class="bodystyle"> <p class="td-0">响，最终确立了中国“礼仪之邦”的历史地位。</p> <div class="bk2"> <div class="zysx"> <p> @@ -163,8 +165,8 @@ <p> 周公和孔子对礼仪的发展起到了重要作用，请大家尽可能多地搜集有关周公和孔子的礼仪小故事，并挑选你体会最深的一个和同学们分享，告诉大家从他们的故事中你学到了什么，有什么感悟。 </p> <textarea v-model="questionData.askAbout.three" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.three" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -182,8 +184,8 @@ <p> 随着信息技术革命的不断发展，在经济全球化的推动下，世界各国之间、不同民族之间、不同地域之间的交往与沟通日益频繁和密切，一些共同的礼仪将被作为国际公认的行为规范而普遍采用，从而进一步影响礼仪文化的发展，并最终形成新的礼仪规范。 </p> <textarea v-model="questionData.askAbout.four" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.four" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p class="td-0 mt-10 mb-10"><span class="bj2">·触礼旁通·</span></p> @@ -206,11 +208,13 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">5</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle p-even"> <div class="bodystyle"> <h3 id="c002"> <span class="h3-zt1">任务2</span><span class="h3-bk">礼仪内涵认知</span> </h3> @@ -238,7 +242,7 @@ <h4 id="d004">二、“仪”的含义</h4> <h5 id="e005">（一）指典范、表率</h5> <p> “上者，下之仪也。彼将听唱而应，视仪而动。唱默则民无应也，仪隐则下无动也。不应不动，则上下无以相有也。”（《荀子·正论》）君主，是臣下的准则。百姓听到倡导就响应，看到准则就行动。君主沉默，百姓就无法响应；准则隐匿，百姓 “上者，下之仪也。彼将听唱而应，视仪而动。唱默则民无应也，仪隐则下无动也。不应不动，则上下无以相有也。”（《荀子·正论》）君主，是臣下的准则。百姓听到倡导就响应，看到准则就行动。君主沉默，百姓就无法响应；准则隐匿，百姓就无 </p> </div> </div> @@ -257,7 +261,7 @@ </ul> <div class="bodystyle"> <p class="td-0"> 就无法行动。不响应、不行动，那么上下就无法相互依靠。这体现出“仪”的表率、榜样和带头作用。 法行动。不响应、不行动，那么上下就无法相互依靠。这体现出“仪”的表率、榜样和带头作用。 </p> <h5 id="e006">（二）指容貌、风度</h5> <p> @@ -272,7 +276,9 @@ </p> <p class="td-0 mb-10 mt-10"><span class="bj2">·触礼旁通·</span></p> <p class="block">一起来看一则飞行日记。</p> <p class="block">欧洲的冬天经常大雪纷飞，航班会因此而延误或者取消。</p> <p class="block"> 欧洲的冬天经常大雪纷飞，航班会因此而延误或者取消。 </p> <p class="block"> 今天是我第一次飞前往伦敦的航班，经过7小时的飞行，准备下降时机长接到地面报告：因为下雪，能见度太低，飞机不能降落。我们不得不在空中盘旋了近1小时，可是很遗憾的是，最终伦敦机场还是因暴风雪不得不宣布暂时关闭，我们备降到了曼彻斯特机场等待伦敦的放飞通知。这一等就是7小时，旅客们都很友好，只是偶尔过来询问天气情况。我们不断地给旅客提供饮品和餐食，最后连飞机上的饼干和糖果也都全部发完。 </p> @@ -288,11 +294,11 @@ </div> <div class="bj3"> <p>1.在你的认知中，“礼仪”到底是什么呢？</p> <textarea v-model="questionData.askAbout.five" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.five" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.结合你的生活经历，讲一件你认为能传达讲礼、懂礼的事情。</p> <textarea v-model="questionData.askAbout.six" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.six" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -305,9 +311,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">7</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h3 id="c003"> @@ -376,9 +384,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">9</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <div class="bk2"> @@ -392,11 +402,11 @@ <p> 1.在日常生活和学习中，如何理解礼仪的规范性特征？请举例说明。 </p> <textarea v-model="questionData.askAbout.seven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.seven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.谈谈你对民航礼仪内涵的理解。</p> <textarea v-model="questionData.askAbout.eight" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.eight" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h3 id="c004"> @@ -423,11 +433,11 @@ </div> <div class="bj3"> <p>1.宴会主人为什么要把净手的水也喝掉呢？</p> <textarea v-model="questionData.askAbout.nine" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.nine" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.这个礼仪小故事对你有什么样的启示？</p> <textarea v-model="questionData.askAbout.ten" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.ten" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h4 id="d011">一、礼敬他人的原则</h4> @@ -483,12 +493,14 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">11</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="td-0 block "> <p class="td-0 block"> 早到！”鲁迅默默地回到座位上，在那张旧书桌上刻了个“早”字，也把一个坚定的信念深深地刻在心里。从那以后，鲁迅上学再没有迟到过，而且时时早、事事早，奋斗了一生。 </p> <h4 id="d015">五、信用宽容的原则</h4> @@ -512,13 +524,13 @@ </div> <div class="bj3"> <p>1.对于礼仪的原则，你是如何认识的？</p> <textarea v-model="questionData.askAbout.eleven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.eleven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p> 2.作为民航专业的学生，你认为民航从业人员应当具备哪些礼仪素质？ </p> <textarea v-model="questionData.askAbout.twelve" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.twelve" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <div class="bk4"> @@ -536,42 +548,22 @@ <p> 1.周朝是礼仪逐步趋向完善的时代，在此期间，（ ）对礼仪的发展起到了巨大的作用。（单选题） </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />A.孟子</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />B.老子</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />C.周公</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />D.孔子</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />A.孟子 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />B.老子 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />C.周公 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectOne.one.value" @change="setBookQuestion" />D.孔子 </p> </div> </div> </div> @@ -589,183 +581,88 @@ </ul> <div class="bodystyle"> <p>2.下面有关“礼”的内在含义说法正确的是（ ）。（多选题）</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />A.表示尊敬、敬意的统称</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />B.为表示敬意或表示隆重举行的仪式</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />C.泛指社会生活中的某种社会规范和道德规范</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="3" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />D.表示送礼物、礼品</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />A.表示尊敬、敬意的统称 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />B.为表示敬意或表示隆重举行的仪式 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />C.泛指社会生活中的某种社会规范和道德规范 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="3" v-model="questionData.projectOne.two.value" @change="setBookQuestion" />D.表示送礼物、礼品 </p> <p>3.下面有关“仪”的内在含义说法正确的是（ ）。（多选题）</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />A.“仪”具有表率、榜样和带头作用</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />B.指个人容貌、风度</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />C.指各种大小型仪式、礼节</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />A.“仪”具有表率、榜样和带头作用 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />B.指个人容貌、风度 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectOne.three.value" @change="setBookQuestion" />C.指各种大小型仪式、礼节 </p> <p> 4.礼仪在本质上具有不同的特征，礼仪的特征包括（ ）。（多选题） </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />A.规范性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />B.时尚性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />C.多样性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />D.传承性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="E" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />E.差异性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="F" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />F.操作性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="G" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />G.时代性</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />A.规范性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />B.时尚性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />C.多样性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />D.传承性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="E" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />E.差异性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="F" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />F.操作性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="G" id="4" v-model="questionData.projectOne.four.value" @change="setBookQuestion" />G.时代性 </p> <p> 5.礼仪的本质是“尊重”，尊己且尊他。有关礼敬他人的原则说法正确的是（ ）。（多选题） </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> A.礼敬他人是指在社交活动中，交往对象之间相互尊敬、谦让，友好相待，和睦共处 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> B.礼敬他人是尊重交往对象的人格，尊重交往对象的感情、喜好、习俗，尊重交往对象的劳动，将对交往对象的重视、恭敬、友好放在首位 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" /> C.礼敬他人主要是分场合和对象，根据具体的场合和对象选择是否给予对方尊重 </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" />D.礼敬他人是与他人建立和谐的人际关系的基石</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="5" v-model="questionData.projectOne.five.value" @change="setBookQuestion" />D.礼敬他人是与他人建立和谐的人际关系的基石 </p> </div> </div> </div> @@ -776,9 +673,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">13</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h2 id="b002">项目二 民航服务意识认知</h2> @@ -817,14 +716,14 @@ </div> <div class="bj3"> <p>1.案例中这名旅客为什么会成为这家航空公司的忠实顾客？</p> <textarea v-model="questionData.askAbout.thirteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.thirteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.此案例说明了民航服务从业人员需要具备什么样的素质？</p> <textarea v-model="questionData.askAbout.fourteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.fourteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>3.这个案例对于你理解民航服务的含义有什么启示？</p> <textarea v-model="questionData.askAbout.fifteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.fifteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h3 id="c005"> @@ -884,9 +783,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">15</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <div class="bk2"> @@ -898,14 +799,14 @@ </div> <div class="bj3"> <p>1.这名乘务员的哪些行为让王先生感到贴心？</p> <textarea v-model="questionData.askAbout.sixteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.sixteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.你觉得是什么让乘务员做出了这些贴心的事情？</p> <textarea v-model="questionData.askAbout.seventeen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>3.从该案例出发，你怎么理解民航服务的本质？</p> <textarea v-model="questionData.askAbout.eighteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.eighteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -989,8 +890,8 @@ </div> <div class="bj3"> <p>民航服务的哪些服务让邝婆婆感受到了温馨和满意？</p> <textarea v-model="questionData.askAbout.nineteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.nineteen" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1003,9 +904,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">17</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h3 id="c006"> @@ -1032,9 +935,8 @@ <p> 请大家讨论一下：什么才是提升服务满意度的法宝呢？民航服务出现质量问题的原因究竟是什么？ </p> <textarea v-model="questionData.askAbout.twenty" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.twenty" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h4 id="d021">二、民航服务质量问题分析</h4> @@ -1052,7 +954,7 @@ <div class="bj3"> <p>在工作中具有较强的自我意识体现在哪里？会带来什么影响呢？</p> <textarea v-model="questionData.askAbout.twentyOne" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1099,7 +1001,7 @@ 羊群能在寒冷的冬天顺利生存的原因是什么？结合生活实际，谈谈你对危机意识的理解。 </p> <textarea v-model="questionData.askAbout.twentyTwo" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -1115,9 +1017,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">19</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <div class="bk2"> @@ -1130,7 +1034,7 @@ <div class="bj3"> <p>民航企业在发展中面临着哪些竞争与危机？</p> <textarea v-model="questionData.askAbout.twentyThree" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h5 id="e011">（四）培训提升有待加强</h5> @@ -1149,7 +1053,7 @@ 结合民航业的发展现状，你认为民航业应该侧重培训员工哪些方面？ </p> <textarea v-model="questionData.askAbout.twentyFour" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -1206,12 +1110,12 @@ <div class="bj3"> <p>1.案例中的汤乘务长为了给孩子降温做了哪些事情呢？</p> <textarea v-model="questionData.askAbout.twentyFive" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p> 2.是什么样的动力让汤乘务长能够坚持蹲在孩子面前十几分钟做医疗救治呢？ </p> <textarea v-model="questionData.askAbout.twentySix" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <h4 id="d023">二、对民航服务意识的要求</h4> @@ -1234,9 +1138,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">21</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="td-0"> @@ -1248,7 +1154,9 @@ <h4 id="d024">三、树立主动服务的意识</h4> <p class="td-0 mb-10 mt-10"><span class="bj2">·触礼旁通·</span></p> <p class="center"><span class="cs1">助旅客找回遗失行李</span></p> <p class="block">2017年，某机场地面服务部收到旅客亲自送来的一面锦旗。</p> <p class="block"> 2017年，某机场地面服务部收到旅客亲自送来的一面锦旗。 </p> <p class="block"> 事情发生在3个月以前，当天航班准时到达机场。值机员小李经过细心检查后按规范向客舱做出了安全手势。可随着客舱门的缓缓推开，乘务长却露出了略显着急的神色，她告诉小李，这个航班上的旅客明先生在广州机场候机时丢失了一个非常重要的包，包内有这次他出差时商务谈判需要的非常机密而且重要的资料，如果丢失了，不仅会泄露商业机密，也会使他即将开展的合作受到极大影响，他和他的公司将损失惨重。明先生在飞机上表现得非常焦虑，一再请求无论如何都要帮助他。 </p> @@ -1293,10 +1201,10 @@ 1.这个案例中，哪些行为属于航空服务人员提供的工作职责规定以外的服务？ </p> <textarea v-model="questionData.askAbout.twentySeven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.案例中小李是怎样主动提供服务的？</p> <textarea v-model="questionData.askAbout.twentyEight" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -1328,7 +1236,7 @@ 在民航服务中，如何才能产生“期待效应”？你可以从哪些方面培养自己的职业意识呢？ </p> <textarea v-model="questionData.askAbout.twentyNine" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1341,9 +1249,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">23</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h5 id="e013">（二）提升“利他”意识</h5> @@ -1404,11 +1314,11 @@ </div> <div class="bj3"> <p>1.乘务长吴某对老爷爷提供了什么价值的服务？</p> <textarea v-model="questionData.askAbout.thirty" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.thirty" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.读完案例你有何感悟？对乘务员这一工作多了哪些认识？</p> <textarea v-model="questionData.askAbout.thirtyOne" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -1424,7 +1334,7 @@ <div class="bj3"> <p>怎样理解民航服务过程中的眼到、口到、心到？</p> <textarea v-model="questionData.askAbout.thirtyTwo" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <div class="bk4"> @@ -1445,170 +1355,92 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">25</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="td-0 mb-10 mt-10"><span class="bj2">·项目自测·</span></p> <p>1.以下哪项不属于民航服务的行业特征？（ ）（单选题）</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />A.经济性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />B.功能性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />C.文明性</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />D.随机性</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />A.经济性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />B.功能性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />C.文明性 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectTwo.one.value" @change="setBookQuestion" />D.随机性 </p> <p>2.以下哪项不属于民航服务的通用标准？（ ）（单选题）</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />A.具有“我为人人，人人为我”的大局意识</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />B.具有主随客便的变通意识</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />C.具有旅客至上、服务第一的规则意识</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />D.具有以顾客为中心的服务意识</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />A.具有“我为人人，人人为我”的大局意识 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />B.具有主随客便的变通意识 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />C.具有旅客至上、服务第一的规则意识 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="2" v-model="questionData.projectTwo.two.value" @change="setBookQuestion" />D.具有以顾客为中心的服务意识 </p> <p> 3.从旅客的角度看，旅客花上比坐汽车、火车高许多的钱坐飞机出行的目的，主要在于（ ）。（单选题） </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />A.安全</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />B.快捷省时</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />C.有人提供专门服务</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />D.舒适</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />A.安全 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />B.快捷省时 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />C.有人提供专门服务 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectTwo.three.value" @change="setBookQuestion" />D.舒适 </p> <p> 4.服务意识也是“利他”的意识，提高服务意识可以从提高“利他”意识入手。具体体现在以下几个方面？（ ）（多选题） </p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />A.充分理解旅客的过错</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />B.充分理解旅客的需求</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />C.充分理解旅客的想法和心态</p> <p><input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />D.充分理解不同旅客</p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />A.充分理解旅客的过错 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />B.充分理解旅客的需求 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />C.充分理解旅客的想法和心态 </p> <p> <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="A" id="4" v-model="questionData.projectTwo.four.value" @change="setBookQuestion" />D.充分理解不同旅客 </p> <p>5.请简要说出民航服务的行业特征。</p> <textarea v-model="questionData.projectTwo.five.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.projectTwo.five.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>6.请根据所学知识分析民航服务的现状及服务质量问题产生的原因。</p> <textarea v-model="questionData.projectTwo.six.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.projectTwo.six.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1667,10 +1499,10 @@ <div class="bj3"> <p>1.此案例中小李具备哪些职业素养能力？</p> <textarea v-model="questionData.askAbout.thirtyThree" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.案例中的旅客为何会感谢小李？</p> <textarea v-model="questionData.askAbout.thirtyFour" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1683,9 +1515,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">27</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h3 id="c008"> @@ -1705,7 +1539,7 @@ <h5 id="e015">（一）飞行员</h5> <p>工作地点：驾驶舱。</p> <p>工作职责：驾驶飞机，将机上旅客安全送达目的地。</p> <div class="img-rights openImgBox mt-20"> <div class="img-rights openImgBox mt-20"> <p class="center"> <img class="img-c" alt="" src="../../assets/images/0033-1.jpg" /> </p> @@ -1746,7 +1580,7 @@ </p> <h5 id="e017">（三）飞机安全员</h5> <p>工作地点：客舱。</p> <div class="img-rights w200 openImgBox "> <div class="img-rights w200 openImgBox"> <p class="center"> <img class="img-c" alt="" src="../../assets/images/0034-2.jpg" /> </p> @@ -1778,15 +1612,19 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">29</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="td-0"> 作，及时发现问题，处理隐患；做好预防性保养、维护工作，减少本区域因停机工时及设备原因造成的材料报废量。 </p> <p class="center openImgBox"><img class="img-d" alt="" src="../../assets/images/0035-1.jpg" /></p> <p class="center openImgBox"> <img class="img-d" alt="" src="../../assets/images/0035-1.jpg" /> </p> <p class="img">图1-3-4 航空机务员</p> <h5 id="e019">（五）签派员</h5> <p>工作地点：机场运行指挥中心。</p> @@ -1863,9 +1701,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">31</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h5 id="e022">（八）地勤员</h5> @@ -1908,7 +1748,7 @@ <div class="bj3"> <p>作为一名民航服务人员，应该具备哪些素养能力呢？</p> <textarea v-model="questionData.askAbout.thirtyFive" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -1944,7 +1784,9 @@ <p class="block"> 微笑一下很简单，微笑1小时却不容易。在新加坡的空姐选拔中，第一关面试为1小时的中英文交流，其中，在1小时中能否一直保持着优美的微笑是重要的考核指标。 </p> <p class="block">在第一关的考核中，12名学员中仅有6名闯过“保持1小时微笑”难关。</p> <p class="block"> 在第一关的考核中，12名学员中仅有6名闯过“保持1小时微笑”难关。 </p> <div class="bk2"> <div class="zysx"> <p> @@ -1955,10 +1797,10 @@ <div class="bj3"> <p>1.新加坡航空为什么要把微笑作为重要的选拔标准？</p> <textarea v-model="questionData.askAbout.twentySix" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.在生活中保持微笑对你有什么益处？</p> <textarea v-model="questionData.askAbout.thirtySeven" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -1974,9 +1816,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">33</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="center openImgBox"> @@ -2027,10 +1871,10 @@ <div class="bj3"> <p>1.此案例体现了乘务员的什么素养能力？</p> <textarea v-model="questionData.askAbout.thirtyEight" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.使旅客小周感动的原因是什么？从案例中你学到了什么？</p> <textarea v-model="questionData.askAbout.thirtyNine" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -2061,9 +1905,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">35</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="block"> @@ -2080,11 +1926,11 @@ <p> 1.除了基础的服务流程，想让旅客有更舒心的服务体验还需要空乘人员具有什么能力？ </p> <textarea v-model="questionData.askAbout.forty" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.forty" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.该案例给你什么样的启示？</p> <textarea v-model="questionData.askAbout.fortyOne" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.fortyOne" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -2121,7 +1967,9 @@ <p class="block"> 当航空公司按照常规给出不予赔偿意见后，小吴一边委婉地向乘客转达，一边不懈地向航空公司争取。终于，小吴急旅客之所急、想旅客之所想的服务感动了航空公司，航空公司最终决定给予补偿。 </p> <p class="block">当小吴将此消息告诉旅客后，赢得了旅客的赞许和感谢。</p> <p class="block"> 当小吴将此消息告诉旅客后，赢得了旅客的赞许和感谢。 </p> <div class="bk2"> <div class="zysx"> <p> @@ -2133,8 +1981,8 @@ <p> 您从此事例中看到小吴的什么职业素养能力？给您带来了什么启发？ </p> <textarea v-model="questionData.askAbout.fortyTwo" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.fortyTwo" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -2158,9 +2006,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">37</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <h4 id="d031">五、沟通能力</h4> @@ -2181,10 +2031,10 @@ <div class="bj3"> <p>1.该案例中哪些地方的沟通还需改进？</p> <textarea v-model="questionData.askAbout.fortyThree" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p>2.结合当时的情况，你觉得应该怎样进行有效的沟通？</p> <textarea v-model="questionData.askAbout.fortyFour" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <p> @@ -2251,9 +2101,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">39</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="block"> @@ -2269,17 +2121,36 @@ <div class="bj3"> <p>1.刘传建机长在处置该事件中，展现了他的哪些能力？</p> <textarea v-model="questionData.askAbout.fortyFive" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <p> 2.如果你是该航班的一名乘务员，在平时的培训中你需要积累哪些方面的素养来完善自己处理紧急情况的能力呢？ </p> <textarea v-model="questionData.askAbout.fortySix" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.askAbout.fortySix" placeholder="请输入内容" rows="2" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> <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 == '4f0afd466e16bde40a447ff467452181' ) > -1 ? collectCheck : collectImg " alt="" class="collect-btn" @click="handleCollect('video-01')" /> </el-tooltip> </p> </div> <h5 id="e023">（一）应急处理能力的培养需要强大的心理素质做支撑</h5> <p> 在出现紧急情况时，乘务员应能够沉着冷静地分析事情的情况以及发展的动向，并且能够根据实际情况判定最优解决方案并迅速采取行动。乘务员具备良好的心理素质不仅能够起到安抚旅客情绪的作用，而且也是让旅客配合做好撤离工作的重要条件。要想在紧急情况出现的时刻能够临危不惧、沉着冷静，这一半取决于乘务员个人的天性，另一半取决于后天的培训。 @@ -2336,9 +2207,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">41</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="td-0"> @@ -2402,15 +2275,27 @@ <p class="block"> （4）不管别人有没有要求，你都会主动提出建议，告诉他应该怎么去做吗？ </p> <p class="block">（5）你讲的故事或逸事是否总是又长又复杂，别人需要耐心地去听？</p> <p class="block"> （5）你讲的故事或逸事是否总是又长又复杂，别人需要耐心地去听？ </p> <p class="block">（6）当他人在融洽地交谈时，你是否会贸然地插话？</p> <p class="block">（7）你是否会经常津津有味地与朋友谈起他们不认识的人？</p> <p class="block"> （7）你是否会经常津津有味地与朋友谈起他们不认识的人？ </p> <p class="block">（8）当别人交谈时，你是否会打断他们？</p> <p class="block">（9）你是否觉得自己讲故事给别人听，比别人讲给你听有意思？</p> <p class="block">（10）你是否常提醒朋友要信守诺言，问他“你记得吗”或“你忘了吗”？</p> <p class="block"> （9）你是否觉得自己讲故事给别人听，比别人讲给你听有意思？ </p> <p class="block"> （10）你是否常提醒朋友要信守诺言，问他“你记得吗”或“你忘了吗”？ </p> <p class="block">（11）你是否坚持让朋友阅读你认为有趣的信息？</p> <p class="block">（12）你是否打电话时说个没完，让其他人在一旁着急等待？</p> <p class="block">（13）你是否经常发现朋友的短处，并要求他们去改进？</p> <p class="block"> （12）你是否打电话时说个没完，让其他人在一旁着急等待？ </p> <p class="block"> （13）你是否经常发现朋友的短处，并要求他们去改进？ </p> </div> </div> </div> @@ -2421,13 +2306,19 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">43</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="block">（14）当别人谈到你不喜欢的话题时，你是否就不说话了？</p> <p class="block">（15）对种种不如意的事情，你是否总是喜欢找人诉苦？</p> <p class="block"> （14）当别人谈到你不喜欢的话题时，你是否就不说话了？ </p> <p class="block"> （15）对种种不如意的事情，你是否总是喜欢找人诉苦？ </p> <h4 id="d034">二、观察能力的训练</h4> <p class="center"> <span class="cs1">观察力考验——图片中共有几个人？</span> @@ -2467,16 +2358,26 @@ </ul> <div class="bodystyle"> <p class="block">（5）常常在别人说话之前就知道他要说什么。</p> <p class="block">（6）如果不喜欢和某人交谈，常常用注意力不集中的方式结束谈话。</p> <p class="block">（7）常常用点头、皱眉等方式让说话人了解我对他说的内容的感觉。</p> <p class="block"> （6）如果不喜欢和某人交谈，常常用注意力不集中的方式结束谈话。 </p> <p class="block"> （7）常常用点头、皱眉等方式让说话人了解我对他说的内容的感觉。 </p> <p class="block">（8）常常别人刚说完，我就谈自己的看法。</p> <p class="block">（9）别人说话的同时，我常常思考接下来我要说的内容。</p> <p class="block">（10）说话人的谈话风格常常影响我对谈话内容的兴趣。</p> <p class="block"> （9）别人说话的同时，我常常思考接下来我要说的内容。 </p> <p class="block"> （10）说话人的谈话风格常常影响我对谈话内容的兴趣。 </p> <p class="block"> （11）为了弄清对方所说的观点，我常采取提问的方式，而不进行猜测。 </p> <p class="block">（12）为了理解对方的观点，我总会下狠功夫。</p> <p class="block">（13）常常听自己喜欢听的内容，而不是听别人表达的内容。</p> <p class="block"> （13）常常听自己喜欢听的内容，而不是听别人表达的内容。 </p> <p class="block"> （14）当我和别人意见不一致时，大多数人认为我理解了他们的观点和想法。 </p> @@ -2492,14 +2393,20 @@ <p class="block">项目名称：雪花片片。</p> <p class="block">项目人数：不限。</p> <p class="block">项目时长：20分钟。</p> <p class="block">项目场地：室内外皆可，为每人提供一张薄的A4大小的空白纸张。</p> <p class="block"> 项目场地：室内外皆可，为每人提供一张薄的A4大小的空白纸张。 </p> <p class="block">活动目的：学习沟通与倾听。</p> <p class="block">项目规则：</p> <p class="block">1.所有学员将眼睛闭上。发给每人一张白纸。</p> <p class="block">2.依照训练员的指令做动作，动作如下：</p> <p class="block">（1）先将白纸对折然后再对折，将右上角撕下。</p> <p class="block">（2）再将纸对折一次，然后在右上角撕下一个边长2cm的正方形。</p> <p class="block">（3）再将纸对折一次，然后在右上角撕下一个半径2cm的扇形。</p> <p class="block"> （2）再将纸对折一次，然后在右上角撕下一个边长2cm的正方形。 </p> <p class="block"> （3）再将纸对折一次，然后在右上角撕下一个半径2cm的扇形。 </p> <p class="block">3.完成动作后睁开眼，摊开纸看看是否相同。</p> <p class="block"> 4.过程中学员如有发问需给予响应，但学员如保持沉默，则在学员完成每一个动作 @@ -2514,9 +2421,11 @@ <li class="header-right-Number header-right-title">模块一</li> <li class="header-right-Number">民航礼仪与服务能力认知</li> <li class="header-right-Number pNum">45</li> <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li> <li class="header-right-last"><br></li> <li class="header-right-end"><br></li> <li class="header-right-Number cloud"> <img class="" src="../../assets/images/yemei02.png" alt="" /> </li> <li class="header-right-last"><br /></li> <li class="header-right-end"><br /></li> </ul> <div class="bodystyle"> <p class="block td-0">后继续下指令。</p> @@ -2533,150 +2442,75 @@ <p> 1.作为一名民用航空人员，应具备哪些基本能力呢？（ ）（多选题） </p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />A.良好的亲和能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />B.细微的观察能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />C.敏锐的注意能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />D.主动的倾听能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="E" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />E.有效的沟通能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="F" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />F.应急处理能力</p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />A.良好的亲和能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />B.细微的观察能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />C.敏锐的注意能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />D.主动的倾听能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="E" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />E.有效的沟通能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="F" id="1" v-model="questionData.projectThree.one.value" @change="setBookQuestion" />F.应急处理能力 </p> <p> 2.民用航空人员在服务过程中应使用正确适当的用语。下列哪些服务用语是忌讳的？（ ）（多选题） </p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />A.对旅客使用不恰当的称呼</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />B.对旅客使用不耐烦、推托、冷漠的语句</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />C.对旅客提出的问题热情大方地回应，做到及时有效的沟通</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />D.对旅客使用反问、责问、轻视的语句</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="E" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />E.对旅客使用催促命令式的语句</p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />A.对旅客使用不恰当的称呼 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />B.对旅客使用不耐烦、推托、冷漠的语句 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />C.对旅客提出的问题热情大方地回应，做到及时有效的沟通 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />D.对旅客使用反问、责问、轻视的语句 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="E" id="2" v-model="questionData.projectThree.two.value" @change="setBookQuestion" />E.对旅客使用催促命令式的语句 </p> <p> 3.作为一名民用航空人员，当面对突发情况时应沉着冷静，同时也该具备哪些基本素养能力呢？（ ）（多选题） </p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />A.心理素质</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />B.坚实的专业知识</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />C.组织能力</p> <p><input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />D.团队精神</p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="A" id="2" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />A.心理素质 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="B" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />B.坚实的专业知识 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="C" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />C.组织能力 </p> <p> <input type="checkbox" name="ball1" :disabled="questionData.isComplete" value="D" id="3" v-model="questionData.projectThree.three.value" @change="setBookQuestion" />D.团队精神 </p> <p>4.根据目前所学专业，请分析自己应该具备哪些素养能力。</p> <textarea v-model="questionData.projectTwo.four.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> <textarea v-model="questionData.projectTwo.four.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box" @change="setBookQuestion"></textarea> </div> </div> </div> @@ -2701,7 +2535,6 @@ collectImg: require("../../assets/images/icon/heart.png"), collectCheck: require("../../assets/images/icon/heart-check.png"), videoPathOne: "", videoPathTwo: "", collectResourceList: [], showQuestionAnswer: false, showChoiceAnswer: false, @@ -2709,127 +2542,108 @@ isFocused: null, chapterData: { isCollectVideo: false, isCollectVideo01: false, }, questionData: { isComplete: false, askAbout:{ one:'', two:'', three:'', four:'', five:'', six:'', seven:'', eight:'', nine:'', ten:'', eleven:'', twelve:'', thirteen:'', fourteen:'', fifteen:'', sixteen:'', seventeen:'', eighteen:'', nineteen:'', twenty:'', twentyOne:'', twentyTwo:'', twentyThree:'', twentyFour:'', twentyFive:'', twentySix:'', twentySeven:'', twentyEight:'', twentyNine:'', thirty:'', thirtyOne:'', thirtyTwo:'', thirtyThree:'', thirtyFour:'', thirtyFive:'', twentySix:'', thirtySeven:'', thirtyEight:'', thirtyNine:'', forty:'', fortyOne:'', fortyTwo:'', fortyThree:'', fortyFour:'', fortyFive:'', fortySix:'', askAbout: { one: "", two: "", three: "", four: "", five: "", six: "", seven: "", eight: "", nine: "", ten: "", eleven: "", twelve: "", thirteen: "", fourteen: "", fifteen: "", sixteen: "", seventeen: "", eighteen: "", nineteen: "", twenty: "", twentyOne: "", twentyTwo: "", twentyThree: "", twentyFour: "", twentyFive: "", twentySix: "", twentySeven: "", twentyEight: "", twentyNine: "", thirty: "", thirtyOne: "", thirtyTwo: "", thirtyThree: "", thirtyFour: "", thirtyFive: "", twentySix: "", thirtySeven: "", thirtyEight: "", thirtyNine: "", forty: "", fortyOne: "", fortyTwo: "", fortyThree: "", fortyFour: "", fortyFive: "", fortySix: "", }, projectOne:{ one:{ value:[] projectOne: { one: { value: [], }, two:{ value:[] two: { value: [], }, three:{ value:[] three: { value: [], }, four:{ value:[] four: { value: [], }, five:{ value:[] } five: { value: [], }, }, projectTwo:{ one:{ value:[] projectTwo: { one: { value: [], }, two:{ value:[] two: { value: [], }, three:{ value:[] three: { value: [], }, four:{ value:[] four: { value: [], }, five:{ value:"" five: { value: "", }, six:{ value:"" } six: { value: "", }, }, projectThree:{ one:{ value:[] projectThree: { one: { value: [], }, two:{ value:[] two: { value: [], }, three:{ value:[] three: { value: [], }, four:{ value:'' } four: { value: "", }, }, }, chapter001: { videoMd5: [ { isCollectVideo: false, handleMd5: "", md5: "7454A10BD25ED828FF31D0702DA63D55", name: "什么是心理健康", }, { isCollectVideo: false, handleMd5: "", md5: "E4AC28F178D660E96355C17E6F283E66", name: "心理健康的10项标准", }, ], }, }; }, @@ -2841,7 +2655,7 @@ this.questionData = JSON.parse(bookQuestion); } const choiceQuestion = localStorage.getItem( "civilAviatyonSevervices-book-chapter01-Data" "aviationEtiquette-book-chapter02-Data" ); if (choiceQuestion) { this.chapterData = JSON.parse(choiceQuestion); @@ -2865,29 +2679,13 @@ methods: { async getVidoePath() { this.videoPathOne = await getResourcePath( "f230fd8fd7952a4ad4dd05d94df7e797" "4f0afd466e16bde40a447ff467452181" ); this.videoPathTwo = await getResourcePath( "700cfdb8b85b372045b1e97e3356ae3a" ); for (let index = 0; index < this.chapter001.videoMd5.length; index++) { const item = this.chapter001.videoMd5[index]; if (item.md5 && !item.md5.includes("https:")) { item.handleMd5 = await getResourcePath(item.md5); } } }, setBookQuestion() { localStorage.setItem( "aviationEtiquette-book-chapter01-question-one", JSON.stringify(this.questionData) ); }, handleChapter001() { localStorage.setItem( "civilAviatyonSevervices-book-chapter001", JSON.stringify(this.chapter001) ); }, handleFocus(id) { @@ -2898,38 +2696,25 @@ }, handleCollect(e) { if (e.md5) { if (e == "video-01") { this.handleCollectResource( e.md5, e.md5, "4f0afd466e16bde40a447ff467452181", "4f0afd466e16bde40a447ff467452181", "", "视频", "bits", "微课小课堂：" + e.name ); e.isCollectVideo = !e.isCollectVideo; } else if (e == "video-01") { this.handleCollectResource( "f230fd8fd7952a4ad4dd05d94df7e797", "f230fd8fd7952a4ad4dd05d94df7e797", "", "视频", "bits", "视频：心理学的流派" "视频：川航紧急撤离" ); this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; } else if (e == "video-02") { this.handleCollectResource( "700cfdb8b85b372045b1e97e3356ae3a", "700cfdb8b85b372045b1e97e3356ae3a", "", "视频", "bits", "视频：心理学的研究内容" ); this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01; } this.handleChapter001(); this.handleChapterData(); }, handleChapterData() { localStorage.setItem( "aviationEtiquette-book-chapter02-Data", JSON.stringify(this.chapterData) ); }, //资源收藏事件 // resourcePath 文件路径， @@ -2961,8 +2746,7 @@ this.config.activeBook.bookId, this.collectResourceList ); } }, }, }; </script> src/books/aviationEtiquette/view/components/chapter005.vue
@@ -380,6 +380,25 @@ <p class="fz-15"> 某高校每年举行五四礼仪时装秀，以航空职业礼仪和技能展示为主，让每一名学生参与进来并成为主角，对标国际赛事的高规格、高水准，全方位展示学生的职业风采和时尚风貌。从班级普及赛到最终T台呈现，通过形形色色的编排和服装自制，同学们展现了高度职业化的民航员工的专业素质。 </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 == 'd3ac730a06dcc8381de684ace3263a63' ) > -1 ? collectCheck : collectImg " alt="" class="collect-btn" @click="handleCollect('video-01')" /> </el-tooltip> </p> </div> </div> <div class="bk2"> <div class="zysx"> @@ -931,25 +950,8 @@ nine: "", }, }, chapter004: { videoMd5: [ { isCollectVideo: false, handleMd5: "", md5: "7454A10BD25ED828FF31D0702DA63D55", name: "什么是心理健康", }, { isCollectVideo: false, handleMd5: "", md5: "E4AC28F178D660E96355C17E6F283E66", name: "心理健康的10项标准", }, ], }, chapterData: { isCollectVideo: false, isCollectVideo01: false, }, }; }, @@ -962,18 +964,12 @@ } const choiceQuestion = localStorage.getItem( "civilAviatyonSevervices-book-chapter04-Data" "aviationEtiquette-book-chapter04-Data" ); if (choiceQuestion) { this.chapterData = JSON.parse(choiceQuestion); } const videoData = localStorage.getItem( "civilAviatyonSevervices-book-chapter004" ); if (videoData) { this.chapter004 = JSON.parse(videoData); } this.getVidoePath(); this.collectResourceList = await getCollectResource( this.config.activeBook.bookId @@ -982,17 +978,8 @@ methods: { async getVidoePath() { this.videoPathOne = await getResourcePath( "f230fd8fd7952a4ad4dd05d94df7e797" "d3ac730a06dcc8381de684ace3263a63" ); this.videoPathTwo = await getResourcePath( "700cfdb8b85b372045b1e97e3356ae3a" ); for (let index = 0; index < this.chapter004.videoMd5.length; index++) { const item = this.chapter004.videoMd5[index]; if (item.md5 && !item.md5.includes("https:")) { item.handleMd5 = await getResourcePath(item.md5); } } }, setBookQuestion() { @@ -1004,17 +991,10 @@ handleChapterData() { localStorage.setItem( "civilAviatyonSevervices-book-chapter04-Data", "aviationEtiquette-book-chapter04-Data", JSON.stringify(this.chapterData) ); }, handlechapter004() { localStorage.setItem( "civilAviatyonSevervices-book-chapter004", JSON.stringify(this.chapter004) ); }, handleFocus(id) { this.isFocused = id; // 当textarea聚焦时，设置为true }, @@ -1023,38 +1003,17 @@ }, handleCollect(e) { if (e.md5) { if (e == "video-01") { this.handleCollectResource( e.md5, e.md5, "d3ac730a06dcc8381de684ace3263a63", "d3ac730a06dcc8381de684ace3263a63", "", "视频", "bits", "微课小课堂：" + e.name ); e.isCollectVideo = !e.isCollectVideo; } else if (e == "video-01") { this.handleCollectResource( "f230fd8fd7952a4ad4dd05d94df7e797", "f230fd8fd7952a4ad4dd05d94df7e797", "", "视频", "bits", "视频：心理学的流派" "视频：礼仪时装秀" ); this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; } else if (e == "video-02") { this.handleCollectResource( "700cfdb8b85b372045b1e97e3356ae3a", "700cfdb8b85b372045b1e97e3356ae3a", "", "视频", "bits", "视频：心理学的研究内容" ); this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01; } this.handlechapter004(); this.handleChapterData(); }, //资源收藏事件 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> ⑧检查：正面无碎发，纹理整齐，表面光滑；侧面发夹对称，发髻底端不低于两耳垂；背面发髻圆润、饱满，直径不小于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> ⑨检查：正面刘海区纹理整齐，表面光滑，刘海最低点与眉尾有一指至两指宽距离。侧面无碎发，分缝线不外露。发髻圆润、饱满，直径不小于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(); src/books/aviationEtiquette/view/components/index.vue
@@ -1,165 +1,165 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="page-content" :style="{ fontSize: fontSize + 'px', transform: `scale(${pageZoom})`, transformOrigin: 'center top', }"> <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour> <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"> </chapterFive> </div> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> </template> <script> import pageHeader from "./header.vue"; import chapterOne from "./chapter001.vue"; import chapterTwo from "./chpater002.vue"; import chapterThree from "./chapter003.vue"; import chapterFour from "./chapter004.vue"; import chapterFive from "./chapter005.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import Swiper from "swiper/bundle"; import "swiper/swiper-bundle.css"; import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { name: "pageContent", data() { return { catalogLength: 6, // 总章节数 showCatalogList: [], // 显示的章节 loadThreshold: 300, // 触发加载阈值 throttleThreshold: 100, // 节流阈值 previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, audioPath: "", currentTime: null, videoList: [], }; <div class="page-content" :style="{ fontSize: fontSize + 'px', transform: `scale(${pageZoom})`, transformOrigin: 'center top', }"> <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour> <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"> </chapterFive> </div> </div> </template> <script> import pageHeader from "./header.vue"; import chapterOne from "./chapter001.vue"; import chapterTwo from "./chpater002.vue"; import chapterThree from "./chapter003.vue"; import chapterFour from "./chapter004.vue"; import chapterFive from "./chapter005.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import Swiper from "swiper/bundle"; import "swiper/swiper-bundle.css"; import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { name: "pageContent", data() { return { catalogLength: 6, // 总章节数 showCatalogList: [], // 显示的章节 loadThreshold: 300, // 触发加载阈值 throttleThreshold: 100, // 节流阈值 previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, audioPath: "", currentTime: null, videoList: [], }; }, computed: { fontSize() { this.transformDom(this.$store.state.qiankun.fontSize) return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 17; }, computed: { fontSize() { this.transformDom(this.$store.state.qiankun.fontSize) return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 17; }, pageZoom() { return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1; pageZoom() { return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1; }, }, watch: { showCatalogList: { handler(newVal, oldVal) { if ( this.$store.state.qiankun && this.$store.state.qiankun.catalogChange ) { // 调用父层方法 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal, }); } // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); }, }, watch: { showCatalogList: { handler(newVal, oldVal) { if ( this.$store.state.qiankun && this.$store.state.qiankun.catalogChange ) { // 调用父层方法 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal, }); } // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); }, }, loadPageList: { handler(newVal, oldVal) { setTimeout(() => { this.transformDom(this.$store.state.qiankun.fontSize) this.initSwiper(); this.initViewer(); this.closeAudio(); this.closeVideo(); }, 200); }, }, pageZoom: { handler(newVal, oldVal) { const scrollBox = ( this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; }, loadPageList: { handler(newVal, oldVal) { setTimeout(() => { this.transformDom(this.$store.state.qiankun.fontSize) this.initSwiper(); this.initViewer(); this.closeAudio(); this.closeVideo(); }, 200); }, }, mounted() { // 默认加载章节 this.showCatalogList = [1]; // 滚动监听节流 this.throttledScrollHandler = _.throttle( this.scrollFun, this.throttleThreshold, { leading: true, trailing: false } ); // 定义子层方法 if (this.setGlobalState) { // 提供页面跳转功能 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); }, // 渲染笔记、高亮、划线 renderSign: (type, data) => { // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记； this.handelSignData(type, data); // this.renderSign(type, data); }, // 删除笔记、高亮、划线 delSign: (data) => { this.delSign(data); }, // 全文检索 searchBookByKeyword: (keyword) => { return this.searchTextByPage(keyword); }, // 跳转检索结果位置 jumpSearchItem: (data) => { this.searchItemLocation(data); }, }); } // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。 // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。 this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 pageZoom: { handler(newVal, oldVal) { const scrollBox = ( this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; }, }, }, mounted() { // 默认加载章节 this.showCatalogList = [1]; // 滚动监听节流 this.throttledScrollHandler = _.throttle( this.scrollFun, this.throttleThreshold, { leading: true, trailing: false } ); // 定义子层方法 if (this.setGlobalState) { // 提供页面跳转功能 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); }, // 渲染笔记、高亮、划线 renderSign: (type, data) => { // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记； this.handelSignData(type, data); // this.renderSign(type, data); }, // 删除笔记、高亮、划线 delSign: (data) => { this.delSign(data); }, // 全文检索 searchBookByKeyword: (keyword) => { return this.searchTextByPage(keyword); }, // 跳转检索结果位置 jumpSearchItem: (data) => { this.searchItemLocation(data); }, }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); // 测试页面跳转 setTimeout(() => { this.gotoPage(6, 166); } // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。 // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。 this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); // 测试页面跳转 // setTimeout(() => { // this.gotoPage(2, 6); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -173,607 +173,415 @@ // ids: ["2ACA9359"] // }); // }, 2000); }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 500); }, methods: { // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // setZoom2() { // let scale = this.$store.state.qiankun.scale - 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // 滚动监听 scrollFun(event) { this.handleVideoPicture() // 判断向上滚动还是向下滚动 if (event.target.scrollTop > this.previousScrollTop) { this.getAduio(); // 向下 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; // }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 500); }, methods: { // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // setZoom2() { // let scale = this.$store.state.qiankun.scale - 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // 滚动监听 scrollFun(event) { this.handleVideoPicture() // 判断向上滚动还是向下滚动 if (event.target.scrollTop > this.previousScrollTop) { this.getAduio(); // 向下 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { console.log(1); // 到达阈值 if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold this.showCatalogList[this.showCatalogList.length - 1] < this.catalogLength ) { console.log(1); // 到达阈值 if ( this.showCatalogList[this.showCatalogList.length - 1] < this.catalogLength ) { // 加载下一章 this.showCatalogList.push( this.showCatalogList[this.showCatalogList.length - 1] + 1 ); if (this.showCatalogList.length > 3) { // 超过三章隐藏顶部一章 this.showCatalogList.shift(); } } } } else if (event.target.scrollTop < this.previousScrollTop) { this.handleAudio(); // 向上 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 到达阈值 if (this.showCatalogList[0] > 0) { // 加载上一章 this.showCatalogList.unshift(this.showCatalogList[0] - 1); if (this.showCatalogList.length > 3) { // 超过三章隐藏底部一章 this.showCatalogList.pop(); } // 加载下一章 this.showCatalogList.push( this.showCatalogList[this.showCatalogList.length - 1] + 1 ); if (this.showCatalogList.length > 3) { // 超过三章隐藏顶部一章 this.showCatalogList.shift(); } } } // showCatalogList 当前显示的三个章节，watch监听传递给主应用 // 更新上一次滚动的位置 this.previousScrollTop = event.target.scrollTop; }, // 章节、页面跳转 gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { // 处理渲染章节 if (catalog == 0) { this.showCatalogList = [0, 1]; } else if (catalog == this.catalogLength) { this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } setTimeout(() => { // 跳转页码 const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("页码错误！"); } else if (event.target.scrollTop < this.previousScrollTop) { this.handleAudio(); // 向上 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 到达阈值 if (this.showCatalogList[0] > 0) { // 加载上一章 this.showCatalogList.unshift(this.showCatalogList[0] - 1); if (this.showCatalogList.length > 3) { // 超过三章隐藏底部一章 this.showCatalogList.pop(); } }, 500); } } } // showCatalogList 当前显示的三个章节，watch监听传递给主应用 // 更新上一次滚动的位置 this.previousScrollTop = event.target.scrollTop; }, // 章节、页面跳转 gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { // 处理渲染章节 if (catalog == 0) { this.showCatalogList = [0, 1]; } else if (catalog == this.catalogLength) { this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, ]; } else { console.log("章节错误！"); this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } }, // 处理标记数据 handelSignData(type, data) { if (this.loadPageList.indexOf(Number(data.page)) > -1) { // 立即渲染 this.renderSign(type, data); } // 储存数据 if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; this.renderSignMap[type][data.page].push(data); }, // 渲染标记 renderSign(type, data) { // 父层设置禁止渲染标记时不再进行渲染 if (this.$store.state.qiankun.disableSign) { return false; } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`); // 去重 if (!existence) { setTimeout(() => { // 跳转页码 const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组 const treeWalker = document.createTreeWalker( pageDom, NodeFilter.SHOW_TEXT ); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { allTextNodes.push(currentNode); currentNode = treeWalker.nextNode(); ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("页码错误！"); } for (let i = 0; i < allTextNodes.length; i++) { const textDom = allTextNodes[i]; if (textDom.textContent.indexOf(data.txt) > -1) { let reg = new RegExp(`${data.txt}`, "ig"); switch (type) { case "Highlight": // 高亮 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Dashing": // 划线 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Note": // 笔记 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ); break; } }, 500); } else { console.log("章节错误！"); } }, // 处理标记数据 handelSignData(type, data) { if (this.loadPageList.indexOf(Number(data.page)) > -1) { // 立即渲染 this.renderSign(type, data); } // 储存数据 if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; this.renderSignMap[type][data.page].push(data); }, // 渲染标记 renderSign(type, data) { // 父层设置禁止渲染标记时不再进行渲染 if (this.$store.state.qiankun.disableSign) { return false; } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`); // 去重 if (!existence) { const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组 const treeWalker = document.createTreeWalker( pageDom, NodeFilter.SHOW_TEXT ); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { allTextNodes.push(currentNode); currentNode = treeWalker.nextNode(); } for (let i = 0; i < allTextNodes.length; i++) { const textDom = allTextNodes[i]; if (textDom.textContent.indexOf(data.txt) > -1) { let reg = new RegExp(`${data.txt}`, "ig"); switch (type) { case "Highlight": // 高亮 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Dashing": // 划线 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Note": // 笔记 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ); break; } } } }, // 删除标记渲染 delSign({ ids, type }) { if (ids && ids.length) { for (let i = 0; i < ids.length; i++) { const id = ids[i]; const dom = ( this.container ? this.container : document ).querySelector(`[dataid="${id}"]`); dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } if (type) { const doms = ( } }, // 删除标记渲染 delSign({ ids, type }) { if (ids && ids.length) { for (let i = 0; i < ids.length; i++) { const id = ids[i]; const dom = ( this.container ? this.container : document ).querySelectorAll(`[datatype="${type}"]`); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); ).querySelector(`[dataid="${id}"]`); dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } if (type) { const doms = ( this.container ? this.container : document ).querySelectorAll(`[datatype="${type}"]`); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } }, initObservation() { const sections = ( this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { if (this.config.activeBook && this.config.activeBook.tryPageCount) { const page = section.getAttribute("page"); if (Number(page) > this.config.activeBook.tryPageCount) { let chapterDom = this.getParentWithClass(section, "chapter"); const chapterNum = chapterDom.getAttribute("num"); this.catalogLength = Number(chapterNum) - 1; section.remove(); return false; } } }, initObservation() { const sections = ( this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { if (this.config.activeBook && this.config.activeBook.tryPageCount) { const page = section.getAttribute("page"); if (Number(page) > this.config.activeBook.tryPageCount) { let chapterDom = this.getParentWithClass(section, "chapter"); const chapterNum = chapterDom.getAttribute("num"); this.catalogLength = Number(chapterNum) - 1; section.remove(); return false; } } // observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { this.observer.observe(section); section.setAttribute("observer", "1"); } if (!isLoadObserver) { this.loadPageObserver.observe(section); section.setAttribute("loadObserver", "1"); } }); }, initThemeColor() { // 获取各种需要主题色的节点 const colorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-color"); const backgroundColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-back"); const borderColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-border"); // 获取配置的主题色 const bookThemeColor = this.config.activeBook && this.config.activeBook.bookThemeColor ? this.config.activeBook.bookThemeColor : null; const chapterThemeColor = this.config.activeBook && this.config.activeBook.chapterThemeColor ? this.config.activeBook.chapterThemeColor : null; const pageThemeColor = this.config.activeBook && this.config.activeBook.pageThemeColor ? this.config.activeBook.pageThemeColor : null; colorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } }); backgroundColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } }); borderColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } }); }, getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } // observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { this.observer.observe(section); section.setAttribute("observer", "1"); } }, pageChangeCallback(entries, observer) { //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。 entries.forEach((entry) => { //entry.isIntersecting：检查当前目标元素是否与根元素相交。 if (entry.isIntersecting) { const target = entry.target; //entry.target：获取当前目标元素 const page = target.getAttribute("page"); if (!isLoadObserver) { this.loadPageObserver.observe(section); section.setAttribute("loadObserver", "1"); } }); }, initThemeColor() { // 获取各种需要主题色的节点 const colorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-color"); const backgroundColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-back"); const borderColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-border"); // 获取配置的主题色 const bookThemeColor = this.config.activeBook && this.config.activeBook.bookThemeColor ? this.config.activeBook.bookThemeColor : null; const chapterThemeColor = this.config.activeBook && this.config.activeBook.chapterThemeColor ? this.config.activeBook.chapterThemeColor : null; const pageThemeColor = this.config.activeBook && this.config.activeBook.pageThemeColor ? this.config.activeBook.pageThemeColor : null; colorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } }); backgroundColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } }); borderColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } }); }, getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, pageChangeCallback(entries, observer) { //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。 entries.forEach((entry) => { //entry.isIntersecting：检查当前目标元素是否与根元素相交。 if (entry.isIntersecting) { const target = entry.target; //entry.target：获取当前目标元素 const page = target.getAttribute("page"); const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); const catalog = catalogDom.getAttribute("num"); let text = null; if (target.querySelector("p")) { text = target.querySelector("p").textContent.substring(0, 50); } // 返回页码和章节信息 if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections：获取所有具有 .section 类名的元素，并转换为数组。 // let index = sections.findIndex((section) => section === target) + 1; //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。 } }); }, loadPageCallback(entries, observer) { entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); // 添加页码 this.loadPageList.push(Number(page)); const catalog = catalogDom.getAttribute("num"); let text = null; if (target.querySelector("p")) { text = target.querySelector("p").textContent.substring(0, 50); } // 返回页码和章节信息 if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections：获取所有具有 .section 类名的元素，并转换为数组。 // let index = sections.findIndex((section) => section === target) + 1; //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。 } }); }, loadPageCallback(entries, observer) { entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); // 添加页码 this.loadPageList.push(Number(page)); const catalog = catalogDom.getAttribute("num"); // if (!this.questionDataMap[page]) { // if (testData && testData[catalog]) { // if (testData[catalog][page]) { // if (Array.isArray(testData[catalog][page])) { // this.questionDataMap[page] = await getQuestionList( // page, // testData[catalog][page], // this.config.activeBook // ); // } else { // const obj = {}; // for (let key in testData[catalog][page]) { // obj[key] = await getQuestionList( // [], // testData[catalog][page][key], // this.config.activeBook // ); // } // this.questionDataMap[page] = obj; // } // console.log("题目", this.questionDataMap); // } // } // } // 渲染这一页的标记 for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item); }); } } // 处理高亮 if (this.highlightData) { // 高亮行 setTimeout(() => { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( target, NodeFilter.SHOW_TEXT ); // 匹配关键字 const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf( this.highlightData.txt ); if (txtIndex > -1) { textDom.parentNode.style.transition = "background-color 0.8s"; textDom.parentNode.scrollIntoView(); textDom.parentNode.style.backgroundColor = "#79bbf0"; setTimeout(() => { textDom.parentNode.style.backgroundColor = ""; }, 1000); } } }, 100); } if (this.loadPageList.length > 5) { // 超过5页 this.loadPageList.shift(); } } } }); }, initSwiper() { const doms = ( this.container ? this.container : document ).querySelectorAll(".swiper-img"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: { //自动开始 delay: 3000, //时间间隔 disableOnInteraction: false, //*手动操作轮播图后不会暂停* }, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 // observer: true, // observeParents: true // // 如果需要分页器 // pagination: { // el: (this.container ? this.container : document).querySelector( // ".swiper-pagination" // ), // clickable: true // 分页器可以点击 // if (!this.questionDataMap[page]) { // if (testData && testData[catalog]) { // if (testData[catalog][page]) { // if (Array.isArray(testData[catalog][page])) { // this.questionDataMap[page] = await getQuestionList( // page, // testData[catalog][page], // this.config.activeBook // ); // } else { // const obj = {}; // for (let key in testData[catalog][page]) { // obj[key] = await getQuestionList( // [], // testData[catalog][page][key], // this.config.activeBook // ); // } // this.questionDataMap[page] = obj; // } // console.log("题目", this.questionDataMap); // } // } // } }); } const pptDoms = ( this.container ? this.container : document ).querySelectorAll(".swiper_ppt"); for (let i = 0; i < pptDoms.length; i++) { const dom = pptDoms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: false, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, on: { init: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, slideChange: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, }, }); } }, initViewer() { const doms = ( this.container ? this.container : document ).querySelectorAll(".openImgBox"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Viewer(dom, { container: this.container ? this.container.querySelector("#app") : "body", navbar: true, // 显示导航栏 toolbar: true, // 显示工具栏 title: true, // 显示标题 }); } }, // 根据关键字全文检索 searchTextByPage(keyword) { const searchResult = []; let catalogIndex = 0; // 所有章节组件（每本书制作时单独配置） const pageData = { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterFive }; // 遍历所有章节文件 for (const key in pageData) { catalogIndex++; let pageComponent, pageExample; // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取页码 const pageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelectorAll(".page-box"); const pages = []; for (let i = 0; i < pageDom.length; i++) { const pageDomItem = pageDom[i]; pages.push(Number(pageDomItem.getAttribute("page"))); } // 获取页面结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; // 遍历页码 if (pages.length) { for (let i = 0; i < pages.length; i++) { const pageNum = pages[i]; // 动态渲染对应章节的页码 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取对应页面dom const thisPageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // 渲染这一页的标记 for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item); }); } } // 处理高亮 if (this.highlightData) { // 高亮行 setTimeout(() => { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( thisPageDom, target, NodeFilter.SHOW_TEXT ); // 匹配关键字 @@ -785,178 +593,369 @@ } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf(keyword); let txtIndex = textDom.textContent.indexOf( this.highlightData.txt ); if (txtIndex > -1) { // 记录关键字所在页码、章节以及匹配到的段落 searchResult.push({ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, txtIndex: txtIndex, }); textDom.parentNode.style.transition = "background-color 0.8s"; textDom.parentNode.scrollIntoView(); textDom.parentNode.style.backgroundColor = "#79bbf0"; setTimeout(() => { textDom.parentNode.style.backgroundColor = ""; }, 1000); } } // 结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; } }, 100); } if (this.loadPageList.length > 5) { // 超过5页 this.loadPageList.shift(); } } } // 输出搜索结果 console.log(searchResult); return searchResult; }, // 根据检索结果跳转对应位置并高亮 searchItemLocation(data) { // 记录高亮信息 this.highlightData = data; // 跳转 this.gotoPage(data.catalog, data.page, () => { }); }, // 页面向下滚动，音频小窗播放功能 getAduio() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); this.videoList = allVideo; if (allVideo.length) { // 查找播放状态的最后一条音频 const playAudio = allVideo .reverse() .find((item) => item.paused == false); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap < 0) { playAudio.pause(); this.audioPath = playAudio.src; this.currentTime = playAudio.currentTime; }); }, initSwiper() { const doms = ( this.container ? this.container : document ).querySelectorAll(".swiper-img"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: { //自动开始 delay: 3000, //时间间隔 disableOnInteraction: false, //*手动操作轮播图后不会暂停* }, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 // observer: true, // observeParents: true // // 如果需要分页器 // pagination: { // el: (this.container ? this.container : document).querySelector( // ".swiper-pagination" // ), // clickable: true // 分页器可以点击 // } }); } const pptDoms = ( this.container ? this.container : document ).querySelectorAll(".swiper_ppt"); for (let i = 0; i < pptDoms.length; i++) { const dom = pptDoms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: false, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, on: { init: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, slideChange: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, }, }); } }, initViewer() { const doms = ( this.container ? this.container : document ).querySelectorAll(".openImgBox"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Viewer(dom, { container: this.container ? this.container.querySelector("#app") : "body", navbar: true, // 显示导航栏 toolbar: true, // 显示工具栏 title: true, // 显示标题 }); } }, // 根据关键字全文检索 searchTextByPage(keyword) { const searchResult = []; let catalogIndex = 0; // 所有章节组件（每本书制作时单独配置） const pageData = { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterFive }; // 遍历所有章节文件 for (const key in pageData) { catalogIndex++; let pageComponent, pageExample; // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取页码 const pageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelectorAll(".page-box"); const pages = []; for (let i = 0; i < pageDom.length; i++) { const pageDomItem = pageDom[i]; pages.push(Number(pageDomItem.getAttribute("page"))); } // 获取页面结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; // 遍历页码 if (pages.length) { for (let i = 0; i < pages.length; i++) { const pageNum = pages[i]; // 动态渲染对应章节的页码 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取对应页面dom const thisPageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( thisPageDom, NodeFilter.SHOW_TEXT ); // 匹配关键字 const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf(keyword); if (txtIndex > -1) { // 记录关键字所在页码、章节以及匹配到的段落 searchResult.push({ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, txtIndex: txtIndex, }); } } // 结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; } } } }, // 页面向上滚动，音频小窗回收 handleAudio() { if (!this.audioPath) return false; let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); if (allVideo.length) { //查找与小窗播放音频同源的页面audio DOM const playAudio = allVideo.find((item) => item.src == this.audioPath); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap >= 0) { if (this.$refs.audioPlayer) { const playerState = this.$refs.audioPlayer.getVideoPlayer(); this.audioPath = ""; playAudio.currentTime = playerState.currentTime; if (!playerState.paused) playAudio.play(); } } } } }, // 关闭mini video closeMiniAudio() { this.audioPath = ""; }, // 点击音频播放，关闭其他音频 closeAudio() { let allAudio = ( this.container ? this.container : document ).querySelectorAll(".audio"); for (let index = 0; index < allAudio.length; index++) { const item = allAudio[index]; item.addEventListener("play", () => { const audioList = Array.from(allAudio); for (let cindex = 0; cindex < audioList.length; cindex++) { const citem = audioList[cindex]; if (citem.currentSrc != item.src) { citem.pause(); } } this.closeMiniAudio(); }); } }, // 点击视频关闭其他 closeVideo() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".video"); for (let index = 0; index < allVideo.length; index++) { const item = allVideo[index]; item.addEventListener("playing", (item) => { const path = item.srcElement.src; const videoList = Array.from(allVideo); for (let cindex = 0; cindex < videoList.length; cindex++) { const citem = videoList[cindex]; if (citem.currentSrc != path && path) { citem.pause(); } } }); } }, // 视频小窗 handleVideoPicture() { let doms = ( this.container ? this.container : document ).querySelectorAll(".video"); doms = Array.from(doms) if (!doms.length) return false const playVudio = doms } // 输出搜索结果 console.log(searchResult); return searchResult; }, // 根据检索结果跳转对应位置并高亮 searchItemLocation(data) { // 记录高亮信息 this.highlightData = data; // 跳转 this.gotoPage(data.catalog, data.page, () => { }); }, // 页面向下滚动，音频小窗播放功能 getAduio() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); this.videoList = allVideo; if (allVideo.length) { // 查找播放状态的最后一条音频 const playAudio = allVideo .reverse() .find((item) => item.paused == false); if (playVudio) { const bottomGap = playVudio.getBoundingClientRect().bottom; const topGap = playVudio.getBoundingClientRect().top; if (bottomGap < 0 || topGap > window.innerHeight) { if(playVudio.readyState) playVudio.requestPictureInPicture(); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap < 0) { playAudio.pause(); this.audioPath = playAudio.src; this.currentTime = playAudio.currentTime; } } }, //其他类名下字体大小变化 transformDom(fs) { if(!fs) return let doms = ( this.container ? this.container : document ).querySelectorAll('.block') if(!doms.length) return for (let index = 0; index < doms.length; index++) { const dom = doms[index]; dom.style.fontSize = fs + 'px' } } }, components: { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterFive // 页面向上滚动，音频小窗回收 handleAudio() { if (!this.audioPath) return false; let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); if (allVideo.length) { //查找与小窗播放音频同源的页面audio DOM const playAudio = allVideo.find((item) => item.src == this.audioPath); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap >= 0) { if (this.$refs.audioPlayer) { const playerState = this.$refs.audioPlayer.getVideoPlayer(); this.audioPath = ""; playAudio.currentTime = playerState.currentTime; if (!playerState.paused) playAudio.play(); } } } } }, }; </script> <style lang="less" scoped> .page-main { width: 100% !important; height: 100% !important; overflow: auto; .page-content { max-width: 816px; min-width: 375px; margin: 0 auto; padding-bottom: 100px; // 关闭mini video closeMiniAudio() { this.audioPath = ""; }, // 点击音频播放，关闭其他音频 closeAudio() { let allAudio = ( this.container ? this.container : document ).querySelectorAll(".audio"); for (let index = 0; index < allAudio.length; index++) { const item = allAudio[index]; item.addEventListener("play", () => { const audioList = Array.from(allAudio); for (let cindex = 0; cindex < audioList.length; cindex++) { const citem = audioList[cindex]; if (citem.currentSrc != item.src) { citem.pause(); } } this.closeMiniAudio(); }); } }, // 点击视频关闭其他 closeVideo() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".video"); for (let index = 0; index < allVideo.length; index++) { const item = allVideo[index]; item.addEventListener("playing", (item) => { const path = item.srcElement.src; const videoList = Array.from(allVideo); for (let cindex = 0; cindex < videoList.length; cindex++) { const citem = videoList[cindex]; if (citem.currentSrc != path && path) { citem.pause(); } } }); } }, // 视频小窗 handleVideoPicture() { let doms = ( this.container ? this.container : document ).querySelectorAll(".video"); doms = Array.from(doms) if (!doms.length) return false const playVudio = doms .reverse() .find((item) => item.paused == false); if (playVudio) { const bottomGap = playVudio.getBoundingClientRect().bottom; const topGap = playVudio.getBoundingClientRect().top; if (bottomGap < 0 || topGap > window.innerHeight) { playVudio.requestPictureInPicture(); } } }, //其他类名下字体大小变化 transformDom(fs) { if (!fs) return let doms = ( this.container ? this.container : document ).querySelectorAll('.block') if (!doms.length) return for (let index = 0; index < doms.length; index++) { const dom = doms[index]; dom.style.fontSize = fs + 'px' } } }, components: { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterFive }, }; </script> <style lang="less" scoped> .page-main { width: 100% !important; height: 100% !important; overflow: auto; .page-content { max-width: 816px; min-width: 375px; margin: 0 auto; padding-bottom: 100px; } </style> } </style>
