ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add sass

master
taylor 8 years ago
parent
cb3667c84a
commit
6227c4ca43
20 changed files with 217 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 10
      src/pages/404.vue
  13. 171
      src/pages/Home.vue
  14. 38
      src/pages/Login.vue
  15. 5
      src/pages/Main.vue
  16. 71
      src/pages/charts/echarts.vue
  17. 43
      src/pages/nav1/Form.vue
  18. 2
      src/pages/nav1/Table.vue
  19. 31
      src/pages/nav1/user.vue
  20. 35
      src/pages/nav2/Page4.vue

2
package.json
View File

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

11
src/App.vue
View File

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

BIN
src/assets/logo1.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logo2.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logo3.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logo5.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logout_16.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logout_24.png
View File

Binary file not shown.
Side by Side

Before

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

BIN
src/assets/logout_36.png
View File

Binary file not shown.
Side by Side

Before

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

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

2
src/main.js
View File

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

10
src/pages/404.vue
View File

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

171
src/pages/Home.vue
View File

@ -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,79 +106,78 @@
</script>
<style scoped>
.panel {
<style scoped lang="scss">
.container {
position: absolute;
top: 0px;
bottom: 0px;
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>

38
src/pages/Login.vue
View File

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

5
src/pages/Main.vue
View File

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

71
src/pages/charts/echarts.vue
View File

@ -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;
}

43
src/pages/nav1/Form.vue
View File

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

2
src/pages/nav1/Table.vue
View File

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

31
src/pages/nav1/user.vue
View File

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

35
src/pages/nav2/Page4.vue
View File

@ -1,32 +1,33 @@
<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>
<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 对象中
...mapGetters([
'getCount'
// ...
])
},
methods: {
},
methods: {
...mapActions([
'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>
Write Preview
Loading…
Cancel
Save