Forráskód Böngészése

[修改]navBar样式 课程页面样式

soleil 7 éve
szülő
commit
00137148e6

+ 5 - 2
mock/serializers/course/CourseSerializer.js

@@ -14,11 +14,14 @@ const userSerializer = require("../user/UserSerializer");
  * @description 生成课程信息
  * @returns {CourseSerializerType}
  */
-module.exports = () => {
+// module.exports =
+function getCouseInfo() {
   return {
     id: makeId(),
     name: "软件工程第二阶段 2018",
     code: "xxxxx",
     teacher: userSerializer("TEACHER")
   };
-};
+}
+
+console.log(getCouseInfo());

BIN
src/assets/white.png


+ 5 - 2
src/layouts/HomeLayout/HomeHeader/index.vue

@@ -58,7 +58,7 @@ export default {
 @import "../../../assets/scss/app";
 
 .nav-section {
-  border-bottom: $default-border;
+  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
 }
 
 @media screen and (min-width: 1088px) {
@@ -72,7 +72,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;

+ 1 - 0
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;
   }

+ 4 - 4
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,

+ 39 - 4
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>
@@ -12,7 +13,7 @@
       <div class="columns is-multiline is-desktop">
         <div :key="item.id" v-for="item in courses" class="column is-4">
           <router-link :to="`/course-teacher/${item.id}/dashboard`">
-            <card hoverable>{{ item.name }}</card>
+            <card class="subjectCard" hoverable>{{ item.name }}</card>
           </router-link>
         </div>
       </div>
@@ -37,3 +38,37 @@ 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;
+  }
+}
+.subjectCard {
+  border: 0px !important;
+  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
+}
+</style>