add sass

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",

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>

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'

src/pages/404.vue

@@ -1,3 +1,11 @@
 <template>
-    <p style="font-size:20px;text-align: center;color:rgb(192, 204, 218);">404</p>
+    <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>

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,43 +106,54 @@
 
 </script>
 
-<style scoped>
-	.panel {
+<style scoped lang="scss">
+	.container {
 		position: absolute;
 		top: 0px;
 		bottom: 0px;
 		width: 100%;
-	}
-	
-	.panel-top {
+		.header {
 			height: 60px;
 			line-height: 60px;
 			background: #1F2D3D;
 			color: #c0ccda;
-	}
-	
-	.panel-top .rightbar {
+			.userinfo {
 				text-align: right;
 				padding-right: 35px;
-	}
-	
-	.panel-top .rightbar .head {
+				.userinfo-inner {
+					color: #c0ccda;
+					cursor: pointer;
+					img {
 						width: 40px;
 						height: 40px;
 						border-radius: 20px;
 						margin: 10px 0px 10px 10px;
 						float: right;
 					}
-	
-	.panel-center {
+				}
+			}
+			.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;
 			}
-	
-	.panel-c-c {
+			.content-container {
 				background: #f1f2f7;
 				position: absolute;
 				right: 0px;
@@ -157,34 +162,22 @@
 				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;
+				.breadcrumb-container {
+					margin-bottom: 15px;
+					.title {
+						width: 200px;
 						float: left;
-		margin: 10px 10px 10px 18px;
+						color: #475669;
 					}
-	
-	.tip-logout {
+					.breadcrumb-inner {
 						float: right;
-		margin-right: 20px;
-		padding-top: 5px;
 					}
-	
-	.tip-logout i {
-		cursor: pointer;
 				}
-	
-	.admin {
-		color: #c0ccda;
-		text-align: center;
+				.content-wrapper {
+					background-color: #fff;
+					box-sizing: border-box;
+				}
+			}
+		}
 	}
 </style>

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;
-  }
-  
+    width: 350px;
+    padding: 35px 35px 15px 35px;
     .title {
       margin: 0px auto 40px auto;
       text-align: center;
       color: #505458;
     }
-  
-  .loginform {
-    width: 350px;
-    padding: 35px 35px 15px 35px;
+    .remember {
+      margin: 0px 0px 35px 0px;
+    }
   }
 </style>

src/pages/Main.vue

@@ -7,6 +7,7 @@
 <script>
 	export default {
 	}
+
 </script>
 
 <style scoped>

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>
@@ -23,17 +23,17 @@
 <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'));
@@ -44,7 +44,7 @@
                 title: { text: 'Column Chart' },
                 tooltip: {},
                 xAxis: {
-                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                 },
                 yAxis: {},
                 series: [{
@@ -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;
     }

src/pages/nav1/Form.vue

@@ -67,4 +67,5 @@
 			}
 		}
 	}
+
 </script>

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';
 

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,6 +69,7 @@
 			this.getUser();
 		}
 	};
+
 </script>
 
 <style scoped>

src/pages/nav2/Page4.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { mapActions } from 'vuex'
+  import { mapGetters } from 'vuex'
+  import { mapActions } from 'vuex'
 
-export default {
+  export default {
     computed: {
   	// 使用对象展开运算符将 getters 混入 computed 对象中
     ...mapGetters([
@@ -28,5 +28,6 @@ export default {
       //  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
       //})
     }
-}
+  }
+
 </script>