diff --git a/IndexAsideStatic.vue b/IndexAsideStatic.vue
new file mode 100644
index 0000000..9192290
--- /dev/null
+++ b/IndexAsideStatic.vue
@@ -0,0 +1,240 @@
+<template>
+  <el-aside class="index-aside" height="100vh" width="180px">
+    <div class="index-aside-inner menulist" style="height:100%">
+      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;broder:0;background-color:#58B351">
+        <div class="menulistImg" style="backgroundColor:#58B351;padding:25px 0" v-if="false && menulistStyle == 'vertical'">
+          <el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
+        </div>
+        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#58B351" text-color="#FFFFFF" active-text-color="#F2DD3D" default-active="0">
+          <el-menu-item index="(0).toString()" :style="menulistBorderBottom" @click="menuHandler('')"><i v-if="true" class="el-icon-s-home" />首页</el-menu-item>
+          <el-submenu :index="(1).toString()" :style="menulistBorderBottom">
+            <template slot="title">
+              <i v-if="true" class="el-icon-user-solid" />
+              <span>个人中心</span>
+            </template>
+            <el-menu-item :index="(1-1).toString()" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
+            <el-menu-item :index="(1-2).toString()" @click="menuHandler('center')">个人信息</el-menu-item>
+          </el-submenu>
+          <el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="(index+2).toString()">
+            <template slot="title">
+              <i v-if="true" :class="icons[index]" />
+              <span>{{ menu.menu }}</span>
+            </template>
+            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="((index+2)+'-'+sort).toString()" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
+          </el-submenu>
+        </el-menu>
+
+      </div>
+    </div>
+  </el-aside>
+</template>
+<script>
+import menu from '@/utils/menu'
+export default {
+  data() {
+    return {
+      menuList: [],
+      dynamicMenuRoutes: [],
+      role: '',
+      icons: [
+        'el-icon-s-cooperation',
+        'el-icon-s-order',
+        'el-icon-s-platform',
+        'el-icon-s-fold',
+        'el-icon-s-unfold',
+        'el-icon-s-operation',
+        'el-icon-s-promotion',
+        'el-icon-s-release',
+        'el-icon-s-ticket',
+        'el-icon-s-management',
+        'el-icon-s-open',
+        'el-icon-s-shop',
+        'el-icon-s-marketing',
+        'el-icon-s-flag',
+        'el-icon-s-comment',
+        'el-icon-s-finance',
+        'el-icon-s-claim',
+        'el-icon-s-custom',
+        'el-icon-s-opportunity',
+        'el-icon-s-data',
+        'el-icon-s-check',
+        'el-icon-s-grid',
+        'el-icon-menu',
+        'el-icon-chat-dot-square',
+        'el-icon-message',
+        'el-icon-postcard',
+        'el-icon-position',
+        'el-icon-microphone',
+        'el-icon-close-notification',
+        'el-icon-bangzhu',
+        'el-icon-time',
+        'el-icon-odometer',
+        'el-icon-crop',
+        'el-icon-aim',
+        'el-icon-switch-button',
+        'el-icon-full-screen',
+        'el-icon-copy-document',
+        'el-icon-mic',
+        'el-icon-stopwatch',
+      ],
+      menulistStyle: 'vertical',
+	  menulistBorderBottom: {},
+    }
+  },
+  mounted() {
+    const menus = menu.list()
+    this.menuList = menus
+    this.role = this.$storage.get('role')
+  },
+  created(){
+    setTimeout(()=>{
+      this.menulistStyleChange()
+    },10)
+    this.icons.sort(()=>{
+      return (0.5-Math.random())
+    })
+	this.lineBorder()
+  },
+  methods: {
+	lineBorder() {
+		let style = 'vertical'
+		let w = '1px'
+		let s = 'dashed'
+		let c = '#F8D303'
+		if(style == 'vertical') {
+			this.menulistBorderBottom = {
+				borderBottomWidth: w,
+				borderBottomStyle: s,
+				borderBottomColor: c
+			}
+		} else {
+			this.menulistBorderBottom = {
+				borderRightWidth: w,
+				borderRightStyle: s,
+				borderRightColor: c
+			}
+		}
+	},
+    menuHandler(name) {
+      let router = this.$router
+      name = '/'+name
+      router.push(name).catch(err => err)
+    },
+    // 菜单
+    setMenulistHoverColor(){
+      let that = this
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
+          el.addEventListener("mouseenter", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(129, 187, 124, 1)"
+          })
+          el.addEventListener("mouseleave", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "#58B351"
+          })
+          el.addEventListener("focus", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(129, 187, 124, 1)"
+          })
+        })
+        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
+          el.addEventListener("mouseenter", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(129, 187, 124, 1)"
+          })
+          el.addEventListener("mouseleave", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "#58B351"
+          })
+        })
+      })
+    },
+    setMenulistIconColor() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
+          el.style.color = "rgba(254, 253, 253, 1)"
+        })
+      })
+    },
+    menulistStyleChange() {
+      this.setMenulistIconColor()
+      this.setMenulistHoverColor()
+      this.setMenulistStyleHeightChange()
+      let str = "vertical"
+      if("horizontal" === str) {
+        this.$nextTick(()=>{
+          document.querySelectorAll('.el-container .el-container').forEach(el=>{
+            el.style.display = "block"
+            el.style.paddingTop = "60px" // header 高度
+          })
+          document.querySelectorAll('.el-aside').forEach(el=>{
+            el.style.width = "100%"
+            el.style.height = "60px"
+            el.style.paddingTop = '0'
+          })
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
+            el.style.paddingTop = '0'
+          })
+        })
+      }
+      if("vertical" === str) {
+        this.$nextTick(()=>{
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
+            el.style.paddingTop = "60px"
+          })
+        })
+      }
+    },
+    setMenulistStyleHeightChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
+          el.style.height = "60px"
+          el.style.lineHeight = "60px"
+        })
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
+          el.style.height = "60px"
+          el.style.lineHeight = "60px"
+        })
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .index-aside {
+    position: relative;
+    overflow: hidden;
+
+    .menulistImg {
+      padding: 24px 0;
+      box-sizing: border-box;
+
+      .el-image {
+        margin: 0 auto;
+        width: 100px;
+        height: 100px;
+        border-radius: 100%;
+        display: block;
+      }
+    }
+
+    .index-aside-inner {
+      height: 100%;
+      margin-right: -17px;
+      margin-bottom: -17px;
+      overflow: scroll;
+      overflow-x: hidden !important;
+      padding-top: 60px;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+      }
+
+      .el-menu {
+        border: 0;
+      }
+    }
+  }
+</style>