chenghuan
b5f280b02f
- 引入公共样式文件，简化各统计页面的样式管理 - 优化统计页面的容器布局，采用flex布局以提升响应式表现 - 统一表单项的样式，确保一致性和可读性 - 移除冗余的样式定义，提升代码整洁度
39 lines
892 B
Vue
39 lines
892 B
Vue
<template>
|
|
<div class="mod-config">
|
|
<el-tabs v-model="activeTab" type="card">
|
|
<el-tab-pane label="按金额统计" name="amount" />
|
|
<el-tab-pane label="按课程统计" name="course" />
|
|
<el-tab-pane label="按分类统计" name="label" />
|
|
</el-tabs>
|
|
<keep-alive>
|
|
<component :is="currentComponent" />
|
|
</keep-alive>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import amountStatistics from './amountStatistics'
|
|
import courseStatistics from './courseStatistics'
|
|
import labelStatistics from './labelStatistics'
|
|
|
|
export default {
|
|
components: { amountStatistics, courseStatistics, labelStatistics },
|
|
data() {
|
|
return {
|
|
activeTab: 'amount'
|
|
}
|
|
},
|
|
computed: {
|
|
currentComponent() {
|
|
return `${this.activeTab}Statistics`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '../styles/statistics-common.less';
|
|
|
|
.sb-form-item-ten();
|
|
</style>
|