style: 修改pdf阅读器的样式

public/index.html

@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script async src="https://cdn.staticfile.org/pdf.js/2.3.200/pdf.min.js"></script>
-  <script async src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
+  <script async src="https://cdn.staticfile.org/pdf.js/2.4.456/pdf.min.js"></script>
+  <script async src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.4.456/build/pdf.min.js"></script>
   <!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js"></script>-->
   <title>SEEC 课堂助手</title>
   <style>

src/App.vue

@@ -6,9 +6,6 @@
       </keep-alive>
     </slide-up-transition>
     <global-message></global-message>
-    <div class="copyright">
-      &copy;2020 Powered by SEECODER 苏ICP备19073881号-1
-    </div>
   </div>
 </template>
 
@@ -139,11 +136,4 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.copyright {
-  position: fixed;
-  bottom: 8px;
-  right: 12px;
-  font-size: 12px;
-  color: #8a9aaa;
-}
 </style>

src/components/Basic/IconButton.vue

@@ -77,7 +77,7 @@ export default {
   cursor: pointer;
   text-align: center;
   color: $icon-normal-color;
-  transition: 0.2s;
+  transition: background-color 0.2s;
   overflow: hidden;
   clip-path: border-box;
 

src/components/Discussion/DiscussionArea.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="discussion-area">
-    <h1 class="title">讨论 & 问答</h1>
+    <h1 class="title">本页留言板</h1>
     <div class="discussion-area-content">
       <write-new-comment ref="writeComment" class="mb-24" @comment-submit="handleCommentSubmit"
                          :placeholder="writingAreaPlaceholder"></write-new-comment>
-      <div class="sub-title mb-8">本页讨论区</div>
       <div class="no-content-warning" v-if="comments === null">
         <div class="no-content-warning-tip">加载中...</div>
       </div>
@@ -89,7 +88,12 @@ export default {
       })
     },
     getComments (size) {
-      return getComments({ slideId: this.slideId, size, pageNumber: this.currentPage, sort: ['topNumber,desc', 'createAt,desc'] }).then(res => {
+      return getComments({
+        slideId: this.slideId,
+        size,
+        pageNumber: this.currentPage,
+        sort: ['topNumber,desc', 'createAt,desc']
+      }).then(res => {
         this.wsComments = []
         this.comments = res.data
       }).catch(err => {
@@ -115,36 +119,26 @@ export default {
 
 <style lang="scss" scoped>
 .discussion-area {
-  margin-top: 16px;
+  max-width: 410px;
+  padding: 24px 12px;
   box-sizing: border-box;
-  min-width: 400px;
-  flex: 1;
-  padding: 0 24px;
-}
 
-.discussion-area-content {
+  position: fixed;
+
+  max-height: calc(100vh - 76px);
   overflow: auto;
-  margin: 8px -12px;
-  padding: 0 12px;
+  bottom: 0;
+  right: 0;
+  background-color: #ffffff66;
+  backdrop-filter: saturate(150%) blur(20px);
 }
 
 @media (max-width: 500px) {
   .discussion-area {
-    padding: 0;
     min-width: unset;
-  }
-}
-
-@media (min-width: 800px) {
-  .discussion-area {
-    margin-top: unset;
-    max-width: 500px;
-    padding: 0 40px;
-    min-height: 60vh;
-  }
-
-  .discussion-area-content {
-    max-height: 80vh;
+    max-width: unset;
+    left: 0;
+    right: 0;
   }
 }
 </style>

src/components/PDF/Pdf.vue

@@ -96,20 +96,9 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-
 div {
   position: relative;
 }
-
-canvas {
-  outline: none;
-  display: inline-block;
-  direction: ltr;
-  margin: 2px;
-  background-color: white;
-  border: 1px solid #aabaca;
-}
-
 .loading {
   position: absolute;
   display: flex;
@@ -123,36 +112,17 @@ canvas {
   font-size: 40px;
 }
 
-.full-size {
-  max-width: 90vw;
-  min-width: unset;
-  max-height: 80vh;
-}
-
-@media (min-width: 1001px) {
-  canvas {
-    max-width: 58vw;
-    max-height: 80vh;
-  }
-}
-
-@media (max-width: 1000px) {
-  canvas {
-    max-width: calc(100vw - 106px);
-    min-width: 500px;
-    max-height: 80vh;
-  }
-}
+canvas {
+  outline: none;
+  display: block;
+  direction: ltr;
+  margin: 0 auto;
+  background-color: white;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
 
-@media (max-width: 600px) {
-  canvas {
-    max-width: 100vw;
-    min-width: unset;
-    max-height: 80vh;
-  }
-  .full-size {
-    max-width: 100vw;
-  }
+  max-width: 100vw;
+  max-height: 100vh;
 }
 
 </style>

src/components/PDF/PdfController.vue

@@ -1,21 +1,20 @@
 <template>
   <div class="pdf-controller">
-    <!--    <icon :class="pageMarked ? 'active' : ''" @click="handleMarkButtonClicked"-->
-    <!--          :unicode="pageMarked ? iconMap['mark'] : iconMap['mark_border']" title="收藏本页"/>-->
-    <!--    <icon></icon>-->
-    <a :href="src">
-      <icon-button title="上一页">cloud_download</icon-button>
-    </a>
-    <div class="spacer"></div>
-    <icon-button @click="handlePrevious" title="上一页">navigate_before</icon-button>
-    <!--    <icon-button @click="handleScreenShot" title="将本页截图"></icon-button>-->
-    <label class="to-page-action">
-      {{currentPage}} / {{totalPages}}
-      <c-input placeholder="to" ref="input" type="number" v-model="toPage" @input="handleToPage"/>
-    </label>
-    <icon-button @click="handleNext" title="下一页">navigate_next</icon-button>
-    <div class="spacer"></div>
-    <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">chat_bubble
+    <div class="actions" :class="hide ? 'hide-actions' : ''">
+      <a :href="src">
+        <icon-button title="上一页">cloud_download</icon-button>
+      </a>
+      <icon-button @click="handlePrevious" title="上一页">navigate_before</icon-button>
+      <label class="to-page-action">
+        {{currentPage}} / {{totalPages}}
+        <c-input placeholder="to" ref="input" type="number" v-model="toPage" @input="handleToPage"/>
+      </label>
+      <icon-button @click="handleNext" title="下一页">navigate_next</icon-button>
+      <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">chat_bubble
+      </icon-button>
+    </div>
+    <icon-button theme="blue" @click="hide = !hide" title="讨论区" class="show-button" :class="hide ? 'show-button-hide' : 'show-button-show'">
+      expand_less
     </icon-button>
   </div>
 </template>
@@ -32,7 +31,8 @@ export default {
   data () {
     return {
       pageMarked: false,
-      toPage: ''
+      toPage: '',
+      hide: false
     }
   },
   computed: {
@@ -79,34 +79,82 @@ export default {
 @import '~@/style/theme.scss';
 
 .pdf-controller {
-  padding: 0 8px;
-  max-width: 600px;
-  margin: 8px auto;
-  box-sizing: border-box;
+  position: fixed;
+  right: 12px;
+  top: 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+
+  transition: .2s ease-out;
 }
 
-.spacer {
-  max-width: 24px;
-  flex: 1;
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 4px 12px;
+  margin-right: 12px;
+
+  border-radius: 12px;
+  background-color: #daeafa66;
+  backdrop-filter: saturate(150%) blur(20px);
+
+  transition: .2s ease-out;
+
+  .icon-button {
+    margin: 0 4px;
+  }
+}
+
+.hide-actions {
+  transform: translateY(-80px);
 }
 
 .to-page-action {
   color: #7a8a9a;
+  padding: 0 6px;
+  font-size: 14px;
 
   .c-input {
-    max-width: 54px;
+    max-width: 40px;
     height: 30px;
-    margin-left: 12px;
+    font-size: 14px;
+    padding-left: 8px;
+    background-color: white;
+    margin-left: 6px;
   }
 }
 
-@media (max-width: 480px) {
-  .spacer {
-    max-width: 12px;
+.show-button {
+  transition: .2s ease-out;
+}
+
+.show-button-hide {
+  transform: scale(-1);
+}
+
+.show-button-show {
+  transform: scale(1);
+}
+
+@media (max-width: 500px) {
+  .show-button {
+    display: none;
+  }
+
+  .hide-actions {
+    transform: translateY(0);
+  }
+
+  .actions {
+    padding: 4px 6px;
+    margin-right: 0;
+
+    .icon-button {
+      margin: 0;
+    }
   }
 }
 </style>

src/store/modules/pdf.js

@@ -12,7 +12,7 @@ export default {
     slideInfo: {},
     totalPages: 0,
     currentPage: 1,
-    showDiscussion: true,
+    showDiscussion: false,
     screenShot: false
   },
 

src/utils/pdf.js

@@ -1,3 +1,5 @@
 import pdfjs from 'pdfjs'
 
+pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.4.456/build/pdf.worker.min.js'
+
 export default pdfjs

src/views/reader/PdfReader.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="pdf-reader">
-    <div class="pdf-wrapper">
-      <back-title>{{slide.name}}</back-title>
-      <pdf-viewer></pdf-viewer>
-    </div>
+    <icon-button title="返回主页面">arrow_back</icon-button>
+    <pdf-viewer></pdf-viewer>
     <discussion-area
-      v-if="showDiscussion"
+      :class="showDiscussion ? 'show-discussion' : 'hide-discussion'"
     >
     </discussion-area>
   </div>
@@ -14,13 +12,13 @@
 <script>
 import PdfViewer from '@/components/PDF/PdfViewer'
 import { mapState } from 'vuex'
-import BackTitle from '@/components/Basic/BackTitle'
 import DiscussionArea from '@/components/Discussion/DiscussionArea'
 import { getSlideInfo, getSlideUrl } from '@/server/slide'
 import { RESET, SET_SRC } from '@/store/types/pdf-types'
+import IconButton from '@/components/Basic/IconButton'
 
 export default {
-  components: { DiscussionArea, BackTitle, PdfViewer },
+  components: { IconButton, DiscussionArea, PdfViewer },
   computed: {
     ...mapState({
       src: state => state.pdf.src,
@@ -51,60 +49,31 @@ export default {
 
 <style lang="scss" scoped>
 .pdf-reader {
-  box-sizing: border-box;
-  padding: 0 24px;
-  min-height: 100vh;
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  flex-wrap: wrap;
-}
-
-.discussion-wrapper {
-  margin-top: 16px;
-  box-sizing: border-box;
-  overflow: auto;
-  min-width: 350px;
-  flex: 1;
-  padding: 0 24px;
-}
-
-.back-title {
-  margin-bottom: 16px;
-}
-
-@media (max-width: 1000px) {
-  .back-title {
-    padding: 0;
-    margin-top: 16px;
-  }
+  justify-content: center;
+  min-height: 100vh;
 }
 
-@media (max-width: 600px) {
-  .back-title {
-    padding: 0 24px;
-  }
-}
+.icon-button {
+  z-index: 2;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  background-color: #daeafa66;
+  backdrop-filter: saturate(150%) blur(20px);
 
-@media (min-width: 1000px) {
-  .discussion-wrapper {
-    margin-top: unset;
-    max-height: 80vh;
-    max-width: 500px;
-    padding: 0 40px;
-  }
-  .pdf-reader {
-    padding: 24px;
+  &:hover {
+    background-color: #daeafaaa;
   }
 }
 
-.pdf-wrapper {
-  position: relative;
-  text-align: center;
+.show-discussion, .hide-discussion {
+  transition: .2s;
 }
 
-.discussion-show-hide-button {
-  margin-top: 12px;
-  position: absolute;
+.hide-discussion {
+  transform: translateX(420px);
+  opacity: 0;
 }
 </style>

src/views/shared/UserHomeLayout.vue

@@ -35,6 +35,10 @@
     </div>
     <c-button class="home" text @click="handleToHome" icon="home">主页</c-button>
     <c-button class="exit" text @click="handleLogout" icon="exit_to_app">注销</c-button>
+
+    <div class="copyright">
+      &copy;2020 Powered by SEECODER 苏ICP备19073881号-1
+    </div>
   </div>
 </template>
 
@@ -197,4 +201,12 @@ export default {
     background: rgb(255, 255, 255);
   }
 }
+
+.copyright {
+  position: fixed;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: #8a9aaa;
+}
 </style>