|
@@ -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 {
|