Fixed sider theme

src/components/layout/LayoutMain.vue

 <template>
   <a-layout class="layout">
 
-    <sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
+    <sider-menu :menus="menus" theme="light" :collapsed="collapsed" :collapsible="true"></sider-menu>
 
     <a-layout>
       <!-- layout header -->
@@ -77,6 +77,12 @@
       }
     }
 
+    .sider {
+      box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+      position: relative;
+      z-index: 10;
+
+
       .logo {
         height: 64px;
         position: relative;
@@ -105,10 +111,24 @@
         }
       }
 
-    .sider {
-      box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
-      position: relative;
-      z-index: 10;
+      &.light {
+        background-color: #fff;
+        box-shadow: 2px 0px 8px 0px rgba(29,35,41,0.05);
+
+        .logo {
+          background: #fff;
+
+          h1 {
+            color: #1890ff;
+          }
+        }
+
+        .ant-menu-light {
+          border-right-color: transparent;
+        }
+      }
+
+
     }
 
     .header {

src/components/menu/SiderMenu.vue

 <template>
-    <a-layout-sider :class="['sider', isMobile ? null : 'shadow' ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+    <a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
         <div class="logo">
             <router-link :to="{name:'dashboard'}">
                 <img src="~@/assets/logo.svg" alt="logo">
                 <h1>Ant Design Pro</h1>
             </router-link>
         </div>
-        <s-menu :collapsed="collapsed" :menu="menus" @select="onSelect" style="padding: 16px 0px;"></s-menu>
+        <s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" style="padding: 16px 0px;"></s-menu>
     </a-layout-sider>
 </template>
 
@@ -17,6 +17,11 @@
         name: "SiderMenu",
         components: { ALayoutSider, SMenu },
         props: {
+            theme: {
+              type: String,
+              required: false,
+              default: 'dark'
+            },
             collapsible: {
                 type: Boolean,
                 required: false,
@@ -47,7 +52,3 @@
         }
     }
 </script>
\ No newline at end of file
-
-<style scoped>
-
-</style>
\ No newline at end of file

src/router/index.js

@@ -249,13 +249,13 @@ export const asyncRouterMap = [
       {
         path: 'center',
         name: 'center',
-        component: () => import('@/views/user/Index'),
+        component: () => import('@/views/account/Index'),
         meta: { title: '个人中心' }
       },
       {
         path: 'settings',
         name: 'settings',
-        component: () => import('@/views/user/Index'),
+        component: () => import('@/views/account/Index'),
         meta: { title: '个人设置' }
       }
     ]

src/views/user/Index.vue → src/views/account/Index.vue

 <template>
-  <layout-main>
-
   <page-layout :avatar="avatar">
     <div slot="headerContent">
       <div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
@@ -85,8 +83,6 @@
     </a-card>
 
   </page-layout>
-
-  </layout-main>
 </template>
 
 <script>