正式版

src/components/InquireForm.vue

@@ -3,9 +3,10 @@
         <!-- 主要内容区域 - 覆盖背景图片 -->
         <div class="min-h-screen relative mx-4 pb-12">
             <!-- 产品卡片牌匾效果 - 使用背景图片 -->
-            <div class="absolute -top-[36px] left-1/2 transform -translate-x-1/2">
-                <div class="trapezoid-bg-image w-[200px] h-[36px] flex items-center justify-center">
-                    <div class="text-lg" style="color: var(--van-theme-primary);">{{ featureData.product_name }}</div>
+            <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" :style="trapezoidTextStyle">{{
+                        featureData.product_name }}</div>
                 </div>
             </div>
             <div class="card-container">
@@ -328,7 +329,7 @@ const loadProductBackground = async (productType) => {
             case 'homeservice':
                 return (await import("@/assets/images/report/homeservice_inquire_bg.jpg")).default;
             case 'backgroundcheck':
-                return (await import("@/assets/images/report/backgroundcheck_inquire_bg.jpg")).default;
+                return (await import("@/assets/images/report/backgroundcheck_inquire_bg.png")).default;
             default:
                 return null;
         }
@@ -349,6 +350,7 @@ const showPayment = ref(false);
 const pendingPayment = ref(false);
 const queryId = ref(null);
 const productBackground = ref('');
+const trapezoidBgImage = ref('');
 const isCountingDown = ref(false);
 const countdown = ref(60);
 
@@ -393,6 +395,52 @@ const backgroundStyle = computed(() => {
     return {};
 });
 
+// 动态加载牌匾背景图片
+const loadTrapezoidBackground = async () => {
+    try {
+        let bgModule;
+        if (props.feature === 'marriage') {
+            bgModule = await import("@/assets/images/report/title_inquire_bg_red.png");
+        } else if (props.feature === 'homeservice') {
+            bgModule = await import("@/assets/images/report/title_inquire_bg_green.png");
+        } else {
+            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);
+        // 回退到默认图片
+        try {
+            const defaultModule = await import("@/assets/images/report/title_inquire_bg.png");
+            trapezoidBgImage.value = defaultModule.default;
+        } catch (e) {
+            console.error('Failed to load default trapezoid background:', e);
+        }
+    }
+};
+
+// 牌匾背景图片样式
+const trapezoidBgStyle = computed(() => {
+    if (trapezoidBgImage.value) {
+        return {
+            backgroundImage: `url(${trapezoidBgImage.value})`,
+        };
+    }
+    return {};
+});
+
+// 牌匾文字样式
+const trapezoidTextStyle = computed(() => {
+    // homeservice 和 marriage 使用白色文字
+    if (props.feature === 'homeservice' || props.feature === 'marriage') {
+        return {
+            color: 'white',
+        };
+    }
+    // 其他情况使用默认字体色（不设置 color，使用浏览器默认或继承）
+    return {};
+});
+
 // 获取功能图标
 const getFeatureIcon = (apiId) => {
     const iconMap = {
@@ -623,6 +671,7 @@ const toHistory = () => {
 // 生命周期
 onMounted(async () => {
     await loadBackgroundImage();
+    await loadTrapezoidBackground();
 });
 
 // 加载背景图片
@@ -669,22 +718,19 @@ button:active {
 
 /* 梯形背景图片样式 */
 .trapezoid-bg-image {
-    background-image: url('@/assets/images/report/title_inquire_bg.png');
-    background-size: 100% 100%;
+    background-size: contain;
     background-repeat: no-repeat;
+    background-position: center;
+    height: 44px;
 }
 
 /* 卡片容器样式 */
 .card-container {
     background: white;
     border-radius: 8px;
-    padding: 16px;
-    box-shadow:
-        0 0 0 0.5px rgba(0, 0, 0, 0.02),
-        0 1px 4px rgba(0, 0, 0, 0.04),
-        0 0.5px 2px rgba(0, 0, 0, 0.05);
+    padding: 32px 16px;
+        box-shadow: 0px 0px 24px 0px #3F3F3F0F;
 }
-
 .card-container input::placeholder {
     color: #DDDDDD;
 }