add vars.scss

build/webpack.base.conf.js

@@ -20,13 +20,14 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
+    extensions: ['', '.js', '.vue', '.scss'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       'vue$': 'vue/dist/vue',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components')
+      'components': path.resolve(__dirname, '../src/components'),
+      'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss')
     }
   },
   resolveLoader: {

src/pages/Home.vue

@@ -10,7 +10,7 @@
 				</div>
 			</el-col>
 			<el-col :span="4" class="userinfo">
-				<el-dropdown trigger="click">
+				<el-dropdown trigger="hover">
 					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
 					<el-dropdown-menu slot="dropdown">
 						<el-dropdown-item>我的消息</el-dropdown-item>
@@ -139,6 +139,8 @@
 </script>
 
 <style scoped lang="scss">
+	@import '~scss_vars';
+
 	.container {
 		position: absolute;
 		top: 0px;
@@ -147,7 +149,7 @@
 		.header {
 			height: 60px;
 			line-height: 60px;
-			background: #20a0ff;//#20a0ff
+			background: $color-primary;
 			color:#fff;
 			.userinfo {
 				text-align: right;

src/styles/vars.scss

@@ -0,0 +1 @@
+$color-primary: #20a0ff;//#18c79c