feat: 阅读界面布局初步

src/components/Pdf.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <canvas id="pdf-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
-  </div>
+  <canvas class="pdf pdf-canvas" id="pdf-canvas"></canvas>
 </template>
 
 <script>
@@ -9,10 +7,10 @@ import pdfjs from '@/utils/pdf'
 
 export default {
   mounted () {
-    const loadingTask = pdfjs.getDocument('http://seec-helper-pdf.oss-cn-hangzhou.aliyuncs.com/dummy.pdf?OSSAccessKeyId=LTAI4Fi1qmL4iuhH8t7G7r2H&Expires=1580590721&Signature=ephEtIe0y3qU%2Fzrrg%2BXQi1K%2FSRs%3D')
+    const loadingTask = pdfjs.getDocument('http://seec-helper-pdf.oss-cn-hangzhou.aliyuncs.com/test.pdf?OSSAccessKeyId=LTAI4Fi1qmL4iuhH8t7G7r2H&Expires=1580594656&Signature=RUkriwCKFoRp7DU7kM6BmYI8SCI%3D')
     loadingTask.promise.then(function (pdf) {
       pdf.getPage(1).then(function (page) {
-        const scale = 1.5
+        const scale = 2
         const viewport = page.getViewport({ scale: scale })
 
         //
@@ -38,5 +36,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+canvas {
+  outline: none;
+  display: inline-block;
+  direction: ltr;
+  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
+}
+
+canvas {
+  margin: 2px;
+}
+
+@media (min-width: 1001px) {
+  canvas {
+    max-width: 58vw;
+    max-height: 80vh;
+  }
+}
+
+@media (max-width: 1000px) {
+  canvas {
+    max-width: 90vw;
+    min-width: 500px;
+    max-height: 80vh;
+  }
+}
+
+@media (max-width: 600px) {
+  canvas {
+    max-width: 100vw;
+    min-width: unset;
+    max-height: 50vh;
+  }
+}
 
 </style>

src/views/reader/PdfReader.vue

@@ -1,23 +1,80 @@
 <template>
   <div class="pdf-reader">
-  <pdf></pdf>
+    <div class="pdf-wrapper">
+      <pdf></pdf>
+      <c-button
+        class="discussion-show-hide-button"
+        @click.native="handleDiscussionShowState"
+      >
+        {{showDiscussion ? '隐藏' : '显示'}}讨论区
+      </c-button>
+    </div>
+    <div
+      class="discussion-wrapper"
+      v-show="showDiscussion"
+    >
+      <h1 class="title">本页幻灯片讨论区</h1>
+    </div>
   </div>
 </template>
 
 <script>
 import Pdf from '@/components/Pdf'
+import CButton from '@/components/CButton'
 
 export default {
-  components: { Pdf },
-  mounted () {}
+  components: { CButton, Pdf },
+  mounted () {},
+  data () {
+    return {
+      showDiscussion: true
+    }
+  },
+  methods: {
+    handleDiscussionShowState () {
+      this.showDiscussion = !this.showDiscussion
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .pdf-reader {
-  min-height: 100vh;
+  color: #5a6a7a;
+  box-sizing: border-box;
+  padding: 5vh 30px;
+  height: 100vh;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  background-color: #f0f4fa;
 }
+
+.discussion-wrapper {
+  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;
+}
+
+@media (min-width: 1000px) {
+  .discussion-wrapper {
+    max-width: 450px;
+  }
+}
+
+.pdf-wrapper {
+  position: relative;
+  text-align: center;
+}
+
+.discussion-show-hide-button {
+  margin-top: 12px;
+}
+
 </style>