From 87da339bebe4a04d9fed5cab5bd4e550b4c3f257 Mon Sep 17 00:00:00 2001
From: yiming <m13691596795@163.com>
Date: 星期四, 15 八月 2024 17:43:54 +0800
Subject: [PATCH] 体育与健康pdf修改4
---
src/books/sportsAndHealth/css/default.less | 302 +++++---------------------
src/books/sportsAndHealth/view/components/chapter003.vue | 154 ++++++-------
src/components/pdfview/index.vue | 177 +++++++++------
src/books/sportsAndHealth/view/components/index.vue | 6
4 files changed, 245 insertions(+), 394 deletions(-)
diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less
index 0924f21..c6c8e31 100644
--- a/src/books/sportsAndHealth/css/default.less
+++ b/src/books/sportsAndHealth/css/default.less
@@ -20,79 +20,6 @@
font-size: 18px;
.chapter {
- //new
- .fl {
- display: flex;
- }
- .fd-c {
- flex-direction: column;
- }
- .al-c {
- align-items: center;
- }
- .w50 {
- width: 50%;
- }
- .w56 {
- width: 56%;
- }
- .w13 {
- width: 13%;
- }
- .w24 {
- width: 24%;
- }
- .w22 {
- width: 22%;
- }
- .w32 {
- width: 32%;
- }
- .w34 {
- width: 34%;
- }
- .span-P {
- font-family: 'FZLTXIHJW';
- font-size: 14px;
- color: #f79447;
- }
- .span-S {
- color: #f79447;
- }
- .tl {
- text-align: left !important;
- }
- .tw-no {
- text-wrap: nowrap;
- }
- .table-p {
- margin: 0%;
- text-indent: 0;
- font-size: 14px;
- line-height: 25px;
- font-family: 'FZLTXIHJW';
- }
- .imgBox {
- display: flex;
- flex-direction: column-reverse;
- position: relative;
- .img {
- position: absolute;
- left: 40%;
- bottom: -10%;
- }
- }
-
- .table-text {
- border: none;
- background-color: transparent;
- resize: none;
- &:focus {
- outline: none;
- }
- }
-
- //over
textarea {
width: 100%;
font-family: 'FZLTXIHJW';
@@ -300,7 +227,6 @@
video {
width: 100%;
- height: 150px;
}
video::-webkit-media-text-track-display {
@@ -563,6 +489,7 @@
display: flex;
justify-content: flex-start;
}
+
.bj-byb {
width: 100%;
padding: 20px 10px;
@@ -653,21 +580,6 @@
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;
@@ -721,7 +633,7 @@
.pdf-con {
display: flex;
justify-content: flex-start;
- flex-direction: column;
+ align-items: center;
padding: 10px 0;
box-sizing: border-box;
border-radius: 10px;
@@ -730,9 +642,9 @@
min-width: 160px;
display: flex;
justify-content: center;
+ align-items: center;
border: 0.15em dashed #b898c7;
margin-right: 15px;
- margin-top: 5%;
padding: 0 15px;
border-radius: 5px;
@@ -1052,21 +964,12 @@
font-family: 'FZLTXIHJW';
text-align: center;
font-size: 0.8em;
- color: #f79447;
+ color: #5d78bb;
margin-left: 0%;
margin-right: 0%;
text-indent: 0em;
}
- .img-2 {
- font-family: 'FZLTXIHJW';
- text-align: center;
- font-size: 0.8em;
- color: #457eba;
- margin-left: 0%;
- margin-right: 0%;
- text-indent: 0em;
- }
.img1 {
font-family: 'FZLTXIHJW';
text-align: right;
@@ -1883,72 +1786,11 @@
.zt-ls {
color: #99b4df;
font-weight: bold;
- text-indent: 1em;
}
.zt-cs {
color: #e99a4f;
font-weight: bold;
- }
- }
-
- .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;
- }
}
}
@@ -2163,92 +2005,76 @@
}
}
-.tablePublic input[type='checkbox']:checked + .checkmark {
- background: #000 !important;
- /* 閫変腑鏃剁殑鑳屾櫙鑹� */
-}
-
.pdfModal {
width: 100%;
height: 90vh;
+}
- .pdfBox-component {
+@media screen and (max-width: 1024px) {
+ .pdfModal {
width: 100%;
- height: 100%;
- position: relative;
+ height: 80vh;
+ }
- .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;
+ .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;
+ }
+ }
+}
+
+.custom-dialog {
+ overflow: hidden !important;
+
+ .el-dialog__body {
+ padding: 0;
+ }
+
+ .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;
+ }
+ }
+
+ .el-dialog__title,
+ .el-dialog__headerbtn .el-dialog__close {
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: 'FZLTXIHJW';
+ }
+ }
+}
+
+.tablePublic input[type='checkbox']:checked + .checkmark {
+ background: #000 !important;
+ /* 閫変腑鏃剁殑鑳屾櫙鑹� */
+}
+
@font-face {
font-family: 'FZLTZHJW';
src: url('../Fonts/FZLTZHJW.ttf');
diff --git a/src/books/sportsAndHealth/view/components/chapter003.vue b/src/books/sportsAndHealth/view/components/chapter003.vue
index 36821a7..9473690 100644
--- a/src/books/sportsAndHealth/view/components/chapter003.vue
+++ b/src/books/sportsAndHealth/view/components/chapter003.vue
@@ -1391,6 +1391,7 @@
x5-video-player-fullscreen="true" x5-playsinline="" controls class="video-border w100"
:src="chapter003.videoUrl.v2"></video>
<span>{{ chapter003.videoMd5.v2.name }}</span>
+
</div>
<div class="videoItem" v-if="chapter003.videoShow1">
<video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5"
@@ -7520,16 +7521,28 @@
</div>
</div>
</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>
<script>
@@ -7582,12 +7595,10 @@
isShowXyx12: false,
isShowXyx13: false,
isShowXyx14: false,
-
isShowXyx15: false,
isShowXyx16: false,
isShowXyx17: false,
isShowXyx18: false,
-
score1: 0,
score2: 0,
score3: 0,
@@ -8584,91 +8595,70 @@
}
</script>
-<style lang="less" scoped>
-// .pdfModal {
-// width: 100%;
-// height: 90vh;
+<!-- <style lang="less" scoped> -->
+<!-- // .pdfModal {
+// width: 100%;
+// height: 90vh;
// }
// .custom-dialog {
-// overflow: hidden !important;
+// overflow: hidden !important;
-// /deep/ .el-dialog__body {
-// padding: 0;
-// }
+// /deep/ .el-dialog__body {
+// padding: 0;
+// }
-// /deep/ .el-dialog__header {
-// background-color: rgba(0, 0, 0, 0.8);
+// /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';
+// .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;
-// }
-// }
+// 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';
-// }
-// }
+// /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;
-// }
+// .pdfModal {
+// width: 100%;
+// height: 80vh;
+// }
-// .custom-dialog {
-// /deep/ .el-dialog {
-// width: 90vw !important;
-// }
-// }
+// .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>
-<style lang="less" scoped>
-// b {
-// color: #F79447;
+// .pdfModal {
+// width: 100%;
+// height: 60vh;
// }
-.imgBox {
- display: flex !important;
- flex-direction: column-reverse !important;
- position: relative !important;
+// .custom-dialog {
+// /deep/ .el-dialog {
+// width: 90vw !important;
+// }
+// }
+// } -->
-
- .img {
- position: absolute !important;
- left: 40% !important;
- bottom: -10% !important;
- }
-
- img {
- height: 80%;
- }
-}
-</style>
\ No newline at end of file
+<!-- </style> -->
diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue
index efab902..aa6c1dd 100644
--- a/src/books/sportsAndHealth/view/components/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -167,8 +167,8 @@
}, 500)
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(4, 134)
+ setTimeout(() => {
+ this.gotoPage(4, 134)
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -196,7 +196,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 500)
+ }, 500)
},
methods: {
swdtChange(data) {
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index f20fe73..501df42 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,11 +1,8 @@
-<!-- @format -->
-
<template>
- <div class="pdfBox-component">
- <div class="preview" v-if="this.preViewMd5">
- <div id="imageParent" class="imageBox"></div>
- <div class="bottom_tool">
- <!-- <svg
+ <div class="preview" v-if="this.preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool">
+ <!-- <svg
t="1718330411310"
@click="downloadPdf"
class="icon"
@@ -21,20 +18,15 @@
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,
@@ -49,117 +41,160 @@
},
data() {
return {
- currentPageSrc: '',
+ currentPageSrc: "",
currentPage: 1,
totalPage: 1,
viewerCon: null,
- preViewMd5: '',
- loading: false,
- }
+ preViewMd5: "",
+ };
},
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 = document.getElementById('imageParent')
+ let ele = (this.container ? this.container : 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.loading = false
+ this.totalPage = res.totalPages;
+ this.createDom(this.currentPage);
})
.catch((err) => {
- this.totalPage = 0
- this.createDom(this.currentPage)
- console.error(err)
- this.loading = false
- })
+ this.totalPage = 1;
+ this.createDom(this.currentPage);
+ console.error(err);
+ });
},
getPageImage(page) {
- const ctx = process.env.VUE_APP_API_URL
+ 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>
--
Gitblit v1.9.1