修改

src/assets/styles/variables.scss

@@ -9,12 +9,12 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color: #806e6e;
+$base-menu-color: #4C4949;
 $base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
+$base-menu-background: #fff;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-color: rgba(51, 30, 30, 0.7);
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 

src/layout/components/Sidebar/SidebarItem.vue

@@ -11,15 +11,17 @@
         v-if="onlyOneChild.meta"
         :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"
       >
-        <el-menu-item
+        <div>
-          :index="resolvePath(onlyOneChild.path)"
+          <el-menu-item
-          :class="{ 'submenu-title-noDropdown': !isNest }"
+            :index="resolvePath(onlyOneChild.path)"
-        >
+            class="submenu-title-noDropdown"
-          <item
+          >
-            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            <item
-            :title="onlyOneChild.meta.title"
+              :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
-          />
+              :title="onlyOneChild.meta.title"
-        </el-menu-item>
+            />
+          </el-menu-item>
+        </div>
       </app-link>
     </template>
 

src/layout/components/Sidebar/index.vue

@@ -1,30 +1,14 @@
 <template>
-  <div
+  <div :class="{ 'has-logo': showLogo }">
-    :class="{ 'has-logo': showLogo }"
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
-    :style="{
-      backgroundColor:
-        settings.sideTheme === 'theme-dark'
-          ? 'transparent'
-          : variables.menuLightBackground,
-    }"
-  >
-    <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
       <!-- :collapse="isCollapse" -->
       <el-menu
         :default-active="activeMenu"
-        :background-color="
+        :background-color="variables.menuLightBackground"
-          settings.sideTheme === 'theme-dark'
+        :text-color="variables.menuColor"
-            ? 'transparent'
-            : variables.menuLightBackground
-        "
-        :text-color="
-          settings.sideTheme === 'theme-dark'
-            ? variables.menuColor
-            : variables.menuLightColor
-        "
         :unique-opened="true"
-        :active-text-color="'#F23F4A'"
+        active-text-color="#F23F4A"
         :collapse-transition="false"
         mode="vertical"
       >
@@ -52,6 +36,7 @@ export default {
     ...mapGetters(["sidebarRouters", "sidebar"]),
     activeMenu() {
       const route = this.$route;
+      console.log(route);
       const { meta, path } = route;
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
@@ -71,3 +56,6 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+
+</style>

vue.config.js

@@ -57,9 +57,9 @@ module.exports = {
         sassOptions: { outputStyle: "expanded" },
       },
       // px to rem
-      postcss: {
+      // postcss: {
-        plugins: [postcss],
+      //   plugins: [postcss],
-      },
+      // },
     },
   },
   configureWebpack: {