新增文件切换提示正在加载

src/components/pages/components/vword.vue

@@ -0,0 +1,201 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-show="isloading">
+      <span>可能会加载时间有点长，请耐心等待...</span>
+    </div>
+    <iframe
+      ref="viframe"
+      style="width: 100%; height: 800px; border: none"
+      :src="pdfUrl"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    let _this = this;
+    _this.isloading = true;
+    _this.$refs.viframe.onload = function () {
+      _this.isloading = false;
+    };
+    console.log(_this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() {},
+  watch: {
+    pdfUrl: function (s) {
+      let _this = this;
+      _this.isloading = true;
+      _this.$refs.viframe.onload = function () {
+        _this.isloading = false;
+      };
+      console.log(_this.isloading);
+      // this.getPdf();
+    },
+  },
+  methods: {
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span + span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

src/components/pages/race/eventCenter/anliDetail.vue

@@ -300,17 +300,17 @@
                       <pdf
                         v-if="pptImgUrl2.infoData.showType == 1"
                         :pdfUrl="pptImgUrl2.infoData.url"
-                        style="width: 100%; height: 400px; overflow: auto"
+                        style="width: 100%; height: 800px; overflow: auto"
                         :class="{ fullStyle: full }"
                       ></pdf>
-                      <iframe
+                      <vword
                         v-else-if="pptImgUrl2.infoData.showType == 2"
-                        :src="pptImgUrl2.infoData.url"
+                        :pdfUrl="pptImgUrl2.infoData.url"
                         frameborder="0"
                         width="100%"
-                        height="400"
+                        height="800"
                         :class="{ fullStyle: full }"
-                      ></iframe>
+                      ></vword>
                       <div
                         class="workd_media"
                         style="height: 400px"
@@ -326,7 +326,7 @@
                       </div>
                       <div
                         class="leftImg"
-                        style="height: 400px"
+                        style="height: 800px"
                         v-else-if="pptImgUrl2.infoData.showType == 4"
                       >
                         <img :src="pptImgUrl2.infoData.url" alt="" />
@@ -335,6 +335,7 @@
                     <div class="fileBox">
                       <div
                         class="fileList"
+                        :class="{ isVfileList:pptImgUrl2.infoData.showType == 3 }"
                         v-if="
                           anliBox &&
                           anliBox[0].info &&
@@ -519,17 +520,17 @@
                         <pdf
                           v-if="pptImgUrl2.overData.driData.showType == 1"
                           :pdfUrl="pptImgUrl2.overData.driData.url"
-                          style="width: 100%; height: 400px; overflow: auto"
+                          style="width: 100%; height: 800px; overflow: auto"
                           :class="{ fullStyle: full }"
                         ></pdf>
-                        <iframe
+                        <vword
                           v-else-if="pptImgUrl2.overData.driData.showType == 2"
-                          :src="pptImgUrl2.overData.driData.url"
+                          :pdfUrl="pptImgUrl2.overData.driData.url"
                           frameborder="0"
                           width="100%"
-                          height="400"
+                          height="800"
                           :class="{ fullStyle: full }"
-                        ></iframe>
+                        ></vword>
                         <div
                           class="workd_media"
                           style="height: 400px"
@@ -545,7 +546,7 @@
                         </div>
                         <div
                           class="leftImg"
-                          style="height: 400px"
+                          style="height: 800px"
                           v-else-if="pptImgUrl2.overData.driData.showType == 4"
                         >
                           <img :src="pptImgUrl2.overData.driData.url" alt="" />
@@ -555,6 +556,7 @@
                         <div
                           class="fileList"
                           v-if="anliBox[0].overview.driQuestion.data.length"
+                          :class="{ isVfileList:pptImgUrl2.overData.driData.showType == 3 }"
                         >
                           <div
                             class="file"
@@ -718,17 +720,17 @@
                         <pdf
                           v-if="pptImgUrl2.overData.tarData.showType == 1"
                           :pdfUrl="pptImgUrl2.overData.tarData.url"
-                          style="width: 100%; height: 400px; overflow: auto"
+                          style="width: 100%; height: 800px; overflow: auto"
                           :class="{ fullStyle: full }"
                         ></pdf>
-                        <iframe
+                        <vword
                           v-else-if="pptImgUrl2.overData.tarData.showType == 2"
-                          :src="pptImgUrl2.overData.tarData.url"
+                          :pdfUrl="pptImgUrl2.overData.tarData.url"
                           frameborder="0"
                           width="100%"
-                          height="400"
+                          height="800"
                           :class="{ fullStyle: full }"
-                        ></iframe>
+                        ></vword>
                         <div
                           class="workd_media"
                           style="height: 400px"
@@ -744,7 +746,7 @@
                         </div>
                         <div
                           class="leftImg"
-                          style="height: 400px"
+                          style="height: 800px"
                           v-else-if="pptImgUrl2.overData.tarData.showType == 4"
                         >
                           <img :src="pptImgUrl2.overData.tarData.url" alt="" />
@@ -754,6 +756,7 @@
                         <div
                           class="fileList"
                           v-if="anliBox[0].overview.tarDesign.data.length"
+                          :class="{ isVfileList:pptImgUrl2.overData.tarData.showType == 3 }"
                         >
                           <div
                             class="file"
@@ -916,17 +919,17 @@
                         <pdf
                           v-if="pptImgUrl2.overData.actData.showType == 1"
                           :pdfUrl="pptImgUrl2.overData.actData.url"
-                          style="width: 100%; height: 400px; overflow: auto"
+                          style="width: 100%; height: 800px; overflow: auto"
                           :class="{ fullStyle: full }"
                         ></pdf>
-                        <iframe
+                        <vword
                           v-else-if="pptImgUrl2.overData.actData.showType == 2"
-                          :src="pptImgUrl2.overData.actData.url"
+                          :pdfUrl="pptImgUrl2.overData.actData.url"
                           frameborder="0"
                           width="100%"
-                          height="400"
+                          height="800"
                           :class="{ fullStyle: full }"
-                        ></iframe>
+                        ></vword>
                         <div
                           class="workd_media"
                           style="height: 400px"
@@ -942,7 +945,7 @@
                         </div>
                         <div
                           class="leftImg"
-                          style="height: 400px"
+                          style="height: 800px"
                           v-else-if="pptImgUrl2.overData.actData.showType == 4"
                         >
                           <img :src="pptImgUrl2.overData.actData.url" alt="" />
@@ -952,6 +955,7 @@
                         <div
                           class="fileList"
                           v-if="anliBox[0].overview.actiDesign.data.length"
+                          :class="{ isVfileList:pptImgUrl2.overData.actData.showType == 3 }"
                         >
                           <div
                             class="file"
@@ -1490,19 +1494,19 @@
                           <pdf
                             v-if="pptImgUrl2.proData[jdIndex].showType == 1"
                             :pdfUrl="pptImgUrl2.proData[jdIndex].url"
-                            style="width: 100%; height: 400px; overflow: auto"
+                            style="width: 100%; height: 800px; overflow: auto"
                             :class="{ fullStyle: full }"
                           ></pdf>
-                          <iframe
+                          <vword
                             v-else-if="
                               pptImgUrl2.proData[jdIndex].showType == 2
                             "
-                            :src="pptImgUrl2.proData[jdIndex].url"
+                            :pdfUrl="pptImgUrl2.proData[jdIndex].url"
                             frameborder="0"
                             width="100%"
-                            height="400"
+                            height="800"
                             :class="{ fullStyle: full }"
-                          ></iframe>
+                          ></vword>
                           <div
                             class="workd_media"
                             style="height: 400px"
@@ -1520,7 +1524,7 @@
                           </div>
                           <div
                             class="leftImg"
-                            style="height: 400px"
+                            style="height: 800px"
                             v-else-if="
                               pptImgUrl2.proData[jdIndex].showType == 4
                             "
@@ -1532,7 +1536,7 @@
                           </div>
                         </div>
                         <div class="fileBox">
-                          <div class="fileList" v-if="jd.data.length">
+                          <div class="fileList" v-if="jd.data.length" :class="{ isVfileList:pptImgUrl2.proData[jdIndex].showType == 3 }">
                             <div
                               class="file"
                               v-for="(f, fIndex) in jd.data"
@@ -1710,17 +1714,17 @@
                         <pdf
                           v-if="pptImgUrl2.excData.showType == 1"
                           :pdfUrl="pptImgUrl2.excData.url"
-                          style="width: 100%; height: 400px; overflow: auto"
+                          style="width: 100%; height: 800px; overflow: auto"
                           :class="{ fullStyle: full }"
                         ></pdf>
-                        <iframe
+                        <vword
                           v-else-if="pptImgUrl2.excData.showType == 2"
-                          :src="pptImgUrl2.excData.url"
+                          :pdfUrl="pptImgUrl2.excData.url"
                           frameborder="0"
                           width="100%"
-                          height="400"
+                          height="800"
                           :class="{ fullStyle: full }"
-                        ></iframe>
+                        ></vword>
                         <div
                           class="workd_media"
                           style="height: 400px"
@@ -1736,7 +1740,7 @@
                         </div>
                         <div
                           class="leftImg"
-                          style="height: 400px"
+                          style="height: 800px"
                           v-else-if="pptImgUrl2.excData.showType == 4"
                         >
                           <img :src="pptImgUrl2.excData.url" alt="" />
@@ -1746,6 +1750,7 @@
                         <div
                           class="fileList"
                           v-if="anliBox[0].proexc.data.length"
+                          :class="{ isVfileList:pptImgUrl2.excData.showType == 3 }"
                         >
                           <div
                             class="file"
@@ -1914,17 +1919,17 @@
                         <pdf
                           v-if="pptImgUrl2.effData.showType == 1"
                           :pdfUrl="pptImgUrl2.effData.url"
-                          style="width: 100%; height: 400px; overflow: auto"
+                          style="width: 100%; height: 800px; overflow: auto"
                           :class="{ fullStyle: full }"
                         ></pdf>
-                        <iframe
+                        <vword
                           v-else-if="pptImgUrl2.effData.showType == 2"
-                          :src="pptImgUrl2.effData.url"
+                          :pdfUrl="pptImgUrl2.effData.url"
                           frameborder="0"
                           width="100%"
-                          height="400"
+                          height="800"
                           :class="{ fullStyle: full }"
-                        ></iframe>
+                        ></vword>
                         <div
                           class="workd_media"
                           style="height: 400px"
@@ -1940,7 +1945,7 @@
                         </div>
                         <div
                           class="leftImg"
-                          style="height: 400px"
+                          style="height: 800px"
                           v-else-if="pptImgUrl2.effData.showType == 4"
                         >
                           <img :src="pptImgUrl2.effData.url" alt="" />
@@ -1950,6 +1955,7 @@
                         <div
                           class="fileList"
                           v-if="anliBox[0].results.data.length"
+                          :class="{ isVfileList:pptImgUrl2.effData.showType == 3 }"
                         >
                           <div
                             class="file"
@@ -2067,14 +2073,14 @@
         style="width: 100%; height: 100%; overflow: auto"
         :class="{ fullStyle: full }"
       ></pdf>
-      <iframe
+      <vword
         v-else
-        :src="pptImgUrl"
+        :pdfUrl="pptImgUrl"
         frameborder="0"
         width="100%"
         height="800"
         :class="{ fullStyle: full }"
-      ></iframe>
+      ></vword>
     </el-dialog>
     <el-dialog
       title="查看视频"
@@ -2107,9 +2113,11 @@
 
 <script>
 import pdf from "../../components/vpdf";
+import vword from "../../components/vword";
 export default {
   components: {
     pdf,
+    vword,
   },
   data() {
     return {
@@ -3524,10 +3532,13 @@ body {
   background: #f6f9fe;
   margin: 0 auto;
   border-radius: 10px;
-  height: 400px;
+  height: 800px;
   overflow-y: auto;
   overflow-x: hidden;
 }
+.isVfileList{
+  height: 400px;
+}
 .file {
   padding: 10px;
 }