qdintc/intc-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 首页日历、净资产、统计页面，统一优化样式。

Browse Source
This commit is contained in:
tianyongbao
2025-11-03 02:53:14 +08:00
parent 3eb35e608d
commit 616bcbe190
24 changed files with 4281 additions and 1360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/views/invest/futuresAnalysis/index.vue
View File

@@ -55,66 +55,56 @@
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="main-con">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
<div class="center-con">
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><TrendCharts /></el-icon>
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.accumulateIncome }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
<div class="center-con">
<div class="icon-box">
<el-icon :size="40" color="#67C23A"><List /></el-icon>
</div>
<div class="item-wrap">
<div class="title">交易次数</div>
<div>
<span class="num">{{ futuresStock.count }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.count }}</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
</div>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.averageIncome }}</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><PieChart /></el-icon>
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.maxRevenue }}</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#909399"><Odometer /></el-icon>
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.maxLoss }}</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="title">期货收益分析</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
@@ -124,9 +114,9 @@
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -149,6 +139,7 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { TrendCharts, List, DataLine, PieChart, Odometer } from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getFuturesStocksAnalysis } from '@/api/invest/statisticAnalysis'
import { listFutureStocks } from '@/api/invest/futureStocks'
@@ -535,3 +526,106 @@ const handleRadioChange = (type) => {
getFutureStocksList()
getList()
</script>
<style lang="scss" scoped>
.main-con {
height: calc(100vh - 240px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.summary-con {
gap: 0.14rem !important;
justify-content: flex-start !important;
flex-wrap: wrap;
margin-bottom: 0.08rem !important;
flex-shrink: 0;
.center-con {
flex: 1 1 calc(20% - 0.112rem);
min-width: 2.4rem;
max-width: calc(20% - 0.112rem);
list-style: none !important;
&::before,
&::after {
display: none !important;
content: none !important;
}
}
.item-wrap {
list-style: none !important;
&::before,
&::after {
display: none !important;
content: none !important;
}
.num,
.title {
&::before,
&::after {
display: none !important;
content: none !important;
}
}
}
.icon-box {
&::before,
&::after {
display: none !important;
content: none !important;
}
}
}
.title-con {
flex-shrink: 0;
margin-top: 0 !important;
padding-top: 0.08rem !important;
}
.content-con {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
.chart {
flex: 1;
min-height: 0;
width: 100%;
}
.el-table {
flex: 1;
min-height: 0;
}
}
@media (max-width: 1600px) {
.summary-con .center-con {
flex: 1 1 calc(25% - 0.105rem);
max-width: calc(25% - 0.105rem);
}
}
@media (max-width: 1200px) {
.summary-con .center-con {
flex: 1 1 calc(33.333% - 0.093rem);
max-width: calc(33.333% - 0.093rem);
}
}
@media (max-width: 768px) {
.summary-con .center-con {
flex: 1 1 calc(50% - 0.07rem);
max-width: calc(50% - 0.07rem);
}
}
</style>