Merge branch 'style/improvement-bay' of SEEC-II-FrontEnd-Team/SEEC-II-FrontEnd into develop

src/App.vue

@@ -3,7 +3,9 @@
 </template>
 
 <style lang="scss">
+@import "assets/scss/app";
+
 #app {
-  background: #f4f7fb;
+  background: $default-background;
 }
 </style>

src/assets/scss/app.scss

@@ -8,8 +8,19 @@
 @import "~buefy/src/scss/buefy";
 
 
-$border-color:#b9c7d8;
-$default-border:1px solid #c9d8ea;
+$default-shadow:0 3px 8px rgba(211, 215, 222, 0.4);
+$default-shadow-lighter:0 3px 8px rgba(211, 215, 222, 0.2);
+
+$default-radius:4px;
+
+$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;
@@ -17,4 +28,36 @@ $default-border:1px solid #c9d8ea;
 
 .input{
   box-shadow: none !important;
-}
+}
+
+
+.menu{
+
+  .menu-label {
+    color: rgba(255, 255, 255, 0.79);
+    font-size: 1rem;
+    padding-bottom: 0 !important;
+    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(0, 0, 0, 0.18);
+        }
+      }
+      img {
+        height: 20px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .is-active {
+    background-color: rgba(0, 0, 0, 0.18) !important;
+  }
+}

src/components/Card/index.vue

@@ -31,8 +31,10 @@ export default {
   height: 100%;
   position: relative;
   background: #ffffff;
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: $default-shadow;
+  border-radius: $default-radius;
   color: #152935;
+  border: $default-border;
 }
 
 .hoverable {
@@ -51,7 +53,8 @@ export default {
   top: -5px;
   left: -5px;
   padding: 5px;
-  box-shadow: 0 0 0 4px #8897a2;
+  border-radius: 5px;
+  box-shadow: 0 0 0 4px $default-border-color;
   transition: transform 0.2s, opacity 0.2s;
   transform: scaleY(0.9) scaleX(0.95);
   opacity: 0;

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,16 +43,6 @@ export default {
 <style lang="scss" scoped>
 @import "../../../assets/scss/app";
 
-.nav-section {
-  width: 100%;
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
-}
-
-@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/HomeLayout/index.vue

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

src/layouts/courseLayouts/LayoutStructure.vue

@@ -4,7 +4,6 @@
       <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
@@ -15,7 +14,16 @@
           <slot />
         </div>
       </div>
-      <div class="router-section"><router-view /></div>
+      <div class="router-section">
+        <default-header
+          style="height: 4.25rem;border-bottom: 2px solid rgba(84, 66, 251, 0.16);"
+        >
+          <div class="navbar-menu">
+            <div class="navbar-end nav-user"><user-dropdown /></div>
+          </div>
+        </default-header>
+        <div class="router-part"><router-view /></div>
+      </div>
     </div>
   </div>
 </template>
@@ -24,13 +32,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
@@ -51,7 +65,8 @@ export default {
 $menu-width: 300px;
 $menu-padding: 24px;
 $screen-width: 1450px;
-$left-padding: "(100% -" #{$screen-width} "-" #{$menu-padding} "* 2) / 2";
+//$left-padding: "(100% -" #{$screen-width} "-" #{$menu-padding} "* 2) / 2";
+$left-padding: 0;
 $left-width: #{$left-padding} + #{$menu-width};
 $left-padding-calc: calc(#{$left-padding});
 $left-width-calc: calc(#{$left-width});
@@ -65,27 +80,31 @@ $top-section-height: 4.25rem;
 }
 
 .router-section {
-  padding: 24px;
+  /*padding: 24px;*/
   flex-grow: 1;
-  max-width: 1000px;
+  /*max-width: 1000px;*/
 }
 .menu-section {
-  min-width: $menu-width;
+  //min-width: $menu-width;
   width: $left-width-calc;
-  background: white;
-  border-right: 1px solid #c9d8ea;
+  /*background: white;*/
+  /*border-right: 3px solid rgb(159, 148, 254);*/
   padding-left: $left-padding-calc;
+  box-shadow: $default-shadow;
   z-index: 99;
+  /*TODO: 寻找更好的图片或背景颜色*/
+  /*background-image: url("../../assets/sideBar.png");*/
+  background-image: linear-gradient(to top, #493a9e 0%, #4f54e9 100%);
+  background-size: cover;
+  position: sticky;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100vh;
+  top: 0;
   .menu-sticky {
-    background-image: url("../../assets/sideBar.png");
-    background-size: cover;
-    width: $menu-width;
-    position: sticky;
-    overflow-y: auto;
     padding: 0 $menu-padding;
-    top: 0;
-    height: 100vh;
-
+    height: 100%;
+    width: $menu-width;
     .header-logo {
       font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
         "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
@@ -94,23 +113,24 @@ $top-section-height: 4.25rem;
       font-size: 1.7em;
       color: #ffffff;
       padding-right: 20px;
+      height: 4.25rem;
       line-height: $top-section-height;
-      padding-bottom: 40px;
+      margin: 0 -24px;
+      /* background: black; */
+      background-image: linear-gradient(to left, #5a4baf 0%, #161aa7 100%);
+      padding-left: 24px;
       a {
         color: #3d70b2;
       }
     }
     .course-detail {
-      margin-top: 20px;
       position: relative;
       padding: 15px;
-      color: #ffffff;
       font-weight: bold;
-      background: rgba(255, 255, 255, 0.24);
-      border: 1px solid #ffffff;
+      background: white;
       border-radius: 3px;
-      box-shadow: 0 1px 2px rgba(201, 216, 234, 0.5);
-      margin-bottom: 1em;
+      box-shadow: 0 1px 2px #4a4a4a;
+      margin: $default-margin-between 0;
       min-height: 54px;
     }
 
@@ -127,4 +147,11 @@ $top-section-height: 4.25rem;
     }
   }
 }
+.nav-user {
+  margin-right: $default-margin;
+}
+
+.router-part {
+  padding: $default-margin-between;
+}
 </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" />工作台
+          <img alt="" 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" />代码作业
+          <img alt="" src="../../assets/icon/laptop.png" />代码作业
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/document`"
-          ><img src="../../assets/icon/file.png" />文档作业</router-link
+          ><img alt="" src="../../assets/icon/file.png" />文档作业</router-link
         >
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/review`"
-          ><img src="../../assets/icon/edit.png" />评审作业</router-link
+          ><img alt="" 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`"
-          ><img src="../../assets/icon/team.png" />我的小组</router-link
+          ><img alt="" src="../../assets/icon/team.png" />我的小组</router-link
         >
       </li>
     </ul>
@@ -46,33 +46,3 @@ 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

@@ -4,17 +4,17 @@
     <ul class="menu-list">
       <li>
         <router-link active-class="is-active" :to="`${prefix}`">
-          <img src="../../assets/icon/work.png" />工作台
+          <img alt="" src="../../assets/icon/work.png" />工作台
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`/teacher/`">
-          <img src="../../assets/icon/home.png" />课程选择
+          <img alt="" src="../../assets/icon/home.png" />课程选择
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/question/`">
-          <img src="../../assets/icon/question.png" />题目管理
+          <img alt="" src="../../assets/icon/question.png" />题目管理
         </router-link>
       </li>
     </ul>
@@ -22,22 +22,22 @@
     <ul class="menu-list">
       <li>
         <router-link active-class="is-active" :to="`${prefix}/code`">
-          <img src="../../assets/icon/laptop.png" />代码作业
+          <img alt="" src="../../assets/icon/laptop.png" />代码作业
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/document`">
-          <img src="../../assets/icon/file.png" />文档作业
+          <img alt="" src="../../assets/icon/file.png" />文档作业
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/review`">
-          <img src="../../assets/icon/edit.png" />评审作业
+          <img alt="" src="../../assets/icon/edit.png" />评审作业
         </router-link>
       </li>
       <li>
         <router-link active-class="is-active" :to="`${prefix}/result`">
-          <img src="../../assets/icon/linechart.png" />成绩管理
+          <img alt="" src="../../assets/icon/linechart.png" />成绩管理
         </router-link>
       </li>
     </ul>
@@ -53,33 +53,3 @@ 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/Home/index.vue

@@ -39,15 +39,21 @@ export default {
 };
 </script>
 <style lang="scss">
+@import "../../../assets/scss/app";
 .container.hint {
-  padding: 20px 20px 20px 20px;
-  background-image: url("../../../assets/login_background.png");
-  background-size: cover;
+  padding: 30px 20px 20px 30px;
+
+  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
+  /*TODO: 寻找质量更高的图片以防止对比度过低 */
+  /*background-image: url("../../../assets/login_background.png");*/
+  /*background-size: cover;*/
+  box-shadow: $default-shadow;
+  border-radius: $default-radius;
   .title {
     color: #ffffff;
   }
   .subtitle {
-    margin-top: 20px;
+    margin-top: -0.8em;
     font-size: 1rem;
     font-weight: bold;
     color: #ffffff;