84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<Row :gutter="20">
|
|
<i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
|
|
<infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
|
|
<count-to :end="infor.count" count-class="count-style"/>
|
|
<p>{{ infor.title }}</p>
|
|
</infor-card>
|
|
</i-col>
|
|
</Row>
|
|
<Row :gutter="20" style="margin-top: 10px;">
|
|
<i-col :md="24" :lg="8" style="margin-bottom: 20px;">
|
|
<Card shadow>
|
|
<chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
|
|
</Card>
|
|
</i-col>
|
|
<i-col :md="24" :lg="16" style="margin-bottom: 20px;">
|
|
<Card shadow>
|
|
<chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
|
|
</Card>
|
|
</i-col>
|
|
</Row>
|
|
<Row>
|
|
<Card shadow>
|
|
<example style="height: 310px;"/>
|
|
</Card>
|
|
</Row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InforCard from '_c/info-card'
|
|
import CountTo from '_c/count-to'
|
|
import { ChartPie, ChartBar } from '_c/charts'
|
|
import Example from './example.vue'
|
|
export default {
|
|
name: 'home',
|
|
components: {
|
|
InforCard,
|
|
CountTo,
|
|
ChartPie,
|
|
ChartBar,
|
|
Example
|
|
},
|
|
data () {
|
|
return {
|
|
inforCardData: [
|
|
{ title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
|
|
{ title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
|
|
{ title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
|
|
{ title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
|
|
{ title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
|
|
{ title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
|
|
],
|
|
pieData: [
|
|
{ value: 335, name: '直接访问' },
|
|
{ value: 310, name: '邮件营销' },
|
|
{ value: 234, name: '联盟广告' },
|
|
{ value: 135, name: '视频广告' },
|
|
{ value: 1548, name: '搜索引擎' }
|
|
],
|
|
barData: {
|
|
Mon: 13253,
|
|
Tue: 34235,
|
|
Wed: 26321,
|
|
Thu: 12340,
|
|
Fri: 24643,
|
|
Sat: 1322,
|
|
Sun: 1324
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
//
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.count-style{
|
|
font-size: 50px;
|
|
}
|
|
</style>
|