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

150
src/views/invest/creditInstallmentSettledAnalysis/index.vue
View File

@@ -53,51 +53,42 @@
<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="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><List /></el-icon>
</div>
<div class="item-wrap">
<div class="title">已结清分期笔数</div>
<div>
<span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
</div>
<div class="num">{{ historyObj.clearedCount }}</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="#67C23A"><Money /></el-icon>
</div>
<div class="item-wrap">
<div class="title">已结清分期（本息）</div>
<div>
<span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
</div>
<div class="num">{{ historyObj.clearedTotal }}</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="#E6A23C"><Coin /></el-icon>
</div>
<div class="item-wrap">
<div class="title">已结清分期（本金）</div>
<div>
<span class="num">{{ historyObj.clearedPrincipal }}</span> <span class="unit"></span>
</div>
<div class="num">{{ historyObj.clearedPrincipal }}</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="#F56C6C"><TrendCharts /></el-icon>
</div>
<div class="item-wrap">
<div class="title">已结清总利息</div>
<div>
<span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
</div>
<div class="num">{{ historyObj.totalInterest }}</div>
</div>
</div>
</div>
@@ -112,9 +103,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="historyObj.tableHistoryList" 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="historyObj.tableHistoryList">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -137,6 +128,7 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { List, Money, Coin, TrendCharts, Histogram } from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getInstallmentSettledAnalysis } from '@/api/invest/statisticAnalysis'
import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -490,3 +482,111 @@ const handleRadioChange = (type) => {
getCreditCardList()
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(25% - 0.105rem);
min-width: 2.6rem;
max-width: calc(25% - 0.105rem);
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 {
margin-top: 0 !important;
padding-top: 0.08rem !important;
flex-shrink: 0;
}
.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;
}
}
@media (max-width: 1600px) {
.summary-con {
.center-con {
flex: 1 1 calc(33.333% - 0.093rem);
max-width: calc(33.333% - 0.093rem);
}
}
}
@media (max-width: 1200px) {
.summary-con {
.center-con {
flex: 1 1 calc(50% - 0.07rem);
max-width: calc(50% - 0.07rem);
}
}
}
@media (max-width: 768px) {
.summary-con {
.center-con {
flex: 1 1 100%;
max-width: 100%;
}
}
}
</style>