src/books/civilAviation/assets/main.less
@@ -11,6 +11,14 @@ background-color: #fff; } .c-g{ color: green; } .c-r{ color: red; } .t-right { text-align: right; } @@ -108,6 +116,10 @@ justify-content: center; } .jc-sa{ justify-content: space-around } .mr-70 { margin-right: 70px; } src/books/civilAviation/view/components/chapter001.vue
@@ -145,14 +145,40 @@ <div class="bk"> <p><b>考证指南：空港服务管理师考题</b></p> <p class="block" ref="blockElement">1944年54个国家在美国芝加哥举行会议，共同签署了国际民用航空公约——（ ）。（单选题） <!-- <select class="select-border" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" style="width: 8%"> <option v-for="(item, index) in questionData.dropdownChoiceData.option" :key="index" :value="item"> {{ item }} </option> </select>。 --> <span class="icon-box-big"> </p> <p class="block" ref="blockElement"> <input type="radio" value="A" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> A.《东京条约》 </p> <p class="block" ref="blockElement"> <input type="radio" value="B" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> B.《芝加哥公约》 </p> <p class="block" ref="blockElement"> <input type="radio" value="C" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> C.《海牙公约》 </p> <p class="block" ref="blockElement"> <input type="radio" value="D" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> D.《蒙特利尔公约》 </p> <p class="event-header-text-bc pd-5 fl jc-sa" style="margin-left: 8px; width: 93%" v-if="showQuestionAnswer"> <span class="c-g"> 答案：B </span> <span :class="{'c-g':questionData.dropdownChoiceData.value.isRight,'c-r':questionData.dropdownChoiceData.value.isRight == false}">您的答案：{{questionData.dropdownChoiceData.value.userAnswer }}</span> <span class="icon-box-big fl al-c"> <svg v-if="questionData.dropdownChoiceData.value.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> @@ -170,23 +196,6 @@ </svg> </span> </p> <p class="block" ref="blockElement"> <input type="radio" value="a" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> A.《东京条约》</p> <p class="block" ref="blockElement"> <input type="radio" value="b" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> B.《芝加哥公约》</p> <p class="block" ref="blockElement"> <input type="radio" value="c" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> C.《海牙公约》</p> <p class="block" ref="blockElement"> <input type="radio" value="d" name="toobusy" :disabled="questionData.dropdownChoiceData.isComplete" v-model="questionData.dropdownChoiceData.value.userAnswer" @change="saveChoiceQuestion" /> D.《蒙特利尔公约》</p> <p class="event-header-text-bc pd-5" style="margin-left: 20px; width: 93%" v-if="showQuestionAnswer">答案：B</p> <!-- 提交按钮 --> <div class="w100 fl ju-cn"> <ul class="fl ju-ev w80 choice"> @@ -417,7 +426,8 @@ </div> </div> <span> <p class="block" ref="blockElement">B747客机（图1-28）是1/3双层的宽体客机，也是世界上第一种双层客机、首款宽体客机，载客量是将民航带入喷气式时代的B707的两倍。</p> <p class="block" ref="blockElement"> B747客机（图1-28）是1/3双层的宽体客机，也是世界上第一种双层客机、首款宽体客机，载客量是将民航带入喷气式时代的B707的两倍。</p> </span> <div class="img-rights openImgBox"> <img class="img-0" alt="" src="../../assets/images/0038-1.jpg" /> @@ -439,7 +449,8 @@ <p class="img">图1-29 A380客机</p> </div> <span> <p class="block" ref="blockElement">A380客机（图1-29）是法、英、德和西班牙四国联合的空中客车公司研发的550座级全双层、超大型远程客机，有“空中巨无霸”之称。</p> <p class="block" ref="blockElement"> A380客机（图1-29）是法、英、德和西班牙四国联合的空中客车公司研发的550座级全双层、超大型远程客机，有“空中巨无霸”之称。</p> </span> <p class="block" ref="blockElement"> 1994年6月，空中客车公司宣布了超大型客机“A3××”研制计划，2000年12月正式改称“A380”，2005年4月27日首飞成功，2006年12月获得适航认证。2007年10月，首架A380客机交付新加坡航空公司并于当月25日投入商业运营，首次商业飞行从新加坡樟宜国际机场飞往澳大利亚悉尼国际机场。 @@ -473,7 +484,8 @@ </p> <p class="block" ref="blockElement"> 2019年2月14日，空中客车公司宣布，由于销售状况不佳，将于2021年暂停A380飞机的生产。实际上，于2021年12月16日交付最后一架A380后停产，共交付251架。</p> <p class="block" ref="blockElement">2022年12月21日，南方航空最后两架A380客机离开广州白云机场，飞往美国莫哈维飞机坟场。这代表着自此中国民航再无A380客机。</p> <p class="block" ref="blockElement"> 2022年12月21日，南方航空最后两架A380客机离开广州白云机场，飞往美国莫哈维飞机坟场。这代表着自此中国民航再无A380客机。</p> <p class="block" ref="blockElement"> 英、法联合研制的“协和”超声速客机（图1-30）于1969年研制成功，1976年1月21日正式从事商业运营，由英国航空公司和法国航空公司用于横跨大西洋的飞行。它是迄今为止世界上唯一投入运营的超声速客机，一共生产了20架。 </p> @@ -863,15 +875,9 @@ }, dropdownChoiceData: { isComplete: false, option: [ "a", "b", "c", "d", ], value: { // 直接使用userAnswer来存储用户的选择 userAnswer: "", answer: "b", answer: "B", isRight: null, }, }, @@ -936,6 +942,7 @@ this.questionData.dropdownChoiceData.value.isRight = false } this.questionData.dropdownChoiceData.isComplete = true this.showQuestionAnswer = true }, changeTestData() { localStorage.removeItem("civilAviatyon-book-chapter01-choice-one") src/books/civilAviationServices/assets/images/0011-1.jpg
src/books/civilAviationServices/view/components/chapter001.vue
src/books/civilAviationServices/view/components/header.vue
src/books/civilAviationServices/view/components/index.vue
src/books/civilAviationServices/view/index.vue
New file @@ -0,0 +1,78 @@ <template> <div class="civilAviationServices-book" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue" export default { name: "civilAviationServices-book", components: { pageContent }, computed: { fontSize() { return this.$store.state.qiankun.fontSize; }, pageZoom() { return this.$store.state.qiankun.scale / 100; }, }, methods: { getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, handleMouseUp(e) { const selection = ( this.container ? this.container : window ).getSelection(); const txt = selection.toString(); if (selection.type != "none" && txt) { let node = selection.anchorNode.parentNode; let pageHtml = this.getParentWithClass( selection.anchorNode, "page-box" ); let chapterDom = this.getParentWithClass( selection.anchorNode, "chapter" ); let chapterNum; if (chapterDom) chapterNum = chapterDom.getAttribute("num"); if (pageHtml) { const page = pageHtml.getAttribute("page"); // 监听选中文本事件，并触发父层方法 if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum, txt, page, x: e.x, y: e.y, }); } } } else { if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum: "", txt: "", page: "", x: e.x, y: e.y, }); } } }, }, }; </script> <style lang="less"> @import "../assets/main.less"; </style>
