Browse Source

add vars.scss

master
taylor 8 years ago
parent
commit
be2b3cee9e
  1. 5
      build/webpack.base.conf.js
  2. 6
      src/pages/Home.vue
  3. 1
      src/styles/vars.scss

5
build/webpack.base.conf.js

@ -20,13 +20,14 @@ module.exports = {
filename: '[name].js' filename: '[name].js'
}, },
resolve: { resolve: {
extensions: ['', '.js', '.vue'],
extensions: ['', '.js', '.vue', '.scss'],
fallback: [path.join(__dirname, '../node_modules')], fallback: [path.join(__dirname, '../node_modules')],
alias: { alias: {
'vue$': 'vue/dist/vue', 'vue$': 'vue/dist/vue',
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'), '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: { resolveLoader: {

6
src/pages/Home.vue

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

1
src/styles/vars.scss

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