体育与健康pdf修改5

yiming

2024-08-16 2670d0e38d9c66265352e339cc1ba24bf78a3855

体育与健康pdf修改5

 src/books/sportsAndHealth/css/default.less

@@ -580,7 +580,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;
@@ -2008,6 +2022,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

@@ -3074,75 +3074,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

@@ -7523,25 +7523,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,71 +8587,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/chapter004.vue

@@ -2688,70 +2688,6 @@
};
</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;
//         }
//     }
// }

.img {
    font-family: "FZLTXIHJW";

 src/books/sportsAndHealth/view/components/chapter005.vue

@@ -5080,69 +5080,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/chapter006.vue

@@ -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,69 +2637,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/chapter008.vue

@@ -1928,70 +1928,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/chapter009.vue

@@ -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/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,171 @@
  },
  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"
      );
        '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%;
// .pdfBox-component {
//   width: 100%;
//   height: 100%;
//   position: relative;
// }

  .imageBox {
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #ccc;
    box-sizing: border-box;
  }
// .preview {
//   width: 100%;
//   height: 100%;

  .imageBox:hover {
    cursor: zoom-in !important;
  }
//   .imageBox {
//     height: calc(100% - 30px);
//     overflow-x: hidden;
//     overflow-y: auto;
//     background: #ccc;
//     box-sizing: border-box;
//   }

  .bottom_tool {
    height: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: flex-end;
    align-items: center;
//   .imageBox:hover {
//     cursor: zoom-in !important;
//   }

    svg {
      margin-right: 15px;
      fill: #d1d1d1;
    }
//   .bottom_tool {
//     height: 30px;
//     background-color: rgba(0, 0, 0, 0.8);
//     display: flex;
//     justify-content: flex-end;
//     align-items: center;

    svg:hover {
      fill: #fff;
      cursor: pointer;
    }
  }
}
</style>
//     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;
// }</style>