[更新]基本布局样式

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,16 @@
 @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;
+
 
 .has-text-primary{
   color:#209cee !important;
@@ -17,4 +25,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/layouts/HomeLayout/HomeHeader/index.vue

@@ -59,7 +59,8 @@ export default {
 
 .nav-section {
   width: 100%;
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: $default-shadow-lighter;
+  border-bottom: $default-border;
 }
 
 @media screen and (min-width: 1088px) {

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
@@ -51,7 +50,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});
@@ -67,25 +67,30 @@ $top-section-height: 4.25rem;
 .router-section {
   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;
+  border-radius: 0 $default-radius * 2 $default-radius * 2 0;
+  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",
@@ -95,21 +100,18 @@ $top-section-height: 4.25rem;
       color: #ffffff;
       padding-right: 20px;
       line-height: $top-section-height;
-      padding-bottom: 40px;
       a {
         color: #3d70b2;
       }
     }
     .course-detail {
-      margin-top: 20px;
+      margin-top: 10px;
       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);
+      box-shadow: 0 1px 2px #4a4a4a;
       margin-bottom: 1em;
       min-height: 54px;
     }

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;