|
@@ -8,10 +8,13 @@
|
|
|
<span class="table-header">用户增长数量</span>
|
|
<span class="table-header">用户增长数量</span>
|
|
|
<el-date-picker
|
|
<el-date-picker
|
|
|
v-model="userDateRange"
|
|
v-model="userDateRange"
|
|
|
|
|
+ @change="userDateRangeChange"
|
|
|
type="daterange"
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
size="small"
|
|
size="small"
|
|
|
style="font-size: 12px;max-width: 220px;"
|
|
style="font-size: 12px;max-width: 220px;"
|
|
|
/>
|
|
/>
|
|
@@ -25,10 +28,13 @@
|
|
|
<span class="table-header">收益金额</span>
|
|
<span class="table-header">收益金额</span>
|
|
|
<el-date-picker
|
|
<el-date-picker
|
|
|
v-model="incomeDateRange"
|
|
v-model="incomeDateRange"
|
|
|
|
|
+ @change="incomeDateRangeChange"
|
|
|
type="daterange"
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
size="small"
|
|
size="small"
|
|
|
style="font-size: 12px;max-width: 220px;"
|
|
style="font-size: 12px;max-width: 220px;"
|
|
|
/>
|
|
/>
|
|
@@ -42,14 +48,14 @@
|
|
|
<!-- 付费收益表格 -->
|
|
<!-- 付费收益表格 -->
|
|
|
<div class="table-card">
|
|
<div class="table-card">
|
|
|
<div class="table-header">付费收益</div>
|
|
<div class="table-header">付费收益</div>
|
|
|
- <el-table :data="payIncomeList" border style="width: 100%; font-size: 12px;">
|
|
|
|
|
|
|
+ <el-table ref="payIncomeTable" :data="payIncomeList" v-model:page="payIncomePage" @getTableData="getPayIncome" border style="width: 100%; font-size: 12px;">
|
|
|
<el-table-column prop="name" label="名称" >
|
|
<el-table-column prop="name" label="名称" >
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<div style="display: flex;">
|
|
<div style="display: flex;">
|
|
|
- <el-image style="width: 60px;height: 60px;border-radius: 50%;"></el-image>
|
|
|
|
|
|
|
+ <el-image :src="scope.row.headImage" :preview-src-list="[scope.row.headImage]" fit="cover" preview-teleported="true" style="min-width: 50px;height: 50px;border-radius: 50%;"></el-image>
|
|
|
<div style="margin-left: 10px;">
|
|
<div style="margin-left: 10px;">
|
|
|
<div>
|
|
<div>
|
|
|
- 昵称:{{ scope.row.userName }}
|
|
|
|
|
|
|
+ 昵称:{{ scope.row.nickName }}
|
|
|
</div>
|
|
</div>
|
|
|
<div>
|
|
<div>
|
|
|
ID:{{ scope.row.userId }}
|
|
ID:{{ scope.row.userId }}
|
|
@@ -58,23 +64,31 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column prop="orderName" label="订单名称" />
|
|
|
|
|
- <el-table-column prop="time" width="160" label="时间" />
|
|
|
|
|
- <el-table-column prop="amount" width="100" label="收益金额(元)" />
|
|
|
|
|
|
|
+ <el-table-column prop="orderInfo" width="180" label="订单名称" />
|
|
|
|
|
+ <el-table-column prop="createTime" width="140" label="时间" >
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ {{ formatDateFull(scope.row.createTime) || '--' }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="channelEarningSum" width="100" label="收益金额(元)" />
|
|
|
</el-table>
|
|
</el-table>
|
|
|
|
|
+ <el-pagination style="margin-top: 10px;" v-model:current-page="payIncomePage.pageNum" class="system-page" background
|
|
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="payIncomePage.total" :page-size="payIncomePage.pageSize"
|
|
|
|
|
+ @current-change="($event)=>handleCurrentChange($event,1)" @size-change="($event)=>handleSizeChange($event,1)">
|
|
|
|
|
+ </el-pagination>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 任务收益表格 -->
|
|
<!-- 任务收益表格 -->
|
|
|
<div class="table-card">
|
|
<div class="table-card">
|
|
|
<div class="table-header">任务收益</div>
|
|
<div class="table-header">任务收益</div>
|
|
|
- <el-table :data="taskIncomeList" border style="width: 100%; font-size: 12px;">
|
|
|
|
|
|
|
+ <el-table ref="taskIncomeTable" :data="taskIncomeList" v-model:page="taskIncomePage" @getTableData="getTaskIncome" border style="width: 100%; font-size: 12px;">
|
|
|
<el-table-column prop="name" label="名称" >
|
|
<el-table-column prop="name" label="名称" >
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<div style="display: flex;">
|
|
<div style="display: flex;">
|
|
|
- <el-image style="width: 60px;height: 60px;border-radius: 50%;"></el-image>
|
|
|
|
|
|
|
+ <el-image :src="scope.row.headImage" :preview-src-list="[scope.row.headImage]" fit="cover" preview-teleported="true" style="min-width: 50px;height: 50px;border-radius: 50%;"></el-image>
|
|
|
<div style="margin-left: 10px;">
|
|
<div style="margin-left: 10px;">
|
|
|
<div>
|
|
<div>
|
|
|
- 昵称:{{ scope.row.userName }}
|
|
|
|
|
|
|
+ 昵称:{{ scope.row.nickName }}
|
|
|
</div>
|
|
</div>
|
|
|
<div>
|
|
<div>
|
|
|
ID:{{ scope.row.userId }}
|
|
ID:{{ scope.row.userId }}
|
|
@@ -83,11 +97,19 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column prop="type" width="100" label="类型" />
|
|
|
|
|
- <el-table-column prop="taskName" label="任务名称" />
|
|
|
|
|
- <el-table-column prop="time" width="160" label="时间" />
|
|
|
|
|
- <el-table-column prop="amount" width="100" label="收益金额(元)" />
|
|
|
|
|
|
|
+ <el-table-column prop="consumptionType" width="100" label="类型" />
|
|
|
|
|
+ <el-table-column prop="taskTitle" label="任务名称" />
|
|
|
|
|
+ <el-table-column prop="createTime" width="140" label="时间" >
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ {{ formatDateFull(scope.row.createTime) || '--' }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="channelEarningSum" width="100" label="收益金额(元)" />
|
|
|
</el-table>
|
|
</el-table>
|
|
|
|
|
+ <el-pagination style="margin-top: 10px;" v-model:current-page="taskIncomePage.pageNum" class="system-page" background
|
|
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="taskIncomePage.total" :page-size="taskIncomePage.pageSize"
|
|
|
|
|
+ @current-change="($event)=>handleCurrentChange($event,2)" @size-change="($event)=>handleSizeChange($event,2)">
|
|
|
|
|
+ </el-pagination>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -97,115 +119,188 @@
|
|
|
import { ref, onMounted } from 'vue';
|
|
import { ref, onMounted } from 'vue';
|
|
|
import * as echarts from 'echarts';
|
|
import * as echarts from 'echarts';
|
|
|
import { ElDatePicker, ElTable, ElTableColumn } from 'element-plus';
|
|
import { ElDatePicker, ElTable, ElTableColumn } from 'element-plus';
|
|
|
|
|
+import { statisticsHomePart2,statisticsHomePart3,statisticsHomePart4,statisticsHomePart5 } from '@/api/dashboard.js'
|
|
|
|
|
+import Table from "@/components/table/index.vue";
|
|
|
|
|
+import { formatDateFull } from '@/utils/index.js'
|
|
|
|
|
+// userId beginTime endTime
|
|
|
|
|
+// 工具函数:格式化日期为 YYYY-MM-DD 格式
|
|
|
|
|
+const formatDate = (date) => {
|
|
|
|
|
+ const year = date.getFullYear();
|
|
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 计算近7天的日期范围(当前日期的前6天 至 当前日期)
|
|
|
|
|
+const getRecent7Days = () => {
|
|
|
|
|
+ const endDate = new Date(); // 当前日期
|
|
|
|
|
+ const startDate = new Date();
|
|
|
|
|
+ startDate.setDate(endDate.getDate() - 6); // 前6天,合计7天
|
|
|
|
|
|
|
|
-// 日期范围数据
|
|
|
|
|
-const userDateRange = ref(['2026-01-08', '2026-01-08']);
|
|
|
|
|
-const incomeDateRange = ref(['2026-01-08', '2026-01-08']);
|
|
|
|
|
|
|
+ return [formatDate(startDate), formatDate(endDate)];
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 日期范围数据 - 默认值改为近7天
|
|
|
|
|
+const userDateRange = ref(getRecent7Days());
|
|
|
|
|
+const incomeDateRange = ref(getRecent7Days());
|
|
|
|
|
|
|
|
// 图表容器ref
|
|
// 图表容器ref
|
|
|
const userChartRef = ref(null);
|
|
const userChartRef = ref(null);
|
|
|
const incomeChartRef = ref(null);
|
|
const incomeChartRef = ref(null);
|
|
|
|
|
|
|
|
// 付费收益表格数据
|
|
// 付费收益表格数据
|
|
|
-const payIncomeList = ref([
|
|
|
|
|
- {
|
|
|
|
|
- userName: '用户名001',
|
|
|
|
|
- userId: 'a123456',
|
|
|
|
|
- orderName: '购买会员',
|
|
|
|
|
- time: '2026.1.22 16:16',
|
|
|
|
|
- amount: 99.32
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- userName: '用户名001',
|
|
|
|
|
- userId: 'a123456',
|
|
|
|
|
- orderName: '购买工具-刷新',
|
|
|
|
|
- time: '2026.1.22 16:16',
|
|
|
|
|
- amount: 99.32
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- userName: '用户名001',
|
|
|
|
|
- userId: 'a123456',
|
|
|
|
|
- orderName: '购买工具-置顶',
|
|
|
|
|
- time: '2026.1.22 16:16',
|
|
|
|
|
- amount: 99.32
|
|
|
|
|
- }
|
|
|
|
|
-]);
|
|
|
|
|
|
|
+const payIncomeList = ref([]);
|
|
|
|
|
|
|
|
// 任务收益表格数据
|
|
// 任务收益表格数据
|
|
|
-const taskIncomeList = ref([
|
|
|
|
|
- {
|
|
|
|
|
- userName: '用户名001',
|
|
|
|
|
- userId: 'a123456',
|
|
|
|
|
- type: '悬赏',
|
|
|
|
|
- taskName: '拼多多砍一刀...',
|
|
|
|
|
- time: '2026.1.22 16:16',
|
|
|
|
|
- amount: 1.00
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- userName: '用户名001',
|
|
|
|
|
- userId: 'a123456',
|
|
|
|
|
- type: '提现',
|
|
|
|
|
- taskName: '-',
|
|
|
|
|
- time: '2026.1.22 16:16',
|
|
|
|
|
- amount: 1.20
|
|
|
|
|
- }
|
|
|
|
|
-]);
|
|
|
|
|
-
|
|
|
|
|
|
|
+const taskIncomeList = ref([]);
|
|
|
|
|
+const userDateRangeChange = ()=>{
|
|
|
|
|
+ initUserChart()
|
|
|
|
|
+}
|
|
|
// 初始化用户增长柱状图
|
|
// 初始化用户增长柱状图
|
|
|
const initUserChart = () => {
|
|
const initUserChart = () => {
|
|
|
const chart = echarts.init(userChartRef.value);
|
|
const chart = echarts.init(userChartRef.value);
|
|
|
- chart.setOption({
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
|
|
- xAxis: {
|
|
|
|
|
- type: 'category',
|
|
|
|
|
- data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号']
|
|
|
|
|
- },
|
|
|
|
|
- yAxis: { type: 'value', min: 0 },
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- data: [100, 150, 230, 100, 130, 160, 200],
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- itemStyle: { color: '#3370FF' }
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- });
|
|
|
|
|
- // 自适应窗口变化
|
|
|
|
|
- window.addEventListener('resize', () => chart.resize());
|
|
|
|
|
|
|
+ var dateXArr = []
|
|
|
|
|
+ var userYArr = []
|
|
|
|
|
+ // 获取用户增长数量数据
|
|
|
|
|
+ statisticsHomePart2({
|
|
|
|
|
+ beginTime:userDateRange.value[0]+'T00:00:00',
|
|
|
|
|
+ endTime:userDateRange.value[1]+'T00:00:00',//+'T23:59:59',
|
|
|
|
|
+ }).then(res=>{
|
|
|
|
|
+ if (res.data) {
|
|
|
|
|
+ // 动态提取键值对到数组
|
|
|
|
|
+ dateXArr = Object.keys(res.data);
|
|
|
|
|
+ userYArr = Object.values(res.data);
|
|
|
|
|
+ chart.setOption({
|
|
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ data: dateXArr || [],
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ rotate: dateXArr.length > 7 ? -45 : 0, // 旋转标签
|
|
|
|
|
+ fontSize: 10
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: { type: 'value', min: 0 },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: userYArr || [],
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ itemStyle: { color: '#3370FF' }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ });
|
|
|
|
|
+ // 自适应窗口变化
|
|
|
|
|
+ window.addEventListener('resize', () => chart.resize());
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
|
|
+const incomeDateRangeChange = ()=>{
|
|
|
|
|
+ initIncomeChart()
|
|
|
|
|
+}
|
|
|
// 初始化收益金额折线图
|
|
// 初始化收益金额折线图
|
|
|
const initIncomeChart = () => {
|
|
const initIncomeChart = () => {
|
|
|
const chart = echarts.init(incomeChartRef.value);
|
|
const chart = echarts.init(incomeChartRef.value);
|
|
|
- chart.setOption({
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
|
|
- xAxis: {
|
|
|
|
|
- type: 'category',
|
|
|
|
|
- data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号']
|
|
|
|
|
- },
|
|
|
|
|
- yAxis: { type: 'value', min: 0 },
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- data: [0, 230, 100, 130, 150, 170, 200],
|
|
|
|
|
- type: 'line',
|
|
|
|
|
- itemStyle: { color: '#3370FF' },
|
|
|
|
|
- lineStyle: { color: '#3370FF' },
|
|
|
|
|
- areaStyle: { color: 'rgba(51, 112, 255, 0.2)' }
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- });
|
|
|
|
|
- window.addEventListener('resize', () => chart.resize());
|
|
|
|
|
|
|
+ var XArr = []
|
|
|
|
|
+ var YArr = []
|
|
|
|
|
+ statisticsHomePart3({
|
|
|
|
|
+ beginTime:incomeDateRange.value[0]+'T00:00:00',
|
|
|
|
|
+ endTime:incomeDateRange.value[1]+'T00:00:00',//+'T23:59:59',
|
|
|
|
|
+ }).then(res=>{
|
|
|
|
|
+ if (res.data) {
|
|
|
|
|
+ // 动态提取键值对到数组
|
|
|
|
|
+ XArr = Object.keys(res.data);
|
|
|
|
|
+ YArr = Object.values(res.data);
|
|
|
|
|
+ chart.setOption({
|
|
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ data: XArr || [],
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ rotate: XArr.length > 7 ? -45 : 0, // 旋转标签
|
|
|
|
|
+ fontSize: 10
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: { type: 'value', min: 0 },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: YArr || [],
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ itemStyle: { color: '#3370FF' }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ });
|
|
|
|
|
+ // 自适应窗口变化
|
|
|
|
|
+ window.addEventListener('resize', () => chart.resize());
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
|
|
+const payIncomePage = ref({
|
|
|
|
|
+ pageNum:1,
|
|
|
|
|
+ pageSize:10,
|
|
|
|
|
+ total:0,
|
|
|
|
|
+})
|
|
|
|
|
+const taskIncomePage = ref({
|
|
|
|
|
+ pageNum:1,
|
|
|
|
|
+ pageSize:10,
|
|
|
|
|
+ total:0,
|
|
|
|
|
+})
|
|
|
|
|
+// 获取付费收益
|
|
|
|
|
+const getPayIncome = ()=>{
|
|
|
|
|
+ statisticsHomePart4({
|
|
|
|
|
+ userId:null,
|
|
|
|
|
+ ...payIncomePage.value
|
|
|
|
|
+ }).then(res=>{
|
|
|
|
|
+ payIncomeList.value = res.data.page.records
|
|
|
|
|
+ payIncomePage.value.total = res.data.page.total
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+// 获取任务收益
|
|
|
|
|
+const getTaskIncome = ()=>{
|
|
|
|
|
+ statisticsHomePart5({
|
|
|
|
|
+ userId:null,
|
|
|
|
|
+ ...taskIncomePage.value
|
|
|
|
|
+ }).then(res=>{
|
|
|
|
|
+ taskIncomeList.value = res.data.page.records
|
|
|
|
|
+ taskIncomePage.value.total = res.data.page.total
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+const handleCurrentChange = (val,type)=>{
|
|
|
|
|
+ console.log(val,type)
|
|
|
|
|
+ if(type == 1){
|
|
|
|
|
+ payIncomePage.value.pageNum = val
|
|
|
|
|
+ getPayIncome()
|
|
|
|
|
+ }else{
|
|
|
|
|
+ taskIncomePage.value.pageNum = val
|
|
|
|
|
+ getTaskIncome()
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+const handleSizeChange = (val,type)=>{
|
|
|
|
|
+ console.log(val,type)
|
|
|
|
|
+ if(type == 1){
|
|
|
|
|
+ payIncomePage.value.pageSize = val
|
|
|
|
|
+ getPayIncome()
|
|
|
|
|
+ }else{
|
|
|
|
|
+ taskIncomePage.value.pageSize = val
|
|
|
|
|
+ getTaskIncome()
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
// 页面挂载后初始化图表
|
|
// 页面挂载后初始化图表
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
|
+ // 获取用户增长数量统计图
|
|
|
initUserChart();
|
|
initUserChart();
|
|
|
|
|
+ // 获取收益金额统计图
|
|
|
initIncomeChart();
|
|
initIncomeChart();
|
|
|
|
|
+ // 获取付费收益列表
|
|
|
|
|
+ getPayIncome()
|
|
|
|
|
+ // 获取任务收益列表
|
|
|
|
|
+ getTaskIncome()
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
.dashboard-container {
|
|
.dashboard-container {
|
|
|
/* padding: 20px; */
|
|
/* padding: 20px; */
|
|
|
/* background: #F5F7FA; */
|
|
/* background: #F5F7FA; */
|
|
@@ -225,7 +320,9 @@ onMounted(() => {
|
|
|
padding: 16px;
|
|
padding: 16px;
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+.table-card{
|
|
|
|
|
+ padding: 16px 16px 50px;
|
|
|
|
|
+}
|
|
|
.chart-header {
|
|
.chart-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
@@ -240,4 +337,10 @@ onMounted(() => {
|
|
|
margin-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
}
|
|
}
|
|
|
|
|
+.system-page {
|
|
|
|
|
+
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|