f

src/components/BaseReport.vue

@@ -407,6 +407,11 @@ const featureMap = {
         component: defineAsyncComponent(() => import("@/ui/JRZQ09J8/index.vue")),
         remark: '基于全国社会保险信息系统的缴费基数数据进行收入水平评估。评级反映相对收入水平，实际收入可能因地区差异而有所不同，建议结合其他收入证明材料进行综合评估。'
     },
+    JRZQ8B3C: {
+        name: "个人消费能力",
+        component: defineAsyncComponent(() => import("@/ui/JRZQ8B3C/index.vue")),
+        remark: '根据个人的消费能力，评估其消费水平，从而评估其信用风险。'
+    },
     // 司南报告
     DWBG6A2C: {
         name: "司南报告",
@@ -596,6 +601,7 @@ const featureRiskLevels = {
     'IVYZ5733': 3,         // 婚姻状态
     'IVYZ9A2B': 3,         // 学历信息
     'IVYZ3P9M': 3,         // 学历信息查询(实时版)
+    'JRZQ8B3C': 3,         // 个人消费能力
 
     // 📊 复合报告类 - 按子模块动态计算
     'DWBG8B4D': 0,         // 谛听多维报告（由子模块计算）

src/components/Payment.vue

@@ -1,10 +1,6 @@
 <template>
-    <van-popup
-        v-model:show="show"
-        position="bottom"
-        class="flex flex-col justify-between p-6"
-        :style="{ height: '50%' }"
-    >
+    <van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6"
+        :style="{ height: '50%' }">
         <div class="text-center">
             <h3 class="text-lg font-bold">支付</h3>
         </div>
@@ -12,11 +8,8 @@
             <div class="font-bold text-xl">{{ data.product_name }}</div>
             <div class="text-3xl text-red-500 font-bold">
                 <!-- 显示原价和折扣价格 -->
-                <div
-                    v-if="discountPrice"
-                    class="line-through text-gray-500 mt-4"
-                    :class="{ 'text-2xl': discountPrice }"
-                >
+                <div v-if="discountPrice" class="line-through text-gray-500 mt-4"
+                    :class="{ 'text-2xl': discountPrice }">
                     ¥ {{ data.sell_price }}
                 </div>
                 <div>
@@ -36,63 +29,36 @@
         <!-- 支付方式选择 -->
         <div class="">
             <van-cell-group inset>
-                <van-cell
-                    v-if="isWeChat"
-                    title="微信支付"
-                    clickable
-                    @click="selectedPaymentMethod = 'wechat'"
-                >
+                <van-cell v-if="isWeChat" title="微信支付" clickable @click="selectedPaymentMethod = 'wechat'">
                     <template #icon>
-                        <van-icon
-                            size="24"
-                            name="wechat-pay"
-                            color="#1AAD19"
-                            class="mr-2"
-                        />
+                        <van-icon size="24" name="wechat-pay" color="#1AAD19" class="mr-2" />
                     </template>
                     <template #right-icon>
-                        <van-radio
-                            v-model="selectedPaymentMethod"
-                            name="wechat"
-                        />
+                        <van-radio v-model="selectedPaymentMethod" name="wechat" />
                     </template>
                 </van-cell>
 
                 <!-- 支付宝支付 -->
-                <van-cell
-                    v-else
-                    title="支付宝支付"
-                    clickable
-                    @click="selectedPaymentMethod = 'alipay'"
-                >
+                <van-cell v-else title="支付宝支付" clickable @click="selectedPaymentMethod = 'alipay'">
                     <template #icon>
-                        <van-icon
-                            size="24"
-                            name="alipay"
-                            color="#00A1E9"
-                            class="mr-2"
-                        />
+                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
                     </template>
                     <template #right-icon>
-                        <van-radio
-                            v-model="selectedPaymentMethod"
-                            name="alipay"
-                        />
+                        <van-radio v-model="selectedPaymentMethod" name="alipay" />
                     </template>
                 </van-cell>
             </van-cell-group>
         </div>
         <!-- 确认按钮 -->
         <div class="">
-            <van-button class="w-full" round type="primary" @click="getPayment"
-                >确认支付</van-button
-            >
+            <van-button class="w-full" round type="primary" @click="getPayment">确认支付</van-button>
         </div>
     </van-popup>
 </template>
 
 <script setup>
 import { ref, defineProps } from "vue";
+import { showConfirmDialog } from "vant";
 const { isWeChat } = useEnv();
 
 const props = defineProps({
@@ -130,43 +96,54 @@ onMounted(() => {
 });
 
 async function getPayment() {
-    const { data, error } = await useApiFetch("/pay/payment")
-        .post({
-            id: props.id,
-            pay_method: selectedPaymentMethod.value,
-            pay_type: props.type,
-        })
-        .json();
+    showConfirmDialog({
+        title: '重要安全声明',
+        message:
+            '为保障您的个人信息与资金安全，请您务必知悉以下事项：\n\n关于平台业务：本平台官方服务仅限于大数据报告查询，不涉及也从未开展“央行征信修复”、“贷款办理”或“征信洗白”等相关业务。请注意，本平台出具的报告仅供决策参考，不可作为任何官方征信凭证或贷款依据。\n\n关于诈骗警示：任何自称与本平台合作，或以“内部渠道”、“百分百包下款”、“修复征信”等为由，诱导您进行支付的行为，均属欺诈。请您切勿相信，谨慎对待任何支付要求。\n\n关于安全提示：请您时刻保持警惕，妥善保管个人敏感信息。如遇任何索款要求或可疑承诺，请务必首先通过我平台官方公布的联系方式进行核实，切勿轻信他人。',
+    })
+        .then(async () => {
+            const { data, error } = await useApiFetch("/pay/payment")
+                .post({
+                    id: props.id,
+                    pay_method: selectedPaymentMethod.value,
+                    pay_type: props.type,
+                })
+                .json();
 
-    if (data.value && !error.value) {
-        if (selectedPaymentMethod.value === "alipay") {
-            orderNo.value = data.value.data.order_no;
-            // 存储订单ID以便支付宝返回时获取
-            const prepayUrl = data.value.data.prepay_id;
-            const paymentForm = document.createElement("form");
-            paymentForm.method = "POST";
-            paymentForm.action = prepayUrl;
-            paymentForm.style.display = "none";
-            document.body.appendChild(paymentForm);
-            paymentForm.submit();
-        } else {
-            const payload = data.value.data.prepay_data;
-            WeixinJSBridge.invoke(
-                "getBrandWCPayRequest",
-                payload,
-                function (res) {
-                    if (res.err_msg == "get_brand_wcpay_request:ok") {
-                        // 支付成功，直接跳转到结果页面
-                        router.push({
-                            path: "/payment/result",
-                            query: { orderNo: data.value.data.order_no },
-                        });
-                    }
+            if (data.value && !error.value) {
+                if (selectedPaymentMethod.value === "alipay") {
+                    orderNo.value = data.value.data.order_no;
+                    // 存储订单ID以便支付宝返回时获取
+                    const prepayUrl = data.value.data.prepay_id;
+                    const paymentForm = document.createElement("form");
+                    paymentForm.method = "POST";
+                    paymentForm.action = prepayUrl;
+                    paymentForm.style.display = "none";
+                    document.body.appendChild(paymentForm);
+                    paymentForm.submit();
+                } else {
+                    const payload = data.value.data.prepay_data;
+                    WeixinJSBridge.invoke(
+                        "getBrandWCPayRequest",
+                        payload,
+                        function (res) {
+                            if (res.err_msg == "get_brand_wcpay_request:ok") {
+                                // 支付成功，直接跳转到结果页面
+                                router.push({
+                                    path: "/payment/result",
+                                    query: { orderNo: data.value.data.order_no },
+                                });
+                            }
+                        }
+                    );
                 }
-            );
-        }
-    }
-    show.value = false;
+            }
+            show.value = false;
+        })
+        .catch(() => {
+            return;
+        });
+
 }
 </script>
 

src/ui/FLXG7E8F/utils/lawsuitUtils.js

@@ -81,15 +81,21 @@ export const formatDate = (dateStr) => {
 export const formatLawsuitMoney = (money) => {
     if (!money) return "—";
 
+    // 如果是字符串且已经包含"元"后缀，直接返回
+    if (typeof money === "string" && money.endsWith("元")) {
+        return money;
+    }
+
+    // 尝试解析为数字
     const value = parseFloat(money);
     if (isNaN(value)) return "—";
 
-    // 直接显示原始金额（元）
+    // 格式化数字并添加"元"后缀
     return (
         value.toLocaleString("zh-CN", {
             minimumFractionDigits: 0,
             maximumFractionDigits: 2,
-        }) + " 元"
+        }) + "元"
     );
 };
 

src/ui/JRZQ8B3C/README.md

@@ -0,0 +1,149 @@
+# 个人消费能力等级组件 (JRZQ8B3C)
+
+## 组件概述
+
+基于个人收入指数评分进行消费能力等级评估，为企业提供专业的消费能力分析和风险评估服务。
+
+## 组件结构
+
+```
+JRZQ8B3C/
+├── index.vue                     # 主组件
+└── README.md                     # 说明文档
+```
+
+## 使用方法
+
+### 基本用法
+
+```vue
+<template>
+  <div>
+    <JRZQ8B3C :data="consumptionData" />
+  </div>
+</template>
+
+<script setup>
+import JRZQ8B3C from '@/ui/JRZQ8B3C/index.vue'
+
+// 个人消费能力等级数据示例
+const consumptionData = {
+  personincome_index_2.0: "200"  // 个人收入指数评分（字符串类型）
+}
+</script>
+```
+
+## 数据字段说明
+
+| 字段名 | 类型 | 必填 | 描述 | 示例值 |
+|-------|------|------|------|--------|
+| personincome_index_2.0 | String | 是 | 个人收入指数评分 | "200" |
+
+## 评分分档说明
+
+| 分值 | 收入区间（元/月） | 消费能力等级 | 风险等级 |
+|------|----------------|------------|----------|
+| -1 | **未命中** | 无法获取收入信息 | 高风险 |
+| 100 | (1000, 2000] | 第1档 | 高风险 |
+| 200 | (2000, 4000] | 第2档 | 高风险 |
+| 300 | (4000, 6000] | 第3档 | 高风险 |
+| 400 | (6000, 8000] | 第4档 | 中等风险 |
+| 500 | (8000, 10000] | 第5档 | 中等风险 |
+| 600 | (10000, 12000] | 第6档 | 中等风险 |
+| 700 | (12000, 15000] | 第7档 | 低风险 |
+| 800 | (15000, 20000] | 第8档 | 低风险 |
+| 900 | (20000, 25000] | 第9档 | 低风险 |
+| 1000 | (25000, +∞) | 第10档 | 低风险 |
+
+## 特殊值说明
+
+- **-1**: 表示未命中（无法获取收入信息）
+- **评分范围**: 100-1000分，共10个等级
+- **等级意义**: 等级越高，对应的消费能力越强
+- **区间定义**: 收入区间为左开右闭区间（如：1000 < 收入 ≤ 2000）
+
+## 组件特性
+
+### 1. 专业的视觉展示
+- **评分展示**：大数字显示个人收入指数评分
+- **进度条可视化**：直观展示评分在100-1000分范围内的位置
+- **颜色编码**：根据评分等级使用不同颜色（低=红色，中=黄色，高=绿色）
+- **响应式设计**：完美适配各种屏幕尺寸
+
+### 2. 全面的数据分析
+- **收入区间显示**：清晰展示对应的月收入范围
+- **等级描述**：显示当前评分对应的消费能力等级
+- **市场对比分析**：与市场平均水平对比
+- **消费能力评估**：基于收入指数的消费能力分析
+
+### 3. 智能风险评估
+- **动态评分**：根据收入指数自动计算风险分数（30-100分）
+- **风险等级标签**：直观显示当前风险等级
+- **个性化建议**：针对不同等级的专业建议
+
+## 视觉设计亮点
+
+### 1. 色彩系统
+- **低风险（700-1000分）**：绿色系，表示消费能力强
+- **中等风险（400-600分）**：黄色系，表示消费能力中等
+- **高风险（100-300分/-1）**：红色系，表示消费能力有限
+
+### 2. 交互体验
+- 平滑的动画过渡
+- 直观的视觉反馈
+- 清晰的信息层次
+
+### 3. 信息架构
+- 层次分明的信息展示
+- 重点突出的核心数据
+- 完整的补充说明
+
+## 数据说明
+
+### 评估依据
+- 基于个人收入指数评分
+- 使用10档分级评分体系
+- 数据准确可靠
+
+### 使用限制
+- 收入范围为税前月收入
+- 存在地区差异，仅供参考
+- 建议结合其他收入证明材料
+
+### 评分计算
+- 风险评分范围：30-100分
+- 100分对应30分风险评分
+- 1000分对应100分风险评分（最安全）
+- -1（未命中）对应30分风险评分
+
+## 业务价值
+
+### 1. 风险控制
+- 精确的消费能力评估降低信贷风险
+- 多维度风险分析提升决策质量
+- 智能化评分系统提高效率
+
+### 2. 客户分层
+- 基于消费能力的客户分级管理
+- 个性化服务策略制定
+- 精准的市场定位分析
+
+### 3. 合规要求
+- 符合金融监管要求
+- 数据来源权威可靠
+- 评估过程透明公开
+
+## 注意事项
+
+1. 确保传入正确的 `personincome_index_2.0` 值
+2. 组件会自动处理 -1 特殊值（未命中）
+3. 建议在网络良好的环境下使用
+4. 定期更新评估标准以保持准确性
+
+## 更新日志
+
+- v1.0.0 - 初始版本，支持基础消费能力等级评估功能
+- 专业的视觉展示效果
+- 完整的评分分档系统
+- 专业的风险分析功能
+

src/ui/JRZQ8B3C/index.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="card">
+    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
+
+      <!-- 标题区域 -->
+      <div class="flex items-center mb-4 p-4">
+        <div class="w-8 h-8 flex items-center justify-center mr-2">
+          <img src="@/assets/images/report/srpg.png" alt="个人消费能力等级" class="w-8 h-8 object-contain" />
+        </div>
+        <span class="font-bold text-gray-800">个人消费能力等级</span>
+      </div>
+
+      <div class="px-4 pb-4">
+        <!-- 月消费能力 -->
+        <div class="mb-6 text-center">
+          <div class="text-sm text-gray-600 mb-2">月消费能力</div>
+          <div class="text-3xl font-bold mb-3 text-[#333333]">
+            <span class="amount-number">{{ getConsumptionAmount(score) }}</span>
+            <span class="amount-unit">元/月</span>
+          </div>
+          <div class="level-bar" :style="getLevelBarBgStyle(score)">
+            <div class="level-fill" :style="getLevelBarStyle(score)"></div>
+          </div>
+          <div class="text-sm text-gray-600 mt-2">{{ getConsumptionDescription(score) }}</div>
+        </div>
+
+        <!-- 评估结果 -->
+        <div class="assessment-card">
+          <div class="flex items-center">
+            <div class="flex-1">
+              <div class="flex items-center justify-between mb-2">
+                <h4 class="font-semibold text-gray-800">评估结果</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getAssessmentDescription(score) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 市场对比 -->
+        <div class="assessment-card">
+          <div class="flex items-center mb-8">
+            <div class="flex-1">
+              <div class="flex items-center justify-between mb-2">
+                <h4 class="font-semibold text-gray-800">市场对比</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getMarketComparison(score) }}
+              </p>
+            </div>
+          </div>
+          <div class="comparison-indicator mt-4">
+            <div class="indicator-bar">
+              <div class="indicator-fill" :style="getIndicatorStyle(score)"></div>
+              <div class="indicator-marker" :style="getMarkerPosition(score)">
+                <img src="@/assets/images/report/srbq.png" alt="市场对比" class="marker-image" />
+                <div class="marker-dot"></div>
+              </div>
+            </div>
+            <div class="indicator-labels">
+              <span>低消费</span>
+              <span>高消费</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 消费能力 -->
+        <div class="assessment-card">
+          <div class="flex items-center">
+            <div class="flex-1">
+              <div class="mb-2">
+                <h4 class="font-semibold text-gray-800">消费能力</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getConsumptionCapacity(score) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRiskNotifier } from '@/composables/useRiskNotifier';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  apiId: {
+    type: String,
+    default: '',
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  notifyRiskStatus: {
+    type: Function,
+    default: () => { },
+  },
+})
+
+// 确保data是响应式的
+const data = computed(() => props.data || {})
+
+// 获取评分值（字符串转数字，处理-1特殊值）
+const score = computed(() => {
+  const value = data.value['personincome_index_2.0'];
+  if (!value || value === '-1') return -1;
+  const num = parseInt(value, 10);
+  return isNaN(num) ? -1 : num;
+})
+
+// 获取消费金额显示（直接显示金额区间）
+const getConsumptionAmount = (score) => {
+  if (score === -1) return '无法评估'
+
+  const amountMap = {
+    100: '2,000 - 4,000',
+    200: '2,000 - 4,000',
+    300: '4,000 - 6,000',
+    400: '6,000 - 8,000',
+    500: '8,000 - 10,000',
+    600: '10,000 - 12,000',
+    700: '12,000 - 15,000',
+    800: '15,000 - 20,000',
+    900: '20,000 - 25,000',
+    1000: '25,000+'
+  }
+  return amountMap[score] || '数据异常'
+}
+
+// 消费能力描述
+const getConsumptionDescription = (score) => {
+  if (score === -1) return '暂未发现消费能力信息'
+
+  const descriptionMap = {
+    100: '基础消费能力',
+    200: '基础消费能力',
+    300: '中等消费能力',
+    400: '中等消费能力',
+    500: '良好消费能力',
+    600: '良好消费能力',
+    700: '较强消费能力',
+    800: '较强消费能力',
+    900: '很强消费能力',
+    1000: '很强消费能力'
+  }
+  return descriptionMap[score] || '数据异常'
+}
+
+// 等级进度条样式
+const getLevelBarStyle = (score) => {
+  if (score === -1) {
+    return {
+      width: '0%',
+      background: '#94a3b8'
+    }
+  }
+
+  // 计算百分比：100分=10%, 200分=20%, ..., 1000分=100%
+  const percentage = (score / 1000) * 100
+
+  // 统一使用蓝色渐变
+  return {
+    width: percentage + '%',
+    background: 'linear-gradient(90deg, #3b82f6 0%, #2563eb 100%)'
+  }
+}
+
+// 进度条背景色样式
+const getLevelBarBgStyle = (score) => {
+  // 统一使用淡蓝色背景
+  return {
+    background: '#eff6ff'
+  }
+}
+
+// 评估描述
+const getAssessmentDescription = (score) => {
+  if (score === -1) {
+    return '根据个人消费能力等级分析，无法获取该用户的消费能力信息，无法进行评估。'
+  }
+
+  const descriptions = {
+    100: '根据个人消费能力等级分析，该用户月消费能力较低，消费水平有限。',
+    200: '根据个人消费能力等级分析，该用户月消费能力较低，消费水平有限。',
+    300: '根据个人消费能力等级分析，该用户月消费能力中等，消费水平良好。',
+    400: '根据个人消费能力等级分析，该用户月消费能力中等，消费水平良好。',
+    500: '根据个人消费能力等级分析，该用户月消费能力中等偏上，消费水平较强。',
+    600: '根据个人消费能力等级分析，该用户月消费能力中等偏上，消费水平较强。',
+    700: '根据个人消费能力等级分析，该用户月消费能力较高，消费水平很强。',
+    800: '根据个人消费能力等级分析，该用户月消费能力较高，消费水平很强。',
+    900: '根据个人消费能力等级分析，该用户月消费能力很高，消费水平顶级。',
+    1000: '根据个人消费能力等级分析，该用户月消费能力很高，消费水平顶级。'
+  }
+  return descriptions[score] || '数据异常，无法进行准确评估。'
+}
+
+// 市场对比分析
+const getMarketComparison = (score) => {
+  if (score === -1) {
+    return '无消费能力信息，无法与市场平均水平进行对比。'
+  }
+
+  const comparisons = {
+    100: '低于市场平均消费水平，处于消费分布的底部区间。',
+    200: '低于市场平均消费水平，处于消费分布的中下区间。',
+    300: '接近市场平均消费水平，处于消费分布的中等区间。',
+    400: '接近市场平均消费水平，处于消费分布的中等区间。',
+    500: '高于市场平均消费水平，处于消费分布的中上区间。',
+    600: '高于市场平均消费水平，处于消费分布的中上区间。',
+    700: '明显高于市场平均消费水平，处于消费分布的上层区间。',
+    800: '显著高于市场平均消费水平，处于消费分布的高层区间。',
+    900: '远高于市场平均消费水平，处于消费分布的顶部区间。',
+    1000: '超越市场绝大多数消费水平，处于消费分布的顶级区间。'
+  }
+  return comparisons[score] || '数据异常，无法进行市场对比。'
+}
+
+// 消费能力分析
+const getConsumptionCapacity = (score) => {
+  if (score === -1) {
+    return '缺乏消费能力信息，月消费能力存在不确定性，需要谨慎评估。'
+  }
+
+  const capacities = {
+    100: '月消费能力较低，消费水平有限，建议理性消费。',
+    200: '月消费能力较低，消费水平有限，建议理性消费。',
+    300: '月消费能力稳定，消费水平良好，具备一定的消费潜力。',
+    400: '月消费能力稳定，消费水平良好，具备一定的消费潜力。',
+    500: '月消费能力较高，消费水平较强，可以支持中等消费。',
+    600: '月消费能力较高，消费水平较强，可以支持中等消费。',
+    700: '月消费能力很强，消费水平很高，可以支持较高消费。',
+    800: '月消费能力很强，消费水平很高，可以支持较高消费。',
+    900: '月消费能力顶级，消费水平极高，可以支持高端消费。',
+    1000: '月消费能力顶级，消费水平极高，可以支持顶级消费。'
+  }
+  return capacities[score] || '数据异常，无法进行消费能力分析。'
+}
+
+// 指示器样式
+const getIndicatorStyle = (score) => {
+  if (score === -1) return { width: '0%', background: 'transparent' }
+
+  // 100分=0%, 1000分=100%
+  const percentage = ((score - 100) / 900) * 100
+  return {
+    width: percentage + '%',
+    background: `linear-gradient(90deg, #93c5fd 0%, #3b82f6 50%, #1d4ed8 100%)`
+  }
+}
+
+// 标记位置
+const getMarkerPosition = (score) => {
+  if (score === -1) return { left: '0%' }
+
+  // 100分=0%, 1000分=100%
+  const percentage = ((score - 100) / 900) * 100
+  return {
+    left: percentage + '%'
+  }
+}
+
+// 计算风险评分（0-100分，分数越高越安全）
+const riskScore = computed(() => {
+  if (score.value === -1) return 30 // 未命中，风险较高
+  // 100分对应30分，1000分对应100分
+  return 30 + ((score.value - 100) / 900) * 70
+});
+
+// 使用 composable 通知父组件风险评分
+useRiskNotifier(props, riskScore);
+
+// 暴露给父组件
+defineExpose({
+  riskScore
+});
+</script>
+
+<style scoped>
+/* 金额数字样式 */
+.amount-number {
+  color: #333333;
+  font-weight: bold;
+}
+
+.amount-unit {
+  font-size: 0.5em;
+  color: #999999;
+  margin-left: 4px;
+}
+
+/* 进度条 */
+.level-bar {
+  height: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.level-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: all 0.6s ease;
+}
+
+/* 评估卡片 */
+.assessment-card {
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  border: 1px solid;
+}
+
+/* 评估卡片统一样式 */
+.assessment-card {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+/* 对比指示器 */
+.comparison-indicator {
+  margin-top: 12px;
+}
+
+.indicator-bar {
+  position: relative;
+  height: 6px;
+  border-radius: 3px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #93c5fd 0%, #3b82f6 50%, #1d4ed8 100%);
+}
+
+.indicator-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: all 0.5s ease;
+  background: transparent;
+}
+
+.indicator-marker {
+  position: absolute;
+  top: -26px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.marker-image {
+  width: 24px;
+  margin-bottom: 0px;
+}
+
+.marker-dot {
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0px 4px 4px 0px #00000040;
+}
+
+.indicator-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: #9ca3af;
+}
+</style>

src/views/index.vue

@@ -58,7 +58,7 @@ function toInquire(name) {
         // 婚姻状况跳转到婚姻查询
         router.push(`/inquire/toc_Marriage`);
     } else if (name === "VehiclesUnderName") {
-        // 名下车辆跳转
+        // 车辆查询跳转
         router.push(`/inquire/toc_VehiclesUnderName`);
     } else if (name === "Promote") {
         // 推广报告跳转
@@ -121,9 +121,9 @@ function toPromote() {
                 <div class="min-h-18 gap-2 bg-white px-1">
                     <div class="mb-2 flex justify-around">
                         <img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_index_chacheliang.svg"
-                            alt="名下车辆图标" />
+                            alt="车辆查询图标" />
                         <div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
-                            名下车辆
+                            车辆查询
                         </div>
                     </div>
                     <div class="max-w-max text-left text-xs text-gray-600">