feat: 课程管理界面课程选项卡样式和点击跳转后的组件样式

src/components/BackTitle.vue

@@ -30,5 +30,6 @@ export default {
   color: #3a4a5a;
   position: relative;
   left: -10px;
+  background: transparent;
 }
 </style>

src/components/CInput.vue

@@ -21,7 +21,7 @@ export default {
   props: {
     value: String,
     placeholder: String,
-    textarea: Boolean
+    textarea: String
   },
   data () {
     return {

src/components/CourseCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="course-card" title="点击修改课程详情" @click="handleClick">
+    <div class="course-card-title" :index="index ? index : '*'">课程名称</div>
+    <div class="course-card-bio">课程简介 - 史蒂夫和可史蒂夫史蒂夫，史蒂夫速度很快恢复健身房史蒂夫啊史蒂夫是否大。</div>
+    <div class="course-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';
+
+.course-card {
+  font-weight: bold;
+  padding: 8px 8px 8px 16px;
+  border-left: 4px solid $input-background-color;
+  transition: .2s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $input-background-color;
+    border-left: 4px solid $theme-blue;
+  }
+}
+
+.course-card-title {
+  font-size: 16px;
+  margin-bottom: 8px;
+  position: relative;
+
+  &::before {
+    content: attr(index);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    color: white;
+    margin-right: 8px;
+    background-color: $theme-orange;
+    font-family: 'Courier', 'Courier New', monospace;
+    width: 2ch;
+    height: 2ch;
+  }
+}
+
+.course-card-bio {
+  font-size: 14px;
+  color: #6a7a8a;
+  margin-bottom: 8px;
+}
+
+.course-card-teacher {
+  font-size: 14px;
+  color: #6a7a8a;
+}
+</style>

src/router/index.js

@@ -33,6 +33,10 @@ const routes = [{
       path: 'create-new',
       name: 'create-new-course',
       component: () => import('../views/teacher/components/CreateNewCourse.vue')
+    }, {
+      path: 'course-detail/:courseId',
+      name: 'teacher-course-detail',
+      component: () => import('../views/teacher/components/CourseDetail.vue')
     }]
   }, {
     path: 'discussion',

src/style/theme.scss

@@ -1,4 +1,5 @@
 $theme-blue: #5485e5;
+$theme-orange: #ffaa44;
 
 $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);

src/views/teacher/components/CourseDetail.vue

@@ -0,0 +1,34 @@
+<template>
+  <tab-side-component>
+    <back-title>课程详情</back-title>
+    <div class="sub-title">修改选课码：</div>
+    <c-input placeholder="不影响已选的学生上课"/>
+    <c-button>确认修改</c-button>
+  </tab-side-component>
+</template>
+
+<script>
+import TabSideComponent from '@/components/TabSideComponent'
+import CInput from '@/components/CInput'
+import CButton from '@/components/CButton'
+import BackTitle from '@/components/BackTitle'
+
+export default {
+  components: { BackTitle, CButton, CInput, 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

@@ -2,8 +2,9 @@
   <div class="tab complex-tab">
     <div class="left">
       <h1 class="title">课程管理</h1>
-      <div class="sub-title">我的课程</div>
-      <div class="no-content-warning">您还没有设置相关课程喔～</div>
+      <!--      <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>
     </div>
     <transition name="fade" mode="in-out">
@@ -14,12 +15,16 @@
 
 <script>
 import CButton from '@/components/CButton'
+import CourseCard from '@/components/CourseCard'
 
 export default {
-  components: { CButton },
+  components: { CButton, CourseCard },
   methods: {
     handleCreateNewCourse () {
       this.$router.push('/teacher/courses/create-new')
+    },
+    handleClick (courseId) {
+      this.$router.push({ name: 'teacher-course-detail', params: { courseId: courseId } })
     }
   }
 }
@@ -27,4 +32,8 @@ export default {
 
 <style lang="scss" scoped>
 @import "tab-common";
+
+.c-button {
+  margin-top: 24px;
+}
 </style>

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

@@ -6,11 +6,12 @@
   max-width: 720px;
 }
 
-@media (max-width: 600px) {
-  .tab {
-    min-width: unset;
-    max-width: unset;
-  }
+.left {
+  width: 320px;
+  min-height: 350px;
+  max-height: 90vh;
+  overflow: auto;
+  padding-right: 24px;
 }
 
 .complex-tab {
@@ -18,9 +19,15 @@
   align-items: center;
 }
 
-.left {
-  width: 320px;
-  min-height: 350px;
-  max-height: 90vh;
-  overflow: auto;
+
+@media (max-width: 600px) {
+  .tab {
+    min-width: unset;
+    max-width: unset;
+    padding: unset;
+  }
+  .left {
+    padding-right: unset;
+  }
 }
+