保存代码

src/components/FileViewer/FileViewer.vue

@@ -73,9 +73,10 @@ function errorHandler() {
   emit('closeViewer')
 }
 const handleResize = () => {
+  console.log(containerRef.value.offsetHeight, topRef.value.offsetHeight)
   containerSize.value = {
     width: containerRef.value.offsetWidth,
-    height: containerRef.value.offsetHeight - topRef.value.offsetHeight
+    height: containerRef.value.offsetHeight - topRef.value.offsetHeight - 3
   }
 }
 
@@ -98,15 +99,12 @@ const handleKeydown = (event) => {
 }
 
 onMounted(() => {
-  containerSize.value = {
-    width: containerRef.value.offsetWidth,
-    height: containerRef.value.offsetHeight - topRef.value.offsetHeight
-  }
-  // window.addEventListener('resize', handleResize)
+  handleResize()
+  window.addEventListener('resize', handleResize)
   window.addEventListener('keydown', handleKeydown)
 })
 onBeforeUnmount(() => {
-  // window.removeEventListener('resize', handleResize)
+  window.removeEventListener('resize', handleResize)
   window.removeEventListener('keydown', handleKeydown)
 })
 </script>
@@ -120,82 +118,79 @@ onBeforeUnmount(() => {
   top: 0;
   left: 0;
   z-index: 100;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
 
   .mask {
-    // height: 100vh;
-    // width: 100vw;
     position: fixed;
-    // overflow: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: 50;
-    // display: flex;
-    // flex-direction: column;
+
     background-color: rgb(128, 128, 128, 0.8);
     opacity: 0.5;
   }
 
-  // display: flex;
-  // flex-direction: column;
-  // background-color: rgb(128, 128, 128, 0.8);
-  // opacity: 0.5;
-
-  // opacity: 0.5;
-  .top {
-    // flex: 0 0 auto;
-    background-color: white;
-    clear: both;
-    padding: 5px 10px;
-    position: sticky;
-    z-index: 60;
-    top: 0;
-    display: flex;
-    justify-content: end;
-
-    .file-name {
-      font-weight: bold;
-    }
-
-    .close {
-      // width: 100px;
-      margin-left: auto;
-      display: inline-block;
-      cursor: pointer;
-
-      &:hover {}
-
-      // float: right;
-    }
-
-  }
-
   .container {
-    // opacity: 1;
-    min-height: 100%;
-    // height: 100%;
-    // height: 10000px;
-    // flex: 1 1 auto;
+    min-height: 0;
+    flex: 1 1 auto;
     margin: auto;
     box-sizing: border-box;
     background-color: white;
     position: relative;
+    overflow: visible;
     z-index: 60;
 
-    // overflow: auto;
     &:deep(.vue-office-pptx) {
       height: auto;
 
+      // .slide-background,
+      // .slide-wrapper,
+      // .slide-master-wrapper,
+      // .slide-layout-wrapper,
+      // .pptx-preview-slide-wrapper {
+      //   display: grid;
+      // }
+
       .vue-office-pptx-main {
         height: auto !important;
 
+
         .pptx-preview-wrapper {
           height: auto !important;
-          // overflow: hidden;
+
+
         }
       }
     }
+
+    .top {
+      background-color: white;
+      clear: both;
+      padding: 5px 10px;
+      position: sticky;
+      z-index: 65;
+      top: 0px;
+      // bottom: -1000000000px;
+      display: flex;
+      justify-content: end;
+      position: -webkit-sticky;
+
+      .file-name {
+        font-weight: bold;
+      }
+
+      .close {
+
+        margin-left: auto;
+        display: inline-block;
+        cursor: pointer;
+      }
+
+    }
   }
 
   .no-view {

src/components/FileViewer/PdfViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <iframe :src="pdfjsAddr + `?file=${encodeURIComponent(props.src)}`" frameborder="0"
-    :style="{ height: props.parentHeight - 2 + 'px' }" />
+    :style="{ height: props.parentHeight + 'px' }"></iframe>
 </template>
 
 <script setup>
@@ -11,7 +11,9 @@ import { pdfjsAddr } from '@/utils/config';
 <style lang="less" scoped>
 iframe {
   width: 100%;
-  height: 1000px;
+  // height: 1000px;
   // box-sizing: margin-box;
+  margin: 0px;
+  padding: 0px;
 }
 </style>