diff --git a/admin/package.json b/admin/package.json
index 9ec71b6..f92a8d1 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -14,10 +14,11 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
-    "vue-axios": "^2.1.5",
+    "element-ui": "^2.13.1",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.6",
-    "element-ui": "^2.13.1"
+    "vue-axios": "^2.1.5",
+    "vue-router": "^3.1.6"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -36,6 +37,7 @@
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
+    "element-theme-chalk": "^2.13.1",
     "eslint": "^4.15.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
diff --git a/admin/src/App.vue b/admin/src/App.vue
index d26b4e3..2e28082 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -1,11 +1,110 @@
 <template>
   <div id="app">
-    待开发
+    <el-container :style="style">
+      <el-aside width="200px">
+        <el-scrollbar style="height:100%">
+          <el-menu style="height:100%">
+            <el-submenu index="1">
+              <template slot="title"><i class="el-icon-message"></i>导航一</template>
+              <el-menu-item-group>
+                <template slot="title">分组一</template>
+                <el-menu-item index="1-1">选项1</el-menu-item>
+                <el-menu-item index="1-2">选项2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="分组2">
+                <el-menu-item index="1-3">选项3</el-menu-item>
+              </el-menu-item-group>
+              <el-submenu index="1-4">
+                <template slot="title">选项4</template>
+                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+            <el-submenu index="2">
+              <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+              <el-menu-item-group>
+                <template slot="title">分组一</template>
+                <el-menu-item index="2-1">选项1</el-menu-item>
+                <el-menu-item index="2-2">选项2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="分组2">
+                <el-menu-item index="2-3">选项3</el-menu-item>
+              </el-menu-item-group>
+              <el-submenu index="2-4">
+                <template slot="title">选项4</template>
+                <el-menu-item index="2-4-1">选项4-1</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+            <el-submenu index="3">
+              <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+              <el-menu-item-group>
+                <template slot="title">分组一</template>
+                <el-menu-item index="3-1">选项1</el-menu-item>
+                <el-menu-item index="3-2">选项2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="分组2">
+                <el-menu-item index="3-3">选项3</el-menu-item>
+              </el-menu-item-group>
+              <el-submenu index="3-4">
+                <template slot="title">选项4</template>
+                <el-menu-item index="3-4-1">选项4-1</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+          </el-menu>
+        </el-scrollbar>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <el-dropdown>
+            <i class="el-icon-setting" style="margin-right: 15px"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>查看</el-dropdown-item>
+              <el-dropdown-item>新增</el-dropdown-item>
+              <el-dropdown-item>删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <span>王小虎</span>
+        </el-header>
+        <el-main>
+          <el-scrollbar style="height:100%">
+            <el-table :data="tableData">
+              <el-table-column prop="date" label="日期" width="140">
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="120">
+              </el-table-column>
+              <el-table-column prop="address" label="地址">
+              </el-table-column>
+            </el-table>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'App'
+    name: 'App',
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      };
+      return {
+        tableData: Array(20).fill(item),
+        style: {
+          height: null
+        }
+      }
+    },
+    created() {
+      window.addEventListener('resize', this.getHeight);
+      this.getHeight()
+    },
+    methods: {
+      getHeight() {
+        this.style.height = window.innerHeight + 'px';
+      }
+    }
   }
 </script>
diff --git a/admin/src/assets/css/glob.css b/admin/src/assets/css/glob.css
index 59835e0..89edbb9 100644
--- a/admin/src/assets/css/glob.css
+++ b/admin/src/assets/css/glob.css
@@ -7,3 +7,13 @@
   font-size: 13px;
   font-weight: 400;
 }
+
+body .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+#nprogress .bar {
+  background: #62caff !important;
+}
+
+
diff --git a/admin/src/assets/js/glob.js b/admin/src/assets/js/glob.js
new file mode 100644
index 0000000..94b53ba
--- /dev/null
+++ b/admin/src/assets/js/glob.js
@@ -0,0 +1,28 @@
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import router from "../../router";
+
+export default {
+  //初始化
+  inti() {
+    //初始化NProgress
+    this.initNProgress();
+  },
+  //初始化NProgress
+  initNProgress() {
+    //配置
+    NProgress.inc(0.2);
+    NProgress.configure({easing: 'ease', speed: 500, showSpinner: false});
+
+    //开始遍历
+    router.beforeEach((to, from, next) => {
+      NProgress.start();
+      next();
+    });
+
+    //结束遍历
+    router.afterEach(() => {
+      NProgress.done();
+    });
+  }
+}
diff --git a/admin/src/assets/scss/element-variables.scss b/admin/src/assets/scss/element-variables.scss
index 805a8a3..f1f3b25 100644
--- a/admin/src/assets/scss/element-variables.scss
+++ b/admin/src/assets/scss/element-variables.scss
@@ -1,11 +1,7 @@
 /* 改变主题色变量 */
-$--color-primary: rgb(51, 102, 153);
-$--color-success: #dcdfe6 !default;
-
-/* 改变disabled状态下字色 */
-$--disabled-color-base: #606266;
+$--color-primary: teal;
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import "~element-ui/packages/theme-chalk/src/index";
diff --git a/admin/src/assets/scss/glob.scss b/admin/src/assets/scss/glob.scss
new file mode 100644
index 0000000..f2e8606
--- /dev/null
+++ b/admin/src/assets/scss/glob.scss
@@ -0,0 +1,19 @@
+.el-container {
+
+  .el-aside {
+    color: #333;
+  }
+
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .el-main {
+
+  }
+
+}
diff --git a/admin/src/main.js b/admin/src/main.js
index aebdd00..ed757de 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -4,21 +4,25 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
 import axios from 'axios';
 import VueAxios from 'vue-axios';
+import Glob from './assets/js/glob.js';
+import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/reset.css';
 import './assets/css/glob.css';
+import './assets/scss/glob.scss';
 import './assets/scss/element-variables.scss';
 
-Vue.config.productionTip = false
+//use
+Vue.config.productionTip = false;
 Vue.use(ElementUI);
-Vue.use(VueAxios, axios)
-
+Vue.use(VueAxios, axios);
+//init
+Glob.inti();
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
-  components: { App },
+  components: {App},
   template: '<App/>'
 })