Quellcode durchsuchen

fix: 对布局的一点修正

ChenYangfan vor 6 Jahren
Ursprung
Commit
af88a10401
2 geänderte Dateien mit 32 neuen und 7 gelöschten Zeilen
  1. 1 1
      src/components/Pdf.vue
  2. 31 6
      src/views/reader/PdfReader.vue

+ 1 - 1
src/components/Pdf.vue

@@ -56,7 +56,7 @@ canvas {
 
 @media (max-width: 1000px) {
   canvas {
-    max-width: 90vw;
+    max-width: calc(100vw - 106px);
     min-width: 500px;
     max-height: 80vh;
   }

+ 31 - 6
src/views/reader/PdfReader.vue

@@ -14,6 +14,26 @@
       v-show="showDiscussion"
     >
       <h1 class="title">本页幻灯片讨论区</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad distinctio dolores esse est fugiat
+        maxime minus molestiae nisi odit quas quibusdam, quidem recusandae repudiandae sint sit vitae voluptatibus
+        voluptatum?</p>
+      <br>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad distinctio dolores esse est fugiat
+        maxime minus molestiae nisi odit quas quibusdam, quidem recusandae repudiandae sint sit vitae voluptatibus
+        voluptatum?</p>
+      <br>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad distinctio dolores esse est fugiat
+      maxime minus molestiae nisi odit quas quibusdam, quidem recusandae repudiandae sint sit vitae voluptatibus
+      voluptatum?</p>
+      <br>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad distinctio dolores esse est fugiat
+        maxime minus molestiae nisi odit quas quibusdam, quidem recusandae repudiandae sint sit vitae voluptatibus
+        voluptatum?</p>
+      <br>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad distinctio dolores esse est fugiat
+        maxime minus molestiae nisi odit quas quibusdam, quidem recusandae repudiandae sint sit vitae voluptatibus
+        voluptatum?</p>
+      <br>
     </div>
   </div>
 </template>
@@ -42,8 +62,8 @@ export default {
 .pdf-reader {
   color: #5a6a7a;
   box-sizing: border-box;
-  padding: 5vh 30px;
-  height: 100vh;
+  padding: 0 30px;
+  min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -52,20 +72,24 @@ export default {
 }
 
 .discussion-wrapper {
+  margin-top: 60px;
   box-sizing: border-box;
-  max-height: 90vh;
-  height: calc(15vh + 30vw);
-  min-height: 50vh;
   overflow: auto;
   min-width: 350px;
   flex: 1;
-  padding: 24px 24px 24px 24px;
+  padding: 0 24px;
 }
 
 @media (min-width: 1000px) {
   .discussion-wrapper {
+    margin-top: unset;
+    max-height: 90vh;
+    height: calc(15vh + 30vw);
     max-width: 450px;
   }
+  .pdf-reader {
+    padding: 5vh 30px;
+  }
 }
 
 .pdf-wrapper {
@@ -75,6 +99,7 @@ export default {
 
 .discussion-show-hide-button {
   margin-top: 12px;
+  position: absolute;
 }
 
 </style>