f

src/ui/DWBG9FB2/components/ReportHeaderSection.vue

@@ -1,12 +1,9 @@
 <template>
-  <div class="header-section">
+  <div class="header-section" :style="bannerStyle">
     <div class="header-left">
       <h1>海宇个人风险报告</h1>
       <p>多维度大数据风险分析</p>
     </div>
-    <div class="header-middle">
-      <div class="shield-icon">🛡️</div>
-    </div>
     <div class="header-right">
       <div>报告编号: {{ reportNo }}</div>
       <div>生成时间: {{ displayTime }}</div>
@@ -17,11 +14,16 @@
 
 <script setup>
 import { computed } from 'vue';
+import personBanner from '@/assets/images/reporthead/person-banner.png';
 
 const props = defineProps({
   reportTime: { type: String, default: '' },
 });
 
+const bannerStyle = computed(() => ({
+  backgroundImage: `url(${personBanner})`,
+}));
+
 const reportNo = computed(() => {
   const d = new Date();
   return `RPT${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}001`;
@@ -51,10 +53,24 @@ function formatDateTime(date) {
 
 <style lang="scss" scoped>
 .header-section {
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
+  padding: 28px 32px;
+  border-radius: 12px;
+  overflow: hidden;
+  aspect-ratio: 8 / 1;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.header-left,
+.header-right {
+  position: relative;
+  z-index: 1;
 }
 
 .header-left h1 {
@@ -62,46 +78,32 @@ function formatDateTime(date) {
   font-weight: 700;
   color: #1a202c;
   margin: 0;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
 }
 
 .header-left p {
   font-size: 16px;
-  color: #4a5568;
+  color: #2d3748;
   margin: 8px 0 0;
-}
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
-
-.header-middle {
-  position: relative;
-}
-
-.shield-icon {
-  width: 120px;
-  height: 120px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 48px;
 }
 
 .header-right {
   text-align: right;
   font-size: 12px;
-  color: #4a5568;
+  color: #2d3748;
   line-height: 1.8;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
 }
 
 @media (max-width: 768px) {
   .header-section {
     flex-direction: column;
     align-items: flex-start;
+    justify-content: center;
     gap: 16px;
-  }
+    padding: 24px 20px;
-
+    aspect-ratio: 6 / 1;
-  .header-middle {
-    align-self: center;
   }
 
   .header-right {

src/ui/DWBG9FB3/components/ReportHeaderSection.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="header-section" :style="bannerStyle">
+    <div class="header-left">
+      <h1>海宇贷前风险档案</h1>
+      <p>多维度大数据风险分析</p>
+    </div>
+    <div class="header-right">
+      <div>报告输出时间: {{ displayTime }}</div>
+      <div>报告版本: V1.0</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import personBanner from '@/assets/images/reporthead/daiqian-banner.png';
+
+const props = defineProps({
+  reportTime: { type: String, default: '' },
+});
+
+const bannerStyle = computed(() => ({
+  backgroundImage: `url(${personBanner})`,
+}));
+
+const displayTime = computed(() => {
+  if (!props.reportTime) {
+    return formatDateTime(new Date());
+  }
+  const parsed = new Date(props.reportTime);
+  if (!Number.isNaN(parsed.getTime())) {
+    return formatDateTime(parsed);
+  }
+  return props.reportTime;
+});
+
+function formatDateTime(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const h = String(date.getHours()).padStart(2, '0');
+  const min = String(date.getMinutes()).padStart(2, '0');
+  const s = String(date.getSeconds()).padStart(2, '0');
+  return `${y}-${m}-${d} ${h}:${min}:${s}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.header-section {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 28px 32px;
+  border-radius: 12px;
+  overflow: hidden;
+  aspect-ratio: 8 / 1;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.header-left,
+.header-right {
+  position: relative;
+  z-index: 1;
+}
+
+.header-left h1 {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
+}
+
+.header-left p {
+  font-size: 16px;
+  color: #2d3748;
+  margin: 8px 0 0;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
+}
+
+.header-right {
+  text-align: right;
+  font-size: 12px;
+  color: #2d3748;
+  line-height: 1.8;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
+}
+
+@media (max-width: 768px) {
+  .header-section {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 16px;
+    padding: 24px 20px;
+    aspect-ratio: 6 / 1;
+  }
+
+  .header-right {
+    text-align: left;
+    width: 100%;
+  }
+}
+</style>

src/ui/DWBG9FB3/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="gamma-report">
     <div ref="reportRef" class="gamma-container">
-      <div class="report-header">
+      <ReportHeaderSection :report-time="reportTime" />
-        <div class="report-title">海宇贷前风险档案</div>
-        <div class="report-time">报告输出时间: {{ reportTime }}</div>
-      </div>
 
       <RiskAssessmentSection
         :risk-level="root.riskLevel"
@@ -49,6 +46,7 @@ import OverdueSurveySection from './components/OverdueSurveySection.vue';
 import CreditPanoramaSection from './components/CreditPanoramaSection.vue';
 import LoanIntentSection from './components/LoanIntentSection.vue';
 import JudicialCaseSection from './components/JudicialCaseSection.vue';
+import ReportHeaderSection from './components/ReportHeaderSection.vue';
 
 const props = defineProps({
   data: { type: Object, default: () => ({}) },
@@ -75,28 +73,6 @@ const reportTime = computed(
 </style>
 
 <style lang="scss" scoped>
-.report-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.report-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #8b4513;
-}
-
-.report-time {
-  font-size: 14px;
-  color: #666;
-}
-
 .report-toolbar {
   max-width: 1200px;
   margin: 0 auto 16px;
@@ -145,7 +121,7 @@ const reportTime = computed(
 }
 
 @media (max-width: 768px) {
-  .report-header {
+  .report-toolbar {
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;