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,7 +7,7 @@
     <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-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>-->
@@ -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>
@@ -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

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

src/pages/nav2/Page4.vue

@@ -29,4 +29,5 @@ export default {
       //})
     }
   }
+
 </script>