<template>
|
<div class="dashboard-page">
|
<Row :gutter="20">
|
<Col :xs="24" :sm="24" :md="12" :lg="6">
|
<cardInfo id="income" :icon="icons.icon1" title="总收入" :value="953000" class="margin"/>
|
</Col>
|
<Col :xs="24" :sm="24" :md="12" :lg="6">
|
<cardInfo id="out" :icon="icons.icon2" title="总支出" :value="236000" class="margin"/>
|
</Col>
|
<Col :xs="24" :sm="24" :md="12" :lg="6">
|
<cardInfo id="order" :icon="icons.icon3" title="订单总数" :value="987563" class="margin"/>
|
</Col>
|
<Col :xs="24" :sm="24" :md="12" :lg="6">
|
<cardInfo id="users" :icon="icons.icon4" title="会员总数" :value="987563" class="margin"/>
|
</Col>
|
</Row>
|
<Row :gutter="20">
|
<Col :xs="24" :sm="24" :lg="24" :xl="12">
|
<LineChart class="margin"/>
|
</Col>
|
<Col :xs="24" :sm="24" :lg="24" :xl="12">
|
<bar class="margin"/>
|
</Col>
|
</Row>
|
<Row :gutter="20">
|
<Col :xs="24" :sm="24" :lg="24" :xl="16">
|
<mapCard class="margin"/>
|
</Col>
|
<Col :xs="24" :sm="24" :lg="24" :xl="8">
|
<radar class="margin"/>
|
</Col>
|
</Row>
|
|
</div>
|
</template>
|
|
<script>
|
import cardInfo from "./components/cardInfo.vue";
|
import LineChart from "./components/line.vue";
|
import bar from "./components/bar.vue";
|
import mapCard from "./components/map.vue";
|
import radar from "./components/radar.vue";
|
export default {
|
name: "dashboard-1",
|
components: {
|
cardInfo,
|
LineChart,
|
bar,
|
mapCard,
|
radar
|
},
|
data() {
|
return {
|
icons: {
|
icon1: require("@/assets/dashboard/fee.png"),
|
icon2: require("@/assets/dashboard/department.png"),
|
icon3: require("@/assets/dashboard/console.png"),
|
icon4: require("@/assets/dashboard/user.png")
|
}
|
};
|
},
|
methods: {
|
init() {}
|
},
|
mounted() {
|
this.init();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.dashboard-page {
|
.margin {
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
