正式版

src/components/BaseReport.vue

@@ -23,7 +23,7 @@ const loadProductBackground = async (productType) => {
             case 'homeservice':
                 return (await import("@/assets/images/report/homeservice_report_bg.jpg")).default;
             case 'backgroundcheck':
-                return (await import("@/assets/images/report/backgroundcheck_report_bg.jpg")).default;
+                return (await import("@/assets/images/report/backgroundcheck_report_bg.png")).default;
             default:
                 return null;
         }
@@ -102,6 +102,7 @@ const productBackground = ref('');
 const backgroundHeight = ref(0);
 const imageAspectRatio = ref(0); // 缓存图片宽高比
 const MAX_BACKGROUND_HEIGHT = 211; // 最大背景高度，防止图片过高变形
+const trapezoidBgImage = ref(''); // 牌匾背景图片
 
 // 计算背景高度
 const calculateBackgroundHeight = () => {
@@ -143,6 +144,7 @@ let resizeTimer = null;
 onMounted(async () => {
     console.log("isExample", isExample.value);
     await loadBackgroundImage();
+    await loadTrapezoidBackground();
 
     // 监听窗口大小变化，重新计算高度
     window.addEventListener('resize', handleResize);
@@ -214,12 +216,37 @@ const backgroundImageStyle = computed(() => {
     return {};
 });
 
+// 动态加载牌匾背景图片
+const loadTrapezoidBackground = async () => {
+    try {
+        const bgModule = await import("@/assets/images/report/title_inquire_bg.png");
+        trapezoidBgImage.value = bgModule.default;
+    } catch (error) {
+        console.warn(`Failed to load trapezoid background image:`, error);
+    }
+};
+
+// 牌匾背景图片样式
+const trapezoidBgStyle = computed(() => {
+    if (trapezoidBgImage.value) {
+        return {
+            backgroundImage: `url(${trapezoidBgImage.value})`,
+        };
+    }
+    return {};
+});
+
 const featureMap = {
     IVYZ5733: {
         name: "婚姻状态",
         component: defineAsyncComponent(() => import("@/ui/CIVYZ5733.vue")),
         remark: '查询结果为"未婚或尚未登记结婚"时，表示婚姻登记处暂无相关的登记记录。婚姻状态信息由婚姻登记处逐级上报，可能存在数据遗漏或更新滞后。当前可查询的婚姻状态包括：未婚或尚未登记结婚、已婚、离异。如您对查询结果有疑问，请联系客服反馈。',
     },
+    IVYZ81NC: {
+        name: "婚姻状态",
+        component: defineAsyncComponent(() => import("@/ui/CIVYZ81NC.vue")),
+        remark: '查询结果为"未婚或尚未登记结婚"时，表示婚姻登记处暂无相关的登记记录。婚姻状态信息由婚姻登记处逐级上报，可能存在数据遗漏或更新滞后。当前可查询的婚姻状态包括：未婚或尚未登记结婚、已婚、离异。如您对查询结果有疑问，请联系客服反馈。',
+    },
     JRZQ0A03: {
         name: "借贷申请记录",
         component: defineAsyncComponent(() =>
@@ -287,6 +314,10 @@ const featureMap = {
         name: "名下车辆",
         component: defineAsyncComponent(() => import("@/ui/CQCXG7A2B.vue")),
     },
+    QCXG9P1C: {
+        name: "名下车辆",
+        component: defineAsyncComponent(() => import("@/ui/CQCXG9P1C.vue")),
+    },
     BehaviorRiskScan: {
         name: "风险行为扫描",
         component: defineAsyncComponent(() =>
@@ -301,6 +332,10 @@ const featureMap = {
         name: "学历信息查询",
         component: defineAsyncComponent(() => import("@/ui/CIVYZ9A2B.vue")),
     },
+    IVYZ7F3A: {
+        name: "学历信息",
+        component: defineAsyncComponent(() => import("@/ui/CIVYZ7F3A.vue")),
+    },
     DWBG8B4D: {
         name: "谛听多维报告",
         component: defineAsyncComponent(() => import("@/ui/CDWBG8B4D/index.vue")),
@@ -326,10 +361,10 @@ const featureMap = {
         name: "逾期风险综述",
         component: defineAsyncComponent(() => import("@/ui/CDWBG8B4D/components/OverdueRiskSection.vue")),
     },
-    DWBG8B4D_CourtInfo: {
-        name: "法院曝光台信息",
-        component: defineAsyncComponent(() => import("@/ui/CDWBG8B4D/components/MultCourtInfoSection.vue")),
-    },
+    // DWBG8B4D_CourtInfo: {
+    //     name: "法院曝光台信息",
+    //     component: defineAsyncComponent(() => import("@/ui/CDWBG8B4D/components/MultCourtInfoSection.vue")),
+    // },
     DWBG8B4D_LoanEvaluation: {
         name: "借贷评估",
         component: defineAsyncComponent(() => import("@/ui/CDWBG8B4D/components/LoanEvaluationSection.vue")),
@@ -415,10 +450,10 @@ const featureMap = {
         name: "关联风险监督",
         component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/components/RiskSupervisionSection.vue")),
     },
-    DWBG6A2C_CourtRiskInfo: {
-        name: "法院风险信息",
-        component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/components/CourtRiskInfoSection.vue")),
-    },
+    // DWBG6A2C_CourtRiskInfo: {
+    //     name: "法院风险信息",
+    //     component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/components/CourtRiskInfoSection.vue")),
+    // },
     // 贷款风险报告
     JRZQ5E9F: {
         name: "贷款风险评估",
@@ -703,7 +738,7 @@ watch([reportData, componentRiskScores], () => {
 </script>
 
 <template>
-    <div class="min-h-full bg-[#FCF3F3]">
+    <div class="min-h-full bg-[#f6f8fe]">
         <template v-if="isDone">
             <!-- 背景图容器 -->
             <div ref="backgroundContainerRef" class="w-full" :style="[backgroundContainerStyle, backgroundImageStyle]">
@@ -714,10 +749,18 @@ watch([reportData, componentRiskScores], () => {
                 <div class="flex flex-col gap-y-4 p-4">
                     <LEmpty v-if="isEmpty" />
                     <van-tab title="分析指数">
-                        <TitleBanner id="analysis" class="mb-4">分析指数</TitleBanner>
-                        <div class="card mb-4">
-                            <div class="my-4">
-                                <GaugeChart :score="reportScore" />
+                        <div class="relative mb-4">
+                            <!-- 产品卡片牌匾效果 - 使用背景图片 -->
+                            <div class="absolute -top-[12px] left-1/2 transform -translate-x-1/2 w-[140px]">
+                                <div class="trapezoid-bg-image flex items-center justify-center"
+                                    :style="trapezoidBgStyle">
+                                    <div class="text-xl whitespace-nowrap">分析指数</div>
+                                </div>
+                            </div>
+                            <div class="card mb-4 mt-6 !pt-10">
+                                <div class="my-4">
+                                    <GaugeChart :score="reportScore" />
+                                </div>
                             </div>
                         </div>
                     </van-tab>
@@ -807,4 +850,11 @@ watch([reportData, componentRiskScores], () => {
     @apply p-3;
     box-shadow: 0px 0px 24px 0px #3F3F3F0F;
 }
+/* 梯形背景图片样式 */
+.trapezoid-bg-image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 44px;
+}
 </style>