src/books/sportsAndHealth/css/default.less
@@ -227,6 +227,7 @@ video { width: 100%; height: 150px; } video::-webkit-media-text-track-display { @@ -580,7 +581,21 @@ margin: 0; } } .img-rights { width: 250px; float: right; height: auto; margin: auto; margin-left: 20px; img { width: 100%; } p { margin: 0; } } .qjdrIocn { display: flex !important; justify-content: center; @@ -647,6 +662,7 @@ margin-right: 15px; padding: 0 15px; border-radius: 5px; margin-top: 15px; span { font-size: 14px; @@ -2008,6 +2024,82 @@ .pdfModal { width: 100%; height: 90vh; .pdfBox-component { width: 100%; height: 100%; position: relative; .preview { width: 100%; height: 100%; .imageBox { height: calc(100% - 30px); overflow-x: hidden; overflow-y: auto; background: #ccc; box-sizing: border-box; } .imageBox:hover { cursor: zoom-in !important; } ::v-deep .el-dialog__header { background-color: rgba(0, 0, 0, 0.8); .header_title { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; span:nth-child(2):hover { cursor: pointer; } } ::v-deep .el-dialog__title, ::v-deep .el-dialog__headerbtn .el-dialog__close { color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; } } .bottom_tool { height: 30px; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: flex-end; align-items: center; svg { margin-right: 15px; fill: #d1d1d1; } svg:hover { fill: #fff; cursor: pointer; } } } .notBox { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 30px); min-height: 300px; } } } @media screen and (max-width: 1024px) { src/books/sportsAndHealth/view/components/chapter001.vue
@@ -6365,73 +6365,3 @@ }, } </script> <style lang="less" scoped> // b { // color: #f79447; // } // .pdfModal { // width: 100%; // height: 90vh; // } // .custom-dialog { // overflow: hidden !important; // /deep/ .el-dialog__body { // padding: 0; // } // /deep/ .el-dialog__header { // background-color: rgba(0, 0, 0, 0.8); // .header_title { // display: flex; // justify-content: space-between; // align-items: center; // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: "FZLTXIHJW"; // span:nth-child(2):hover { // cursor: pointer; // } // } // /deep/.el-dialog__title, // /deep/ .el-dialog__headerbtn .el-dialog__close { // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: "FZLTXIHJW"; // } // } // } // @media screen and (max-width: 1024px) { // .pdfModal { // width: 100%; // height: 80vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } // @media screen and (max-width: 800px) { // .pdfModal { // width: 100%; // height: 60vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } </style> src/books/sportsAndHealth/view/components/chapter002.vue
@@ -2667,133 +2667,7 @@ this.chapter002 = { ...Object.assign(this.chapter002, localData) }; } if (!this.isSearch) { // this.getVideo(this.chapter002.videoMd5.v1.md5, "v1"); // this.getVideo(this.chapter002.videoMd5.v2.md5, "v2"); // this.getVideo(this.chapter002.videoMd5.v3.md5, "v3"); // this.getVideo(this.chapter002.videoMd5.v4.md5, "v4"); // this.getVideo(this.chapter002.videoMd5.v5.md5, "v5"); // this.getVideo(this.chapter002.videoMd5.v6.md5, "v6"); // this.getVideo(this.chapter002.videoMd5.v7.md5, "v7"); // this.getVideo(this.chapter002.videoMd5.v8.md5, "v8"); // this.getVideo(this.chapter002.videoMd5.v9.md5, "v9"); // this.getVideo(this.chapter002.videoMd5.v10.md5, "v10"); // this.getVideo(this.chapter002.videoMd5.v11.md5, "v11"); // this.getVideo(this.chapter002.videoMd5.v12.md5, "v12"); // setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v13.md5, "v13"); // this.getVideo(this.chapter002.videoMd5.v14.md5, "v14"); // this.getVideo(this.chapter002.videoMd5.v15.md5, "v15"); // this.getVideo(this.chapter002.videoMd5.v16.md5, "v16"); // this.getVideo(this.chapter002.videoMd5.v17.md5, "v17"); // this.getVideo(this.chapter002.videoMd5.v18.md5, "v18"); // this.getVideo(this.chapter002.videoMd5.v19.md5, "v19"); // this.getVideo(this.chapter002.videoMd5.v20.md5, "v20"); // this.getVideo(this.chapter002.videoMd5.v21.md5, "v21"); // this.getVideo(this.chapter002.videoMd5.v22.md5, "v22"); // this.getVideo(this.chapter002.videoMd5.v23.md5, "v23"); // this.getVideo(this.chapter002.videoMd5.v24.md5, "v24"); // }, 1000); // setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v25.md5, "v25"); // this.getVideo(this.chapter002.videoMd5.v26.md5, "v26"); // this.getVideo(this.chapter002.videoMd5.v27.md5, "v27"); // this.getVideo(this.chapter002.videoMd5.v28.md5, "v28"); // this.getVideo(this.chapter002.videoMd5.v29.md5, "v29"); // this.getVideo(this.chapter002.videoMd5.v30.md5, "v30"); // this.getVideo(this.chapter002.videoMd5.v31.md5, "v31"); // this.getVideo(this.chapter002.videoMd5.v32.md5, "v32"); // this.getVideo(this.chapter002.videoMd5.v33.md5, "v33"); // this.getVideo(this.chapter002.videoMd5.v34.md5, "v34"); // this.getVideo(this.chapter002.videoMd5.v35.md5, "v35"); // this.getVideo(this.chapter002.videoMd5.v36.md5, "v36"); // }, 3000); // setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v37.md5, "v37"); // this.getVideo(this.chapter002.videoMd5.v38.md5, "v38"); // this.getVideo(this.chapter002.videoMd5.v39.md5, "v39"); // this.getVideo(this.chapter002.videoMd5.v40.md5, "v40"); // this.getVideo(this.chapter002.videoMd5.v41.md5, "v41"); // this.getVideo(this.chapter002.videoMd5.v42.md5, "v42"); // this.getVideo(this.chapter002.videoMd5.v43.md5, "v43"); // this.getVideo(this.chapter002.videoMd5.v44.md5, "v44"); // this.getVideo(this.chapter002.videoMd5.v45.md5, "v45"); // this.getVideo(this.chapter002.videoMd5.v46.md5, "v46"); // this.getVideo(this.chapter002.videoMd5.v47.md5, "v47"); // this.getVideo(this.chapter002.videoMd5.v48.md5, "v48"); // }, 5000); setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v49.md5, "v49"); // this.getVideo(this.chapter002.videoMd5.v50.md5, "v50"); // this.getVideo(this.chapter002.videoMd5.v51.md5, "v51"); // this.getVideo(this.chapter002.videoMd5.v52.md5, "v52"); // this.getVideo(this.chapter002.videoMd5.v53.md5, "v53"); // this.getVideo(this.chapter002.videoMd5.v54.md5, "v54"); // this.getVideo(this.chapter002.videoMd5.v55.md5, "v55"); // this.getVideo(this.chapter002.videoMd5.v56.md5, "v56"); // this.getVideo(this.chapter002.videoMd5.v57.md5, "v57"); // this.getVideo(this.chapter002.videoMd5.v58.md5, "v58"); // this.getVideo(this.chapter002.videoMd5.v59.md5, "v59"); // this.getVideo(this.chapter002.videoMd5.v60.md5, "v60"); // this.getVideo(this.chapter002.videoMd5.v61.md5, "v61"); // this.getVideo(this.chapter002.videoMd5.v62.md5, "v62"); // this.getVideo(this.chapter002.videoMd5.v63.md5, "v63"); // this.getVideo(this.chapter002.videoMd5.v64.md5, "v64"); }, 7000); setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v65.md5, "v65"); // this.getVideo(this.chapter002.videoMd5.v66.md5, "v66"); // this.getVideo(this.chapter002.videoMd5.v67.md5, "v67"); // this.getVideo(this.chapter002.videoMd5.v68.md5, "v68"); // this.getVideo(this.chapter002.videoMd5.v69.md5, "v69"); // this.getVideo(this.chapter002.videoMd5.v70.md5, "v70"); // this.getVideo(this.chapter002.videoMd5.v71.md5, "v71"); // this.getVideo(this.chapter002.videoMd5.v72.md5, "v72"); // this.getVideo(this.chapter002.videoMd5.v73.md5, "v73"); // this.getVideo(this.chapter002.videoMd5.v74.md5, "v74"); // this.getVideo(this.chapter002.videoMd5.v75.md5, "v75"); // this.getVideo(this.chapter002.videoMd5.v76.md5, "v76"); // this.getVideo(this.chapter002.videoMd5.v77.md5, "v77"); // this.getVideo(this.chapter002.videoMd5.v78.md5, "v78"); // this.getVideo(this.chapter002.videoMd5.v79.md5, "v79"); // this.getVideo(this.chapter002.videoMd5.v80.md5, "v80"); }, 9000); setTimeout(() => { // this.getVideo(this.chapter002.videoMd5.v81.md5, "v81"); // this.getVideo(this.chapter002.videoMd5.v82.md5, "v82"); // this.getVideo(this.chapter002.videoMd5.v83.md5, "v83"); // this.getVideo(this.chapter002.videoMd5.v84.md5, "v84"); // this.getVideo(this.chapter002.videoMd5.v85.md5, "v85"); // this.getVideo(this.chapter002.videoMd5.v86.md5, "v86"); // this.getVideo(this.chapter002.videoMd5.v87.md5, "v87"); // this.getVideo(this.chapter002.videoMd5.v88.md5, "v88"); // this.getVideo(this.chapter002.videoMd5.v89.md5, "v89"); // this.getVideo(this.chapter002.videoMd5.v90.md5, "v90"); // this.getVideo(this.chapter002.videoMd5.v91.md5, "v91"); // this.getVideo(this.chapter002.videoMd5.v92.md5, "v92"); // this.getVideo(this.chapter002.videoMd5.v93.md5, "v93"); // this.getVideo(this.chapter002.videoMd5.v94.md5, "v94"); // this.getVideo(this.chapter002.videoMd5.v95.md5, "v95"); }, 11000); setTimeout(() => { }, 13000); setTimeout(() => { }, 15000); } }, methods: { @@ -3074,75 +2948,3 @@ }, }; </script> <style lang="less" scoped> // b { // color: #F79447; // } // .pdfModal { // width: 100%; // height: 90vh; // } // .custom-dialog { // overflow: hidden !important; // /deep/ .el-dialog__body { // padding: 0; // } // /deep/ .el-dialog__header { // background-color: rgba(0, 0, 0, 0.8); // .header_title { // display: flex; // justify-content: space-between; // align-items: center; // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: "FZLTXIHJW"; // span:nth-child(2):hover { // cursor: pointer; // } // } // /deep/.el-dialog__title, // /deep/ .el-dialog__headerbtn .el-dialog__close { // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: "FZLTXIHJW"; // } // } // } // @media screen and (max-width: 1024px) { // .pdfModal { // width: 100%; // height: 80vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } // @media screen and (max-width: 800px) { // .pdfModal { // width: 100%; // height: 60vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } </style> src/books/sportsAndHealth/view/components/chapter003.vue
@@ -5351,6 +5351,9 @@ </span> <span @click="toUrl(1)">乒乓球的常用术语（一）.pdf</span> </div> <div class="pdf-view"> <span> <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1" @@ -5362,6 +5365,9 @@ </span> <span @click="toUrl(2)">乒乓球的常用术语（二）.pdf</span> </div> </div> <p> 乒乓球运动是一项由两名或四名运动员在乒乓球桌上进行隔网攻守的运动，在世界上许多地方流行。乒乓球运动1900年起源于英国，20世纪初在欧洲和亚洲蓬勃开展起来。乒乓球运动易于开展，打法多样，球路变化丰富，技术动作要求协调、灵敏、精确，观赏性强。乒乓球运动能有效发展力量、速度、耐力、灵敏性等身体素质，同时也能锻炼和培养勇敢、顽强、机智、果断等心理品质。乒乓球运动对今后从事需久坐、久站的职业，尤其是需要进行精细化操作的职业人群身体状况的改善有积极的作用。“乒乓精神”所蕴含的技术创新和精益求精也是同学们应该学习和践行的职业精神。乒乓球运动在国内外广泛开展，乒乓球世界杯、世锦赛与奥运会并称世界乒乓球三大赛事。 @@ -7523,25 +7529,18 @@ </div> <el-dialog :visible.sync="dialogVisible" width="60vw" top="2vh" append-to-body lock-scroll :show-close="false" class="custom-dialog" > <div slot="title" class="header_title"> <span>{{ pdfTitle }}</span> <span @click="closeDialog"> x </span> </div> <div class="pdfModal" v-if="dialogVisible"> <preView :isClear="dialogVisible" :md5="p_md5"></preView> </div> </el-dialog> <el-dialog :visible.sync="dialogVisible" width="60vw" top="2vh" append-to-body lock-scroll :show-close="false" class="custom-dialog"> <div slot="title" class="header_title"> <span>{{ pdfTitle }}</span> <span @click="closeDialog"> x </span> </div> <div class="pdfModal" v-if="dialogVisible"> <preView :isClear="dialogVisible" :md5="p_md5"></preView> </div> </el-dialog> </div> </template> @@ -8594,4 +8593,3 @@ }, } </script>
@@ -444,8 +444,10 @@ </div> </div> <!-- 查看PDf弹框 --> <div class="pdf-text"> <div class="pdf-con"> <div class="pdf-con pdf-con-15"> <div class="pdf-view"> <span> <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1" @@ -457,6 +459,12 @@ </span> <span @click="toUrl(4)">途中跑--补充学练建议.pdf</span> </div> </div> </div> <div class="pdf-text"> <div class="pdf-con pdf-con-15"> <div class="pdf-view"> <span> <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1" @@ -468,6 +476,12 @@ </span> <span @click="toUrl(5)">学一学：分道并道规则.pdf</span> </div> </div> </div> <div class="pdf-text"> <div class="pdf-con pdf-con-15"> <div class="pdf-view"> <span> <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1" @@ -479,6 +493,13 @@ </span> <span @click="toUrl(6)">试一试：呼吸方法与节奏.pdf</span> </div> </div> </div> <div class="pdf-text"> <div class="pdf-con pdf-con-15"> <div class="pdf-view"> <span> <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1" @@ -492,6 +513,11 @@ </div> </div> </div> </div> </div> </div> @@ -2688,8 +2714,6 @@ }; </script> <style lang="less" scoped> .img { font-family: "FZLTXIHJW"; text-align: center; src/books/sportsAndHealth/view/components/chapter005.vue
@@ -5080,4 +5080,3 @@ }, } </script>
@@ -5271,70 +5271,3 @@ }, } </script> <style lang="less" scoped> // .pdfModal { // width: 100%; // height: 90vh; // } // .custom-dialog { // overflow: hidden !important; // /deep/ .el-dialog__body { // padding: 0; // } // /deep/ .el-dialog__header { // background-color: rgba(0, 0, 0, 0.8); // .header_title { // display: flex; // justify-content: space-between; // align-items: center; // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: 'FZLTXIHJW'; // span:nth-child(2):hover { // cursor: pointer; // } // } // /deep/.el-dialog__title, // /deep/ .el-dialog__headerbtn .el-dialog__close { // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: 'FZLTXIHJW'; // } // } // } // @media screen and (max-width: 1024px) { // .pdfModal { // width: 100%; // height: 80vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } // @media screen and (max-width: 800px) { // .pdfModal { // width: 100%; // height: 60vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } </style> src/books/sportsAndHealth/view/components/chapter007.vue
@@ -2637,4 +2637,3 @@ }, } </script>
@@ -1928,4 +1928,3 @@ }, } </script>
@@ -4963,70 +4963,3 @@ }, } </script> <style lang="less" scoped> // .pdfModal { // width: 100%; // height: 90vh; // } // .custom-dialog { // overflow: hidden !important; // /deep/ .el-dialog__body { // padding: 0; // } // /deep/ .el-dialog__header { // background-color: rgba(0, 0, 0, 0.8); // .header_title { // display: flex; // justify-content: space-between; // align-items: center; // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: 'FZLTXIHJW'; // span:nth-child(2):hover { // cursor: pointer; // } // } // /deep/.el-dialog__title, // /deep/ .el-dialog__headerbtn .el-dialog__close { // color: #fff; // font-weight: 900; // font-size: 16px; // font-family: 'FZLTXIHJW'; // } // } // } // @media screen and (max-width: 1024px) { // .pdfModal { // width: 100%; // height: 80vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } // @media screen and (max-width: 800px) { // .pdfModal { // width: 100%; // height: 60vh; // } // .custom-dialog { // /deep/ .el-dialog { // width: 90vw !important; // } // } // } </style> src/books/sportsAndHealth/view/components/index.vue
@@ -167,8 +167,8 @@ }, 500) // 测试页面跳转 // setTimeout(() => {/ // this.gotoPage(4, 134) // setTimeout(() => { // this.gotoPage(5, 140) // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", src/components/pdfview/index.vue
@@ -1,8 +1,11 @@ <!-- @format --> <template> <div class="preview" v-if="this.preViewMd5"> <div id="imageParent" class="imageBox"></div> <div class="bottom_tool"> <!-- <svg <div class="pdfBox-component"> <div class="preview" v-if="this.preViewMd5"> <div id="imageParent" class="imageBox"></div> <div class="bottom_tool"> <!-- <svg t="1718330411310" @click="downloadPdf" class="icon" @@ -18,15 +21,21 @@ p-id="7122" ></path> </svg> --> </div> </div> <div class="notBox" v-if="totalPage == 0 && !loading"> <el-empty description="暂无数据"></el-empty> </div> <div class="notBox" v-if="loading" v-loading="loading"></div> </div> </template> <script> import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; import { getResourcePath } from "@/assets/methods/resources"; import Viewer from 'viewerjs' import 'viewerjs/dist/viewer.css' import { getResourcePath } from '@/assets/methods/resources' export default { name: "pdf_view", name: 'pdf_view', props: { md5: { type: String, @@ -41,160 +50,122 @@ }, data() { return { currentPageSrc: "", currentPageSrc: '', currentPage: 1, totalPage: 1, viewerCon: null, preViewMd5: "", }; preViewMd5: '', loading: false, } }, watch: { isClear: { immediate: true, handler(val) { if (val == true) this.preViewMd5 = ""; if (val == true) this.preViewMd5 = '' }, }, md5: { immediate: true, handler(val) { if (val) { this.preViewMd5 = val; this.currentPage = 1; this.currentPageSrc = ""; this.totalPage = 1; this.viewerCon?.destroy(); this.preViewMd5 = val this.currentPage = 1 this.currentPageSrc = '' this.totalPage = 1 this.viewerCon?.destroy() } }, }, }, mounted() { this.scrollBottom(); this.clearDom(); this.getFileInfo(); this.scrollBottom() this.clearDom() this.getFileInfo() }, methods: { async downloadPdf() { window.open(await getResourcePath(this.preViewMd5)); window.open(await getResourcePath(this.preViewMd5)) }, domViewer() { let ele = (this.container ? this.container : document).getElementById( "imageParent" ); // let ele = (this.container ? this.container : document).getElementById( // 'imageParent' // ) let ele = document.getElementById('imageParent') this.viewerCon = new Viewer(ele, { inline: false, container: this.container ? this.container.querySelector("#app") : "body", ? this.container.querySelector('#app') : 'body', navbar: true, // 显示导航栏 toolbar: true, // 显示工具栏 title: true, // 显示标题 }); }) }, clearDom() { let ele = document.getElementById("imageParent"); ele.innerHtml = ""; let ele = document.getElementById('imageParent') ele.innerHtml = '' }, createDom(page) { var that = this; let ele = document.getElementById("imageParent"); const img = document.createElement("img"); img.src = this.getPageImage(page); img.alt = ""; img.style.maxWidth = "90%"; img.style.padding = "30px 5%"; img.className = "imgHover"; var that = this let ele = document.getElementById('imageParent') const img = document.createElement('img') img.src = this.getPageImage(page) img.alt = '' img.style.maxWidth = '90%' img.style.padding = '30px 5%' img.className = 'imgHover' img.onclick = () => { that.viewerCon?.destroy(); that.domViewer(); }; ele.appendChild(img); that.viewerCon?.destroy() that.domViewer() } ele.appendChild(img) }, scrollBottom() { var that = this; var ele = document.getElementById("imageParent"); ele.addEventListener("scroll", function () { var that = this var ele = document.getElementById('imageParent') ele.addEventListener('scroll', function () { // 计算滚动条距离底部的位置 const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight; const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight if (scrollBottom <= 10) { that.currentPage++; that.currentPage++ if (that.currentPage <= that.totalPage) { that.createDom(that.currentPage, ele); that.createDom(that.currentPage, ele) } } }); }) }, getFileInfo() { // 获取目录 this.loading = true this.MG.file .getPdfInfo({ md5: this.preViewMd5 }) .then((res) => { this.totalPage = res.totalPages; this.createDom(this.currentPage); this.totalPage = res.totalPages this.createDom(this.currentPage) this.loading = false }) .catch((err) => { this.totalPage = 1; this.createDom(this.currentPage); console.error(err); }); this.totalPage = 0 this.createDom(this.currentPage) console.error(err) this.loading = false }) }, getPageImage(page) { const ctx = process.env.VUE_APP_API_URL; console.log(this.preViewMd5); const ctx = process.env.VUE_APP_API_URL console.log(this.preViewMd5) return ( ctx + "/file/GetPdfPageImage" + "?md5=" + '/file/GetPdfPageImage' + '?md5=' + this.preViewMd5 + "&index=" + '&index=' + page + "&dpi=200" ); '&dpi=200' ) }, }, }; </script> <style scoped lang="less"> .preview { width: 100%; height: 100%; .imageBox { height: calc(100% - 30px); overflow-x: hidden; overflow-y: auto; background: #ccc; box-sizing: border-box; } .imageBox:hover { cursor: zoom-in !important; } .bottom_tool { height: 30px; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: flex-end; align-items: center; svg { margin-right: 15px; fill: #d1d1d1; } svg:hover { fill: #fff; cursor: pointer; } } } </style> </script>
