左侧菜单主题修改

src/layouts/home/index.vue

@@ -36,6 +36,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+$navWidth: 200px;
+
 .main {
   display: flex;
   min-width: 1300px;
@@ -43,16 +45,15 @@ export default {
   overflow: hidden;
 
   .nav {
-    width: 256px;
+    width: $navWidth;
   }
 
   .layout {
-    width: calc(100% - 256px);
+    width: calc(100% - #{$navWidth});
 
 
     .content {
       height: 100vh;
-      padding-left: 24px;
       overflow: auto;
 
       .view {

src/layouts/navbar/index.vue

@@ -2,16 +2,16 @@
   <div>
     <div class="flex-1">
       <div class="logo">
-        <img width="30" src="@/assets/images/logo.png" alt="">
+        <!-- <img width="30" src="@/assets/images/logo.png" alt=""> -->
         <span>理论考试系统</span>
       </div>
-      <el-menu :default-active="active" :default-openeds="['ques', 'testPaper']" background-color="#001529"
+      <el-menu :default-active="active" :default-openeds="['ques', 'testPaper']" background-color="#f5fafa"
-        text-color="#fff" active-text-color="#fff" :collapse-transition="false" @select="menuSelect">
+        text-color="#4a4b4b" active-text-color="#3474ff" :collapse-transition="false" @select="menuSelect">
         <template v-for="item in menus">
           <template v-if="item.subs">
             <el-submenu :index="item.index" :key="item.index">
               <template slot="title">
-                <!-- <img class="icon" :src="require('@/assets/images/' + item.icon + '.png')" alt=""> -->
+                <img class="icon" :src="require('@/assets/images/' + item.index + '.png')" alt="">
                 <span slot="title">{{ item.title }}</span>
               </template>
               <template v-for="subItem in item.subs">
@@ -137,8 +137,6 @@ export default {
 <style lang="scss" scoped>
 .nav {
   height: 100%;
-  background-color: #001529;
-  box-shadow: 2px 0px 6px 0px rgba(92, 111, 130, 0.35);
   overflow: auto;
 
   .logo {
@@ -146,8 +144,9 @@ export default {
     align-items: center;
     padding-left: 28px;
     margin: 15px 0 26px;
-    font-size: 16px;
+    font-size: 18px;
-    color: #fff;
+    font-weight: 600;
+    color: #000;
 
     img {
       margin-right: 8px;
@@ -161,61 +160,31 @@ export default {
       margin: 0 11px 0 5px;
     }
 
-    .el-menu-item {
-      &.is-active {
-        background-color: #062c87 !important;
-      }
-    }
-
-    .el-menu .el-menu-item {
-      padding-left: 50px !important;
-    }
-  }
-
-  .light {
-    display: flex;
-    height: 100%;
-    background-color: #fff;
-    overflow: hidden;
-
-    .col-wrap {
-      width: 64px;
-      background-color: #001529;
-    }
 
-    .logo-icon {
+    .el-submenu__title {
-      width: 41px;
+      padding-left: 0 !important;
-      margin: 16px 0 30px 7px;
+      font-size: 16px;
+      font-weight: 600;
     }
 
-    .col-nav {
+    .el-menu-item {
-      text-align: center;
+      position: relative;
-
-      li {
-        padding: 25px 0;
-        cursor: pointer;
-      }
-    }
 
-    .name {
+      &.is-active {
-      margin: 17px 0 27px 15px;
-      font-size: 15px;
         font-weight: 600;
-      text-align: center;
-      color: #333;
-      line-height: 32px;
-    }
 
-    .col-menu {
+        &::before {
-      width: 192px;
+          content: '';
+          position: absolute;
+          top: 15px;
+          left: 28px;
+          width: 4px;
+          height: 20px;
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+          background-color: #3474ff;
         }
-
-    /deep/.el-submenu__title {
-      padding-left: 14px !important;
       }
-
-    .icon {
-      margin-left: 0;
     }
   }
 }

src/styles/layout/index.scss

@@ -13,5 +13,5 @@ body {
   min-width: 1280px;
   font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
   font-size: 14px;
-  background: #F0F2F5;
+  background: #f5fafa;
 }