You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.5 KiB
140 lines
4.5 KiB
<template> |
|
<div> |
|
<a-row style="margin: -12px"> |
|
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;"> |
|
<chart-card title="总销售额" total="￥ 189,345"> |
|
<a-tooltip title="指标说明" slot="action"> |
|
<a-icon type="info-circle-o" /> |
|
</a-tooltip> |
|
<div> |
|
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px"> |
|
同周比 |
|
<span>12%</span> |
|
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span> |
|
</div> |
|
<div style="display: inline-block; font-size: 14px; line-height: 22px;"> |
|
日环比 |
|
<span>11%</span> |
|
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span> |
|
</div> |
|
</div> |
|
<div slot="footer">日均销售额 <span>￥ 234.56</span></div> |
|
</chart-card> |
|
</a-col> |
|
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;"> |
|
<chart-card title="总销售额" total="￥ 189,345"> |
|
<a-tooltip title="指标说明" slot="action"> |
|
<a-icon type="info-circle-o" /> |
|
</a-tooltip> |
|
<div> |
|
<mini-area /> |
|
</div> |
|
<div slot="footer">日均销售额 <span>￥ 234.56</span></div> |
|
</chart-card> |
|
</a-col> |
|
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;"> |
|
<chart-card title="总销售额" total="￥ 189,345"> |
|
<a-tooltip title="指标说明" slot="action"> |
|
<a-icon type="info-circle-o" /> |
|
</a-tooltip> |
|
<div> |
|
<mini-bar /> |
|
</div> |
|
<div slot="footer">日均销售额 <span>￥ 234.56</span></div> |
|
</chart-card> |
|
</a-col> |
|
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;"> |
|
<chart-card title="营销活动说明" total="73%"> |
|
<a-tooltip title="指标说明" slot="action"> |
|
<a-icon type="info-circle-o" /> |
|
</a-tooltip> |
|
<div> |
|
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/> |
|
</div> |
|
<div slot="footer">日均销售额 <span>￥ 234.56</span></div> |
|
</chart-card> |
|
</a-col> |
|
</a-row> |
|
<a-card :bordered="false" :body-style="{padding: '24px'}"> |
|
<div class="salesCard"> |
|
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"> |
|
<div class="extra-wrap" slot="tabBarExtraContent"> |
|
<div class="extra-item"> |
|
<a>今日</a> |
|
<a>本周</a> |
|
<a>本月</a> |
|
<a>本年</a> |
|
</div> |
|
<a-range-picker :style="{width: '256px'}"></a-range-picker> |
|
</div> |
|
<a-tab-pane loading="true" tab="销售额" key="1"> |
|
<a-row> |
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> |
|
<bar title="销售额趋势" /> |
|
</a-col> |
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> |
|
123 |
|
</a-col> |
|
</a-row> |
|
</a-tab-pane> |
|
<a-tab-pane tab="访问量" key="2"><a-row> |
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> |
|
<bar title="销售额趋势" /> |
|
</a-col> |
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> |
|
123 |
|
</a-col> |
|
</a-row></a-tab-pane> |
|
</a-tabs> |
|
</div> |
|
</a-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import ACol from 'vue-antd-ui/es/grid/Col' |
|
import ARow from 'vue-antd-ui/es/grid/Row' |
|
import ACard from 'vue-antd-ui/es/card/Card' |
|
import ChartCard from './ChartCard' |
|
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip' |
|
import AIcon from 'vue-antd-ui/es/icon/icon' |
|
import MiniArea from '../chart/MiniArea' |
|
import MiniBar from '../chart/MiniBar' |
|
import MiniProgress from '../chart/MiniProgress' |
|
import ATabs from 'vue-antd-ui/es/tabs' |
|
import ADatePicker from 'vue-antd-ui/es/date-picker' |
|
import Bar from "../chart/Bar"; |
|
|
|
const ATabPane = ATabs.TabPane |
|
const ARangePicker = ADatePicker.RangePicker |
|
export default { |
|
name: 'dashboard', |
|
components: { |
|
Bar, |
|
ARangePicker, |
|
ATabPane, |
|
ATabs, |
|
MiniProgress, |
|
MiniBar, |
|
MiniArea, |
|
AIcon, |
|
ATooltip, |
|
ChartCard, |
|
ACard, |
|
ARow, |
|
ACol} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.extra-wrap{ |
|
|
|
} |
|
.extra-item{ |
|
display: inline-block; |
|
margin-right: 24px; |
|
a{ |
|
margin-left: 24px; |
|
} |
|
} |
|
</style>
|
|
|