fix: 首页日历、净资产、统计页面，统一优化样式。
This commit is contained in:
tianyongbao
@@ -49,130 +49,100 @@
|
||||
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-con" style="height: calc(100% - 1.45rem)">
|
||||
<div class="summary-con" style="height: 115px">
|
||||
<div class="main-con">
|
||||
<div class="summary-con">
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#409EFF"><DocumentCopy /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1月硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastOneMonths }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastOneMonths }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#67C23A"><DocumentCopy /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近2月硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastTwoMonths }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastTwoMonths }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#E6A23C"><DocumentCopy /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近3月硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastThreeMonths }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastThreeMonths }}</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="#F56C6C"><DocumentCopy /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近6月硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastSixMonths }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastSixMonths }}</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="#909399"><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1年硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastOneYears }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastOneYears }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-con" style="height: 110px">
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#409EFF"><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近2年硬查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastTwoYears }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastTwoYears }}</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="#67C23A"><TrendCharts /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近6月个人查询</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastSixMonthPersonalCount }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastSixMonthPersonalCount }}</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"><TrendCharts /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">个人查询总数</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.totalPersonalCount }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.totalPersonalCount }}</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="#F56C6C"><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近2年贷后管理</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</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="#909399"><Odometer /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">贷后管理总数</div>
|
||||
<div>
|
||||
<span class="num">{{ creditRecord.totalAfterLoan }}</span
|
||||
>次
|
||||
</div>
|
||||
<div class="num">{{ creditRecord.totalAfterLoan }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-con" style="margin-top: 18px">
|
||||
<div class="title-con">
|
||||
<div class="title">征信查询统计</div>
|
||||
<div class="operate-btn-con">
|
||||
<el-radio-group v-model="radioVal" @change="handleRadioChange">
|
||||
@@ -183,9 +153,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-con">
|
||||
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditRecord.tableCreditRecordsList" height="calc(100% - 245px)">
|
||||
<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="creditRecord.tableCreditRecordsList">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
@@ -208,6 +178,7 @@
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { DocumentCopy, Clock, TrendCharts, Odometer } from '@element-plus/icons-vue'
|
||||
import yearPicker from '@/components/YearPicker/index.vue'
|
||||
import { getCreditRecordsAnalysis } from '@/api/invest/statisticAnalysis'
|
||||
const { proxy } = getCurrentInstance()
|
||||
@@ -567,3 +538,115 @@ const handleRadioChange = (type) => {
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-con {
|
||||
height: calc(100vh - 200px);
|
||||
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;
|
||||
|
||||
.right-con,
|
||||
.center-con {
|
||||
flex: 1 1 calc(20% - 0.112rem);
|
||||
min-width: 2.2rem;
|
||||
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 {
|
||||
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 {
|
||||
.right-con,
|
||||
.center-con {
|
||||
flex: 1 1 calc(25% - 0.105rem);
|
||||
max-width: calc(25% - 0.105rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-con {
|
||||
.right-con,
|
||||
.center-con {
|
||||
flex: 1 1 calc(33.333% - 0.093rem);
|
||||
max-width: calc(33.333% - 0.093rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.summary-con {
|
||||
.right-con,
|
||||
.center-con {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user