fix: 卡片行高加高，修正学生一处加载中错误，划分chunk块，提高界面操作响应速度

src/components/CourseCard.vue

@@ -36,7 +36,7 @@ export default {
   border-left: 4px solid $input-background-color;
   transition: .2s;
   cursor: pointer;
-  background-color: $card-background;
+  // background-color: $white-transparent;
 
   &:hover {
     background-color: $input-background-color;
@@ -48,6 +48,7 @@ export default {
   font-size: 16px;
   margin-bottom: 6px;
   position: relative;
+  line-height: 1.8;
 }
 
 .course-card-bio {

src/components/SlideCard.vue

@@ -46,7 +46,7 @@ export default {
   font-weight: bold;
   padding: 10px 8px 10px 16px;
   border-left: 4px solid $input-background-color;
-  background-color: $card-background;
+  // background-color: $card-background;
   transition: .2s;
   cursor: pointer;
 
@@ -59,6 +59,7 @@ export default {
 .slide-card-title {
   font-size: 16px;
   margin-bottom: 4px;
+  line-height: 1.9;
 }
 
 .slide-card-time, .slide-card-course {

src/router/index.js

@@ -11,16 +11,16 @@ const routes = [{
 }, {
   path: '/login',
   name: 'login',
-  component: () => import('../views/login/Login.vue')
+  component: () => import(/* webpackChunkName: "main" */ '../views/login/Login.vue')
 }, {
   path: '/register',
   name: 'register',
-  component: () => import('../views/register/Register.vue')
+  component: () => import(/* webpackChunkName: "main" */ '../views/register/Register.vue')
 }, {
   meta: { roles: ['teacher'] },
   path: '/pdf-reader',
   name: 'pdf-reader',
-  component: () => import('../views/reader/PdfReader.vue')
+  component: () => import(/* webpackChunkName: "pdf-reader" */ '../views/reader/PdfReader.vue')
 }, {
   meta: { roles: ['teacher'] },
   path: '/quiz-setting/:slideId',
@@ -36,90 +36,90 @@ const routes = [{
   path: '/teacher',
   name: 'teacher',
   redirect: '/teacher/explore',
-  component: () => import('../views/teacher/TeacherHome.vue'),
+  component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/TeacherHome.vue'),
   children: [{
     path: 'explore',
     name: 'teacher-explore',
-    component: () => import('../views/teacher/tabs/TeacherExplore.vue'),
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherExplore.vue'),
     children: [{
       path: 'course-slides/:courseId',
       name: 'teacher-course-slides',
-      component: () => import('../views/teacher/components/TeacherCourseSlides.vue')
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseSlides.vue')
     }, {
       path: 'slide-detail/:slideId',
       name: 'teacher-explore-slide-detail',
-      component: () => import('../views/teacher/components/TeacherSlideDetail.vue')
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherSlideDetail.vue')
     }]
   }, {
     path: 'create-slide',
     name: 'create-slide',
-    component: () => import('../views/teacher/tabs/CreateSlide.vue')
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/CreateSlide.vue')
   }, {
     path: 'courses',
     name: 'teacher-courses',
-    component: () => import('../views/teacher/tabs/TeacherCoursesManager.vue'),
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherCoursesManager.vue'),
     children: [{
       path: 'create-new',
       name: 'create-new-course',
-      component: () => import('../views/teacher/components/CreateNewCourse.vue')
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/CreateNewCourse.vue')
     }, {
       path: 'course-detail/:courseId',
       name: 'teacher-course-detail',
-      component: () => import('../views/teacher/components/TeacherCourseDetail.vue')
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseDetail.vue')
     }]
   }, {
     path: 'discussion',
     name: 'teacher-discussion',
-    component: () => import('../views/teacher/tabs/TeacherDiscussion.vue')
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherDiscussion.vue')
   }, {
     path: 'personal',
     name: 'teacher-personal',
-    component: () => import('../views/teacher/tabs/TeacherPersonal.vue')
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherPersonal.vue')
   }]
 }, {
   meta: { roles: ['student'] },
   path: '/student',
   name: 'student',
   redirect: '/student/explore',
-  component: () => import('../views/student/StudentHome.vue'),
+  component: () => import(/* webpackChunkName: "student" */ '../views/student/StudentHome.vue'),
   children: [{
     path: 'explore',
     name: 'student-explore',
-    component: () => import('../views/student/tabs/StudentExplore.vue'),
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentExplore.vue'),
     children: [{
       path: 'course-slides/:courseId',
       name: 'student-course-slides',
-      component: () => import('../views/student/components/StudentCourseSlides.vue')
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseSlides.vue')
     }, {
       path: 'slide-detail/:slideId',
       name: 'student-explore-slide-detail',
-      component: () => import('../views/student/components/StudentSlideDetail.vue')
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentSlideDetail.vue')
     }]
   }, {
     path: 'quiz',
     name: 'student-quiz',
-    component: () => import('../views/student/tabs/StudentQuiz.vue')
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentQuiz.vue')
   }, {
     path: 'courses',
     name: 'student-courses',
-    component: () => import('../views/student/tabs/StudentCoursesManager.vue'),
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentCoursesManager.vue'),
     children: [{
       path: 'join-course/:courseId',
       name: 'join-course',
-      component: () => import('../views/student/components/JoinCourse.vue')
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/JoinCourse.vue')
     }, {
       path: 'course-detail/:courseId',
       name: 'student-course-detail',
-      component: () => import('../views/student/components/StudentCourseDetail.vue')
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseDetail.vue')
     }]
   }, {
     path: 'discussion',
     name: 'student-discussion',
-    component: () => import('../views/student/tabs/StudentDiscussion.vue')
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentDiscussion.vue')
   }, {
     path: 'personal',
     name: 'student-personal',
-    component: () => import('../views/student/tabs/StudentPersonal.vue')
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentPersonal.vue')
   }]
 }]
 

src/style/theme.scss

@@ -20,4 +20,6 @@ $icon-hover-color: lighten($theme-blue, 10);
 
 $input-background-color: rgba(235, 240, 245, .8);
 
-$card-background: rgba(160, 180, 200, .1)
+$card-background: rgba(160, 180, 200, .1);
+
+$white-transparent: rgba(255, 255, 255, .8);

src/views/student/components/StudentCourseSlides.vue

@@ -2,7 +2,10 @@
   <tab-side-component>
     <back-title>{{'软件工程与计算 I'}}</back-title>
     <div class="sub-title">课件列表</div>
-    <div class="no-content-warning" v-if="!slides || slides.length === 0">
+    <div class="no-content-warning" v-if="slides === null">
+      <div class="no-content-warning-tip">加载中...</div>
+    </div>
+    <div class="no-content-warning" v-else-if="slides.length === 0">
       <div class="no-content-warning-tip">本课程尚无课件～</div>
     </div>
     <template v-for="slide of slides">
@@ -26,7 +29,7 @@ export default {
   components: { CButton, SlideCard, BackTitle, TabSideComponent },
   data () {
     return {
-      slides: []
+      slides: null
     }
   },
   watch: {

src/views/student/tabs/StudentCoursesManager.vue

@@ -70,7 +70,6 @@ export default {
   },
   methods: {
     search: debounce(function () {
-      console.log(2)
       getCourses({ key: this.searchKey }).then(res => {
         this.searchResult = res.data
       }).catch(err => {