[更新]新增header布局

src/assets/scss/app.scss

@@ -18,6 +18,9 @@ $default-background:#f4f7fc;
 $default-border-color:rgba(84, 66, 251, 0.56);
 $default-border:2px solid $default-border-color;
 
+$default-margin:0.75rem;
+$default-margin-between:1.5rem;
+
 
 .has-text-primary{
   color:#209cee !important;

src/components/DefaultHeader/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <nav class="navbar nav-section"><slot></slot></nav>
+</template>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/app";
+
+.nav-section {
+  width: 100%;
+  box-shadow: $default-shadow-lighter;
+  border-bottom: $default-border;
+}
+.navbar {
+  height: 4.25rem;
+}
+</style>

src/components/UserDropdown/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <b-dropdown position="is-bottom-left">
+    <a class="navbar-item" slot="trigger">
+      <span>{{ name }}</span>
+      <b-icon icon="menu-down"></b-icon>
+    </a>
+
+    <b-dropdown-item custom>
+      以 <b>{{ name }}</b> 的身份登录
+    </b-dropdown-item>
+    <hr class="dropdown-divider" />
+    <b-dropdown-item value="settings">
+      <b-icon icon="settings"></b-icon>
+      个人设置
+    </b-dropdown-item>
+    <b-dropdown-item value="logout">
+      <b-icon icon="logout"></b-icon>
+      登出
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { FETCH_PROFILE } from "@/store/type/actions.type";
+
+export default {
+  computed: {
+    ...mapState({
+      profile: state => state.user.profile
+    }),
+    name() {
+      const { nickname, username } = this.profile;
+      return nickname ? nickname : username;
+    }
+  },
+  async mounted() {
+    await this.$store.dispatch(FETCH_PROFILE, this.profile.id);
+  }
+};
+</script>

src/layouts/HomeLayout/HomeHeader/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar nav-section">
+  <default-header>
     <div class="container">
       <div class="navbar-brand">
         <a class="navbar-item header-logo"> MOOC </a>
@@ -8,37 +8,23 @@
       </div>
 
       <div class="navbar-menu">
-        <div class="navbar-end">
-          <b-dropdown position="is-bottom-left">
-            <a class="navbar-item" slot="trigger">
-              <span>{{ name }}</span>
-              <b-icon icon="menu-down"></b-icon>
-            </a>
-
-            <b-dropdown-item custom>
-              以 <b>{{ name }}</b> 的身份登录
-            </b-dropdown-item>
-            <hr class="dropdown-divider" />
-            <b-dropdown-item value="settings">
-              <b-icon icon="settings"></b-icon>
-              个人设置
-            </b-dropdown-item>
-            <b-dropdown-item value="logout">
-              <b-icon icon="logout"></b-icon>
-              登出
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
+        <div class="navbar-end"><user-dropdown /></div>
       </div>
     </div>
-  </nav>
+  </default-header>
 </template>
 
 <script>
 import { mapState } from "vuex";
 import { FETCH_PROFILE } from "@/store/type/actions.type";
+import DefaultHeader from "@/components/DefaultHeader";
+import UserDropdown from "@/components/UserDropdown";
 
 export default {
+  components: {
+    DefaultHeader,
+    UserDropdown
+  },
   computed: {
     ...mapState({
       profile: state => state.user.profile
@@ -57,17 +43,6 @@ export default {
 <style lang="scss" scoped>
 @import "../../../assets/scss/app";
 
-.nav-section {
-  width: 100%;
-  box-shadow: $default-shadow-lighter;
-  border-bottom: $default-border;
-}
-
-@media screen and (min-width: 1088px) {
-  .navbar {
-    min-height: 4.25rem;
-  }
-}
 .header-logo {
   font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,

src/layouts/courseLayouts/LayoutStructure.vue

@@ -14,7 +14,14 @@
           <slot />
         </div>
       </div>
-      <div class="router-section"><router-view /></div>
+      <div class="router-section">
+        <default-header style="height: 4.25rem">
+          <div class="navbar-menu">
+            <div class="navbar-end nav-user"><user-dropdown /></div>
+          </div>
+        </default-header>
+        <router-view />
+      </div>
     </div>
   </div>
 </template>
@@ -23,13 +30,19 @@
 import { FETCH_CURRENT_COURSE } from "@/store/type/actions.type";
 import { mapState } from "vuex";
 
+import DefaultHeader from "@/components/DefaultHeader";
+import UserDropdown from "@/components/UserDropdown";
+
 export default {
+  components: {
+    DefaultHeader,
+    UserDropdown
+  },
   computed: {
     ...mapState({
       course: state => state.course.currentCourse
     })
   },
-  components: {},
   data() {
     return {
       isLoading: false
@@ -65,7 +78,7 @@ $top-section-height: 4.25rem;
 }
 
 .router-section {
-  padding: 24px;
+  /*padding: 24px;*/
   flex-grow: 1;
   /*max-width: 1000px;*/
 }
@@ -75,7 +88,6 @@ $top-section-height: 4.25rem;
   /*background: white;*/
   /*border-right: 3px solid rgb(159, 148, 254);*/
   padding-left: $left-padding-calc;
-  border-radius: 0 $default-radius * 2 $default-radius * 2 0;
   box-shadow: $default-shadow;
   z-index: 99;
   /*TODO: 寻找更好的图片或背景颜色*/
@@ -99,20 +111,25 @@ $top-section-height: 4.25rem;
       font-size: 1.7em;
       color: #ffffff;
       padding-right: 20px;
+      height: 4.25rem;
       line-height: $top-section-height;
+      margin: 0 -24px;
+      /* background: black; */
+      background-image: linear-gradient(to left, #5a4baf 0%, #161aa7 100%);
+      padding-left: 24px;
+      border-bottom: 2px solid #9f94fe;
       a {
         color: #3d70b2;
       }
     }
     .course-detail {
-      margin-top: 10px;
       position: relative;
       padding: 15px;
       font-weight: bold;
       background: white;
       border-radius: 3px;
       box-shadow: 0 1px 2px #4a4a4a;
-      margin-bottom: 1em;
+      margin: $default-margin-between 0;
       min-height: 54px;
     }
 
@@ -129,4 +146,7 @@ $top-section-height: 4.25rem;
     }
   }
 }
+.nav-user {
+  margin-right: $default-margin;
+}
 </style>