diff --git a/package.json b/package.json
index ec8892fe262df4f346766f33224f3fddda2ea567..5361644c0c11b4117b152290a883cc197a706c8d 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.14",
+    "element-plus": "^v1.0.1-beta.17",
+    "sortablejs": "^1.10.2",
     "vue": "^3.0.4",
     "vue-router": "^4.0.1"
   },
   "devDependencies": {
+    "@types/sortablejs": "^1.10.6",
     "@vue/compiler-sfc": "^3.0.4",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
diff --git a/src/theme/app.scss b/src/theme/app.scss
index 534a2dbd891fc5a4ad842f70ad9b4829c75471f9..f2a34e132db9a564f6e8a3009b728d8585d36d54 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -9,12 +9,52 @@ body,
 #app {
   margin: 0;
   padding: 0;
+  width: 100%;
   height: 100%;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, SimSun, sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
+  background-color: #f8f8f8;
+  font-size: 14px;
+}
+
+.layout-container {
+  width: 100%;
+  height: 100%;
+  .el-aside {
+    background: #29384d;
+    border-right: 1px solid rgb(230, 230, 230);
+    height: inherit;
+  }
+  .el-header {
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    padding: 0 !important;
+  }
+  .el-main {
+    padding: 0 !important;
+    overflow: unset !important;
+  }
+  .el-scrollbar {
+    width: 100%;
+  }
+  .layout-scrollbar {
+    @extend .el-scrollbar;
+    padding: 15px;
+  }
+  .el-scrollbar__view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.w100 {
+  width: 100% !important;
+}
+.h100 {
+  height: 100% !important;
 }
 
 @for $i from 10 through 32 {
diff --git a/src/theme/element.scss b/src/theme/element.scss
index fadf8cd36dcd03e0946b0191a6ca3ec1deb0d214..d3258363ce3d7e34f2f16932e508a87a3b792a10 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -643,19 +643,27 @@
 
 /* NavMenu */
 // horizontal
-.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu {
+  border-right: none !important;
+}
+.el-menu-item.is-active,
+.el-submenu.is-active .el-submenu__title {
   border-bottom-color: set-color(primary);
   color: set-color(primary);
 }
-.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
-.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
-.el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu-item:not(.is-disabled):focus,
+.el-menu-item:not(.is-disabled):hover,
+.el-submenu:focus .el-submenu__title,
+.el-submenu:hover .el-submenu__title,
+.el-menu .el-menu-item.is-active,
+.el-menu .el-submenu.is-active > .el-submenu__title {
   color: set-color(primary);
 }
+.el-menu-item a,
+.el-menu-item a:hover {
+  color: inherit;
+  text-decoration: none;
+}
 // default
 .el-menu-item.is-active {
   color: set-color(primary);
diff --git a/src/views/layout/component/aside.vue b/src/views/layout/component/aside.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33e6d9bd9e2bc88f2ae7a49a682f1c96d4125bcf
--- /dev/null
+++ b/src/views/layout/component/aside.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-aside width="240px">
+    <el-scrollbar>
+      <Vertical :menuList="menuList" />
+    </el-scrollbar>
+  </el-aside>
+</template>
+
+<script lang="ts">
+import Vertical from "/@/views/layout/navMenu/vertical.vue";
+import { toRefs, reactive } from "vue";
+export default {
+  name: "layoutAside",
+  components: { Vertical },
+  setup() {
+    const state = reactive({
+      menuList: [
+        {
+          path: "/home",
+          meta: {
+            title: "首页",
+            icon: "el-icon-s-home",
+          },
+          children: [
+            {
+              path: "/test-page1",
+              meta: {
+                title: "测试页1",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/test-page2",
+              meta: {
+                title: "测试页2",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/test-page3",
+              meta: {
+                title: "测试页3",
+                icon: "el-icon-s-flag",
+              },
+            },
+          ],
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/layout/component/header.vue b/src/views/layout/component/header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..370f58fe51ad7aa3016fbba1d81a02741d4696e5
--- /dev/null
+++ b/src/views/layout/component/header.vue
@@ -0,0 +1,13 @@
+<template>
+  <el-header height="84px">
+    <NavBarsIndex />
+  </el-header>
+</template>
+
+<script lang="ts">
+import NavBarsIndex from "/@/views/layout/navBars/index.vue";
+export default {
+  name: "layoutHeader",
+  components: { NavBarsIndex },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/layout/component/main.vue b/src/views/layout/component/main.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9993bb334e342f3f8e819a2f0ecff3275360d7a5
--- /dev/null
+++ b/src/views/layout/component/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-main>
+    <el-scrollbar class="layout-scrollbar">
+      <router-view v-slot="{ Component }">
+        <transition appear :name="transitionName" mode="out-in">
+          <div :key="key">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </div>
+        </transition>
+      </router-view>
+    </el-scrollbar>
+  </el-main>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRefs, reactive } from "vue";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+export default defineComponent({
+  name: "layoutMain",
+  setup() {
+    const route = useRoute();
+    const state = reactive({
+      transitionName: "slide-right",
+    });
+    const key = computed(() => route.path);
+    onBeforeRouteUpdate((to, from) => {
+      state.transitionName =
+        to.meta.index > from.meta.index ? "slide-right" : "slide-left";
+    });
+    return { key, ...toRefs(state) };
+  },
+});
+</script>
diff --git a/src/views/layout/fashion.vue b/src/views/layout/fashion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a36aa073e21282588746990b8d9ad8c894ba00e
--- /dev/null
+++ b/src/views/layout/fashion.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-container class="layout-container">
+    <Aside />
+    <el-container>
+      <el-scrollbar>
+        <Header />
+        <Main />
+      </el-scrollbar>
+    </el-container>
+  </el-container>
+</template>
+
+<script lang="ts">
+import Aside from '/@/views/layout/component/aside.vue';
+import Header from '/@/views/layout/component/header.vue';
+import Main from '/@/views/layout/component/main.vue';
+export default {
+  name: 'layoutFashion',
+  components: { Aside, Header, Main }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 434632dceb005513e1a89a3b4426e1341a34bd23..2ddcb5af3404678cf276ef363cc154e4e6681924 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -1,10 +1,11 @@
 <template>
-    layout
-    <router-view></router-view>
+  <Fashion />
 </template>
-  
+
 <script lang="ts">
+import Fashion from "/@/views/layout/fashion.vue";
 export default {
-    name: "layout",
+  name: "layout",
+  components: { Fashion },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/layout/logo/index.vue b/src/views/layout/logo/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8130e472ae5047e2f24072e5616cbc30464d376c
--- /dev/null
+++ b/src/views/layout/logo/index.vue
@@ -0,0 +1,9 @@
+<template>
+  layoutLogo
+</template>
+
+<script lang="ts">
+export default {
+  name: "layoutLogo",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/layout/navMenu/subItem.vue b/src/views/layout/navMenu/subItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7497a85adf22262a29041d538d24c081beddd769
--- /dev/null
+++ b/src/views/layout/navMenu/subItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <template v-for="val in chil">
+    <el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
+      <template #title>
+        <i :class="val.meta.icon"></i>
+        {{ val.meta.title }}
+      </template>
+      <sub-item :chil="val.children" />
+    </el-submenu>
+    <el-menu-item :index="val.path" :key="val.path" v-else>
+      <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+      <template v-if="!val.meta.isLink">{{ val.meta.title }}</template>
+      <template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+export default defineComponent({
+  name: "navMenuSubItem",
+  props: {
+    chil: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  setup(props) {
+    const route = useRoute();
+    const chil = computed(() => {
+      return props.chil;
+    });
+    return {
+      chil,
+    };
+  },
+});
+</script>
diff --git a/src/views/layout/navMenu/vertical.vue b/src/views/layout/navMenu/vertical.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67151e2938d79d5d49070796da6f750ee812715b
--- /dev/null
+++ b/src/views/layout/navMenu/vertical.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-menu router :default-active="defaultActive" background-color="#29384D" text-color="#e6e6e6">
+    <template v-for="val in menuList">
+      <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+        <template #title>
+          <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+          <span>{{ val.meta.title }}</span>
+        </template>
+        <SubItem :chil="val.children" />
+      </el-submenu>
+      <el-menu-item :index="val.path" :key="val.path" v-else>
+        <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+        <template #title v-if="!val.meta.isLink">{{ val.meta.title }}</template>
+        <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+      </el-menu-item>
+    </template>
+  </el-menu>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent } from "vue";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import SubItem from "/@/views/layout/navMenu/subItem.vue";
+export default defineComponent({
+  name: "navMenuVertical",
+  components: { SubItem },
+  props: {
+    menuList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  setup(props) {
+    const route = useRoute();
+    const state = reactive({
+      defaultActive: route.path,
+    });
+    const menuList = computed(() => {
+      return props.menuList;
+    });
+    onBeforeRouteUpdate((to) => {
+      state.defaultActive = to.path;
+    });
+    return {
+      menuList,
+      ...toRefs(state),
+    };
+  },
+});
+</script>