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

View File

@ -6,7 +6,7 @@ const userMap = {
token: 'admin', token: 'admin',
introduction: '我是超级管理员', introduction: '我是超级管理员',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: '超级管理员小潘', name: 'Super Admin',
uid: '001' uid: '001'
}, },
editor: { editor: {
@ -14,7 +14,7 @@ const userMap = {
token: 'editor', token: 'editor',
introduction: '我是编辑', introduction: '我是编辑',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: '普通编辑小张', name: 'Normal Editor',
uid: '002' 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>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="15">
<line-chart></line-chart> <line-chart></line-chart>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="9">
<todo-list></todo-list> <todo-list></todo-list>
</el-col> </el-col>
</el-row> </el-row>
@ -129,10 +129,12 @@
} }
.display_name{ .display_name{
font-size: 30px; font-size: 30px;
display: block;
} }
.info-item{ .info-item{
display: inline-block; display: inline-block;
margin-top: 10px; margin-top: 10px;
font-size: 14px;
&:last-of-type{ &:last-of-type{
margin-left: 15px; margin-left: 15px;
} }

View File

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