refine dashboard css

This commit is contained in:
Pan 2017-07-03 12:44:21 +08:00 committed by 花裤衩
parent ed803c68b2
commit ffd668fb7d
5 changed files with 63 additions and 10 deletions

View file

@ -246,7 +246,7 @@
list-style: none;
position: absolute;
right: 0;
left: 0;
left: -20px;
}
.filters li {
display: inline;
@ -254,6 +254,7 @@
.filters li a {
color: inherit;
margin: 3px;
font-size: 12px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;

View file

@ -6,7 +6,7 @@ const userMap = {
token: 'admin',
introduction: '我是超级管理员',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: '超级管理员小潘',
name: 'Super Admin',
uid: '001'
},
editor: {
@ -14,7 +14,7 @@ const userMap = {
token: 'editor',
introduction: '我是编辑',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: '普通编辑小张',
name: 'Normal Editor',
uid: '002'
},

View file

@ -212,3 +212,38 @@
}
}
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}

View file

@ -65,10 +65,10 @@
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<el-col :span="15">
<line-chart></line-chart>
</el-col>
<el-col :span="8">
<el-col :span="9">
<todo-list></todo-list>
</el-col>
</el-row>
@ -129,10 +129,12 @@
}
.display_name{
font-size: 30px;
display: block;
}
.info-item{
display: inline-block;
margin-top: 10px;
font-size: 14px;
&:last-of-type{
margin-left: 15px;
}

View file

@ -4,6 +4,8 @@
<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts
import { debounce } from 'utils';
export default {
props: {
@ -18,6 +20,10 @@
height: {
type: String,
default: '300px'
},
autoResize: {
type: Boolean,
default: true
}
},
data() {
@ -27,11 +33,20 @@
},
mounted() {
this.initChart();
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
this.chart.resize()
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
this.chart.dispose();
this.chart = null;
},
@ -41,12 +56,12 @@
this.chart.setOption({
xAxis: {
data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false
},
grid: {
left: 0,
right: 0,
left: 10,
right: 10,
bottom: 20,
containLabel: true
},
@ -59,7 +74,7 @@
},
yAxis: {},
series: [{
name: 'vistor',
name: 'visitors',
itemStyle: {
normal: {
areaStyle: {}
@ -70,7 +85,7 @@
data: [100, 120, 161, 134, 105, 160, 165]
},
{
name: 'buyer',
name: 'buyers',
smooth: true,
type: 'line',
itemStyle: {