feat: 教师除个人设置、消息通知、习题设置具体内容，前端样式基本完成

src/components/BackTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="title">
+  <div class="title back-title">
     <icon :unicode="iconMap.back" @click.native="handleBack()"/>
     <slot></slot>
   </div>
@@ -33,7 +33,7 @@ export default {
   background: transparent;
 }
 
-.title {
+.back-title {
   display: flex;
   align-items: center;
 }

src/components/CComment.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="comment">
+    <div class="comment-title">评论主题史蒂夫</div>
+    <div class="comment-content">帖子主要内容史蒂夫史蒂夫，将撒东方是否史蒂夫和空间上的恢复健康啊史蒂夫金黄色即可的粉红色</div>
+    <div class="comment-author">作者：陈某某 <span class="role">学生</span></div>
+    <div class="comment-time">2020 年 2 月 3 日</div>
+    <div class="comment-reply">教师回复：是的发送的史蒂夫史蒂夫，发送绝代风华卡史蒂夫是的，规范化建设个地方。</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.comment {
+  width: 100%;
+  margin: 32px 0;
+  font-weight: bold;
+}
+
+.comment-title {
+  margin-bottom: 12px;
+}
+
+.comment-content {
+  color: #6a7a8a;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.comment-author {
+  font-size: 14px;
+  color: #7a8a9a;
+  .role {
+    display: inline-block;
+    padding: 1px 4px;
+    color: $theme-blue;
+    background: $theme-blue-transparent;
+    font-size: 12px;
+  }
+}
+
+.comment-time {
+  color: #8a9aaa;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.comment-reply {
+  font-size: 14px;
+  padding: 4px 8px;
+  background: $theme-orange-transparent;
+}
+</style>

src/components/DiscussionArea.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="discussion-area">
+    <h1 class="title">讨论 & 问答</h1>
+    <c-comment></c-comment>
+    <c-comment></c-comment>
+    <c-comment></c-comment>
+  </div>
+</template>
+
+<script>
+import CComment from '@/components/CComment'
+
+export default {
+  components: { CComment }
+}
+</script>
+
+<style lang="scss" scoped>
+.discussion-area {
+  margin-top: 16px;
+  box-sizing: border-box;
+  overflow: auto;
+  min-width: 350px;
+  flex: 1;
+  padding: 0 24px;
+}
+
+@media (max-width: 600px) {
+  .discussion-area {
+    padding: 0;
+    min-width: unset;
+  }
+}
+
+@media (min-width: 1000px) {
+  .discussion-area {
+    margin-top: unset;
+    max-height: 80vh;
+    max-width: 500px;
+    padding: 0 40px;
+    min-height: 60vh;
+  }
+}
+</style>

src/components/PDF/Pdf.vue

@@ -70,13 +70,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
 canvas {
   outline: none;
   display: inline-block;
   direction: ltr;
   margin: 2px;
-  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
   background-color: white;
+  border: 1px solid #aabaca;
 }
 
 .full-size {

src/components/PDF/PdfController.vue

@@ -56,12 +56,13 @@ export default {
 @import '~@/style/theme.scss';
 
 .pdf-controller {
-  padding: 0 12px;
+  padding: 0 8px;
+  max-width: 600px;
+  margin: 8px auto;
   box-sizing: border-box;
   display: flex;
-  margin-top: 8px;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   width: 100%;
 }
 

src/components/TabIconButton.vue

@@ -25,7 +25,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 1000px;
   cursor: pointer;
   text-align: center;
   font-family: 'iconfont', sans-serif;
@@ -54,4 +53,10 @@ a {
   text-decoration: none;
   color: black;
 }
+
+@media (max-width: 400px) {
+  .tab-icon-button {
+    font-size: 30px;
+  }
+}
 </style>

src/router/index.js

@@ -16,6 +16,14 @@ const routes = [{
   path: '/register',
   name: 'register',
   component: () => import('../views/register/Register.vue')
+}, {
+  path: '/pdf-reader/:id',
+  name: 'pdf-reader',
+  component: () => import('../views/reader/PdfReader.vue')
+}, {
+  path: '/quiz-setting/:slideId',
+  name: 'teacher-quiz-setting',
+  component: () => import('../views/quiz/TeacherQuizSetting.vue')
 }, {
   path: '/teacher',
   name: 'teacher',
@@ -86,10 +94,6 @@ const routes = [{
     name: 'student-personal',
     component: () => import('../views/student/tabs/StudentPersonal.vue')
   }]
-}, {
-  path: '/pdf-reader/:id',
-  name: 'pdf-reader',
-  component: () => import('../views/reader/PdfReader.vue')
 }]
 
 const router = new VueRouter({

src/store/modules/pdf.js

@@ -11,7 +11,7 @@ export default {
     src: '',
     totalPages: 0,
     currentPage: 1,
-    showDiscussion: false,
+    showDiscussion: true,
     screenShot: false
   },
 

src/views/quiz/TeacherQuizSetting.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="teacher-quiz-setting">
+    <back-title>{{'软件工程与计算 I'}} - 习题设置</back-title>
+    <div class="sub-title">课前习题设置</div>
+    <br>
+    <br>
+    <br>
+    <div class="sub-title">课后习题设置</div>
+    <br>
+    <br>
+    <br>
+    <div class="sub-title">题库管理</div>
+    <br>
+    <br>
+    <br>
+  </div>
+</template>
+
+<script>
+import BackTitle from '@/components/BackTitle'
+export default {
+  components: { BackTitle }
+}
+</script>
+
+<style lang="scss" scoped>
+.teacher-quiz-setting {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 64px 24px;
+}
+</style>

src/views/reader/PdfReader.vue

@@ -1,44 +1,13 @@
 <template>
   <div class="pdf-reader">
     <div class="pdf-wrapper">
+      <back-title>编程基础 II - 可计算性</back-title>
       <pdf-viewer></pdf-viewer>
     </div>
-    <div
-      class="discussion-wrapper"
+    <discussion-area
       v-if="showDiscussion"
     >
-      <h1 class="title">本页幻灯片讨论区</h1>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-      <p><b>是的减肥还是看见很多风景开始是</b></p>
-      <p>是的减收到发史蒂夫史蒂夫史蒂夫史蒂夫肥还是看见史蒂夫史蒂夫说方式方式很多风景开始是</p>
-      <br>
-    </div>
+    </discussion-area>
   </div>
 </template>
 
@@ -46,10 +15,13 @@
 import PdfViewer from '@/components/PDF/PdfViewer'
 import { mapState } from 'vuex'
 import { SET_SRC } from '@/store/types/pdf-types'
+import BackTitle from '@/components/BackTitle'
+import DiscussionArea from '@/components/DiscussionArea'
+
 const src = 'http://seec-helper-pdf.oss-cn-hangzhou.aliyuncs.com/test.pdf?OSSAccessKeyId=LTAI4Fi1qmL4iuhH8t7G7r2H&Expires=1584224806&Signature=hi3UaVAMkKCSERdUYEuTeGGCd%2Bg%3D'
 
 export default {
-  components: { PdfViewer },
+  components: { DiscussionArea, BackTitle, PdfViewer },
   computed: {
     ...mapState({
       src: state => state.pdf.src,
@@ -64,7 +36,6 @@ export default {
 
 <style lang="scss" scoped>
 .pdf-reader {
-  color: #5a6a7a;
   box-sizing: border-box;
   padding: 0 24px;
   min-height: 100vh;
@@ -72,7 +43,6 @@ export default {
   align-items: center;
   justify-content: space-around;
   flex-wrap: wrap;
-  background-color: #f0f4fa;
 }
 
 .discussion-wrapper {
@@ -84,15 +54,22 @@ export default {
   padding: 0 24px;
 }
 
+@media (max-width: 600px) {
+  .back-title {
+    margin-top: 16px;
+    padding: 0 24px;
+  }
+}
+
 @media (min-width: 1000px) {
   .discussion-wrapper {
     margin-top: unset;
     max-height: 80vh;
-    max-width: 600px;
+    max-width: 500px;
     padding: 0 40px;
   }
   .pdf-reader {
-    padding: 5vh 24px;
+    padding: 24px;
   }
 }
 
@@ -105,5 +82,4 @@ export default {
   margin-top: 12px;
   position: absolute;
 }
-
 </style>

src/views/teacher/components/TeacherCourseDetail.vue

@@ -2,8 +2,12 @@
   <tab-side-component>
     <back-title>课程详情</back-title>
     <div class="sub-title">修改选课码：</div>
-    <c-input placeholder="不影响已选的学生上课"/>
-    <c-button>确认修改</c-button>
+    <div class="change-wrapper mb-24">
+      <c-input placeholder="不影响已选的学生上课"/>
+      <c-button class="secondary">确认修改</c-button>
+    </div>
+    <c-button class="secondary full-width mb-16" @click.native="handleCheckSlideList(123)">点击查看课件列表</c-button>
+    <c-button class="error full-width">删除课程</c-button>
   </tab-side-component>
 </template>
 
@@ -19,6 +23,11 @@ export default {
     return {
       courseId: this.$route.params.courseId
     }
+  },
+  methods: {
+    handleCheckSlideList (courseId) {
+      this.$router.push({ name: 'teacher-course-slides', params: { courseId: courseId } })
+    }
   }
 }
 </script>
@@ -27,4 +36,17 @@ export default {
 .c-input {
   margin-bottom: 24px;
 }
+
+.change-wrapper {
+  display: flex;
+  align-items: center;
+
+  & .c-input {
+    margin-bottom: unset;
+  }
+
+  & .c-button {
+    margin-left: 12px;
+  }
+}
 </style>

src/views/teacher/components/TeacherCourseSlides.vue

@@ -2,9 +2,9 @@
   <tab-side-component>
     <back-title>{{'软件工程与计算 I'}}</back-title>
     <div class="sub-title">课件列表</div>
-    <slide-card></slide-card>
-    <slide-card></slide-card>
-    <slide-card></slide-card>
+    <slide-card :click-handler="handleSlideCardClick"></slide-card>
+    <slide-card :click-handler="handleSlideCardClick"></slide-card>
+    <slide-card :click-handler="handleSlideCardClick"></slide-card>
   </tab-side-component>
 </template>
 
@@ -19,6 +19,11 @@ export default {
     return {
       courseId: this.$route.params.courseId
     }
+  },
+  methods: {
+    handleSlideCardClick (slideId) {
+      this.$router.push({ name: 'teacher-explore-slide-detail', params: { slideId: slideId } })
+    }
   }
 }
 </script>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -3,13 +3,13 @@
     <back-title>课件详情</back-title>
     <div class="sub-title">浏览课件</div>
     <c-button class="full-width mb-16" @click.native="handleReadSlide">浏览课件</c-button>
-    <c-button class="full-width secondary mb-24">查看习题答题情况</c-button>
+    <c-button class="full-width secondary mb-24" @click.native="handleQuizSetting">查看习题答题情况</c-button>
     <div class="sub-title">课件设置</div>
-    <div class="sub-title">
+    <div class="re-upload-wrapper">
       <file-uploader placeholder="选取文件重新上传"/>
       <c-button class="secondary">确认修改</c-button>
     </div>
-    <c-button class="secondary full-width mb-16">设置课件习题</c-button>
+    <c-button class="secondary full-width mb-16" @click.native="handleQuizSetting">设置课件习题</c-button>
     <c-button class="error full-width mb-16">删除课件</c-button>
   </tab-side-component>
 </template>
@@ -30,6 +30,9 @@ export default {
   methods: {
     handleReadSlide () {
       this.$router.push({ name: 'pdf-reader', params: { id: '123' } })
+    },
+    handleQuizSetting () {
+      this.$router.push({ name: 'teacher-quiz-setting', params: { slideId: '123' } })
     }
   }
 }
@@ -39,16 +42,27 @@ export default {
 @import '~@/style/theme.scss';
 
 .sub-title {
+  margin-bottom: 24px;
+}
+
+.re-upload-wrapper {
   display: flex;
   align-items: center;
   margin-bottom: 24px;
 
-  & .c-button {
+  .c-button {
     margin-left: 12px;
+    padding: 0 8px;
   }
 }
 
 .delete-slide {
   color: $theme-red
 }
+
+@media (max-width: 600px) {
+  .file-uploader {
+    font-size: 14px;
+  }
+}
 </style>

src/views/teacher/tabs/CreateSlide.vue

@@ -18,10 +18,7 @@
       placeholder="请勿与同课程幻灯片重名"
     />
     <div class="sub-title">幻灯片文件 <span class="tag">目前支持 PDF 格式</span></div>
-    <file-uploader
-      v-model="file"
-      placeholder="请勿与同课程幻灯片重名"
-    />
+    <file-uploader v-model="file"/>
     <c-button class="my-button" @click.native.prevent="handleSubmit">
       添加
     </c-button>

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -5,7 +5,7 @@
       <!--      <div class="no-content-warning">您还没有设置相关课程喔～</div>-->
       <course-card :course="{}" :index="1" :clickHandler="handleClick"></course-card>
       <course-card :course="{}" :index="2" :clickHandler="handleClick"></course-card>
-      <c-button @click.native="handleCreateNewCourse">新建课程</c-button>
+      <c-button @click.native="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
     </div>
     <router-view/>
   </div>

src/views/teacher/tabs/TeacherExplore.vue

@@ -27,9 +27,8 @@ import CourseCard from '@/components/CourseCard'
 export default {
   components: { CourseCard, SlideCard, SearchBar },
   methods: {
-    // todo 临时
     handleSlideCardClick (slideId) {
-      this.$router.push({ name: 'teacher-explore-slide-detail', params: { courseId: slideId } })
+      this.$router.push({ name: 'teacher-explore-slide-detail', params: { slideId: slideId } })
     },
     handleCourseCardClick (courseId) {
       // todo

src/views/teacher/tabs/tab-common.scss

@@ -21,7 +21,7 @@
 }
 
 
-@media (max-width: 600px) {
+@media (max-width: 400px) {
   .tab {
     min-width: unset;
     max-width: unset;