81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="gamma-card">
|
|||
|
|
<div class="gamma-title"><span>🏦</span> 借贷画像</div>
|
|||
|
|
<div class="loan-profile-grid">
|
|||
|
|
<div v-for="item in items" :key="item.label" class="loan-item">
|
|||
|
|
<div class="loan-icon" :class="item.color">{{ item.icon }}</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="loan-text">{{ item.label }}</div>
|
|||
|
|
<div class="loan-value">{{ item.value }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
import { cellText } from '../reportHelper';
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
loanTotal: { type: Object, default: () => ({}) },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const items = computed(() => {
|
|||
|
|
const d = props.loanTotal || {};
|
|||
|
|
return [
|
|||
|
|
{ label: '机构查询总次数', value: cellText(d.queryCount), icon: '📑', color: 'purple' },
|
|||
|
|
{ label: '借贷机构数（2年内）', value: cellText(d.orgCount), icon: '🏢', color: 'green' },
|
|||
|
|
{ label: '正常还款订单占比', value: cellText(d.repayRate), icon: '🤲', color: 'orange' },
|
|||
|
|
{ label: '预估网贷授信额度', value: cellText(d.creditLimit), icon: '📄', color: 'pink' },
|
|||
|
|
{ label: '网贷产品数', value: cellText(d.productCount), icon: '📦', color: 'red' },
|
|||
|
|
{ label: '已结清订单数', value: cellText(d.settledCount), icon: '👤', color: 'blue' },
|
|||
|
|
{ label: '借款总金额（2年内）', value: d.loanAmount != null ? `${d.loanAmount} 元` : '— 元', icon: '💴', color: 'orange' },
|
|||
|
|
{ label: '逾期总金额（2年内）', value: cellText(d.overdueAmount), icon: '📄', color: 'pink' },
|
|||
|
|
];
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.loan-profile-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loan-item {
|
|||
|
|
background: #f9fafc;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loan-icon {
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 18px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loan-icon.purple { background: #6c5ce7; }
|
|||
|
|
.loan-icon.green { background: #00b894; }
|
|||
|
|
.loan-icon.orange { background: #fdcb6e; }
|
|||
|
|
.loan-icon.pink { background: #e84393; }
|
|||
|
|
.loan-icon.red { background: #e74c3c; }
|
|||
|
|
.loan-icon.blue { background: #3498db; }
|
|||
|
|
|
|||
|
|
.loan-text { font-size: 14px; line-height: 1.4; }
|
|||
|
|
.loan-value { font-size: 16px; font-weight: 600; margin-top: 4px; }
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.loan-profile-grid { grid-template-columns: repeat(2, 1fr); }
|
|||
|
|
}
|
|||
|
|
</style>
|