Merge branch 'develop' into feature/question-zhouweilu

src/components/Card/index.vue

@@ -31,7 +31,7 @@ export default {
   height: 100%;
   position: relative;
   background: #ffffff;
-  border: $default-border;
+  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
   color: #152935;
 }
 

src/layouts/HomeLayout/HomeHeader/index.vue

@@ -58,7 +58,8 @@ export default {
 @import "../../../assets/scss/app";
 
 .nav-section {
-  border-bottom: $default-border;
+  width: 100%;
+  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
 }
 
 @media screen and (min-width: 1088px) {
@@ -72,7 +73,10 @@ export default {
     sans-serif;
   font-weight: bold;
   font-size: 1.7em;
-  color: #3d70b2;
+  text-align: center;
+  background: -webkit-linear-gradient(right, #82b1ed, #b073fd); /* 背景色渐变 */
+  -webkit-background-clip: text; /* 规定背景的划分区域 */
+  -webkit-text-fill-color: transparent;
   padding-right: 20px;
   a {
     color: #3d70b2;

src/layouts/HomeLayout/index.vue

@@ -23,6 +23,7 @@ export default {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: #fafbfd;
   .body-section {
     flex: 1;
   }

src/layouts/courseLayouts/LayoutStructure.vue

@@ -1,16 +1,22 @@
 <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">
+    <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>
 
@@ -24,6 +30,7 @@ export default {
       course: state => state.course.currentCourse
     })
   },
+  components: {},
   data() {
     return {
       isLoading: false
@@ -68,7 +75,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 +92,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/StudentMenu.vue

@@ -4,7 +4,7 @@
     <ul class="menu-list">
       <li>
         <router-link active-class="is-active" :to="`${prefix}/dashboard`">
-          工作台
+          <img src="../../assets/icon/work.png" />工作台
         </router-link>
       </li>
     </ul>
@@ -12,17 +12,17 @@
     <ul class="menu-list">
       <li>
         <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
+          ><img src="../../assets/icon/file.png" />文档作业</router-link
         >
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/review`"
-          >评审作业</router-link
+          ><img src="../../assets/icon/edit.png" />评审作业</router-link
         >
       </li>
     </ul>
@@ -30,7 +30,7 @@
     <ul class="menu-list">
       <li>
         <router-link active-class="is-active" :to="`${prefix}/group`"
-          >我的小组</router-link
+          ><img src="../../assets/icon/team.png" />我的小组</router-link
         >
       </li>
     </ul>
@@ -46,3 +46,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/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/edit.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/router/routes.js

@@ -31,7 +31,7 @@ export default [
   {
     path: "/teacher",
     component: () => import("@/layouts/HomeLayout"),
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: false },
     children: [
       {
         name: TEACHER,
@@ -43,7 +43,7 @@ export default [
   {
     path: "/course-teacher/:courseId",
     component: () => import("@/layouts/courseLayouts/TeacherCourseLayout.vue"),
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: false },
     children: [
       {
         name: TEACHER_COURSE,
@@ -55,7 +55,7 @@ export default [
   {
     path: "/course-student/:courseId",
     component: () => import("@/layouts/courseLayouts/StudentCourseLayout.vue"),
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: false },
     children: [
       {
         name: STUDENT_COURSE,
@@ -83,7 +83,7 @@ export default [
   {
     path: "/student",
     component: () => import("@/layouts/HomeLayout"),
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: false },
     children: [
       {
         name: STUDENT,

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>

src/views/teacher/Home/index.vue

@@ -2,9 +2,10 @@
   <div>
     <section class="hero">
       <div class="hero-body">
-        <div class="container">
-          <h1 class="title">我的课程</h1>
-          <h2 class="subtitle">展示我开设的全部课程</h2>
+        <div class="container hint">
+          <h1 class="title">我开设的课程</h1>
+          <h2 class="subtitle">请点击下方按钮新建课程</h2>
+          <img class="newSubject" src="../../../assets/white.png" />
         </div>
       </div>
     </section>
@@ -37,3 +38,33 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.container.hint {
+  padding: 20px 20px 20px 20px;
+  background-image: url("../../../assets/login_background.png");
+  background-size: cover;
+  .title {
+    color: #ffffff;
+  }
+  .subtitle {
+    margin-top: 20px;
+    font-size: 1rem;
+    font-weight: bold;
+    color: #ffffff;
+  }
+}
+.newSubject {
+  height: 80px;
+  width: 80px;
+  position: absolute;
+  bottom: -40px;
+  left: 20px;
+
+  &:hover {
+    height: 90px;
+    width: 90px;
+    bottom: -45px;
+    left: 15px;
+  }
+}
+</style>