public/static/modelView/js/main.js
@@ -262,6 +262,7 @@ const dataS = getUrlParams(); // const str = dataS.domain + '/file/api/ApiDownload?md5=' + dataS.md5 let str = ""; let exd = dataS.exd; if (dataS.token != null || dataS.token != undefined) { str = dataS.domain + @@ -276,7 +277,12 @@ }, ]; var sceneInfo = modelList[index]; //index from array of sample models in html select options if (exd == "obj") { loader = new THREE.OBJLoader(manager); } if (exd == "fbx" || !exd) { loader = new THREE.FBXLoader(manager); } var url = sceneInfo.url; //progress/loading bar src/App.vue
@@ -11,6 +11,7 @@ <botany v-if="activeBook.name == 'botany'"></botany> <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation> <civilAviationServices v-if="activeBook.name == 'civilAviationServices'"></civilAviationServices> <meetingPlanners v-if="activeBook.name == 'meetingPlanners'"></meetingPlanners> </div> </template> @@ -29,6 +30,7 @@ botany: () => import("./books/botany/view/index.vue"), civilAviation: () => import("./books/civilAviation/view/index.vue"), civilAviationServices: () =>import("./books/civilAviationServices/view/index.vue"), meetingPlanners: () =>import("./books/meetingPlanners/view/index.vue") }, data() { return { @@ -67,6 +69,7 @@ // mathBook // civilAviation // civilAviationServices // meetingPlanners this.activeBook = await this.config.getBookConfig( process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product" src/books/civilAviation/assets/main.less
@@ -60,14 +60,6 @@ width: 80%; } hr{ margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } sup{ vertical-align: super; /* 保持上标对齐方式 */ @@ -730,24 +722,10 @@ div.bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 82px; margin: 0 10%; padding-bottom: 80px; line-height: 30px; } // .bodystyle-left{ // margin: 0 120px 0 82px; // padding-bottom: 80px; // } // .bodystyle-right{ // font-family: 'FZLTXIHJW'; // font-size: 18px; // text-align: justify; // margin: 0 82px 0 120px; // padding-bottom: 80px; // line-height: 30px; // } span.zt-0 { color: #0087AF; @@ -830,6 +808,7 @@ } .img { text-indent: 0; font-family: 'FZLTXIHJW'; text-align: center; font-size: 14px; src/books/civilAviation/view/components/chapter001.vue
@@ -1686,19 +1686,6 @@ </div> </div> </div> <!-- 37页 --> <div class="page-box" page="44"> <div v-if="showPageList.indexOf(44) > -1"> <ul class="fl al-c pad-t-55 pad-l-60 mb-45"> <li class="header-left-Number">036</li> <li class="header-left-text">民航概论（第 2 版）</li> </ul> <div class="bodystyle"> <div style="min-height:800px"><iframe :src="iframSrc" frameborder="0" style="width: 100%; height: 800px"></iframe></div> </div> </div> </div> <preView :isClear="dialogVisible" :md5="p_md5" :pdfTitle="somePdfTitleValue" ref="pdfDialogRef"></preView> </div> </template> @@ -1719,7 +1706,6 @@ data() { return { pdfDialogRef: "", iframSrc: "", showChoiceAnswer: false, showQuestionAnswer: false, showCheckAnswer: false, @@ -1792,7 +1778,6 @@ if (CheckQuestion) { this.questionData.check = JSON.parse(CheckQuestion); } this.getModel() }, methods: { toUrl(val) { @@ -1885,17 +1870,6 @@ this.questionData.check.isComplete = false this.showCheckAnswer = false }, // 三维模型 getModel() { const ctx = 'https://jsek.bnuic.com' let localStr = './static/modelView/index.html?md5=e405ef70e49088f167a0fd613b85b7b3' + '&name=je' + '&domain=' + ctx + '&target=iframe' this.iframSrc = localStr } } } @@ -1916,7 +1890,8 @@ margin: 0 !important; font-size: 16px !important; position: absolute !important; left: 40% !important; left: 50% !important; transform: translateX(-50%); bottom: -2% !important; } @@ -1928,4 +1903,14 @@ .choice { padding: 0% !important; } hr { margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } </style> src/books/civilAviation/view/components/chapter002.vue
@@ -114,30 +114,27 @@ <div v-for="(item,index) in singleChoiceOne" :key="index"> <p class="block">{{index+1}}.{{ item.txt }}</p> <p class="block" v-for="(citem,cindex) in item.option" :key="cindex"> <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" v-model="item.userAnswer" @change="saveChoiceOne" /> {{ citem.txt }} </p> <p class="event-header-text-bc pd-5 fl jc-sa" style="margin-left: 8px; width: 93%" v-if="showSingleChoice"> <span class="c-g"> 答案：{{ item.answer }} </span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ item.userAnswer }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.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"> <svg v-if="item.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"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> @@ -387,30 +384,27 @@ <div v-for="(item,index) in singleChoice" :key="index"> <p class="block">{{index+1}}.{{ item.txt }}</p> <p class="block" v-for="(citem,cindex) in item.option" :key="cindex"> <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" v-model="item.userAnswer" @change="saveInputChoice" /> {{ citem.txt }} </p> <p class="event-header-text-bc pd-5 fl jc-sa" style="margin-left: 8px; width: 93%" v-if="showChoiceAnswer"> <span class="c-g"> 答案：{{ item.answer }} </span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ item.userAnswer }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.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"> <svg v-if="item.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"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> @@ -1166,6 +1160,9 @@ <p class="p-odd"> 通过驾驶杆的前推和后拉，飞行员控制平尾后方的升降舵偏转。拉杆时，升降舵上偏，飞机的平尾上方气流受阻，速度减小，压力增大，在平尾上产生向下的空气动力，由于平尾在重心之后并且离重心较远，这个空气动力将对飞机重心构成上仰力矩，使机头上仰，飞机迎角增大（图2-39）。同理，如果飞行员推杆，升降舵下偏，平尾产生向上的空气动力，对重心构成下俯力矩，机头下俯，飞机迎角减小。在正常的迎角范围内、飞行速度不变的情况下，拉杆使迎角增大，升力增大，飞机将上升高度，推杆使迎角减小，升力减小，飞机将下降高度。如果要操纵飞机上升，除了拉杆以适当增大迎角、升力之外，还需相应加大油门，保持足够的飞行速度；操纵飞机下滑，则收小油门，随着速度减小，飞机升力减小，飞机自然转入下滑。为防止下滑角太大，飞行员还需相应拉点杆，适当增加迎角，才能保持预定的下滑角。 </p> <div style="min-height:400px"><iframe :src="iframSrcOne" frameborder="0" style="width: 100%; height: 400px"></iframe></div> <p class="img">图2-38 飞机的操纵面</p> <p class="center openImgBox"> <img class="img-b" alt="" src="../../assets/images/0071-2.jpg" /> </p> @@ -1483,9 +1480,8 @@ <p class="p-even td-0"> 构成机翼的骨架，蒙皮附着在骨架上就是完整的机翼。翼肋作为机翼的横向骨架，保持着机翼的翼型，直接支持蒙皮承受空气动力；翼梁作为机翼的纵向骨架，承受整个机翼上产生的空气动力，并通过接头将力传给机身；桁条平行于翼梁嵌在翼肋上，以支持蒙皮。 </p> <p class="center p-even openImgBox"> <img class="img-a" alt="" src="../../assets/images/0078-1.jpg" /> </p> <div style="min-height:400px"><iframe :src="iframSrc" frameborder="0" style="width: 100%; height: 400px"></iframe></div> <p class="img p-even">图2-54 机翼的内部结构</p> <p class="p-even"> 机翼内部有较大的空间，民用飞机通常将其密封后作为存储燃油的油箱，大型喷气式客机的机翼油箱储存了全机四分之一左右的燃油。大多航线飞机主起落架安装在机翼上，机翼的内部空间还有一部分用来设置起落架舱。 @@ -4248,6 +4244,8 @@ }, data() { return { iframSrc: "", iframSrcOne: "", dialogVisible: false, p_md5: '', somePdfTitleValue: '', @@ -4368,7 +4366,6 @@ } }, mounted() { const bookQuestion = localStorage.getItem("civilAviatyon-book-chapter02-expandQuestion"); if (bookQuestion) { this.expandQuestion = JSON.parse(bookQuestion); @@ -4383,6 +4380,8 @@ if (singleChoiceOne) { this.singleChoiceOne = JSON.parse(singleChoiceOne); } this.getModel() this.getModelOne() }, methods: { toUrl(val) { @@ -4455,7 +4454,32 @@ "civilAviatyon-book-chapter02-singleChoiceOne", JSON.stringify(this.singleChoiceOne) ); }, // 三维模型 getModel() { const ctx = 'https://jsek.bnuic.com' let localStr = './static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d' + '&name=je' + '&domain=' + ctx + '&target=iframe' this.iframSrc = localStr }, // 三维模型 getModelOne() { const ctx = 'https://jsek.bnuic.com' let localStr = './static/modelView/index.html?md5=9784edec2ecf5f001ee09f049d27acf3' + '&name=je' + '&domain=' + ctx + '&exd=obj' + '&target=iframe' this.iframSrcOne = localStr } } }; </script> @@ -4474,7 +4498,8 @@ margin: 0 !important; font-size: 16px !important; position: absolute !important; left: 40% !important; left: 50% !important; transform: translateX(-50%); bottom: -2% !important; } @@ -4482,4 +4507,14 @@ height: 80%; } } hr { margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } </style> src/books/civilAviation/view/components/chapter003.vue
@@ -306,30 +306,27 @@ <div v-for="(item,index) in singleChoice" :key="index"> <p class="block">{{index+1}}.{{ item.txt }}</p> <p class="block" v-for="(citem,cindex) in item.option" :key="cindex"> <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" <input type="radio" :value="citem.zm" name="toobusy" :disabled="item.isComplete" v-model="item.userAnswer" @change="saveInputChoice" /> {{ citem.txt }} </p> <p class="event-header-text-bc pd-5 fl jc-sa" style="margin-left: 8px; width: 93%" v-if="showChoiceAnswer"> <span class="c-g"> 答案：{{ item.answer }} </span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{ item.userAnswer }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.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"> <svg v-if="item.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"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> @@ -1132,12 +1129,21 @@ margin: 0 !important; font-size: 16px !important; position: absolute !important; left: 40% !important; bottom: -2% !important; left: 50% !important; transform: translateX(-50%); } img { height: 80%; } } hr { margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } </style> src/books/civilAviation/view/components/chapter004.vue
@@ -452,7 +452,8 @@ margin: 0 !important; font-size: 16px !important; position: absolute !important; left: 40% !important; left: 50% !important; transform: translateX(-50%); bottom: -2% !important; } @@ -460,4 +461,13 @@ height: 80%; } } hr{ margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } </style> src/books/civilAviation/view/components/chapter005.vue
@@ -2055,7 +2055,8 @@ margin: 0 !important; font-size: 16px !important; position: absolute !important; left: 40% !important; left: 50% !important; transform: translateX(-50%); bottom: -2% !important; } @@ -2067,4 +2068,13 @@ .clear { clear: both; } hr { margin-left: 0; margin-bottom: 4px; width: 15.5%; border: none; height: 2px; background-color: #000; } </style> src/books/civilAviation/view/components/index.vue
@@ -159,8 +159,8 @@ }, 500); // 测试页面跳转 // setTimeout(() => { // this.gotoPage(6,190); setTimeout(() => { this.gotoPage(3,67); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -174,7 +174,7 @@ // ids: ["2ACA9359"] // }); // }, 2000); // }, 500); }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") src/books/meetingPlanners/assets/Fonts/FZHTJW.ttfBinary files differ
src/books/meetingPlanners/assets/Fonts/FZLTXIHJW.ttfBinary files differ
src/books/meetingPlanners/assets/Fonts/FZLTZHJW.ttfBinary files differ
src/books/meetingPlanners/assets/images/0005-1.jpg
New file @@ -0,0 +1,1155 @@ .meetingPlanners-book { width: 100%; height: 100%; // 自定义内容 .page-box { box-sizing: border-box; min-height: 1128px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; } .wh-no { white-space: nowrap; } .c-g { color: green; } .c-r { color: red; } .t-right { text-align: right; } .mr-0 { margin: 0; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .table-pad { padding: 1em 0.8em !important; } .mt-30 { margin-top: 30px; } .mb-0 { margin-bottom: 0 !important; } .mb-10 { margin-bottom: 10px; } .mb-30 { margin-bottom: 30px !important; } .ma-l { margin-left: 8%; } .ma-0 { margin: 0% !important; } .pd-5 { padding: 0 5px; } .w100 { width: 100%; } .w80 { width: 80%; } .w70 { width: 70%; } .w25 { width: 25%; } .w20 { width: 20%; } .fz-13 { font-size: 13px !important; } .fz-14 { font-size: 14px !important; } .fz-16 { font-size: 16px !important; } .fz-18 { font-size: 18px !important; } .fz-20 { font-size: 20px; } .pt-20 { padding-top: 20px; } .td-0 { text-indent: 0em !important; } td { padding: 5px 10px; } .fl { display: flex; } .ju-cn { justify-content: center; } .ju-ev { justify-content: space-evenly; } .jc-fs { justify-content: flex-start; } .fw-w { flex-wrap: wrap; } .fd-c { flex-direction: column; } .fd-r { flex-direction: row-reverse; } .al-c { align-items: center; } .al-fe { align-items: flex-end; } .ac-f { align-content: flex-end; } .jc-fe { justify-content: flex-end; } .jc-c { justify-content: center; } .jc-sa { justify-content: space-around } .jc-sb { justify-content: space-between } .mr-70 { margin-right: 70px !important; } .mr-10 { margin-right: 10px; } .pad-t-55 { padding-top: 55px; } .ma-t-30 { margin-top: 30px; } .ma-t-20 { margin-top: 20px; } .pad-l-60 { padding-left: 60px; } .pad-l-80 { padding-left: 80px; } .mb-45 { margin-bottom: 45px; } .mb-20 { margin-bottom: 20px !important; } .headerImg { width: 30px; } .headerText { font-size: 12px; padding: 0 8px; color: #B98C64; } .headerNumber { color: #231F20; font-size: 12px; padding: 0 8px; border-left: 1px solid #231F20; } .header-left-Number { color: #231F20; font-size: 12px; padding-right: 8px; border-right: 1px solid #000; } .header-left-text { margin-left: 8px; font-size: 12px; color: #fff; background-color: #0082D4; } table { border-color: none !important; } .table-th-bc { background-color: #FEDDB4; color: #000; } .table-tr-bc { background-color: #FEF4E4; color: #000; } .table-textarea { font-size: 14px; font-family: "Times New Roman", "宋体"; resize: none; &:focus { outline: none; } } .textarea-box { border: none; text-align: center; width: 84px; height: 36px; overflow: auto; word-break: break-all; resize: none; } .b0 { border: 0; } .task { width: 16%; margin-bottom: 5em; margin-top: 0; border-top: 0.7em solid #5192C6; } .task2 { width: 16%; margin-bottom: 5em; margin-top: 0; border-top: 0.7em solid #F89C1C; } .task3 { width: 16%; margin-bottom: 5em; margin-top: 0; border-top: 0.7em solid #448D9C; } .task4 { width: 16%; margin-bottom: 5em; margin-top: 0; border-top: 0.7em solid #9EAA60; } .p-odd { padding-right: 8%; } .p-even { padding-left: 8%; } .p-continued { text-align: right; font-size: 14px; margin-bottom: 10px; } .img-float { width: 310px; float: left; height: auto; margin: auto; margin-right: 20px; img { width: 100%; } p { margin: 0; } } .img-rights { width: 310px; float: right; height: auto; margin: auto; margin-left: 20px; img { width: 100%; } p { margin: 0 !important; } } .w430 { width: 430px; } .w395 { width: 395px; } .w350 { width: 350px; } .w290 { width: 290px; } .w280 { width: 280px; } .w275 { width: 275px; } .w270 { width: 270px; } .w250 { width: 250px; } .w230 { width: 230px; } .w220 { width: 220px; } .w200 { width: 200px; } .w180 { width: 180px; } .w165 { width: 165px; } .w150 { width: 150px; } .w115 { width: 115px; } // 自带的 ul { list-style-type: none; } li { list-style-type: none; } @font-face { font-family: 'FZLTZHJW'; src: url('Fonts/FZLTZHJW.ttf'); } @font-face { font-family: 'FZLTXIHJW'; src: url('Fonts/FZLTXIHJW.ttf'); } @font-face { font-family: 'FZHTJW'; src: url('Fonts/FZHTJW.ttf'); } div.bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 82px; padding-bottom: 10%; line-height: 30px; } .imz { height: 96%; text-align: center; } .note { font-size: 0.85em; } .block { font-family: "STKaiti"; color: #02439B; } .block1{ } .img { font-family: 'FZLTXIHJW'; text-align: center; font-weight: bold; font-size: 0.85em; margin-left: 0%; margin-right: 0%; text-indent: 0em; } .img1 { font-family: 'FZLTXIHJW'; text-align: right; font-size: 0.85em; margin-left: 0%; margin-right: 2em; text-indent: 0em; } p { font-family: "宋体"; margin: 0; text-indent: 2em; line-height: 30px; text-align: justify; } .cover { width: 100%; padding: 0px; } .center { text-align: center; margin-left: 0%; margin-right: 0%; text-indent: 0em; } .left { font-size: 18px; text-indent: 1em; margin-top: 0% !important; margin-bottom: 0% !important; } .left1 { font-size: 18px; text-indent: 0em; text-wrap: nowrap; } .left2 { font-family: kaiti; font-size: 18px; text-indent: 0em; text-wrap: nowrap; } .left3 { font-family: kaiti; font-size: 18px; text-indent: 0em; } .right { text-align: right; margin-left: 0%; margin-right: 0%; } .center1 { font-family: "STKaiti"; text-align: center; margin-left: 0%; margin-right: 0%; font-size: 1.2em; text-indent: 0em; font-weight: bold; } h1 { font-family: 'FZLTZHJW'; font-size: 1.8em; color: #6CB26C; margin-bottom: 1em; margin-top: 0.5em; text-align: left; } .front{ font-family: 'FZLTZHJW'; font-size: 22px; color: #000; margin-bottom: 80px; font-weight: 100; } h2 { font-family: 'FZLTZHJW'; font-weight: bold; color: #6CB26C; text-align: left; font-size: 1.6em; margin-top: 0.3em; margin-bottom: 0.3em; } .h2-zt1 { padding: 6px; background-color: #FFDF22; margin-top: 1em; margin-left: 0.3em; margin-right: 0.5em; } .h2-zt2 { height: 50px; padding: 6px; background-color: #919195; margin-left: 0.3em; margin-right: 0.5em; } .h3-zt1 { padding: 10px; background-color: #9ACC77; color: #FFFFFF; } .h3-zt2 { padding: 10px; background-color: #EAF3E0; color: #77A948; } h3 { font-family: 'FZLTZHJW'; font-weight: bold; text-align: center; font-size: 1.4em; color: #5EB7BF; margin-top: 1.5em; margin-bottom: 1.5em; text-indent: 0em; margin-left: 0em; } h4 { font-family: 'FZHTJW'; font-weight: bold; font-size: 1.2em; margin-bottom: 1em; margin-top: 1em; border-bottom: 4px dotted #F7BE3D; margin-left: 2em; margin-bottom: 0.5em; text-indent: 0em; } h5 { font-family: 'FZHTJW'; color: #6CB26C; text-align: left; font-weight: bold; margin-bottom: -0.1em; margin-top: 1em; font-size: 1.1em; text-indent: 2em; } h6 { font-family: "cnepub", serif; font-family: 'FZHTJW'; color: #EF8472; font-size: 1.05em; margin-top: 10px; text-indent: 2em; margin-bottom: 10px; border-bottom: 5px dotted #F4C388; margin-left: 2em; margin-bottom: 0.5em; text-indent: 0em; } .u { text-decoration: underline; } .img-0 { width: 100%; } .img-a { width: 95%; } .img-b { width: 70%; } .img-c { width: 60%; } .img-d { width: 50%; } .img-e { width: 45%; } .img-f { width: 40%; } .img-g { width: 30%; } .img-25 { width: 25%; } .img-h { width: 20%; } .img-i { width: 10%; } .img-j { width: 5%; } .img-zt { height: 6em; margin-top: -1.5em; margin-bottom: -0.4em; margin-left: 15%; } .inline { height: 1em; margin-bottom: -0.3em; } .inline1 { height: 1.4em; margin-top: 0.5em; margin-bottom: -0.4em; } .inline-bt { height: 1.2em; margin-top: 0.5em; margin-bottom: -0.2em; } .inline3 { height: 3em; margin-bottom: -1em; } .inline4 { height: 2em; margin-left: -2em; margin-right: 0.5em; margin-bottom: -0.6em; } .inline5 { height: 1.2em; margin-left: 0.5em; margin-right: 0.5em; margin-top: 0.1em; margin-bottom: -0.2em; } .inline6 { height: 3em; margin-top: -3em; margin-bottom: 0.5em; } .underline-2 { margin-left: 0%; margin-right: 0%; text-indent: 0em; border-bottom: 5px dotted #078ADC; margin-bottom: 1em; } .zt-h4 { background-color: #F0BD40; padding: 10px; color: #FFFFFF; margin-left: -2em; border-radius: 1.5em; } .zt-h6 { font-weight: bold; margin-bottom: 0.5em; margin-top: 0.8em; } .qyls-h4 { font-family: "HiFont Hei GB"; color: #6CB26C; font-weight: bold; padding: 0.2em; text-indent: 0em; margin-left: 0%; } .zt-lvs1 { color: #6CB26C; } div.custom_tag1 { background-color: #6CB26C; color: #FFFFFF; font-size: 1.1em; padding: 0.1px 0.5px 0.1px 0.5px; font-weight: bold; box-shadow: 20px 0px 0px 0px #FFDF22, -20px 0px 0px 0px #FFDF22; margin: 0; text-indent: 0em; margin-top: 2em; margin-bottom: 2em; } div.bk { border: 3px dashed #67B667; padding: 15px; border-radius: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; } div.bj { background-color: #FFFBE8; padding: 0.01em 1em 0.01em 1em; border-radius: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; } .custom_tag3 { background-color: #42BA7D; color: #FFFFFF; display: inline-block; padding: 1px; font-size: 1em; padding: 3px 10px 3px 10px; font-weight: bold; border-radius: 0em; box-shadow: 0px 0px 0px 0px #FFDF22, -15px 0px 0px 0px #FFDF22; margin: 0; text-indent: 0em; margin-bottom: 0.2em; margin-top: 0.1em; margin-left: 1em; } div.bj-1 { background-color: #FEF7E5; color: #6CB26C; border-radius: 2em; margin-bottom: 1.5em; margin-top: 1.5em; } .bj-1-zt { font-weight: bold; font-size: 1.2em; line-height: 1.8em; } div.bj-2 { background-color: #FFF9F1; border-radius: 1.5em; padding: 3px 10px 3px 10px; margin-bottom: 1.5em; margin-top: 1.5em; } div.bj-21 { margin-bottom: 1em; margin-top: -1.5em; margin-left: -1.5em; } span.bj-21 { background-color: #42BA7D; color: #FFFFFF; border-radius: 1.5em; font-size: 1.1em; font-weight: bold; padding: 5px 25px 5px 25px; } span.bj-21-left { background-color: #FFDF22; color: #FFFFFF; font-size: 0.8em; border-radius: 5em; margin-left: -9.7em; } span.bj-21-right { background-color: #FFDF22; color: #FFFFFF; font-size: 0.8em; border-radius: 5em; margin-left: 8em; } div.bk-1 { border: 3px dashed #6CB26C; border-radius: 0em 3em 3em 0em; margin-bottom: 1.5em; margin-top: 2em; padding: 5px 10px 5px 10px; } div.bk-11 { margin-bottom: 1em; margin-top: -2.2em; margin-left: -1.5em; } span.bk-11 { background-color: #69B865; color: #FFFFFF; border-radius: 1.5em; font-size: 1.1em; font-weight: bold; padding: 5px 25px 5px 25px; } div.bk-2 { border: 3px solid #F1B754; border-radius: 1em; margin-bottom: 1.5em; margin-top: 2em; padding: 5px 10px 5px 10px; } div.bk-3 { border: 2px solid; margin-bottom: 1.5em; margin-top: 2em; padding: 5px 10px 5px 10px; } div.bk-21 { background-color: #F1B754; color: #FFFFFF; font-weight: bold; font-size: 1.2em; margin-bottom: 1em; margin-top: -1.5em; margin-left: -0.6em; margin-right: -0.6em; } .anli { border: 4px double #6CB26C; font-weight: bold; border-top: 1.2em; border-right: 1.2em; border-left: 1.2em; } div.bk-jxsp { border: 3px dashed #69B865; border-radius: 1.5em; margin-bottom: 1.5em; margin-top: 3em; padding: 5px 10px 5px 10px; } .jxsp { margin-bottom: 1em; margin-top: -2.4em; } .jxsp-tp { margin-bottom: 1em; margin-top: -2.3em; } .jxsp-bj { background-color: #6CB26C; color: #FFFFFF; border-radius: 1em; font-weight: bold; font-size: 1.2em; padding: 5px 10px 5px 10px; } .bj3 { background-color: #E9FBE9; border-radius: 1.5em; padding: 5px 10px 5px 10px; } .rwmb-1 { height: 1.5em; margin-left: 0.3em; margin-top: -2.5em; margin-bottom: -0.2em; } } // 表格样式 table { border-collapse: collapse; //表格的边框合并，如果相邻，则共用一个边框。 border-spacing: 0px; //设置行与单元格边框的间距。 } @font-face { font-family: 'FZLTZHJW'; src: url('./Fonts/FZLTZHJW.ttf'); } @font-face { font-family: 'FZLTXIHJW'; src: url('./Fonts/FZLTXIHJW.ttf'); } @font-face { font-family: 'FZHTJW'; src: url('./Fonts/FZHTJW.ttf'); } // 隐藏页面 .hidePage { min-height: 0 !important; height: 0 !important; box-shadow: none !important; } /* 媒体查询做基础响应式布局 */ @media screen and (max-width: 1024px) { .pdfModal { width: 100%; height: 80vh; } .custom-dialog { .el-dialog { width: 90vw !important; } } } @media screen and (max-width: 800px) { .pdfModal { width: 100%; height: 60vh; } .custom-dialog { .el-dialog { width: 90vw !important; } } } @media (max-width: 660px) { .civilAviationServices-book { /* 分页padding */ .padding-93 { padding: 0 20px; } .padding-102 { padding: 0 20px; } .img-float { width: 130px; } .img-rights { width: 130px; } .btn-w { width: 42px; } .unitText { color: #5192C6; font-size: 10px; } .unit2Text { color: #F89C1C; font-size: 10px; } .wh-no { white-space: wrap; } td { padding: 5px 10px; } } } @media (min-width: 660px) { .civilAviationServices-book { .padding-93 { padding: 0 93px 0px 93px; } .padding-102 { padding: 0 102px 0 102px; } } } ::-webkit-scrollbar { width: 8px; height: 10px; } ::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: rgba(125, 125, 125, 0.3); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: rgba(125, 125, 125, 0.3); -webkit-border-radius: 6px; } src/books/meetingPlanners/view/components/header.vue
New file @@ -0,0 +1,284 @@ <template> <div class="chapter" num="1"> <!-- 封面 --> <div class="page-box mt-20" page="1" style="min-height: auto"> <div v-if="showPageList.indexOf(1) > -1"> <img class="img-0" alt="" src="../../assets/images/Cover.jpg" /> </div> </div> <!-- 扉页 --> <div class="page-box mt-20" page="2" style="min-height: auto"> <div v-if="showPageList.indexOf(2) > -1"> <img class="img-0" alt="" src="../../assets/images/SMY.jpg" /> </div> </div> <!-- 版权页 --> <div class="page-box" page="3"> <div v-if="showPageList.indexOf(3) > -1"> <div style="max-width: 420px; margin: 0 auto; padding: 10% 0; "> <hr /> <p class="left"><b>图书在版编目（CIP）数据</b></p> <p class="left mr-0">会议策划与组织/周健华编著.—2版.—北京：北京师范大学出版社，2024.6</p> <p class="left ">（新世纪高等学校教材·旅游管理核心课系列）</p> <p class="left ">ISBN 978-7-303-29413-8</p> <p class="left mt-20">Ⅰ.①会…Ⅱ.①周…Ⅲ.①会议-组织管理学-高等学校-教材Ⅳ.①C931.47</p> <p class="left ">中国国家版本馆CIP数据核字（2024）第007432号</p> <hr /> <p><br /></p> <p><br /></p> <p><br /></p> <p class="left td-0"><b>图书意见反馈：gaozhifk@bnupg.com 010-58805079</b></p> <p class="left td-0">营销中心电话：010-58802181 58805532</p> <hr /> <p class="left td-0">MINHANG FUWU XINLI YU SHIWU</p> <p class="left td-0">出版发行：北京师范大学出版社 www.bnupg.com</p> <p class="left td-0"> 北京市西城区新街口外大街12-3号</p> <p class="left td-0"> 邮政编码：100088</p> <p class="left td-0">印 刷：保定市中画美凯印刷有限公司</p> <p class="left td-0">经 销：全国新华书店</p> <p class="left td-0">开 本：787mm×1092mm 1/16</p> <p class="left td-0">印 张：20</p> <p class="left td-0">字 数：495千字</p> <p class="left td-0">版 次：2024年6月第2版</p> <p class="left td-0">印 次：2024年6月第7次印刷</p> <p class="left td-0">定 价：49.80元</p> <hr /> <p class="left td-0">策划编辑：陈仕云 责任编辑：陈仕云</p> <p class="left td-0">美术编辑：焦 丽 装帧设计：焦 丽</p> <p class="left td-0">责任校对：陈 民 责任印制：陈 涛 赵 龙</p> <p class="center mt-20 mb-0"><b class="fz-18">版权所有 侵权必究</b></p> <p class="left center td-0"> <b class="fz-16">反盗版、侵权举报电话：</b><span class="">010-58808104</span></p> <p class="left center td-0">北京读者服务部电话：010-58808104</p> <p class="left center td-0">外埠邮购电话：010-58808083</p> <p class="left center td-0">本书如有印装质量问题，请与印制管理部联系调换。</p> <p class="left center td-0">印制管理部电话：010-58808284</p> </div> </div> </div> <!-- 专家推荐 --> <div class="page-box" page="4"> <div v-if="showPageList.indexOf(4) > -1"> <div class="bodystyle" style="padding-top: 10%;"> <h1 id="a004"><span class="h2-zt1"></span>专家推荐</h1> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-b" alt="" src="../../assets/images/0005-1.jpg" /> </div> <span> <p>作者对会议策划有很深的见解，指导学生在全国会议方面的学科竞赛中历年均荣获一等奖。该教材内容结构层次分明、框架清晰，主要聚焦于商务会议领域，理论与实践紧密结合，涵盖了行业新近的观点、案例，具有较强的思想性、科学性、先进性和启发性，对会展专业的学生以及从事会议策划的人士有很大的帮助。 </p> <p>——姚歆中国国际贸易促进委员会、商业行业委员会秘书长、亚洲营销联盟（AMF）第二副主席</p> </span> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-b mt-30 mb-20" alt="" src="../../assets/images/0005-2.jpg" /> </div> <span> <p>会议业的教材难写，原因在于行业边界模糊，加之我国尚无主管会议业的行政部门，相关法规及管理制度滞后。《会议策划与组织》这本教材逻辑清楚、结构合理、内容丰富，对会议业专业知识的归纳和会议项目操作方法的介绍力求详尽，且内容具有实用性和创新性，在同类主题的教材中可谓出类拔萃。 </p> <p>——张凡中国会展经济研究会统计委员会副主任、中国会展集训营创始人</p> </span> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-0 mt-30 mb-20" alt="" src="../../assets/images/0005-3.jpg" /> </div> <span> <p>得悉周老师编著的《会议策划与组织》再版，令人欣慰。本书让我过目难忘，读来耳目一新。当前，国内会议产业方兴未艾，本书的再版无疑将为会议专业的从业者和会展专业学生提供更为丰富的学习素材，有助于拓宽视野，激发思维，健全策划，加强组织。会议产业的实践性较强，尤重统筹协调创新的能力建设，相信本书会为广大读者带来对会议产业更多的新认知和新体验。 </p> <p>——范培康中国贸易报社总编辑</p> </span> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-b" alt="" src="../../assets/images/0005-4.jpg" /> </div> <span> <p>该教材是一项颇具特色的教学成果。教材体系新颖、内容编排有新意，教学内容具有前沿性和应用性，教材主线清晰、重点突出、结构合理，既注重了会议策划的内在逻辑，又体现了与会议行业接轨的趋势，使学生在有限学时的学习中对会议策划活动有一个全景式的认识，便于学生掌握相关知识。 </p> <p>——兰宇鑫《中国会展》杂志社总编辑</p> </span> </div> </div> </div> <!-- 专家推荐 --> <div class="page-box" page="5"> <div v-if="showPageList.indexOf(5) > -1"> <div class="bodystyle" style="padding-top: 10%;"> <div class="img-float w150 openImgBox"> <img class="img-b" alt="" src="../../assets/images/0006-1.jpg" /> </div> <span> <p class="ma-0"> 周健华老师是我认识的教育界非常活跃的会展老师，有着一颗积极热忱的心，经常活跃在会展业的活动中，也非常热心地组织学生参与到会展的各类竞赛中，是一个对会展、对教育充满了正能量的优秀教育工作者。 </p> <p>《会议策划与组织》是一本理论与实践结合极强的优秀教材，书中提供了大量翔实的图例与文字范本，并以精准的数据为支撑，是一部可以让学生在学习过程中不会产生枯燥感的好教材。对于一些没有相关行业经验的读者来说，它也是一本不可多得的工具书与学习宝典。 </p> <p>——赵伟《中外会展》杂志社总编辑</p> </span> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-b mt-30 mb-20" alt="" src="../../assets/images/0006-2.jpg" /> </div> <span> <p>很多人觉得有丰富的实践经验就可以做好会议策划，其实不然。其忽视了理论体系的重要性。当前国内会议教学领域欠缺系统、专业的理论教材，该教材的出版为会议行业和会展院校提供了丰富的教学素材。该教材章节编排严谨，理论与实践结合紧密，阅读起来酣畅淋漓，不仅可以拓宽我们的专业视野，更能培养我们的创新能力，激发创新思维和实践操作。 </p> <p>——许锋中国会展经济研究会副秘书长、会展三新展组委会秘书长、“会展BEN”公众号主理人</p> </span> <p class="ma-0"><br></p> <div class="img-float w150 openImgBox"> <img class="img-b mt-30 mb-20" alt="" src="../../assets/images/0006-3.jpg" /> </div> <span> <p class="ma-0">“没有过程的结果既不可控，也很难复制”。</p> <p>非常喜欢本书的流程篇，衷心希望广大读者能够认真阅读和学习此教材。日常项目工作中的每一件小事都有其促成成功的先后步骤，此书可以让大家认知从会议策划到执行过程中清晰的先后顺序，对实践应用有着很好的逻辑基础；相较于以工作模块划分的主流会展类教材，此书兼顾创新性与实用性，依据流程步骤重组了知识结构，相信它能够为读者的学习和职业发展带来收益和成就。 </p> <p>——武君北京优联信驰信息科技有限公司总经理、“会E人实践教学”创始人</p> </span> <p class="ma-0"><br></p> </div> </div> </div> <!-- 编写委员会 --> <div class="page-box" page="6"> <div v-if="showPageList.indexOf(6) > -1"> <div class="bodystyle" style="padding-top: 20%; margin: 0 13.5%"> <h1 id="a005" class="front center">新世纪高等学校教材·旅游管理核心课系列<br />编写指导委员会</h1> <div class="fl"> <p class="left1 ma-0 "><b>主 任</b></p> <p class="ma-0 left2"> 申葆嘉 </p> <p class="left3 ma-0">南开大学商学院旅游学系教授、“中国旅游教育与研究终身成就奖”唯一获奖者</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>副主任</b></p> <p class="ma-0 left2 "> 魏小安 </p> <p class="left3 ma-0">中国旅游研究院第一届学术委员会主任委员、中国社会科学院旅游研究中心研究员、中央民族大学博士生导师</p> </div> <p class="left td-0"><b>委员</b><span class="left3">（以姓氏笔画为序）</span></p> <div class="fl"> <p class="left1 ma-0 "><b>Larry Yu </b></p> <p class="left3 ma-0">美国乔治·华盛顿大学旅游与酒店管理系主任、教授</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>Liping Cai </b></p> <p class="left3 ma-0">美国普渡大学旅游与酒店系主任、教授</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>李天元 </b></p> <p class="left3 ma-0">南开大学旅游与服务学院教授、博士生导师</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>吴殿廷 </b></p> <p class="left3 ma-0">北京师范大学地理科学学部教授、博士生导师</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>邹统钎 </b></p> <p class="left3 ma-0">北京第二外国语学院旅游科学学院教授、博士生导师</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>宋海岩 </b></p> <p class="left3 ma-0">香港理工大学酒店及旅游业管理学院副院长、教授、博士生导师</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>罗明义 </b></p> <p class="left3 ma-0">云南财经大学教授、博士生导师，原云南省旅游局局长</p> </div> <div class="fl"> <p class="left1 ma-0 "><b>谢彦君 </b></p> <p class="left3 ma-0">海南大学旅游学院教授、博士生导师</p> </div> </div> </div> </div> <!-- 序 --> <div class="page-box" page="7"> <div v-if="showPageList.indexOf(7) > -1"> <div class="bodystyle" style="padding-top: 20%;"> <div class="fl jc-sb mb-30"> <img class="img-g" alt="" src="../../assets/images/0009-1.jpg" /> <h1 id="a006" class="front">序<span class="h2-zt2"></span></h1> </div> <p>周健华老师编著的《会议策划与组织》教材即将再版，我很高兴为此书再版撰写序言。</p> <p>本书所论及的会议，包括大会、年会、工作会、研讨会、论坛等多种表现形式；涉及政府、企业、协会、社团等各类主办单位；规模有大有小，时间有长有短。会议是古已有之、今更发达的人们聚集议事的一种活动。随着会议活动的日益频繁，为会议活动提供策划与组织等各种服务的业态应运而生，并逐步发展起来，与展览业一起并称为“会议展览服务业”，即会展业。 </p> <p>党的十八大以来，我国会议业面对新形势和新需求，有了新发展和新提升，概括而言，体现在以下方面。</p> <p>第一，开会、办会有了明确的规范。即中央八项规定及其实施细则所提出的要求。其主要内容有：精简会议活动，切实改进会风；提高会议实效，开短会、讲短话，力戒空话、套话；减少会议活动；控制会议活动规模和时间；提高会议活动效率和质量；严格控制会议活动经费；等等。 </p> <p>第二，我国会议业制定了基础性的国家标准。这就是《会议分类和术语》（GB/T30520-2014）。</p> <p>第三，明确在中国举办国际会议必须遵循“服务发展、确保重点、规范管理、精简务实”的原则。</p> <p>第四，积极向国际知名会议论坛学习。习近平总书记把世界经济论坛称为“施瓦布经济学”，并进一步指出，中国同世界经济论坛的合作与中国改革开放进程几乎同步。双方要与时俱进，加强合作。</p> <p>第五，习近平总书记多次出席世界重要会议，并向在我国召开的一些国际会议发来贺信或祝贺视频，表明党和政府高度重视国际会议的作用。</p> <p>第六，会议的功效就在于搭建“平台”。习近平总书记说：“我们倡议将中国共产党与世界政党高层对话会机制化，使之成为具有广泛代表性和国际影响力的高端政治对话平台。”2018年11月，习近平总书记在上海举办的首届中国国际进口博览会上还指出，这是个大平台，今后要年年办下去。这不是一般性的会展，而是我们主动开放市场的重大政策宣示和行动。 </p> <p>第七，作为中国主场外交的会展活动在构建人类命运共同体、提出中国方案、讲好中国故事等诸多方面，越来越多地发挥出极为重要的作用，也进一步提升了中国会议业的地位，带动了中国会议业整体水平的提升。 </p> <p>第八，举办重要会议与城市建设及社会发展关系密切。“办好一次会，搞活一座城”的有益经验，值得进一步总结和借鉴。</p> <p>为了与上述新形势、新发展相适应，我国会议业教育培训也需要有新的认知和新的改进。我们注意到，从2002年开始，我国就在高校开设了会展专业，也陆续出版了相关 </p> </div> </div> </div> <!-- 前言 --> <div class="page-box" page="8"> <div v-if="showPageList.indexOf(8) > -1"> <ul class="fl al-c pad-t-55 pad-l-80 mb-45"> <li class="header-left-Number">2</li> <li class="header-left-text">会议策划与组织（第二版）</li> </ul> <div class="bodystyle"> <p class="td-0">专业的各种教材。但会议方面的教材与展览方面的教材相比，其编写和出版的数量都相对少一些。这与我国会议业比展览业发展得要晚一些、慢一些的状况相一致。但现在会议业的发展速度已经快了起来，值得我们给予更多关注。</p> <p>我们看到，相对于其他教材，会议方面的教材写作具有一定难度。周健华老师编著的《会议策划与组织》这本教材紧密结合会议行业前沿动态，内容系统深入，层次分明、条理清楚，注重理论联系实际，对实践具有指导作用。加之这本教材现在需要再版，也说明它受到读者的欢迎，得到了市场的认可。 </p> <p>预祝本书在会议业高等教育中进一步发挥更加重要的作用，为会议行业培养更多的后备人才。</p> <p class="right mr-70"><img class="img-25" alt="" src="../../assets/images/0010-1.jpg" /></p> <p class="right">中国会展经济研究会学术指导委员会常务副主任</p> </div> </div> </div> <!-- 编写委员会 --> <!-- <div class="page-box" page="9"> <div v-if="showPageList.indexOf(9) > -1"> <div class="bodystyle" style="padding-top: 20%;"> </div> </div> </div> --> <!-- 编写委员会 --> <!-- <div class="page-box" page="10"> <div v-if="showPageList.indexOf(10) > -1"> <div class="bodystyle" style="padding-top: 20%;"> </div> </div> </div> --> </div> </template> <script> import { Dict } from 'core-js'; export default { name: "pageHeader", props: { showPageList: { type: Array, }, }, data() { return { }; }, }; </script> <style lang="less" scoped> hr { margin-top: 0 !important; margin-bottom: 0 !important; border: none; height: 1.5px; background-color: #000; } </style> src/books/meetingPlanners/view/components/index.vue
New file @@ -0,0 +1,961 @@ <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> --> </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 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: 1, // 总章节数 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; }, 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); }, }, 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; }, }, }, mounted() { // 默认加载章节 this.showCatalogList = [1]; // 滚动监听节流 debugger 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，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); 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(3, 92); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // 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; if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { console.log(1); debugger // 到达阈值 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(); } } } } // 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("页码错误！"); } }, 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 = ( 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; } } // 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; } } }, 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"); // 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 // 分页器可以点击 // } }); } 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, }; // 遍历所有章节文件 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>'; } } } } // 输出搜索结果 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; } } } }, // 页面向上滚动，音频小窗回收 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 .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(); } } }, //其他类名下字体大小变化 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, }, }; </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>
New file @@ -0,0 +1,78 @@ <template> <div class="meetingPlanners-book" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue" export default { name: "meetingPlanners-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/mian.less"; </style>
