Browse Source

add sass

master
taylor 8 years ago
parent
commit
6227c4ca43
  1. 2
      package.json
  2. 11
      src/App.vue
  3. BIN
      src/assets/logo1.png
  4. BIN
      src/assets/logo2.png
  5. BIN
      src/assets/logo3.png
  6. BIN
      src/assets/logo5.png
  7. BIN
      src/assets/logout_16.png
  8. BIN
      src/assets/logout_24.png
  9. BIN
      src/assets/logout_36.png
  10. 0
      src/common/js/util.js
  11. 2
      src/main.js
  12. 12
      src/pages/404.vue
  13. 171
      src/pages/Home.vue
  14. 38
      src/pages/Login.vue
  15. 5
      src/pages/Main.vue
  16. 77
      src/pages/charts/echarts.vue
  17. 43
      src/pages/nav1/Form.vue
  18. 2
      src/pages/nav1/Table.vue
  19. 33
      src/pages/nav1/user.vue
  20. 35
      src/pages/nav2/Page4.vue

2
package.json

@ -39,8 +39,10 @@
"http-proxy-middleware": "^0.17.3", "http-proxy-middleware": "^0.17.3",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.0.1-beta3",
"node-sass": "^4.5.0",
"opn": "^4.0.2", "opn": "^4.0.2",
"ora": "^1.0.0", "ora": "^1.0.0",
"sass-loader": "^6.0.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",

11
src/App.vue

@ -13,16 +13,14 @@
</script> </script>
<style>
<style lang="scss">
body { body {
/*background-color: #324057;*/
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*background: url(assets/bg1.jpg) center !important; /*background: url(assets/bg1.jpg) center !important;
background-size: cover;*/ background-size: cover;*/
background: #1F2D3D; background: #1F2D3D;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
/*font-weight: 400;*/
font-size: 14px; font-size: 14px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@ -44,12 +42,11 @@
margin-right: 10px; margin-right: 10px;
} }
.toolbar .el-form-item {
margin-bottom: 10px;
}
.toolbar { .toolbar {
background: #fff; background: #fff;
padding: 10px 10px 0px 10px; padding: 10px 10px 0px 10px;
.el-form-item {
margin-bottom: 10px;
}
} }
</style> </style>

BIN
src/assets/logo1.png

Binary file not shown.

Before

Width: 64  |  Height: 64  |  Size: 3.9 KiB

BIN
src/assets/logo2.png

Binary file not shown.

Before

Width: 72  |  Height: 72  |  Size: 5.8 KiB

BIN
src/assets/logo3.png

Binary file not shown.

Before

Width: 64  |  Height: 64  |  Size: 4.4 KiB

BIN
src/assets/logo5.png

Binary file not shown.

Before

Width: 64  |  Height: 64  |  Size: 2.1 KiB

BIN
src/assets/logout_16.png

Binary file not shown.

Before

Width: 16  |  Height: 16  |  Size: 1.1 KiB

BIN
src/assets/logout_24.png

Binary file not shown.

Before

Width: 24  |  Height: 24  |  Size: 1.3 KiB

BIN
src/assets/logout_36.png

Binary file not shown.

Before

Width: 32  |  Height: 32  |  Size: 1.8 KiB

0
src/common/util.js → src/common/js/util.js

2
src/main.js

@ -6,7 +6,7 @@ import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import store from './vuex/store' import store from './vuex/store'
import Vuex from 'vuex' import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import routes from './routes' import routes from './routes'
import Mock from './mock' import Mock from './mock'

12
src/pages/404.vue

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

171
src/pages/Home.vue

@ -1,14 +1,12 @@
<template> <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>
<el-col :span="4" class="rightbar">
<el-col :span="4" class="userinfo">
<el-dropdown trigger="click"> <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-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item> <el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item> <el-dropdown-item>设置</el-dropdown-item>
@ -17,9 +15,8 @@
</el-dropdown> </el-dropdown>
</el-col> </el-col>
</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" <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
theme="dark" unique-opened router> theme="dark" unique-opened router>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
@ -31,26 +28,23 @@
</template> </template>
</el-menu> </el-menu>
</aside> </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"> <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"> <el-breadcrumb-item v-for="item in $route.matched">
{{ item.name }} {{ item.name }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</el-col> </el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<el-col :span="24" class="content-wrapper">
<transition> <transition>
<router-view></router-view> <router-view></router-view>
</transition> </transition>
</el-col> </el-col>
</div> </div>
</section> </section>
<!--</el-col>-->
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@ -112,79 +106,78 @@
</script> </script>
<style scoped>
.panel {
<style scoped lang="scss">
.container {
position: absolute; position: absolute;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
width: 100%; 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> </style>

38
src/pages/Login.vue

@ -1,5 +1,5 @@
<template> <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> <h3 class="title">系统登录</h3>
<el-form-item prop="account"> <el-form-item prop="account">
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
@ -7,12 +7,12 @@
<el-form-item prop="checkPass"> <el-form-item prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
</el-form-item> </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> </template>
<script> <script>
@ -74,11 +74,11 @@
} }
} }
} }
</script> </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);*/ /*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; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@ -87,18 +87,16 @@
margin-bottom: 20px; margin-bottom: 20px;
background-color: #F9FAFC; background-color: #F9FAFC;
margin: 180px auto; margin: 180px auto;
width: 400px;
border: 2px solid #8492A6; border: 2px solid #8492A6;
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.loginform {
width: 350px; width: 350px;
padding: 35px 35px 15px 35px; padding: 35px 35px 15px 35px;
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.remember {
margin: 0px 0px 35px 0px;
}
} }
</style> </style>

5
src/pages/Main.vue

@ -5,8 +5,9 @@
</template> </template>
<script> <script>
export default {
}
export default {
}
</script> </script>
<style scoped> <style scoped>

77
src/pages/charts/echarts.vue

@ -1,5 +1,5 @@
<template> <template>
<section class="chart">
<section class="chart-container">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div id="chartColumn" style="width:100%; height:400px;"></div> <div id="chartColumn" style="width:100%; height:400px;"></div>
@ -22,29 +22,29 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
export default{
data (){
export default {
data() {
return { 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;
//domecharts //domecharts
this.chartColumn = echarts.init(document.getElementById('chartColumn')); this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartBar = echarts.init(document.getElementById('chartBar')); this.chartBar = echarts.init(document.getElementById('chartBar'));
this.chartLine = echarts.init(document.getElementById('chartLine')); this.chartLine = echarts.init(document.getElementById('chartLine'));
this.chartPie = echarts.init(document.getElementById('chartPie')); this.chartPie = echarts.init(document.getElementById('chartPie'));
this.chartColumn.setOption({ this.chartColumn.setOption({
title: { text: 'Column Chart' }, title: { text: 'Column Chart' },
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}, },
yAxis: {}, yAxis: {},
series: [{ series: [{
@ -53,7 +53,7 @@
data: [5, 20, 36, 10, 10, 20] data: [5, 20, 36, 10, 10, 20]
}] }]
}); });
this.chartBar.setOption({ this.chartBar.setOption({
title: { title: {
text: 'Bar Chart', text: 'Bar Chart',
@ -80,7 +80,7 @@
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
}, },
series: [ series: [
{ {
@ -104,7 +104,7 @@
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data:['邮件营销','联盟广告','搜索引擎']
data: ['邮件营销', '联盟广告', '搜索引擎']
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -115,60 +115,60 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name:'邮件营销',
type:'line',
name: '邮件营销',
type: 'line',
stack: '总量', stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name:'联盟广告',
type:'line',
name: '联盟广告',
type: 'line',
stack: '总量', stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
data: [220, 182, 191, 234, 290, 330, 310]
}, },
{ {
name:'搜索引擎',
type:'line',
name: '搜索引擎',
type: 'line',
stack: '总量', stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
data: [820, 932, 901, 934, 1290, 1330, 1320]
} }
] ]
}); });
this.chartPie.setOption({ this.chartPie.setOption({
title : {
title: {
text: 'Pie Chart', text: 'Pie Chart',
subtext: '纯属虚构', subtext: '纯属虚构',
x:'center'
x: 'center'
}, },
tooltip : {
tooltip: {
trigger: 'item', trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'left', left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
}, },
series : [
series: [
{ {
name: '访问来源', name: '访问来源',
type: 'pie', type: 'pie',
radius : '55%',
radius: '55%',
center: ['50%', '60%'], 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: { itemStyle: {
emphasis: { emphasis: {
@ -183,10 +183,11 @@
} }
} }
</script> </script>
<style scoped> <style scoped>
.chart {
.chart-container {
width: 100%; width: 100%;
float: left; float: left;
} }

43
src/pages/nav1/Form.vue

@ -46,25 +46,26 @@
</template> </template>
<script> <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> </script>

2
src/pages/nav1/Table.vue

@ -80,7 +80,7 @@
</template> </template>
<script> <script>
import util from '../../common/util'
import util from '../../common/js/util'
import NProgress from 'nprogress' import NProgress from 'nprogress'
import { getUserListPage, removeUser, editUser, addUser } from '../../api/api'; import { getUserListPage, removeUser, editUser, addUser } from '../../api/api';

33
src/pages/nav1/user.vue

@ -15,22 +15,22 @@
<!--列表--> <!--列表-->
<template> <template>
<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;"> <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> </template>
<script> <script>
import { getUserList } from '../../api/api'; import { getUserList } from '../../api/api';
@ -69,8 +69,9 @@
this.getUser(); this.getUser();
} }
}; };
</script> </script>
<style scoped> <style scoped>
</style> </style>

35
src/pages/nav2/Page4.vue

@ -1,32 +1,33 @@
<template> <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> </template>
<script> <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 // 使 getters computed
...mapGetters([ ...mapGetters([
'getCount' 'getCount'
// ... // ...
]) ])
},
methods: {
},
methods: {
...mapActions([ ...mapActions([
'increment', // this.increment() this.$store.dispatch('increment') '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> </script>
Loading…
Cancel
Save