add

src/ui/DWBG9FB3/components/LoanProfileSection.vue

@@ -0,0 +1,80 @@
+<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>