diff --git a/package.json b/package.json
index 9478869..6b03a7a 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,10 @@
     "http-proxy-middleware": "^0.17.3",
     "json-loader": "^0.5.4",
     "mockjs": "^1.0.1-beta3",
+    "node-sass": "^4.5.0",
     "opn": "^4.0.2",
     "ora": "^1.0.0",
+    "sass-loader": "^6.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "url-loader": "^0.5.7",
diff --git a/src/App.vue b/src/App.vue
index d906024..22cc457 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,16 +13,14 @@
 
 </script>
 
-<style>
+<style lang="scss">
 	body {
-		/*background-color: #324057;*/
 		margin: 0px;
 		padding: 0px;
 		/*background: url(assets/bg1.jpg) center !important;
 		background-size: cover;*/
 		background: #1F2D3D;
 		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-		/*font-weight: 400;*/
 		font-size: 14px;
 		-webkit-font-smoothing: antialiased;
 	}
@@ -44,12 +42,11 @@
 		margin-right: 10px;
 	}
 	
-	.toolbar .el-form-item {
-		margin-bottom: 10px;
-	}
-	
 	.toolbar {
 		background: #fff;
 		padding: 10px 10px 0px 10px;
+		.el-form-item {
+			margin-bottom: 10px;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/assets/logo1.png b/src/assets/logo1.png
deleted file mode 100644
index 22a30ff..0000000
Binary files a/src/assets/logo1.png and /dev/null differ
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
deleted file mode 100644
index f7fcb2f..0000000
Binary files a/src/assets/logo2.png and /dev/null differ
diff --git a/src/assets/logo3.png b/src/assets/logo3.png
deleted file mode 100644
index 16a25b2..0000000
Binary files a/src/assets/logo3.png and /dev/null differ
diff --git a/src/assets/logo5.png b/src/assets/logo5.png
deleted file mode 100644
index c105125..0000000
Binary files a/src/assets/logo5.png and /dev/null differ
diff --git a/src/assets/logout_16.png b/src/assets/logout_16.png
deleted file mode 100644
index 2458d78..0000000
Binary files a/src/assets/logout_16.png and /dev/null differ
diff --git a/src/assets/logout_24.png b/src/assets/logout_24.png
deleted file mode 100644
index f871bd7..0000000
Binary files a/src/assets/logout_24.png and /dev/null differ
diff --git a/src/assets/logout_36.png b/src/assets/logout_36.png
deleted file mode 100644
index 1a5fee8..0000000
Binary files a/src/assets/logout_36.png and /dev/null differ
diff --git a/src/common/util.js b/src/common/js/util.js
similarity index 100%
rename from src/common/util.js
rename to src/common/js/util.js
diff --git a/src/main.js b/src/main.js
index 7212b44..0a2af7a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import 'element-ui/lib/theme-default/index.css'
 import VueRouter from 'vue-router'
 import store from './vuex/store'
 import Vuex from 'vuex'
-import NProgress from 'nprogress'//页面顶部进度条
+import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import routes from './routes'
 import Mock from './mock'
diff --git a/src/pages/404.vue b/src/pages/404.vue
index 4269860..940f1dc 100644
--- a/src/pages/404.vue
+++ b/src/pages/404.vue
@@ -1,3 +1,11 @@
 <template>
-    <p style="font-size:20px;text-align: center;color:rgb(192, 204, 218);">404</p>
-</template>
\ No newline at end of file
+    <p class="page-container">404 page not found</p>
+</template>
+
+<style lang="scss" scoped>
+    .page-container {
+        font-size: 20px;
+        text-align: center;
+        color: rgb(192, 204, 218);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index cd0df47..c596dcb 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,14 +1,12 @@
 <template>
-	<el-row class="panel">
-		<el-col :span="24" class="panel-top">
-			<el-col :span="20" style="font-size:22px;">
-				<img src="../assets/logo4.png" class="logo"> <span>VUE<i style="color:#20a0ff">ADMIN</i>
-</span>
+	<el-row class="container">
+		<el-col :span="24" class="header">
+			<el-col :span="20" class="logo">
+				<img src="../assets/logo4.png" /> <span>VUE<i class="txt">ADMIN</i></span>
 			</el-col>
-			<el-col :span="4" class="rightbar">
+			<el-col :span="4" class="userinfo">
 				<el-dropdown trigger="click">
-					<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}}
-</span>
+					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
 					<el-dropdown-menu slot="dropdown">
 						<el-dropdown-item>我的消息</el-dropdown-item>
 						<el-dropdown-item>设置</el-dropdown-item>
@@ -17,9 +15,8 @@
 				</el-dropdown>
 			</el-col>
 		</el-col>
-		<el-col :span="24" class="panel-center">
-			<!--<el-col :span="4">-->
-			<aside style="width:230px;">
+		<el-col :span="24" class="main">
+			<aside>
 				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
 					theme="dark" unique-opened router>
 					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
@@ -31,26 +28,23 @@
 					</template>
 					</el-menu>
 			</aside>
-			<!--</el-col>-->
-			<!--<el-col :span="20" class="panel-c-c">-->
-			<section class="panel-c-c">
+			<section class="content-container">
 				<div class="grid-content bg-purple-light">
-					<el-col :span="24" style="margin-bottom:15px;">
-						<strong style="width:200px;float:left;color: #475669;">{{$route.name}}</strong>
-						<el-breadcrumb separator="/" style="float:right;">
+					<el-col :span="24" class="breadcrumb-container">
+						<strong class="title">{{$route.name}}</strong>
+						<el-breadcrumb separator="/" class="breadcrumb-inner">
 							<el-breadcrumb-item v-for="item in $route.matched">
 								{{ item.name }}
 							</el-breadcrumb-item>
 						</el-breadcrumb>
 					</el-col>
-					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
+					<el-col :span="24" class="content-wrapper">
 						<transition>
 							<router-view></router-view>
 						</transition>
 					</el-col>
 				</div>
 			</section>
-			<!--</el-col>-->
 		</el-col>
 	</el-row>
 </template>
@@ -112,79 +106,78 @@
 
 </script>
 
-<style scoped>
-	.panel {
+<style scoped lang="scss">
+	.container {
 		position: absolute;
 		top: 0px;
 		bottom: 0px;
 		width: 100%;
-	}
-	
-	.panel-top {
-		height: 60px;
-		line-height: 60px;
-		background: #1F2D3D;
-		color: #c0ccda;
-	}
-	
-	.panel-top .rightbar {
-		text-align: right;
-		padding-right: 35px;
-	}
-	
-	.panel-top .rightbar .head {
-		width: 40px;
-		height: 40px;
-		border-radius: 20px;
-		margin: 10px 0px 10px 10px;
-		float: right;
-	}
-	
-	.panel-center {
-		background: #324057;
-		position: absolute;
-		top: 60px;
-		bottom: 0px;
-		overflow: hidden;
-	}
-	
-	.panel-c-c {
-		background: #f1f2f7;
-		position: absolute;
-		right: 0px;
-		top: 0px;
-		bottom: 0px;
-		left: 230px;
-		overflow-y: scroll;
-		padding: 20px;
-	}
-	
-	.logout {
-		background: url(../assets/logout_36.png);
-		background-size: contain;
-		width: 20px;
-		height: 20px;
-		float: left;
-	}
-	
-	.logo {
-		width: 40px;
-		float: left;
-		margin: 10px 10px 10px 18px;
-	}
-	
-	.tip-logout {
-		float: right;
-		margin-right: 20px;
-		padding-top: 5px;
-	}
-	
-	.tip-logout i {
-		cursor: pointer;
-	}
-	
-	.admin {
-		color: #c0ccda;
-		text-align: center;
+		.header {
+			height: 60px;
+			line-height: 60px;
+			background: #1F2D3D;
+			color: #c0ccda;
+			.userinfo {
+				text-align: right;
+				padding-right: 35px;
+				.userinfo-inner {
+					color: #c0ccda;
+					cursor: pointer;
+					img {
+						width: 40px;
+						height: 40px;
+						border-radius: 20px;
+						margin: 10px 0px 10px 10px;
+						float: right;
+					}
+				}
+			}
+			.logo {
+				font-size: 22px;
+				img {
+					width: 40px;
+					float: left;
+					margin: 10px 10px 10px 18px;
+				}
+				.txt {
+					color: #20a0ff
+				}
+			}
+		}
+		.main {
+			background: #324057;
+			position: absolute;
+			top: 60px;
+			bottom: 0px;
+			overflow: hidden;
+			aside {
+				width: 230px;
+			}
+			.content-container {
+				background: #f1f2f7;
+				position: absolute;
+				right: 0px;
+				top: 0px;
+				bottom: 0px;
+				left: 230px;
+				overflow-y: scroll;
+				padding: 20px;
+				.breadcrumb-container {
+					margin-bottom: 15px;
+					.title {
+						width: 200px;
+						float: left;
+						color: #475669;
+					}
+					.breadcrumb-inner {
+						float: right;
+					}
+				}
+				.content-wrapper {
+					background-color: #fff;
+					box-sizing: border-box;
+				}
+			}
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 2e288ed..c5a5858 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
+  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
     <h3 class="title">系统登录</h3>
     <el-form-item prop="account">
       <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
@@ -7,12 +7,12 @@
     <el-form-item prop="checkPass">
       <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
     </el-form-item>
-    <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
-<el-form-item style="width:100%;">
-<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
-<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
-</el-form-item>
-</el-form>
+    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
+    <el-form-item style="width:100%;">
+      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
+      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
+    </el-form-item>
+  </el-form>
 </template>
 
 <script>
@@ -74,11 +74,11 @@
       }
     }
   }
+
 </script>
 
-<style scoped>
-  .card-box {
-    padding: 20px;
+<style lang="scss" scoped>
+  .login-container {
     /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
     -webkit-border-radius: 5px;
     border-radius: 5px;
@@ -87,18 +87,16 @@
     margin-bottom: 20px;
     background-color: #F9FAFC;
     margin: 180px auto;
-    width: 400px;
     border: 2px solid #8492A6;
-  }
-  
-  .title {
-    margin: 0px auto 40px auto;
-    text-align: center;
-    color: #505458;
-  }
-  
-  .loginform {
     width: 350px;
     padding: 35px 35px 15px 35px;
+    .title {
+      margin: 0px auto 40px auto;
+      text-align: center;
+      color: #505458;
+    }
+    .remember {
+      margin: 0px 0px 35px 0px;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
index 4c9d238..7ebcfd4 100644
--- a/src/pages/Main.vue
+++ b/src/pages/Main.vue
@@ -5,8 +5,9 @@
 </template>
 
 <script>
-  export default {
-  }
+	export default {
+	}
+
 </script>
 
 <style scoped>
diff --git a/src/pages/charts/echarts.vue b/src/pages/charts/echarts.vue
index ba7f7de..e1c0d1e 100644
--- a/src/pages/charts/echarts.vue
+++ b/src/pages/charts/echarts.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="chart">
+    <section class="chart-container">
         <el-row>
             <el-col :span="12">
                 <div id="chartColumn" style="width:100%; height:400px;"></div>
@@ -22,29 +22,29 @@
 
 <script>
     import echarts from 'echarts'
-    
-    export default{
-        data (){
+
+    export default {
+        data() {
             return {
-                chartColumn:null,
-                chartBar:null,
-                chartLine:null,
-                chartPie:null
+                chartColumn: null,
+                chartBar: null,
+                chartLine: null,
+                chartPie: null
             }
         },
-        mounted:function(){
-            var _this=this;
+        mounted: function () {
+            var _this = this;
             //基于准备好的dom，初始化echarts实例
             this.chartColumn = echarts.init(document.getElementById('chartColumn'));
             this.chartBar = echarts.init(document.getElementById('chartBar'));
             this.chartLine = echarts.init(document.getElementById('chartLine'));
             this.chartPie = echarts.init(document.getElementById('chartPie'));
-            
+
             this.chartColumn.setOption({
                 title: { text: 'Column Chart' },
                 tooltip: {},
                 xAxis: {
-                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                 },
                 yAxis: {},
                 series: [{
@@ -53,7 +53,7 @@
                     data: [5, 20, 36, 10, 10, 20]
                 }]
             });
-            
+
             this.chartBar.setOption({
                 title: {
                     text: 'Bar Chart',
@@ -80,7 +80,7 @@
                 },
                 yAxis: {
                     type: 'category',
-                    data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
+                    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
                 },
                 series: [
                     {
@@ -104,7 +104,7 @@
                     trigger: 'axis'
                 },
                 legend: {
-                    data:['邮件营销','联盟广告','搜索引擎']
+                    data: ['邮件营销', '联盟广告', '搜索引擎']
                 },
                 grid: {
                     left: '3%',
@@ -115,60 +115,60 @@
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
-                    data: ['周一','周二','周三','周四','周五','周六','周日']
+                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series: [
                     {
-                        name:'邮件营销',
-                        type:'line',
+                        name: '邮件营销',
+                        type: 'line',
                         stack: '总量',
-                        data:[120, 132, 101, 134, 90, 230, 210]
+                        data: [120, 132, 101, 134, 90, 230, 210]
                     },
                     {
-                        name:'联盟广告',
-                        type:'line',
+                        name: '联盟广告',
+                        type: 'line',
                         stack: '总量',
-                        data:[220, 182, 191, 234, 290, 330, 310]
+                        data: [220, 182, 191, 234, 290, 330, 310]
                     },
                     {
-                        name:'搜索引擎',
-                        type:'line',
+                        name: '搜索引擎',
+                        type: 'line',
                         stack: '总量',
-                        data:[820, 932, 901, 934, 1290, 1330, 1320]
+                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                     }
                 ]
             });
 
             this.chartPie.setOption({
-                title : {
+                title: {
                     text: 'Pie Chart',
                     subtext: '纯属虚构',
-                    x:'center'
+                    x: 'center'
                 },
-                tooltip : {
+                tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     orient: 'vertical',
                     left: 'left',
-                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                 },
-                series : [
+                series: [
                     {
                         name: '访问来源',
                         type: 'pie',
-                        radius : '55%',
+                        radius: '55%',
                         center: ['50%', '60%'],
-                        data:[
-                            {value:335, name:'直接访问'},
-                            {value:310, name:'邮件营销'},
-                            {value:234, name:'联盟广告'},
-                            {value:135, name:'视频广告'},
-                            {value:1548, name:'搜索引擎'}
+                        data: [
+                            { value: 335, name: '直接访问' },
+                            { value: 310, name: '邮件营销' },
+                            { value: 234, name: '联盟广告' },
+                            { value: 135, name: '视频广告' },
+                            { value: 1548, name: '搜索引擎' }
                         ],
                         itemStyle: {
                             emphasis: {
@@ -183,10 +183,11 @@
         }
 
     }
+
 </script>
 
 <style scoped>
-    .chart {
+    .chart-container {
         width: 100%;
         float: left;
     }
diff --git a/src/pages/nav1/Form.vue b/src/pages/nav1/Form.vue
index 3bbc4a6..2fd9e80 100644
--- a/src/pages/nav1/Form.vue
+++ b/src/pages/nav1/Form.vue
@@ -46,25 +46,26 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        }
-      }
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      }
-    }
-  }
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+					region: '',
+					date1: '',
+					date2: '',
+					delivery: false,
+					type: [],
+					resource: '',
+					desc: ''
+				}
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log('submit!');
+			}
+		}
+	}
+
 </script>
\ No newline at end of file
diff --git a/src/pages/nav1/Table.vue b/src/pages/nav1/Table.vue
index 5b15b81..2a656e8 100644
--- a/src/pages/nav1/Table.vue
+++ b/src/pages/nav1/Table.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-	import util from '../../common/util'
+	import util from '../../common/js/util'
 	import NProgress from 'nprogress'
 	import { getUserListPage, removeUser, editUser, addUser } from '../../api/api';
 
diff --git a/src/pages/nav1/user.vue b/src/pages/nav1/user.vue
index 5ba50a4..db57336 100644
--- a/src/pages/nav1/user.vue
+++ b/src/pages/nav1/user.vue
@@ -15,22 +15,22 @@
 		<!--列表-->
 		<template>
 			<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
-<el-table-column type="index" width="60">
-</el-table-column>
-<el-table-column prop="name" label="姓名" width="120" sortable>
-</el-table-column>
-<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
-</el-table-column>
-<el-table-column prop="age" label="年龄" width="100" sortable>
-</el-table-column>
-<el-table-column prop="birth" label="生日" width="120" sortable>
-</el-table-column>
-<el-table-column prop="addr" label="地址" min-width="180" sortable>
-</el-table-column>
-</el-table>
-</template>
+				<el-table-column type="index" width="60">
+				</el-table-column>
+				<el-table-column prop="name" label="姓名" width="120" sortable>
+				</el-table-column>
+				<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
+				</el-table-column>
+				<el-table-column prop="age" label="年龄" width="100" sortable>
+				</el-table-column>
+				<el-table-column prop="birth" label="生日" width="120" sortable>
+				</el-table-column>
+				<el-table-column prop="addr" label="地址" min-width="180" sortable>
+				</el-table-column>
+			</el-table>
+		</template>
 
-</section>
+	</section>
 </template>
 <script>
 	import { getUserList } from '../../api/api';
@@ -69,8 +69,9 @@
 			this.getUser();
 		}
 	};
+
 </script>
 
 <style scoped>
-	
+
 </style>
\ No newline at end of file
diff --git a/src/pages/nav2/Page4.vue b/src/pages/nav2/Page4.vue
index 9ac467d..c1c14e4 100644
--- a/src/pages/nav2/Page4.vue
+++ b/src/pages/nav2/Page4.vue
@@ -1,32 +1,33 @@
 <template>
-	<div>
-		<h1>vuex 测试</h1>
-		Clicked: {{ getCount }} times
-		<button @click="increment">+</button>
-		<button @click="decrement">-</button>
-	</div>
+  <div>
+    <h1>vuex 测试</h1>
+    Clicked: {{ getCount }} times
+    <button @click="increment">+</button>
+    <button @click="decrement">-</button>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { mapActions } from 'vuex'
+  import { mapGetters } from 'vuex'
+  import { mapActions } from 'vuex'
 
-export default {
-	computed: {
+  export default {
+    computed: {
   	// 使用对象展开运算符将 getters 混入 computed 对象中
     ...mapGetters([
       'getCount'
       // ...
     ])
-  },
-   methods: {
+    },
+    methods: {
     ...mapActions([
       'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
-	  'decrement'
+      'decrement'
     ])
-    //...mapActions({
-    //  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
-    //})
+      //...mapActions({
+      //  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
+      //})
+    }
   }
-}
+
 </script>
\ No newline at end of file