feat: 教师explore页面跳转逻辑、课件信息卡片样式

src/components/CourseCard.vue

@@ -26,6 +26,7 @@ export default {
   border-left: 4px solid $input-background-color;
   transition: .2s;
   cursor: pointer;
+  background-color: rgba(180, 180, 180, .05);
 
   &:hover {
     background-color: $input-background-color;

src/components/SlideCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="slide-card" title="点击查看课件" @click="handleClick">
+    <div class="slide-card-title">课件名称 <span class="tag">课件状态</span></div>
+    <div class="slide-card-time">更新时间：2020 年 2 月 2 日</div>
+    <div class="slide-card-course">所属课程：软件工程与计算 I</div>
+    <div class="slide-card-teacher">教师：史蒂夫</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['index', 'clickHandler'],
+  methods: {
+    handleClick () {
+      this.clickHandler(123)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.slide-card {
+  font-weight: bold;
+  padding: 10px 8px 10px 16px;
+  border-left: 4px solid $input-background-color;
+  background-color: rgba(180, 180, 180, .05);
+  transition: .2s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $input-background-color;
+    border-left: 4px solid $theme-blue;
+  }
+}
+
+.slide-card-title {
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+
+.slide-card-time, .slide-card-course {
+  font-size: 14px;
+  color: #6a7a8a;
+  margin-bottom: 6px;
+}
+
+.slide-card-teacher {
+  font-size: 14px;
+  color: #6a7a8a;
+}
+
+</style>

src/components/TabSideComponent.vue

@@ -61,11 +61,15 @@ export default {
   align-items: center;
   backdrop-filter: saturate(180%) blur(15px);
   background: rgba(255, 255, 255, 0.7);
+  & > .content {
+    min-height: 60vh;
+  }
 }
 
 .large {
-  width: 340px;
+  width: 380px;
   min-height: 350px;
+  padding: 0 24px;
   &::after {
     z-index: -1;
     content: '';

src/router/index.js

@@ -20,7 +20,18 @@ const routes = [{
   children: [{
     path: 'explore',
     name: 'teacher-explore',
-    component: () => import('../views/teacher/tabs/TeacherExplore.vue')
+    component: () => import('../views/teacher/tabs/TeacherExplore.vue'),
+    children: [{
+      path: 'course-slides/:courseId',
+      name: 'teacher-course-slides',
+      component: () => import('../views/teacher/components/CourseSlides.vue')
+    }
+    // ,{
+    //   path: 'slide-detail/:slideId',
+    //   name: 'teacher-course-detail',
+    //   component: () => import('../views/teacher/components/CourseDetail.vue')
+    // }
+    ]
   }, {
     path: 'create-slide',
     name: 'create-slide',

src/views/teacher/components/CourseSlides.vue

@@ -0,0 +1,34 @@
+<template>
+  <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>
+  </tab-side-component>
+</template>
+
+<script>
+import TabSideComponent from '@/components/TabSideComponent'
+import BackTitle from '@/components/BackTitle'
+import SlideCard from '@/components/SlideCard'
+
+export default {
+  components: { SlideCard, BackTitle, TabSideComponent },
+  data () {
+    return {
+      courseId: this.$route.params.courseId
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-input {
+  margin-bottom: 24px;
+}
+.title {
+  display: flex;
+  align-items: center;
+}
+</style>

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -7,9 +7,7 @@
       <course-card :course="{}" :index="2" :clickHandler="handleClick"></course-card>
       <c-button @click.native="handleCreateNewCourse">新建课程</c-button>
     </div>
-    <transition name="fade" mode="in-out">
-      <router-view/>
-    </transition>
+    <router-view/>
   </div>
 </template>
 

src/views/teacher/tabs/TeacherExplore.vue

@@ -1,27 +1,38 @@
 <template>
-  <div class="tab">
-    <h1 class="title">我的主页</h1>
-    <search-bar></search-bar>
-    <section>
-      <h1 class="sub-title">最近浏览</h1>
-      <c-button @click.native="push()">临时：PDF阅读器链接</c-button>
-      <br>
-    </section>
-    <section>
-      <h1 class="sub-title">课程列表</h1>
-    </section>
+  <div class="tab complex-tab">
+    <div class="left">
+      <h1 class="title">我的主页</h1>
+      <search-bar></search-bar>
+      <section>
+        <h1 class="sub-title">最近浏览</h1>
+        <!--      <c-button @click.native="push()">临时：PDF阅读器链接</c-button>-->
+        <slide-card :click-handler="push"></slide-card>
+        <br>
+      </section>
+      <section>
+        <h1 class="sub-title">课程列表</h1>
+        <course-card :course="{}" :index="2" :clickHandler="handleCourseCardClick"></course-card>
+        <course-card :course="{}" :index="2" :clickHandler="handleCourseCardClick"></course-card>
+      </section>
+    </div>
+    <router-view/>
   </div>
 </template>
 
 <script>
 import SearchBar from '@/components/SearchBar'
-import CButton from '@/components/CButton'
+import SlideCard from '@/components/SlideCard'
+import CourseCard from '@/components/CourseCard'
 export default {
-  components: { CButton, SearchBar },
+  components: { CourseCard, SlideCard, SearchBar },
   methods: {
     // todo 临时
     push () {
       this.$router.push('/pdf-reader/1')
+    },
+    handleCourseCardClick (courseId) {
+      // todo
+      this.$router.push({ name: 'teacher-course-slides', params: { courseId: courseId } })
     }
   }
 }

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

@@ -2,12 +2,13 @@
   min-height: 350px;
   padding: 40px;
   flex: 1;
-  min-width: 320px;
+  min-width: 340px;
   max-width: 720px;
 }
 
 .left {
-  width: 320px;
+  box-sizing: border-box;
+  width: 340px;
   min-height: 350px;
   max-height: 90vh;
   overflow: auto;