［修改］样式

src/layouts/HomeLayout/HomeHeader/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar nav-section">
+  <nav class="navbar nav-section" style="position: sticky;top: 0px;">
     <div class="container">
       <div class="navbar-brand">
         <a class="navbar-item header-logo"> MOOC </a>
@@ -58,6 +58,7 @@ export default {
 @import "../../../assets/scss/app";
 
 .nav-section {
+  width: 100%;
   box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
 }
 

src/layouts/courseLayouts/LayoutStructure.vue

@@ -1,22 +1,30 @@
 <template>
-  <div class="course-layout">
-    <div class="menu-section">
-      <div class="menu-sticky">
-        <div class="header-logo">MOOC</div>
-        <div class="course-detail">
-          {{ course.name }}
-          <b-loading :is-full-page="false" :active.sync="isLoading"></b-loading>
+  <div class="course">
+    <HomeHeader></HomeHeader>
+    <div class="course-layout">
+      <div class="menu-section">
+        <div class="menu-sticky">
+          <div class="header-logo">MOOC</div>
+          <div class="subtitle">当前课程</div>
+          <div class="course-detail">
+            {{ course.name }}
+            <b-loading
+              :is-full-page="false"
+              :active.sync="isLoading"
+            ></b-loading>
+          </div>
+          <slot />
         </div>
-        <slot />
       </div>
+      <div class="router-section"><router-view /></div>
     </div>
-    <div class="router-section"><router-view /></div>
   </div>
 </template>
 
 <script>
 import { FETCH_CURRENT_COURSE } from "@/store/type/actions.type";
 import { mapState } from "vuex";
+import HomeHeader from "@/layouts/HomeLayout/HomeHeader";
 
 export default {
   computed: {
@@ -24,6 +32,9 @@ export default {
       course: state => state.course.currentCourse
     })
   },
+  components: {
+    HomeHeader
+  },
   data() {
     return {
       isLoading: false
@@ -54,7 +65,9 @@ $top-section-height: 4.25rem;
   display: flex;
   min-height: 100vh;
   justify-content: stretch;
-  position: relative;
+  position: fixed;
+  top: 0px;
+  z-index: 99;
 }
 
 .router-section {
@@ -68,7 +81,10 @@ $top-section-height: 4.25rem;
   background: white;
   border-right: 1px solid #c9d8ea;
   padding-left: $left-padding-calc;
+  z-index: 99;
   .menu-sticky {
+    background-image: url("../../assets/sideBar.png");
+    background-size: cover;
     width: $menu-width;
     position: sticky;
     overflow-y: auto;
@@ -82,23 +98,39 @@ $top-section-height: 4.25rem;
         Helvetica, Arial, sans-serif;
       font-weight: bold;
       font-size: 1.7em;
-      color: #3d70b2;
+      color: #ffffff;
       padding-right: 20px;
       line-height: $top-section-height;
+      padding-bottom: 40px;
       a {
         color: #3d70b2;
       }
     }
     .course-detail {
+      margin-top: 20px;
       position: relative;
       padding: 15px;
-      background: #f4f7fb;
-      border: 1px solid #c9d8ea;
+      color: #ffffff;
+      font-weight: bold;
+      background: rgba(255, 255, 255, 0.24);
+      border: 1px solid #ffffff;
       border-radius: 3px;
       box-shadow: 0 1px 2px rgba(201, 216, 234, 0.5);
       margin-bottom: 1em;
       min-height: 54px;
     }
+
+    .subtitle {
+      color: #ffffff;
+      font-size: 1rem;
+      font-weight: bold;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #ffffff;
+    }
+    .link {
+      color: #ffffff;
+      font-weight: bold;
+    }
   }
 }
 </style>

src/layouts/courseLayouts/TeacherMenu.vue

@@ -3,27 +3,42 @@
     <p class="menu-label">总览</p>
     <ul class="menu-list">
       <li>
-        <router-link active-class="is-active" :to="`${prefix}`"
-          >工作台</router-link
-        >
+        <router-link active-class="is-active" :to="`${prefix}`">
+          <img src="../../assets/icon/work.png" />工作台
+        </router-link>
+      </li>
+      <li>
+        <router-link active-class="is-active" :to="`/teacher/`">
+          <img src="../../assets/icon/home.png" />课程选择
+        </router-link>
+      </li>
+      <li>
+        <router-link active-class="is-active" :to="`${prefix}/question/`">
+          <img src="../../assets/icon/question.png" />题目管理
+        </router-link>
       </li>
     </ul>
     <p class="menu-label">作业</p>
     <ul class="menu-list">
       <li>
-        <router-link active-class="is-active" :to="`${prefix}/code`"
-          >代码作业</router-link
-        >
+        <router-link active-class="is-active" :to="`${prefix}/code`">
+          <img src="../../assets/icon/laptop.png" />代码作业
+        </router-link>
       </li>
       <li>
-        <router-link active-class="is-active" :to="`${prefix}/document`"
-          >文档作业</router-link
-        >
+        <router-link active-class="is-active" :to="`${prefix}/document`">
+          <img src="../../assets/icon/file.png" />文档作业
+        </router-link>
       </li>
       <li>
-        <router-link active-class="is-active" :to="`${prefix}/review`"
-          >评审作业</router-link
-        >
+        <router-link active-class="is-active" :to="`${prefix}/review`">
+          <img src="../../assets/icon/team.png" />评审作业
+        </router-link>
+      </li>
+      <li>
+        <router-link active-class="is-active" :to="`${prefix}/result`">
+          <img src="../../assets/icon/linechart.png" />成绩管理
+        </router-link>
       </li>
     </ul>
   </aside>
@@ -38,3 +53,33 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+.menu-label {
+  color: #ffffff;
+  font-size: 1rem;
+  padding-bottom: 5px;
+  border-bottom: 1px solid;
+  font-weight: bold;
+}
+.menu-list {
+  font-weight: bold;
+  font-size: 1.1rem;
+  li {
+    margin-bottom: 10px;
+    a {
+      display: flex;
+      color: #ffffff;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.24);
+      }
+    }
+    img {
+      height: 20px;
+      margin-right: 5px;
+    }
+  }
+}
+.is-active {
+  background-color: rgba(255, 255, 255, 0.24) !important;
+}
+</style>

src/views/teacher/Dashboard/index.vue

@@ -1,3 +1,10 @@
 <template>
-  <div></div>
+  <div class="contentContainer"></div>
 </template>
+<style lang="scss" scoped>
+.contentContainer {
+  margin-top: 4rem;
+  flex: 1;
+  width: 100%;
+}
+</style>