|
@@ -0,0 +1,137 @@
|
|
|
|
+<style>
|
|
|
|
+.statistics .ant-col-6 {
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+}
|
|
|
|
+.statistics .ant-col-6 .ant-card-body {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+}
|
|
|
|
+.statistics .ant-col-6 p,
|
|
|
|
+.statistics .ant-col-6 span {
|
|
|
|
+ display: block;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: red;
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+.search-box .ant-card-body {
|
|
|
|
+ padding: 5px 15px;
|
|
|
|
+}
|
|
|
|
+.search-box p {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+.statistics .ant-col-6 .ant-card-body .styleElse {
|
|
|
|
+ line-height: 60px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+}
|
|
|
|
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
|
|
+.yincang .ant-col-6 p {
|
|
|
|
+ text-align: left;
|
|
|
|
+ color: red;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+}
|
|
|
|
+.ant-table-thead div {
|
|
|
|
+ font-weight: 700;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<template>
|
|
|
|
+ <div class="statistics">
|
|
|
|
+ <a-row class="image-list-heading vm-panel">
|
|
|
|
+ <a-row>
|
|
|
|
+ <div class="panel-heading">{{ title }}</div>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row :gutter="10">
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-card
|
|
|
|
+ style="width:100%"
|
|
|
|
+ :tabList="tabListNoTitle"
|
|
|
|
+ :activeTabKey="noTitleKey"
|
|
|
|
+ @tabChange="key => onTabChange(key, 'noTitleKey')"
|
|
|
|
+ >123</a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import ARow from 'ant-design-vue/es/grid/Row'
|
|
|
|
+import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import countTo from 'vue-count-to'
|
|
|
|
+var upDate
|
|
|
|
+
|
|
|
|
+// 引入基本模板
|
|
|
|
+let echarts = require('echarts/lib/echarts')
|
|
|
|
+// 引入柱状图组件
|
|
|
|
+require('echarts/lib/chart/bar')
|
|
|
|
+require('echarts/lib/chart/pie')
|
|
|
|
+require('echarts/lib/chart/line')
|
|
|
|
+// 引入提示框和title组件
|
|
|
|
+require('echarts/lib/component/tooltip')
|
|
|
|
+require('echarts/lib/component/title')
|
|
|
|
+require('echarts/lib/component/graphic')
|
|
|
|
+require('echarts/lib/component/toolbox')
|
|
|
|
+require('echarts/lib/component/legend')
|
|
|
|
+export default {
|
|
|
|
+ name: 'accountStatistics',
|
|
|
|
+ components: {
|
|
|
|
+ ACol,
|
|
|
|
+ ARow,
|
|
|
|
+ countTo
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ data: function() {
|
|
|
|
+ return {
|
|
|
|
+ title: '账户信息',
|
|
|
|
+ tabListNoTitle: [],
|
|
|
|
+ noTitleKey: 'cost',
|
|
|
|
+ left:"left"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onTabChange(key, type) {
|
|
|
|
+ console.log(key, type)
|
|
|
|
+ this[type] = key
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {},
|
|
|
|
+ computed: {},
|
|
|
|
+
|
|
|
|
+ mounted: function() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.tabListNoTitle = [
|
|
|
|
+ {
|
|
|
|
+ key: 'cost',
|
|
|
|
+ tab: '用户1'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'photoClick',
|
|
|
|
+ tab: '用户2'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'photoShow',
|
|
|
|
+ tab: '用户3'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'aclick',
|
|
|
|
+ tab: '用户4'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|