version temp3

COLOR_GUIDE.md

@@ -0,0 +1,195 @@
+# 颜色使用指南
+
+## 🎨 主题色系统
+
+本项目采用统一的颜色管理系统，支持主题切换和颜色规范化管理。
+
+### 主色调
+- **主色调**: `#5D7EEB` (蓝色)
+- **CSS变量**: `var(--color-primary)`
+- **Tailwind类名**: `bg-primary`, `text-primary`, `border-primary`
+
+## 📁 文件结构
+
+```
+src/assets/
+├── colors.css          # 统一颜色变量定义
+├── vant-theme.css      # Vant组件主题配置
+├── main.css           # 主样式文件（导入所有样式）
+└── base.css           # 基础样式
+
+tailwind.config.js     # Tailwind颜色配置
+```
+
+## 🎯 使用方式
+
+### 1. CSS变量方式（推荐）
+
+```css
+/* 在CSS中使用 */
+.my-button {
+  background-color: var(--color-primary);
+  color: var(--color-text-white);
+  border-color: var(--color-border-primary);
+}
+
+.my-text {
+  color: var(--color-text-secondary);
+}
+```
+
+### 2. Tailwind类名方式
+
+```html
+<!-- 在HTML中使用 -->
+<button class="bg-primary text-white border-primary">
+  主要按钮
+</button>
+
+<div class="text-gray-600 bg-gray-50">
+  文本内容
+</div>
+```
+
+### 3. Vue组件中使用
+
+```vue
+<template>
+  <div class="service-card" :style="{ backgroundColor: serviceColor }">
+    <h3 class="text-primary">{{ title }}</h3>
+    <p class="text-gray-600">{{ description }}</p>
+  </div>
+</template>
+
+<script setup>
+// 使用CSS变量
+const serviceColor = 'var(--color-service-personal)';
+</script>
+```
+
+## 🌈 颜色分类
+
+### 主题色系
+- `--color-primary`: 主色调 (#5D7EEB)
+- `--color-primary-50` 到 `--color-primary-900`: 主色调渐变
+- `--color-primary-light`: 浅色变体
+- `--color-primary-dark`: 深色变体
+
+### 语义化颜色
+- `--color-success`: 成功色 (#07c160)
+- `--color-warning`: 警告色 (#ff976a)
+- `--color-danger`: 危险色 (#ee0a24)
+- `--color-info`: 信息色 (#1989fa)
+
+### 文本颜色
+- `--color-text-primary`: 主要文本 (#323233)
+- `--color-text-secondary`: 次要文本 (#646566)
+- `--color-text-tertiary`: 三级文本 (#969799)
+- `--color-text-white`: 白色文本 (#ffffff)
+
+### 背景颜色
+- `--color-bg-primary`: 主要背景 (#ffffff)
+- `--color-bg-secondary`: 次要背景 (#fafafa)
+- `--color-bg-tertiary`: 三级背景 (#f8f8f8)
+
+### 业务特定颜色
+- `--color-service-personal`: 个人大数据服务色
+- `--color-service-company`: 小微企业服务色
+- `--color-service-loan`: 贷前背调服务色
+
+## 🔧 自定义主题
+
+### 修改主色调
+
+1. **更新CSS变量** (`src/assets/colors.css`)
+```css
+:root {
+  --color-primary: #your-new-color;
+  --color-primary-light: rgba(your-rgb, 0.1);
+  --color-primary-dark: rgba(your-rgb, 0.8);
+}
+```
+
+2. **更新Vant主题** (`src/assets/vant-theme.css`)
+```css
+:root {
+  --van-theme-primary: #your-new-color;
+}
+```
+
+3. **更新Tailwind配置** (`tailwind.config.js`)
+```js
+colors: {
+  primary: {
+    DEFAULT: '#your-new-color',
+    // ... 其他变体
+  }
+}
+```
+
+### 添加新颜色
+
+在 `src/assets/colors.css` 中添加：
+
+```css
+:root {
+  --color-custom: #your-color;
+  --color-custom-light: rgba(your-rgb, 0.1);
+}
+```
+
+## 📱 响应式颜色
+
+```css
+/* 移动端特定颜色 */
+@media (max-width: 768px) {
+  .text-primary-mobile { 
+    color: var(--color-primary) !important; 
+  }
+}
+```
+
+## 🌙 暗色主题
+
+项目支持暗色主题自动切换：
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #ffffff;
+    --color-bg-primary: #1a1a1a;
+    /* ... 其他暗色变量 */
+  }
+}
+```
+
+## ✅ 最佳实践
+
+### 推荐做法
+- ✅ 使用CSS变量而不是硬编码颜色
+- ✅ 使用语义化的颜色名称
+- ✅ 使用Tailwind类名进行快速开发
+- ✅ 保持颜色命名的一致性
+
+### 避免做法
+- ❌ 硬编码颜色值 (`color: #5D7EEB`)
+- ❌ 使用任意值 (`bg-[#5D7EEB]`)
+- ❌ 混合使用不同的颜色管理方式
+- ❌ 忽略颜色对比度和可访问性
+
+## 🔍 调试工具
+
+### 浏览器开发者工具
+1. 打开开发者工具
+2. 在Elements面板中查看CSS变量
+3. 在Computed面板中查看最终计算值
+
+### 颜色检查工具
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Coolors](https://coolors.co/) - 颜色搭配工具
+
+## 📚 相关文档
+
+- [VANT_THEME_CONFIG.md](./VANT_THEME_CONFIG.md) - Vant主题配置说明
+- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)
+- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

VANT_THEME_CONFIG.md

@@ -1,32 +1,39 @@
 # Vant 主题色配置说明
 
 ## 概述
-本项目已配置 Vant UI 组件库的主题色为 `#a22525`，所有相关组件都会使用这个颜色作为主色调。
+本项目已配置 Vant UI 组件库的主题色为 `#5D7EEB`，所有相关组件都会使用这个颜色作为主色调。
 
 ## 配置文件位置
 - 主题配置文件：`src/assets/vant-theme.css`
+- 统一颜色变量：`src/assets/colors.css`
 - 主样式文件：`src/assets/main.css`（已导入主题配置）
+- Tailwind配置：`tailwind.config.js`
 
 ## 配置方法
 
 ### 方法一：CSS 变量覆盖（推荐）
 ```css
 :root {
-  --van-primary-color: #a22525;
+  --van-primary-color: #5D7EEB;
 }
 ```
 
 ### 方法二：直接覆盖组件样式
 ```css
 .van-button--primary {
-  background-color: #a22525 !important;
-  border-color: #a22525 !important;
+  background-color: #5D7EEB !important;
+  border-color: #5D7EEB !important;
 }
 ```
 
+### 方法三：使用Tailwind类名
+```html
+<button class="bg-primary text-white">按钮</button>
+```
+
 ## 已配置的组件
 
-以下组件已经配置为主题色 `#a22525`：
+以下组件已经配置为主题色 `#5D7EEB`：
 
 ### 基础组件
 - ✅ 按钮 (Button) - 主要按钮
@@ -80,15 +87,49 @@
 如果需要修改主题色，只需要：
 
 1. 修改 `src/assets/vant-theme.css` 文件中的颜色值
-2. 将所有的 `#a22525` 替换为新的颜色值
-3. 同时更新 `theme` 文件中的颜色值
+2. 修改 `src/assets/colors.css` 文件中的 `--color-primary` 变量
+3. 修改 `tailwind.config.js` 中的 primary 颜色配置
+4. 将所有的 `#5D7EEB` 替换为新的颜色值
+
+## 颜色管理规范
+
+### 1. 使用CSS变量
+```css
+/* 推荐：使用CSS变量 */
+color: var(--color-primary);
+background-color: var(--color-bg-primary);
+
+/* 不推荐：硬编码颜色 */
+color: #5D7EEB;
+background-color: #ffffff;
+```
+
+### 2. 使用Tailwind类名
+```html
+<!-- 推荐：使用Tailwind类名 -->
+<div class="bg-primary text-white">内容</div>
+
+<!-- 不推荐：使用任意值 -->
+<div class="bg-[#5D7EEB] text-[#ffffff]">内容</div>
+```
+
+### 3. 颜色命名规范
+- `--color-primary`: 主色调
+- `--color-success`: 成功色
+- `--color-warning`: 警告色
+- `--color-danger`: 危险色
+- `--color-text-*`: 文本颜色
+- `--color-bg-*`: 背景颜色
+- `--color-border-*`: 边框颜色
 
 ## 注意事项
 
 1. 使用了 `!important` 来确保样式优先级
-2. 配置了激活状态的半透明效果 `rgba(162, 85, 37, 0.8)`
+2. 配置了激活状态的半透明效果 `rgba(93, 126, 235, 0.8)`
 3. 部分组件配置了悬停和聚焦状态的颜色
 4. 所有配置都基于 Vant 4.x 版本
+5. 支持暗色主题自动切换
+6. 提供了完整的颜色变量系统，便于维护和扩展
 
 ## 参考文档
 

src/assets/colors.css

@@ -0,0 +1,211 @@
+/* 
+ * 统一颜色变量管理文件
+ * 用于规范化项目中的所有颜色使用
+ * 支持主题切换和颜色统一管理
+ */
+
+:root {
+    /* ===== 主题色系 ===== */
+    --color-primary: #5d7eeb;
+    --color-primary-50: #f0f3ff;
+    --color-primary-100: #e1e8ff;
+    --color-primary-200: #c3d1ff;
+    --color-primary-300: #a5baff;
+    --color-primary-400: #87a3ff;
+    --color-primary-500: #5d7eeb;
+    --color-primary-600: #4a63bc;
+    --color-primary-700: #38488d;
+    --color-primary-800: #252d5e;
+    --color-primary-900: #13122f;
+
+    /* 主题色透明度变体 */
+    --color-primary-light: rgba(93, 126, 235, 0.1);
+    --color-primary-medium: rgba(93, 126, 235, 0.15);
+    --color-primary-dark: rgba(93, 126, 235, 0.8);
+
+    /* ===== 语义化颜色 ===== */
+    --color-success: #07c160;
+    --color-success-50: #f0f9f0;
+    --color-success-100: #e1f5e1;
+    --color-success-200: #c3ebc3;
+    --color-success-300: #a5e1a5;
+    --color-success-400: #87d787;
+    --color-success-500: #07c160;
+    --color-success-600: #059a4c;
+    --color-success-700: #047338;
+    --color-success-800: #024c24;
+    --color-success-900: #012510;
+    --color-success-light: rgba(7, 193, 96, 0.1);
+    --color-success-dark: rgba(7, 193, 96, 0.8);
+
+    --color-warning: #ff976a;
+    --color-warning-50: #fff5f0;
+    --color-warning-100: #ffebe1;
+    --color-warning-200: #ffd7c3;
+    --color-warning-300: #ffc3a5;
+    --color-warning-400: #ffaf87;
+    --color-warning-500: #ff976a;
+    --color-warning-600: #cc7955;
+    --color-warning-700: #995b40;
+    --color-warning-800: #663d2a;
+    --color-warning-900: #331f15;
+    --color-warning-light: rgba(255, 151, 106, 0.1);
+    --color-warning-dark: rgba(255, 151, 106, 0.8);
+
+    --color-danger: #ee0a24;
+    --color-danger-light: rgba(238, 10, 36, 0.1);
+    --color-danger-dark: rgba(238, 10, 36, 0.8);
+
+    --color-info: #1989fa;
+    --color-info-light: rgba(25, 137, 250, 0.1);
+    --color-info-dark: rgba(25, 137, 250, 0.8);
+
+    /* ===== 中性色系 ===== */
+    --color-gray-50: #fafafa;
+    --color-gray-100: #f5f5f5;
+    --color-gray-200: #e5e5e5;
+    --color-gray-300: #d4d4d4;
+    --color-gray-400: #a3a3a3;
+    --color-gray-500: #737373;
+    --color-gray-600: #525252;
+    --color-gray-700: #404040;
+    --color-gray-800: #262626;
+    --color-gray-900: #171717;
+
+    /* ===== 文本颜色 ===== */
+    --color-text-primary: #323233;
+    --color-text-secondary: #646566;
+    --color-text-tertiary: #969799;
+    --color-text-quaternary: #c8c9cc;
+    --color-text-disabled: #c8c9cc;
+    --color-text-white: #ffffff;
+
+    /* ===== 背景颜色 ===== */
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #fafafa;
+    --color-bg-tertiary: #f8f8f8;
+    --color-bg-quaternary: #f2f3f5;
+    --color-bg-overlay: rgba(0, 0, 0, 0.5);
+    --color-bg-mask: rgba(0, 0, 0, 0.8);
+
+    /* ===== 边框颜色 ===== */
+    --color-border-primary: #ebedf0;
+    --color-border-secondary: #f2f3f5;
+    --color-border-tertiary: #dcdee0;
+    --color-border-focus: var(--color-primary);
+
+    /* ===== 状态颜色 ===== */
+    --color-active: #f2f3f5;
+    --color-hover: rgba(0, 0, 0, 0.05);
+    --color-focus: var(--color-primary-light);
+
+    /* ===== 阴影颜色 ===== */
+    --color-shadow-light: rgba(0, 0, 0, 0.1);
+    --color-shadow-medium: rgba(0, 0, 0, 0.15);
+    --color-shadow-dark: rgba(0, 0, 0, 0.2);
+
+    /* ===== 业务特定颜色 ===== */
+    --color-service-personal: #5d7eeb; /* 个人大数据 */
+    --color-service-company: #6b9df9; /* 小微企业 */
+    --color-service-loan: #e1a0e4; /* 贷前背调 */
+
+    /* ===== 渐变色彩 ===== */
+    --gradient-primary: linear-gradient(
+        135deg,
+        var(--color-primary-400),
+        var(--color-primary-600)
+    );
+    --gradient-success: linear-gradient(
+        135deg,
+        var(--color-success),
+        var(--color-success-dark)
+    );
+    --gradient-warning: linear-gradient(
+        135deg,
+        var(--color-warning),
+        var(--color-warning-dark)
+    );
+    --gradient-danger: linear-gradient(
+        135deg,
+        var(--color-danger),
+        var(--color-danger-dark)
+    );
+}
+
+/* ===== 暗色主题支持 ===== */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text-primary: #ffffff;
+        --color-text-secondary: #e5e5e5;
+        --color-text-tertiary: #a3a3a3;
+        --color-text-quaternary: #737373;
+
+        --color-bg-primary: #1a1a1a;
+        --color-bg-secondary: #262626;
+        --color-bg-tertiary: #404040;
+        --color-bg-quaternary: #525252;
+
+        --color-border-primary: #404040;
+        --color-border-secondary: #525252;
+        --color-border-tertiary: #737373;
+    }
+}
+
+/* ===== 工具类 ===== */
+.text-primary {
+    color: var(--color-primary) !important;
+}
+.text-success {
+    color: var(--color-success) !important;
+}
+.text-warning {
+    color: var(--color-warning) !important;
+}
+.text-danger {
+    color: var(--color-danger) !important;
+}
+.text-info {
+    color: var(--color-info) !important;
+}
+
+.bg-primary {
+    background-color: var(--color-primary) !important;
+}
+.bg-success {
+    background-color: var(--color-success) !important;
+}
+.bg-warning {
+    background-color: var(--color-warning) !important;
+}
+.bg-danger {
+    background-color: var(--color-danger) !important;
+}
+.bg-info {
+    background-color: var(--color-info) !important;
+}
+
+.border-primary {
+    border-color: var(--color-primary) !important;
+}
+.border-success {
+    border-color: var(--color-success) !important;
+}
+.border-warning {
+    border-color: var(--color-warning) !important;
+}
+.border-danger {
+    border-color: var(--color-danger) !important;
+}
+.border-info {
+    border-color: var(--color-info) !important;
+}
+
+/* ===== 响应式颜色工具类 ===== */
+@media (max-width: 768px) {
+    .text-primary-mobile {
+        color: var(--color-primary) !important;
+    }
+    .bg-primary-mobile {
+        background-color: var(--color-primary) !important;
+    }
+}

src/assets/main.css

@@ -1,4 +1,5 @@
 @import "./base.css";
+@import "./colors.css";
 @import "./nprogress.css";
 @import "./vant-theme.css";
 @tailwind base;

src/assets/nprogress.css

@@ -1,10 +1,10 @@
 /* 进度条颜色 */
 #nprogress .bar {
-    background: #a22525; /* 主题色 */
+    background: var(--color-primary); /* 主题色 */
     height: 4px; /* 修改高度 */
 }
 
 /* 圆圈颜色 */
 #nprogress .peg {
-    box-shadow: 0 0 10px #a22525, 0 0 5px #a22525;
+    box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary);
 }

src/assets/vant-theme.css

@@ -2,87 +2,87 @@
 
 /* 定义主题色变量 */
 :root {
-  /* 主色调 - 可以根据需要修改这个变量来改变整个主题 */
-  --van-theme-primary: #a22525;
-  --van-theme-primary-light: rgba(162, 37, 37, 0.1);
-  --van-theme-primary-dark: rgba(162, 37, 37, 0.8);
-  --van-theme-primary-alpha: rgba(162, 37, 37, 0.15);
-  
-  /* 覆盖 Vant 默认的主色调变量 */
-  --van-primary-color: var(--van-theme-primary);
-  --van-success-color: #07c160;
-  --van-warning-color: #ff976a;
-  --van-danger-color: #ee0a24;
-  
-  /* 文本颜色 */
-  --van-text-color: #323233;
-  --van-text-color-2: #646566;
-  --van-text-color-3: #969799;
-  
-  /* 背景色 */
-  --van-background-color: #ffffff;
-  --van-background-color-light: #fafafa;
-  
-  /* 边框色 */
-  --van-border-color: #ebedf0;
-  
-  /* 活跃状态颜色 */
-  --van-active-color: #f2f3f5;
+    /* 主色调 - 可以根据需要修改这个变量来改变整个主题 */
+    --van-theme-primary: #5d7eeb;
+    --van-theme-primary-light: rgba(93, 126, 235, 0.1);
+    --van-theme-primary-dark: rgba(93, 126, 235, 0.8);
+    --van-theme-primary-alpha: rgba(93, 126, 235, 0.15);
+
+    /* 覆盖 Vant 默认的主色调变量 */
+    --van-primary-color: var(--van-theme-primary);
+    --van-success-color: #07c160;
+    --van-warning-color: #ff976a;
+    --van-danger-color: #ee0a24;
+
+    /* 文本颜色 */
+    --van-text-color: #323233;
+    --van-text-color-2: #646566;
+    --van-text-color-3: #969799;
+
+    /* 背景色 */
+    --van-background-color: #ffffff;
+    --van-background-color-light: #fafafa;
+
+    /* 边框色 */
+    --van-border-color: #ebedf0;
+
+    /* 活跃状态颜色 */
+    --van-active-color: #f2f3f5;
 }
 
 /* 使用 CSS 变量覆盖组件样式 */
 
 /* 按钮组件 */
 .van-button--primary {
-  background-color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 .van-button--primary:active {
-  background-color: var(--van-theme-primary-dark) !important;
+    background-color: var(--van-theme-primary-dark) !important;
 }
 
 /* 导航栏组件 */
 .van-nav-bar {
-  background-color: #ffffff !important;
+    background-color: #ffffff !important;
 }
 
 .van-nav-bar__title {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-nav-bar__left,
 .van-nav-bar__right {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-nav-bar__arrow {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 .van-nav-bar__text {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 /* 标签栏组件 */
 .van-tabbar-item--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 标签页组件 */
 .van-tabs__line {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 .van-tab--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-tabs__wrap {
-  background-color: #ffffff !important;
+    background-color: #ffffff !important;
 }
 
 /* 开关组件 */
 .van-switch--on {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 /* 复选框组件 */
@@ -93,342 +93,342 @@
 
 /* 滑动条组件 */
 .van-slider__bar {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 .van-slider__button {
-  background-color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 进度条组件 */
 .van-progress__portion {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 /* 评分组件 */
 .van-rate__icon--full {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 步进器组件 */
 .van-stepper__plus,
 .van-stepper__minus {
-  color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 步骤条组件 */
 .van-steps__item--active .van-steps__item__circle {
-  background-color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 标签组件 */
 .van-tag--primary {
-  background-color: var(--van-theme-primary) !important;
-  color: #ffffff !important;
+    background-color: var(--van-theme-primary) !important;
+    color: #ffffff !important;
 }
 
 /* 徽章组件 */
 .van-badge--primary {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 /* 通知栏组件 */
 .van-notice-bar--primary {
-  background-color: var(--van-theme-primary-light) !important;
-  color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary-light) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 轮播图指示器 */
 .van-swipe__indicator--active {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 /* 加载组件 */
 .van-loading__spinner {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 弹窗组件 */
 .van-popup {
-  background-color: var(--van-background-color) !important;
+    background-color: var(--van-background-color) !important;
 }
 
 /* 选择器组件 */
 .van-picker {
-  background-color: var(--van-background-color) !important;
+    background-color: var(--van-background-color) !important;
 }
 
 .van-picker__toolbar {
-  background-color: var(--van-background-color) !important;
+    background-color: var(--van-background-color) !important;
 }
 
 .van-picker__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-picker__cancel {
-  color: var(--van-text-color-2) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 日期选择器组件 */
 .van-date-picker {
-  background-color: var(--van-background-color) !important;
+    background-color: var(--van-background-color) !important;
 }
 
 .van-date-picker__toolbar {
-  background-color: var(--van-background-color) !important;
+    background-color: var(--van-background-color) !important;
 }
 
 .van-date-picker__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-date-picker__cancel {
-  color: var(--van-text-color-2) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 字段组件 */
 .van-field__control {
-  color: var(--van-text-color) !important;
+    color: var(--van-text-color) !important;
 }
 
 .van-field__placeholder {
-  color: var(--van-text-color-3) !important;
+    color: var(--van-text-color-3) !important;
 }
 
 .van-field__right-icon {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 动作面板组件 */
 .van-action-sheet__item--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 选择器组件 */
 .van-picker__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 日期选择器组件 */
 .van-datetime-picker__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 地区选择器组件 */
 .van-area__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 搜索组件 */
 .van-search__action {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 日历组件 */
 .van-calendar__day--selected {
-  background-color: var(--van-theme-primary) !important;
-  color: #ffffff !important;
+    background-color: var(--van-theme-primary) !important;
+    color: #ffffff !important;
 }
 
 .van-calendar__day--start,
 .van-calendar__day--end {
-  background-color: var(--van-theme-primary) !important;
-  color: #ffffff !important;
+    background-color: var(--van-theme-primary) !important;
+    color: #ffffff !important;
 }
 
 /* 时间选择器组件 */
 .van-time-picker__confirm {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 商品卡片组件 */
 .van-card__price {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 优惠券组件 */
 .van-coupon__discount {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 地址编辑组件 */
 .van-address-edit__default {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 商品规格选择器组件 */
 .van-sku-item--active {
-  color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 购物车组件 */
 .van-submit-bar__price {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 提交订单栏组件 */
 .van-submit-bar__button--primary {
-  background-color: var(--van-theme-primary) !important;
+    background-color: var(--van-theme-primary) !important;
 }
 
 /* 侧边栏组件 */
 .van-sidebar-item--select {
-  color: var(--van-theme-primary) !important;
-  border-color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 树形选择器组件 */
 .van-tree-select__item--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 联系人列表组件 */
 .van-contact-list__item--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 密码输入框组件 */
 .van-password-input__item--focus {
-  border-color: var(--van-theme-primary) !important;
+    border-color: var(--van-theme-primary) !important;
 }
 
 /* 下拉菜单组件 */
 .van-dropdown-menu__title--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 .van-dropdown-menu__option--active {
-  color: var(--van-theme-primary) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 索引组件 */
 .van-index-anchor--active {
-  background-color: var(--van-background-color) !important;
-  color: var(--van-theme-primary) !important;
+    background-color: var(--van-background-color) !important;
+    color: var(--van-theme-primary) !important;
 }
 
 /* 水印组件 */
 .van-water-mark {
-  color: var(--van-theme-primary-alpha) !important;
+    color: var(--van-theme-primary-alpha) !important;
 }
 
 /* 分割线组件 */
 .van-divider {
-  color: var(--van-text-color-3) !important;
+    color: var(--van-text-color-3) !important;
 }
 
 /* 分享组件 */
 .van-share-sheet__option-name {
-  color: var(--van-text-color) !important;
+    color: var(--van-text-color) !important;
 }
 
 /* 骨架屏组件 */
 .van-skeleton__content {
-  background-color: var(--van-background-color-light) !important;
+    background-color: var(--van-background-color-light) !important;
 }
 
 /* 空状态组件 */
 .van-empty__description {
-  color: var(--van-text-color-2) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 倒计时组件 */
 .van-count-down {
-  color: var(--van-text-color) !important;
+    color: var(--van-text-color) !important;
 }
 
 /* 签名组件 */
 .van-signature {
-  background-color: var(--van-background-color) !important;
-  border-color: var(--van-border-color) !important;
+    background-color: var(--van-background-color) !important;
+    border-color: var(--van-border-color) !important;
 }
 
 /* 上传组件 */
 .van-uploader__upload {
-  background-color: var(--van-background-color-light) !important;
+    background-color: var(--van-background-color-light) !important;
 }
 
 /* 列表组件 */
 .van-list__loading,
 .van-list__finished-text {
-  color: var(--van-text-color-2) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 下拉刷新组件 */
 .van-pull-refresh__text {
-  color: var(--van-text-color-2) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 懒加载组件 */
 .van-lazyload {
-  background-color: var(--van-background-color-light) !important;
+    background-color: var(--van-background-color-light) !important;
 }
 
 /* 图片预览组件 */
 .van-image-preview__index {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 /* 索引组件 */
 .van-index-anchor {
-  background-color: var(--van-background-color-light) !important;
-  color: var(--van-text-color-2) !important;
+    background-color: var(--van-background-color-light) !important;
+    color: var(--van-text-color-2) !important;
 }
 
 /* 弹出层遮罩 */
 .van-overlay {
-  background-color: rgba(0, 0, 0, 0.5) !important;
+    background-color: rgba(0, 0, 0, 0.5) !important;
 }
 
 /* Toast 组件 */
 .van-toast {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: #ffffff !important;
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
 }
 
 .van-toast--success {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: #ffffff !important;
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
 }
 
 .van-toast--fail {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: #ffffff !important;
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
 }
 
 .van-toast--loading {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: #ffffff !important;
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
 }
 
 .van-toast__text {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 .van-toast__icon {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 /* Loading Toast 特殊处理 */
 .van-loading-toast {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  color: #ffffff !important;
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
 }
 
 .van-loading-toast .van-loading__spinner {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 .van-loading-toast .van-toast__text {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 /* 数字键盘组件 */
 .van-number-keyboard__key--active {
-  background-color: var(--van-active-color) !important;
-}
+    background-color: var(--van-active-color) !important;
+}

src/auto-imports.d.ts

@@ -194,6 +194,7 @@ declare global {
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useInquireForm: typeof import('./composables/useInquireForm.js')['useInquireForm']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']

src/components/BaseReport.vue

@@ -13,11 +13,17 @@ const loadProductBackground = async (productType) => {
     try {
         switch (productType) {
             case 'companyinfo':
-                return (await import("@/assets/images/report/xwqy_report_bg.png")).default;
+                return (await import("@/assets/images/report/xwqy_report_bg.jpg")).default;
             case 'preloanbackgroundcheck':
-                return (await import("@/assets/images/report/dqfx_report_bg.png")).default;
+                return (await import("@/assets/images/report/dqfx_report_bg.jpg")).default;
             case 'personalData':
-                return (await import("@/assets/images/report/grdsj_report_bg.png")).default;
+                return (await import("@/assets/images/report/grdsj_report_bg.jpg")).default;
+            case 'marriage':
+                return (await import("@/assets/images/report/marriage_report_bg.jpg")).default;
+            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;
             default:
                 return null;
         }
@@ -320,10 +326,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")),
@@ -409,10 +415,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: "贷款风险评估",

src/components/LTitle.vue

@@ -5,15 +5,10 @@ const props = defineProps({
 })
 
 const titleClass = computed(() => {
-  // 统一使用主题色渐变
-  return 'bg-gradient-to-r from-red-600 via-red-500 to-red-700'
+  // 统一使用主题色
+  return 'bg-primary'
 })
 
-// 分割线颜色与背景对应
-const lineClass = computed(() => {
-  // 统一使用主题色渐变
-  return 'bg-gradient-to-r from-red-600 via-red-500 to-red-700'
-})
 </script>
 
 <template>
@@ -26,11 +21,6 @@ const lineClass = computed(() => {
     <!-- 左上角修饰 -->
     <div
       class="absolute left-0 top-0 h-4 w-4 transform rounded-full bg-white shadow-md -translate-x-2 -translate-y-2" />
-
-    <!-- 分割线 -->
-    <div class="relative mt-1.5">
-      <div :class="lineClass" class="h-[2px] w-full rounded" />
-    </div>
   </div>
 </template>
 

src/components/RealNameAuthDialog.vue

@@ -245,7 +245,7 @@ function toPrivacyPolicy() {
                             <!-- 协议同意框 -->
                             <div class="flex items-start gap-2">
                                 <input type="checkbox" v-model="isAgreed"
-                                    class="mt-0.5 sm:mt-1 flex-shrink-0 accent-[#A22525]" />
+                                    class="mt-0.5 sm:mt-1 flex-shrink-0 accent-primary" />
                                 <span class="text-xs sm:text-sm leading-relaxed"
                                     style="color: var(--van-text-color-2);">
                                     我已阅读并同意

src/components/SectionTitle.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex items-center">
         <div class="flex items-center gap-2">
-            <div class="w-1.5 h-5 bg-[#A22525] rounded-xl"></div>
+            <div class="w-1.5 h-5 bg-primary rounded-xl"></div>
             <div class="text-lg text-gray-800">{{ title }}</div>
         </div>
     </div>

src/components/ShareReportButton.vue

@@ -119,7 +119,7 @@ const handleShare = async () => {
 </script>
 
 <template>
-    <div class="bg-[#A22525] border border-[#A22525] rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-[#8A1F1F] transition-colors duration-200"
+    <div class="bg-primary border border-primary rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-primary-600 transition-colors duration-200"
         :class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="handleShare">
         <img src="@/assets/images/report/fx.png" alt="分享" class="w-4 h-4 mr-1" />
         <span class="text-white text-sm font-medium">

src/components/TitleBanner.vue

@@ -10,10 +10,15 @@
 
 <style scoped>
 .title-banner {
-    @apply mx-auto mt-2 w-64 py-2 text-center text-white;
-    background-image: url('@/assets/images/report/title.png');
-    background-size: auto 100%;
-    background-position: center;
-    background-repeat: no-repeat;
+    @apply mx-auto mt-2 w-64 py-2 text-center text-white font-bold text-lg relative;
+    background: var(--color-primary);
+    border-radius: 12px;
+    border: 1px solid var(--color-primary-300);
+    background-image:
+        linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0;
+    position: relative;
+    overflow: hidden;
 }
 </style>

src/layouts/HomeLayout.vue

@@ -130,7 +130,7 @@ const toComplaint = () => {
     position: fixed;
     bottom: 6rem;
     right: 1rem;
-    background: #A22525;
+    background: #ff6b6b;
     border-radius: 1.5rem;
     padding: 0.25rem 1rem;
     color: white;
@@ -140,6 +140,7 @@ const toComplaint = () => {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     z-index: 2000;
 }
+
 .complaint-button i {
     margin-right: 0.5rem;
 }

src/layouts/PageLayout.vue

@@ -1,17 +1,21 @@
 <template>
-    <van-nav-bar fixed :border="false" placeholder :title="pageTitle" left-text="返回" left-arrow
-        @click-left="onClickLeft" />
-    <router-view />
+    <div class="bg-[#FFFAFA] min-h-screen">
+        <van-nav-bar fixed :border="false" placeholder :title="pageTitle" left-arrow @click-left="onClickLeft"
+            z-index="9999" />
+        <router-view />
+    </div>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
 const route = useRoute();
 const pageTitle = ref(""); // 用来保存页面标题
+
 const onClickLeft = () => {
+    // 使用 router 的返回功能
     router.back();
 };
 onMounted(() => { });

src/ui/CDWBG8B4D/components/Identity.vue

@@ -90,7 +90,7 @@
         </div>
         <div class="flex items-center mb-3">
           <div class="w-8 h-8 flex items-center justify-center mr-3">
-            <img src="@/assets/images/report/ip.png" alt="归属地风险" class="w-8 h-8 object-contain" />
+            <img src="@/assets/images/report/gsdfx.png" alt="归属地风险" class="w-8 h-8 object-contain" />
           </div>
           <span class="font-bold text-gray-800">归属地风险</span>
         </div>

src/ui/CDWBG8B4D/components/LeasingRiskSection.vue

@@ -24,8 +24,8 @@
             <div class="loan-evaluation-wrap">
               <!-- 标签页 -->
               <div class="mb-3">
-                <van-tabs v-model:active="activeInstitutionPeriod" line-width="20" line-height="2" color="#a22525"
-                  class="loan-evaluation-tabs">
+                <van-tabs v-model:active="activeInstitutionPeriod" line-width="20" line-height="2"
+                  color="var(--color-primary)" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -64,8 +64,8 @@
             <div class="loan-evaluation-wrap">
               <!-- 标签页 -->
               <div class="mb-3">
-                <van-tabs v-model:active="activePlatformPeriod" line-width="20" line-height="2" color="#a22525"
-                  class="loan-evaluation-tabs">
+                <van-tabs v-model:active="activePlatformPeriod" line-width="20" line-height="2"
+                  color="var(--color-primary)" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>

src/ui/CDWBG8B4D/components/LoanEvaluationSection.vue

@@ -37,7 +37,7 @@
               <!-- 标签页 -->
               <div class="mb-3">
                 <van-tabs v-model:active="activePeriods[`organ-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`organ-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`organ-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -81,7 +81,7 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeCustomerPeriods[`customer-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`customer-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`customer-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -101,7 +101,7 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeCustomerCountPeriods[`count-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`count-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`count-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -144,7 +144,7 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeBusinessPeriods[`business-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`business-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`business-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -164,7 +164,8 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeBusinessCountPeriods[`business-count-${index}`]" line-width="20"
-                  line-height="2" color="#a22525" :key="`business-count-${index}`" class="loan-evaluation-tabs">
+                  line-height="2" color="var(--color-primary)" :key="`business-count-${index}`"
+                  class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -206,7 +207,7 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeTimePeriods[`time-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`time-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`time-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>
@@ -225,7 +226,7 @@
             <div class="loan-evaluation-wrap">
               <div class="mb-3">
                 <van-tabs v-model:active="activeTimeCountPeriods[`time-count-${index}`]" line-width="20" line-height="2"
-                  color="#a22525" :key="`time-count-${index}`" class="loan-evaluation-tabs">
+                  color="var(--color-primary)" :key="`time-count-${index}`" class="loan-evaluation-tabs">
                   <van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
                 </van-tabs>
               </div>

src/ui/CDWBG8B4D/components/OverdueRiskSection.vue

@@ -11,7 +11,7 @@
           </div>
           <div class="flex items-center mb-3">
             <div class="w-8 h-8 flex items-center justify-center mr-2">
-              <img src="@/assets/images/report/yqfx.png" alt="逾期风险概览" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/yqfxgl.png" alt="逾期风险概览" class="w-8 h-8 object-contain" />
             </div>
             <span class="font-bold text-gray-800">逾期风险概览</span>
           </div>
@@ -53,7 +53,7 @@
           </div>
           <div class="flex items-center mb-3">
             <div class="w-8 h-8 flex items-center justify-center mr-2">
-              <img src="@/assets/images/report/yqfx.png" alt="逾期时间分布" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/yqsjfb.png" alt="逾期时间分布" class="w-8 h-8 object-contain" />
             </div>
             <span class="font-bold text-gray-800">逾期时间分布</span>
           </div>

src/ui/CDWBG8B4D/components/RiskWarning.vue

@@ -11,7 +11,7 @@
         </div>
         <div class="flex items-center mb-3">
           <div class="w-8 h-8 flex items-center justify-center mr-3">
-            <img src="@/assets/images/report/gazdry.png" alt="公安重点人员核验产品" class="w-8 h-8 object-contain" />
+            <img src="@/assets/images/report/gazdryhycp.png" alt="公安重点人员核验产品" class="w-8 h-8 object-contain" />
           </div>
           <span class="font-bold text-gray-800">公安重点人员核验产品</span>
         </div>
@@ -128,7 +128,7 @@
         </div>
         <div class="flex items-center mb-3">
           <div class="w-8 h-8 flex items-center justify-center mr-3">
-            <img src="@/assets/images/report/sdsz.png" alt="涉赌涉诈核验产品" class="w-8 h-8 object-contain" />
+            <img src="@/assets/images/report/sdszhycp.png" alt="涉赌涉诈核验产品" class="w-8 h-8 object-contain" />
           </div>
           <span class="font-bold text-gray-800">涉赌涉诈核验产品</span>
         </div>

src/ui/CDWBG8B4D/components/RiskWarningTab.vue

@@ -6,7 +6,7 @@
         <div class="flex items-center justify-between mb-3">
           <div class="flex items-center">
             <div class="w-12 h-12">
-              <img src="@/assets/images/report/fqzpf.png" alt="风险总览" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/fxzl.png" alt="风险总览" class="w-8 h-8 object-contain" />
             </div>
             <div>
               <h2 class="text-lg font-bold text-gray-800">风险总览</h2>
@@ -95,7 +95,7 @@
           </div>
           <div class="flex items-center mb-3">
             <div class="w-12 h-12">
-              <img src="@/assets/images/report/fqzpf.png" alt="运营商核验" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/yyshy.png" alt="运营商核验" class="w-8 h-8 object-contain" />
             </div>
             <div class="flex-1">
               <h4 class="font-bold text-lg text-[#333333]">运营商核验</h4>
@@ -114,7 +114,7 @@
               </div>
               <div class="flex-1">
                 <div class="font-bold text-[#333333]">{{ getOperatorVerificationRisks()[0]?.description || '手机在网状态为风险号'
-                  }}</div>
+                }}</div>
                 <div class="text-sm text-[#999999]">{{ getOperatorVerificationRisks()[0]?.detail || '手机号状态异常,存在风险' }}
                 </div>
               </div>
@@ -142,7 +142,7 @@
           </div>
           <div class="flex items-center mb-3">
             <div class="w-10 h-10">
-              <img src="@/assets/images/report/gazdry.png" alt="公安重点人员核验" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/gazdryhy.png" alt="公安重点人员核验" class="w-8 h-8 object-contain" />
             </div>
             <div class="flex-1">
               <h4 class="font-bold text-lg text-[#333333]">公安重点人员核验</h4>
@@ -349,7 +349,7 @@
           </div>
           <div class="flex items-center mb-3">
             <div class="w-10 h-10">
-              <img src="@/assets/images/report/zlfx.png" alt="租赁风险评估" class="w-8 h-8 object-contain" />
+              <img src="@/assets/images/report/zlfxpg.png" alt="租赁风险评估" class="w-8 h-8 object-contain" />
             </div>
             <div class="flex-1">
               <h4 class="font-bold text-lg text-[#333333]">租赁风险评估</h4>

src/ui/CFLXG0V4B/components/StatisticsOverview.vue

@@ -234,7 +234,7 @@ const caseTypeChartOption = computed(() => {
           return {
             value: value === 0 ? 0.1 : value, // 0值显示为0.1，让柱子能显示一个小尖尖
             itemStyle: {
-              color: '#A22525',
+              color: 'var(--color-primary)',
               borderRadius: [0, 4, 4, 0],
             },
           }

src/ui/CJRZQ5E9F/components/LoanBehaviorAnalysis.vue

@@ -123,8 +123,8 @@
               <div class="loan-evaluation-wrap">
                 <!-- 标签页 -->
                 <div class="mb-3">
-                  <van-tabs v-model:active="activeTimePeriod" line-width="20" line-height="2" color="#a22525"
-                    class="loan-evaluation-tabs">
+                  <van-tabs v-model:active="activeTimePeriod" line-width="20" line-height="2"
+                    color="var(--color-primary)" class="loan-evaluation-tabs">
                     <van-tab v-for="period in timePeriods" :key="period.name" :name="period.name"
                       :title="period.name" />
                   </van-tabs>
@@ -167,14 +167,14 @@
                     <div class="flex justify-between items-center" v-if="currentPeriod.amounts">
                       <span class="text-sm text-gray-600">成功金额</span>
                       <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentPeriod.amounts.success)
-                        }}</span>
+                      }}</span>
                     </div>
 
                     <!-- 失败金额 -->
                     <div class="flex justify-between items-center" v-if="currentPeriod.amounts">
                       <span class="text-sm text-gray-600">失败金额</span>
                       <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentPeriod.amounts.failure)
-                        }}</span>
+                      }}</span>
                     </div>
                   </div>
                 </div>

src/ui/CJRZQ5E9F/components/TimeTrendAnalysis.vue

@@ -137,8 +137,8 @@
             <div class="loan-evaluation-wrap">
               <!-- 标签页 -->
               <div class="mb-3">
-                <van-tabs v-model:active="activeAmountPeriod" line-width="20" line-height="2" color="#a22525"
-                  class="loan-evaluation-tabs">
+                <van-tabs v-model:active="activeAmountPeriod" line-width="20" line-height="2"
+                  color="var(--color-primary)" class="loan-evaluation-tabs">
                   <van-tab v-for="item in newInstitutionAmounts" :key="item.period" :name="item.period"
                     :title="item.period" />
                 </van-tabs>

src/ui/CQYGL3F8E/components/Abnormal.vue

@@ -45,7 +45,7 @@
                         已移出
                       </span>
                       <span v-if="abnormal.removeDepartment"
-                        class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525] ml-1">
+                        class="text-xs bg-primary-light rounded py-1 px-2 text-primary ml-1">
                         {{ abnormal.removeDepartment }}
                       </span>
                     </div>

src/ui/CQYGL3F8E/components/FinancingHistory.vue

@@ -58,23 +58,23 @@
                     <!-- 融资金额 -->
                     <div class="text-sm mb-2">
                       <span class="text-gray-600">融资金额：</span>
-                      <span class="font-bold text-[#A22525]">{{ financing.money || '—' }}</span>
+                      <span class="font-bold text-primary">{{ financing.money || '—' }}</span>
                     </div>
 
                     <!-- 底部标签行 -->
                     <div class="flex items-center gap-2 flex-wrap">
                       <!-- 估值 -->
-                      <span v-if="financing.value" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span v-if="financing.value" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         估值: {{ financing.value }}
                       </span>
 
                       <!-- 股权 -->
-                      <span v-if="financing.share" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span v-if="financing.share" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         股权: {{ financing.share }}
                       </span>
 
                       <!-- 有新闻标签 -->
-                      <span v-if="financing.newsTitle" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span v-if="financing.newsTitle" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         有新闻
                       </span>
                     </div>

src/ui/CQYGL3F8E/components/InvestHistory.vue

@@ -54,7 +54,7 @@
                     </div>
                     <div class="flex items-center gap-1">
                       <span class="text-sm text-gray-600">持股比例:</span>
-                      <span class="text-base font-bold text-[#A22525]">{{ investment.percent || '—' }}</span>
+                      <span class="text-base font-bold text-primary">{{ investment.percent || '—' }}</span>
                     </div>
                   </div>
 
@@ -76,7 +76,7 @@
                       <!-- 持股比例 -->
                       <span class="text-base text-[#666666] flex-shrink-0">持股比例：</span>
                       <span class="text-base font-medium text-[#333333] break-words">{{ investment.percent || '-'
-                        }}</span>
+                      }}</span>
 
                       <!-- 投资金额 -->
                       <template v-if="investment.amount">
@@ -114,13 +114,13 @@
                       <!-- 企业状态 -->
                       <span class="text-base text-[#666666] flex-shrink-0">企业状态：</span>
                       <span class="text-base font-medium text-[#333333] break-words">{{ investment.regStatus || '-'
-                        }}</span>
+                      }}</span>
 
                       <!-- 统一社会信用代码 -->
                       <template v-if="investment.creditCode">
                         <span class="text-base text-[#666666] flex-shrink-0">统一社会信用代码：</span>
                         <span class="text-base font-medium text-[#333333] break-words">{{ investment.creditCode
-                          }}</span>
+                        }}</span>
                       </template>
 
                       <!-- 企业类型 -->
@@ -149,14 +149,14 @@
                       <template v-if="investment.legalPersonName">
                         <span class="text-base text-[#666666] flex-shrink-0">法人代表：</span>
                         <span class="text-base font-medium text-[#333333] break-words">{{ investment.legalPersonName
-                          }}</span>
+                        }}</span>
                       </template>
 
                       <!-- 经营范围 -->
                       <template v-if="investment.business_scope">
                         <span class="text-base text-[#666666] flex-shrink-0">经营范围：</span>
                         <span class="text-base font-medium text-[#333333] break-words">{{ investment.business_scope
-                          }}</span>
+                        }}</span>
                       </template>
                     </div>
                   </div>

src/ui/CQYGL3F8E/components/Investment.vue

@@ -55,11 +55,11 @@
                 <div class="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-3 p-4">
                   <span class="text-base text-[#666666]">股东名称：</span>
                   <span class="text-base font-medium text-[#333333]">{{ company.stockHolderItem.orgHolderName || '-'
-                    }}</span>
+                  }}</span>
 
                   <span class="text-base text-[#666666]">股东类型：</span>
                   <span class="text-base font-medium text-[#333333]">{{ company.stockHolderItem.orgHolderType || '-'
-                    }}</span>
+                  }}</span>
 
                   <span class="text-base text-[#666666]">出资金额：</span>
                   <span class="text-base font-medium text-[#333333]">{{
@@ -68,16 +68,16 @@
                   <span class="text-base text-[#666666]">持股比例：</span>
                   <div class="flex items-center gap-2">
                     <span class="text-base font-medium text-[#333333]">{{ formatRate(company.stockHolderItem.investRate)
-                      }}</span>
+                    }}</span>
                     <span v-if="parseFloat(company.stockHolderItem.investRate) > 0"
-                      class="text-sm px-2 py-0.5 rounded bg-[#EEE5E5] text-[#A22525]">
+                      class="text-sm px-2 py-0.5 rounded bg-primary-light text-primary">
                       {{ getInvestRateDesc(company.stockHolderItem.investRate) }}
                     </span>
                   </div>
 
                   <span class="text-base text-[#666666]">出资时间：</span>
                   <span class="text-base font-medium text-[#333333]">{{ formatDate(company.stockHolderItem.investDate)
-                    }}</span>
+                  }}</span>
                 </div>
 
               </div>
@@ -108,14 +108,14 @@
 
                   <span class="text-base text-[#666666]">成立日期：</span>
                   <span class="text-base font-medium text-[#333333]">{{ formatDate(company.basicInfo.estiblishTime)
-                    }}</span>
+                  }}</span>
 
                   <span class="text-base text-[#666666]">登记机关：</span>
                   <span class="text-base font-medium text-[#333333]">{{ company.basicInfo.regInstitute || '-' }}</span>
 
                   <span class="text-base text-[#666666]">核准日期：</span>
                   <span class="text-base font-medium text-[#333333]">{{ formatDate(company.basicInfo.approvedTime)
-                    }}</span>
+                  }}</span>
                 </div>
               </div>
 
@@ -192,8 +192,8 @@ const getRelationshipClass = relation => {
 
 // 关系映射表
 const relationshipMap = {
-  sh: { text: '股东', color: 'bg-[#EEE5E5] text-[#A22525]', icon: '👑' },
-  his_sh: { text: '曾任股东', color: 'bg-[#EEE5E5] text-[#A22525]', icon: '🕒👑' },
+  sh: { text: '股东', color: 'bg-primary-light text-primary', icon: '👑' },
+  his_sh: { text: '曾任股东', color: 'bg-primary-light text-primary', icon: '🕒👑' },
   lp: { text: '法人', color: 'bg-green-100 text-green-700', icon: '⚖️' },
   his_lp: { text: '曾任法人', color: 'bg-green-50 text-green-600', icon: '🕒⚖️' },
   tm: { text: '高管', color: 'bg-purple-100 text-purple-700', icon: '👔' },

src/ui/CQYGL3F8E/components/Lawsuit.vue

@@ -66,7 +66,7 @@
                             <div class="flex items-center">
                                 <div class="text-3xl font-bold text-orange-600 mr-4">{{ allLawsuitStats?.totalCompanies
                                     || 0
-                                    }}</div>
+                                }}</div>
                                 <div>
                                     <div class="text-sm font-medium text-gray-800">风险企业</div>
                                     <div class="text-xs text-gray-500">
@@ -77,7 +77,7 @@
                                     <div class="flex items-center gap-3 mt-1">
                                         <span class="text-xs text-red-600">高风险: {{ allLawsuitStats?.highRiskCompanies ||
                                             0
-                                            }}</span>
+                                        }}</span>
                                         <span class="text-xs text-amber-600">中风险: {{
                                             allLawsuitStats?.mediumRiskCompanies ||
                                             0 }}</span>
@@ -221,7 +221,7 @@
                                     <span class="text-[#EB3C3C] ml-1">{{ getLawsuitStats(company).total
                                         ||
                                         0
-                                        }}</span>
+                                    }}</span>
                                 </div>
                                 <!-- 企业状态 -->
                                 <span v-if="company.basicInfo && company.basicInfo.regStatus"
@@ -273,13 +273,13 @@
                                         <span class="text-base font-medium text-[#333333]">{{
                                             company.basicInfo.regStatus ||
                                             '-'
-                                            }}</span>
+                                        }}</span>
 
                                         <span class="text-base text-[#666666]">统一社会信用代码：</span>
                                         <span class="text-base font-medium text-[#333333]">{{
                                             company.basicInfo.creditCode
                                             || '-'
-                                            }}</span>
+                                        }}</span>
 
                                         <span class="text-base text-[#666666]">注册资本：</span>
                                         <span class="text-base font-medium text-[#333333]">{{
@@ -352,7 +352,7 @@ caseItem, caseIndex
                                                                 <!-- 案号 -->
                                                                 <div class="font-medium text-gray-900 truncate">{{
                                                                     caseItem.c_ah || "暂无案号"
-                                                                    }}</div>
+                                                                }}</div>
                                                                 <!-- 案件类型标签 -->
                                                                 <span
                                                                     class="px-2 py-1 text-xs rounded font-medium bg-[#EB3C3C1A] text-[#EB3C3C] flex-shrink-0">
@@ -410,7 +410,7 @@ caseItem, caseIndex
                                                                 <span class="text-base text-[#666666]">立案案由：</span>
                                                                 <span class="text-base font-medium text-[#333333]">{{
                                                                     caseItem.n_laay_tree || caseItem.n_laay || "-"
-                                                                    }}</span>
+                                                                }}</span>
                                                             </template>
 
                                                             <!-- 当事人信息 -->
@@ -503,7 +503,7 @@ caseItem, caseIndex
                                                                 <!-- 案号 -->
                                                                 <div class="font-medium text-gray-900 truncate">{{
                                                                     caseItem.ah || "暂无案号"
-                                                                    }}</div>
+                                                                }}</div>
                                                                 <!-- 案件类型标签 -->
                                                                 <span
                                                                     class="px-2 py-1 text-xs rounded font-medium bg-[#EB3C3C1A] text-[#EB3C3C] flex-shrink-0">
@@ -596,7 +596,7 @@ caseItem, caseIndex
                                                                 <span class="text-base text-[#666666]">金额估计：</span>
                                                                 <span class="text-base font-medium text-[#333333]">{{
                                                                     formatLawsuitMoney(caseItem.pjje_gj) || "-"
-                                                                    }}</span>
+                                                                }}</span>
                                                             </template>
                                                         </div>
                                                     </div>
@@ -615,7 +615,7 @@ caseItem, caseIndex
                                                                 <!-- 案号 -->
                                                                 <div class="font-medium text-gray-900 truncate">{{
                                                                     caseItem.ah || "暂无案号"
-                                                                    }}</div>
+                                                                }}</div>
                                                                 <!-- 案件类型标签 -->
                                                                 <span
                                                                     class="px-2 py-1 text-xs rounded font-medium bg-[#EB3C3C1A] text-[#EB3C3C] flex-shrink-0">
@@ -1313,7 +1313,7 @@ const caseTypeChartOption = computed(() => {
                     return {
                         value: value,
                         itemStyle: {
-                            color: "#A22525",
+                            color: "var(--color-primary)",
                             borderRadius: [0, 4, 4, 0],
                         },
                     };

src/ui/CQYGL3F8E/components/Punishment.vue

@@ -60,25 +60,25 @@
                     <!-- 处罚金额 -->
                     <div class="text-sm mb-2">
                       <span class="text-gray-600">处罚金额：</span>
-                      <span class="font-bold text-[#A22525]">{{ formatPecuniary(punishment.pecuniary) }}</span>
+                      <span class="font-bold text-primary">{{ formatPecuniary(punishment.pecuniary) }}</span>
                     </div>
 
                     <!-- 底部标签行 -->
                     <div class="flex items-center gap-2 flex-wrap">
                       <!-- 处罚事由 -->
-                      <span v-if="punishment.reason" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span v-if="punishment.reason" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         {{ punishment.reason }}
                       </span>
 
                       <!-- 处罚状态 -->
                       <span v-if="punishment.punishStatus"
-                        class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                        class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         {{ punishment.punishStatus }}
                       </span>
 
                       <!-- 法人 -->
                       <span v-if="punishment.legalPersonName"
-                        class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                        class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         法人: {{ punishment.legalPersonName }}
                       </span>
                     </div>

src/ui/CQYGL3F8E/components/SeniorExecutive.vue

@@ -56,7 +56,7 @@
                 <div class="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-3 p-4">
                   <span class="text-base text-[#666666]">担任职务：</span>
                   <span class="text-base font-medium text-[#333333]">{{ getManagerPositionDesc(company.relationship)
-                    }}</span>
+                  }}</span>
 
                   <template v-if="company.staffList && company.staffList.result && company.staffList.result.length > 0">
                     <span class="text-base text-[#666666]">公司职位：</span>
@@ -64,7 +64,7 @@
                       <template v-for="(staff, staffIdx) in company.staffList.result" :key="staffIdx">
                         <template v-if="staff.typeJoin && staff.typeJoin.length > 0">
                           <span v-for="(position, posIdx) in staff.typeJoin" :key="posIdx"
-                            class="text-sm px-2 py-0.5 rounded bg-[#EEE5E5] text-[#A22525]">
+                            class="text-sm px-2 py-0.5 rounded bg-primary-light text-primary">
                             {{ position }}
                           </span>
                         </template>
@@ -100,14 +100,14 @@
 
                   <span class="text-base text-[#666666]">成立日期：</span>
                   <span class="text-base font-medium text-[#333333]">{{ formatDate(company.basicInfo.estiblishTime)
-                    }}</span>
+                  }}</span>
 
                   <span class="text-base text-[#666666]">登记机关：</span>
                   <span class="text-base font-medium text-[#333333]">{{ company.basicInfo.regInstitute || '-' }}</span>
 
                   <span class="text-base text-[#666666]">核准日期：</span>
                   <span class="text-base font-medium text-[#333333]">{{ formatDate(company.basicInfo.approvedTime)
-                    }}</span>
+                  }}</span>
                 </div>
               </div>
 
@@ -197,8 +197,8 @@ const isCompanyExpanded = (companyId, listType, index) => {
 
 // 关系映射表
 const relationshipMap = {
-  sh: { text: '股东', color: 'bg-[#EEE5E5] text-[#A22525]', icon: '👑' },
-  his_sh: { text: '曾任股东', color: 'bg-[#EEE5E5] text-[#A22525]', icon: '🕒👑' },
+  sh: { text: '股东', color: 'bg-primary-light text-primary', icon: '👑' },
+  his_sh: { text: '曾任股东', color: 'bg-primary-light text-primary', icon: '🕒👑' },
   lp: { text: '法人', color: 'bg-green-100 text-green-700', icon: '⚖️' },
   his_lp: { text: '曾任法人', color: 'bg-green-50 text-green-600', icon: '🕒⚖️' },
   tm: { text: '高管', color: 'bg-purple-100 text-purple-700', icon: '👔' },

src/ui/CQYGL3F8E/components/TaxRisk/OwnTax.vue

@@ -58,18 +58,18 @@
                     <!-- 欠税金额 -->
                     <div class="text-sm mb-2">
                       <span class="text-gray-600">欠税金额：</span>
-                      <span class="font-bold text-[#A22525]">{{ tax.ownTaxAmount || '—' }}</span>
+                      <span class="font-bold text-primary">{{ tax.ownTaxAmount || '—' }}</span>
                     </div>
 
                     <!-- 识别号和纳税人类型 -->
                     <div class="flex items-center gap-2 flex-wrap mb-2">
-                      <span class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         识别号: {{ tax.taxIdNumber || '—' }}
                       </span>
-                      <span class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         纳税人类型: {{ tax.taxpayerType || '—' }}
                       </span>
-                      <span v-if="tax.legalpersonName" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span v-if="tax.legalpersonName" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         法人: {{ tax.legalpersonName }}
                       </span>
                     </div>
@@ -100,7 +100,7 @@
                       <!-- 纳税人类型 -->
                       <span class="text-base text-[#666666] flex-shrink-0">纳税人类型：</span>
                       <span class="text-base font-medium text-[#333333] break-words">{{ tax.taxpayerType || '-'
-                        }}</span>
+                      }}</span>
 
                       <!-- 税务类型 -->
                       <template v-if="tax.type">
@@ -117,12 +117,12 @@
                       <!-- 发布时间 -->
                       <span class="text-base text-[#666666] flex-shrink-0">发布时间：</span>
                       <span class="text-base font-medium text-[#333333] break-words">{{ formatDate(tax.publishDate)
-                        }}</span>
+                      }}</span>
 
                       <!-- 欠税金额 -->
                       <span class="text-base text-[#666666] flex-shrink-0">欠税金额：</span>
                       <span class="text-base font-medium text-[#333333] break-words">{{ tax.ownTaxAmount || '-'
-                        }}</span>
+                      }}</span>
 
                       <!-- 欠税余额 -->
                       <template v-if="tax.ownTaxBalance">

src/ui/CQYGL3F8E/components/TaxRisk/TaxContravention.vue

@@ -61,12 +61,12 @@
                     <!-- 案件编号 -->
                     <div class="text-sm mb-2">
                       <span class="text-gray-600">案件编号：</span>
-                      <span class="font-bold text-[#A22525]">#{{ contravention.id || '—' }}</span>
+                      <span class="font-bold text-primary">#{{ contravention.id || '—' }}</span>
                     </div>
 
                     <!-- 税务机关 -->
                     <div v-if="contravention.department" class="flex items-center gap-2 flex-wrap mb-2">
-                      <span class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
+                      <span class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                         税务机关: {{ contravention.department }}
                       </span>
                     </div>
@@ -89,7 +89,7 @@
                       <!-- 违法ID -->
                       <span class="text-base text-[#666666] flex-shrink-0">违法ID：</span>
                       <span class="text-base font-medium text-[#333333] break-words">#{{ contravention.id || '-'
-                        }}</span>
+                      }}</span>
 
                       <!-- 纳税人名称 -->
                       <span class="text-base text-[#666666] flex-shrink-0">纳税人名称：</span>
@@ -100,7 +100,7 @@
                       <template v-if="contravention.case_type">
                         <span class="text-base text-[#666666] flex-shrink-0">案件性质：</span>
                         <span class="text-base font-medium text-[#333333] break-words">{{ contravention.case_type
-                          }}</span>
+                        }}</span>
                       </template>
 
                       <!-- 发布时间 -->
@@ -112,7 +112,7 @@
                       <template v-if="contravention.department">
                         <span class="text-base text-[#666666] flex-shrink-0">所属税务机关：</span>
                         <span class="text-base font-medium text-[#333333] break-words">{{ contravention.department
-                          }}</span>
+                        }}</span>
                       </template>
                     </div>
                   </div>

src/ui/DWBG6A2C/components/RentalBehaviorSection.vue

@@ -44,7 +44,7 @@
           <div class="mb-6">
             <LTitle title="近期活动（高风险关注期）" />
             <div class="bg-white px-4 py-2">
-              <van-tabs v-model:active="activeTab" color="#a22525">
+              <van-tabs v-model:active="activeTab" color="var(--color-primary)">
                 <van-tab v-for="(tab, index) in recentTabs" :key="tab.key" :title="tab.name">
                   <div class="p-4">
                     <div class="space-y-2">
@@ -83,7 +83,7 @@
           <div class="mb-6">
             <LTitle title="中期租赁活动" />
             <div class="bg-white  px-4 py-2">
-              <van-tabs v-model:active="activeTab2" color="#a22525">
+              <van-tabs v-model:active="activeTab2" color="var(--color-primary)">
                 <van-tab v-for="(tab, index) in mediumTabs" :key="tab.key" :title="tab.name">
                   <div class="p-4">
                     <div class="space-y-2">
@@ -122,7 +122,7 @@
           <div class="mb-6">
             <LTitle title="长期租赁活动" />
             <div class="bg-white  px-4 py-2">
-              <van-tabs v-model:active="activeTab3" color="#a22525">
+              <van-tabs v-model:active="activeTab3" color="var(--color-primary)">
                 <van-tab v-for="(tab, index) in longTabs" :key="tab.key" :title="tab.name">
                   <div class="p-4">
                     <div class="space-y-2">

src/views/Agent.vue

@@ -1,22 +1,14 @@
 <template>
     <div class="p-4 bg-gradient-to-b from-gray-50/50 to-gray-100/30 min-h-screen">
         <!-- 资产卡片 -->
-        <div
-            class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-red-50/70 to-red-100/50 p-6"
-        >
+        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-primary-50/70 to-primary-100/50 p-6">
             <div class="flex justify-between items-center mb-3">
                 <div class="flex items-center">
-                    <van-icon
-                        name="balance-pay"
-                        class="text-xl mr-2"
-                        style="color: var(--van-theme-primary);"
-                    />
+                    <van-icon name="balance-pay" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
                     <span class="text-lg font-bold" style="color: var(--van-text-color);">余额</span>
                 </div>
-                <span class="text-3xl font-bold"
-                    style="color: var(--van-theme-primary);"
-                    >¥ {{ (data?.balance || 0).toFixed(2) }}</span
-                >
+                <span class="text-3xl font-bold" style="color: var(--van-theme-primary);">¥ {{ (data?.balance ||
+                    0).toFixed(2) }}</span>
             </div>
             <div class="text-sm mb-2" style="color: var(--van-text-color-2);">
                 累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
@@ -25,19 +17,15 @@
                 冻结余额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
             </div>
             <div class="grid grid-cols-2 gap-3">
-                <button
-                    @click="toWithdraw"
+                <button @click="toWithdraw"
                     class="text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));"
-                >
+                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));">
                     <van-icon name="gold-coin" class="mr-1" />
                     提现
                 </button>
-                <button
-                    @click="toWithdrawDetails"
+                <button @click="toWithdrawDetails"
                     class="bg-white/90 border rounded-full py-2 px-4 shadow-sm flex items-center justify-center"
-                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);"
-                >
+                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
                     <van-icon name="notes" class="mr-1" />
                     提现记录
                 </button>
@@ -45,22 +33,14 @@
         </div>
 
         <!-- 直推报告收益 -->
-        <div
-            class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-orange-50/40 to-red-50/50 p-6"
-        >
+        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-warning-50/60 to-warning-100/50 p-6">
             <div class="flex justify-between items-center mb-4">
                 <div class="flex items-center">
-                    <van-icon
-                        name="balance-list"
-                        class="text-xl mr-2"
-                        style="color: var(--van-theme-primary);"
-                    />
-                    <span class="text-lg font-bold" style="color: var(--van-text-color);"
-                        >直推报告收益</span
-                    >
+                    <van-icon name="balance-list" class="text-xl mr-2" style="color: var(--color-warning);" />
+                    <span class="text-lg font-bold" style="color: var(--van-text-color);">直推报告收益</span>
                 </div>
                 <div class="text-right">
-                    <div class="text-2xl font-bold" style="color: var(--van-theme-primary);">
+                    <div class="text-2xl font-bold" style="color: var(--color-warning);">
                         ¥
                         {{
                             (data?.direct_push?.total_commission || 0).toFixed(
@@ -76,73 +56,56 @@
 
             <!-- 日期选择 -->
             <div class="grid grid-cols-3 gap-2 mb-6">
-                <button
-                    v-for="item in promoteDateOptions"
-                    :key="item.value"
-                    @click="selectedPromoteDate = item.value"
-                    class="rounded-full transition-all py-1 px-4 text-sm"
-                    :class="[
+                <button v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value"
+                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                         selectedPromoteDate === item.value
                             ? 'text-white shadow-md'
                             : 'bg-white/90 border',
-                    ]"
-                    :style="selectedPromoteDate === item.value
-                        ? 'background-color: var(--van-theme-primary);'
-                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'"
-                >
+                    ]" :style="selectedPromoteDate === item.value
+                        ? 'background-color: var(--color-warning);'
+                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                     {{ item.label }}
                 </button>
             </div>
 
             <div class="grid grid-cols-2 gap-4 mb-6">
-                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(162, 37, 37, 0.08);">
+                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="gold-coin" class="mr-1" />本日收益
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: var(--van-theme-primary);">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                         ¥
                         {{
                             currentPromoteData.commission?.toFixed(2) || "0.00"
                         }}
                     </div>
                 </div>
-                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(162, 37, 37, 0.08);">
+                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="description" class="mr-1" />有效报告
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: var(--van-theme-primary);">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                         {{ currentPromoteData.report || 0 }} 份
                     </div>
                 </div>
             </div>
 
-            <div
-                class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
-                style="color: var(--van-theme-primary);"
-                @click="goToPromoteDetail"
-            >
+            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
+                style="color: var(--color-warning);" @click="goToPromoteDetail">
                 <span>查看收益明细</span>
                 <span class="text-lg">→</span>
             </div>
         </div>
 
         <!-- 活跃下级奖励 -->
-        <div
-            class="rounded-xl shadow-lg bg-gradient-to-r from-green-50/40 to-emerald-50/30 p-6"
-        >
+        <div class="rounded-xl shadow-lg bg-gradient-to-r from-success-50/50 to-success-100/40 p-6">
             <div class="flex justify-between items-center mb-4">
                 <div class="flex items-center">
-                    <van-icon
-                        name="friends"
-                        class="text-xl mr-2"
-                        style="color: #10b981;"
-                    />
-                    <span class="text-lg font-bold" style="color: var(--van-text-color);"
-                        >活跃下级奖励</span
-                    >
+                    <van-icon name="friends" class="text-xl mr-2" style="color: var(--color-success);" />
+                    <span class="text-lg font-bold" style="color: var(--van-text-color);">活跃下级奖励</span>
                 </div>
                 <div class="text-right">
-                    <div class="text-2xl font-bold" style="color: #10b981;">
+                    <div class="text-2xl font-bold" style="color: var(--color-success);">
                         ¥
                         {{
                             (data?.active_reward?.total_reward || 0).toFixed(2)
@@ -154,20 +117,14 @@
 
             <!-- 日期选择 -->
             <div class="grid grid-cols-3 gap-2 mb-6">
-                <button
-                    v-for="item in activeDateOptions"
-                    :key="item.value"
-                    @click="selectedActiveDate = item.value"
-                    class="rounded-full transition-all py-1 px-4 text-sm"
-                    :class="[
+                <button v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value"
+                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                         selectedActiveDate === item.value
                             ? 'text-white shadow-md'
                             : 'bg-white/90 border',
-                    ]"
-                    :style="selectedActiveDate === item.value
-                        ? 'background-color: #10b981;'
-                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'"
-                >
+                    ]" :style="selectedActiveDate === item.value
+                        ? 'background-color: var(--color-success);'
+                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                     {{ item.label }}
                 </button>
             </div>
@@ -177,7 +134,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="medal" class="mr-1" />本日奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{ (currentActiveData.active_reward || 0).toFixed(2) }}
                     </div>
@@ -186,7 +143,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="discount" class="mr-1" />下级推广奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (currentActiveData.sub_promote_reward || 0).toFixed(
@@ -199,7 +156,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="contact" class="mr-1" />新增活跃奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (currentActiveData.sub_upgrade_reward || 0).toFixed(
@@ -212,7 +169,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="fire" class="mr-1" />下级转化奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (
@@ -223,22 +180,17 @@
                 </div>
             </div>
 
-            <div
-                class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
-                style="color: #10b981;"
-                @click="goToActiveDetail"
-            >
+            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
+                style="color: var(--color-success);" @click="goToActiveDetail">
                 <span>查看奖励明细</span>
                 <span class="text-lg">→</span>
             </div>
 
             <!-- 添加查看下级按钮 -->
             <div class="mt-4">
-                <button
-                    @click="toSubordinateList"
-                    class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
-                    style="background: linear-gradient(135deg, #10b981, #059669);"
-                >
+                <button @click="toSubordinateList"
+                    class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center bg-success"
+                    style="background: linear-gradient(135deg, var(--color-success), var(--color-success-600));">
                     <van-icon name="friends" class="mr-1" />
                     查看我的下级
                 </button>

src/views/Inquire.vue

@@ -1,31 +1,17 @@
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue";
-import { aesEncrypt } from "@/utils/crypto";
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { useUserStore } from "@/stores/userStore";
-import { showConfirmDialog } from "vant";
-
-import Payment from "@/components/Payment.vue";
-import CarNumberInput from "@/components/CarNumberInput.vue";
+import InquireForm from "@/components/InquireForm.vue";
 
 const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const showPayment = ref(false);
-const queryId = ref(null);
-const name = ref("");
-const idCard = ref("");
-const mobile = ref("");
-const verificationCode = ref("");
-const agreeToTerms = ref(false);
-const isCountingDown = ref(false);
-const countdown = ref(60);
 const feature = ref(route.params.feature);
+
+// 获取产品信息
 const featureData = ref({});
 
-onMounted(() => {
+onMounted(async () => {
     isFinishPayment();
-    getProduct();
+    await getProduct();
 });
 
 function isFinishPayment() {
@@ -35,6 +21,7 @@ function isFinishPayment() {
         router.push({ path: "/report", query: { orderNo } });
     }
 }
+
 async function getProduct() {
     const { data, error } = await useApiFetch(`/product/en/${feature.value}`)
         .get()
@@ -55,573 +42,8 @@ async function getProduct() {
         }
     }
 }
-
-const isPhoneNumberValid = computed(() => {
-    return /^1[3-9]\d{9}$/.test(mobile.value);
-});
-const isIdCardValid = computed(() => /^\d{17}[\dX]$/i.test(idCard.value));
-
-// 检查登录状态
-const isLoggedIn = computed(() => userStore.isLoggedIn);
-
-// 处理输入框点击事件
-const handleInputClick = async () => {
-    if (!isLoggedIn.value) {
-        try {
-            await showConfirmDialog({
-                title: '提示',
-                message: '您需要登录后才能进行查询，是否前往登录？',
-                confirmButtonText: '前往登录',
-                cancelButtonText: '取消',
-            });
-            // 用户点击确认，跳转到登录页面
-            router.push('/login');
-        } catch {
-            // 用户点击取消，什么都不做
-        }
-    }
-};
-
-function handleSubmit() {
-    // 如果未登录，跳转到登录页面
-    if (!isLoggedIn.value) {
-        router.push('/login');
-        return;
-    }
-
-    // 基本协议验证
-    if (!agreeToTerms.value) {
-        showToast({ message: `请阅读并同意用户协议和隐私政策` });
-        return;
-    }
-
-    if (
-        !validateField("name", name.value, (v) => v, "请输入姓名") ||
-        !validateField(
-            "mobile",
-            mobile.value,
-            (v) => isPhoneNumberValid.value,
-            "请输入有效的手机号"
-        ) ||
-        !validateField(
-            "idCard",
-            idCard.value,
-            (v) => isIdCardValid.value,
-            "请输入有效的身份证号码"
-        ) ||
-        !validateField(
-            "verificationCode",
-            verificationCode.value,
-            (v) => v,
-            "请输入验证码"
-        )
-    ) {
-        return;
-    }
-    submitRequest();
-}
-const validateField = (field, value, validationFn, errorMessage) => {
-    if (isHasInput(field) && !validationFn(value)) {
-        showToast({ message: errorMessage });
-        return false;
-    }
-    return true;
-};
-
-const defaultInput = ["name", "idCard", "mobile", "verificationCode"];
-const isHasInput = (input) => {
-    return defaultInput.includes(input);
-};
-async function submitRequest() {
-    const req = {
-        name: name.value,
-        id_card: idCard.value,
-        mobile: mobile.value,
-        code: verificationCode.value
-    };
-    const reqStr = JSON.stringify(req);
-    const encodeData = aesEncrypt(reqStr, "ff83609b2b24fc73196aac3d3dfb874f");
-    const { data, error } = await useApiFetch(`/query/service/${feature.value}`)
-        .post({ data: encodeData })
-        .json();
-    if (data.value.code === 200) {
-        queryId.value = data.value.data.id;
-        showPayment.value = true;
-    }
-}
-
-async function sendVerificationCode() {
-    if (isCountingDown.value || !isPhoneNumberValid.value) return;
-    if (!isPhoneNumberValid.value) {
-        showToast({ message: "请输入有效的手机号" });
-        return;
-    }
-
-    const { data, error } = await useApiFetch("/auth/sendSms")
-        .post({ mobile: mobile.value, actionType: "query" })
-        .json();
-
-    if (!error.value && data.value.code === 200) {
-        showToast({ message: "验证码发送成功", type: "success" });
-        startCountdown();
-        // 聚焦到验证码输入框
-        nextTick(() => {
-            const verificationCodeInput = document.getElementById('verificationCode');
-            if (verificationCodeInput) {
-                verificationCodeInput.focus();
-            }
-        });
-    } else {
-        showToast({ message: "验证码发送失败，请重试" });
-    }
-}
-let timer = null;
-
-function startCountdown() {
-    isCountingDown.value = true;
-    countdown.value = 60;
-    timer = setInterval(() => {
-        if (countdown.value > 0) {
-            countdown.value--;
-        } else {
-            clearInterval(timer);
-            isCountingDown.value = false;
-        }
-    }, 1000);
-}
-function toUserAgreement() {
-    router.push(`/userAgreement`);
-}
-
-function toPrivacyPolicy() {
-    router.push(`/privacyPolicy`);
-}
-function toAuthorization() {
-    router.push(`/authorization`);
-}
-
-const toExample = () => {
-    router.push(`/example?feature=${feature.value}`);
-};
-// 获取功能图标
-const getFeatureIcon = (apiId) => {
-    const iconMap = {
-        JRZQ4AA8: "/inquire_icons/huankuanyali.svg", // 还款压力
-        QCXG7A2B: "/inquire_icons/mingxiacheliang.svg", // 名下车辆
-        BehaviorRiskScan: "/inquire_icons/fengxianxingwei.svg", // 风险行为扫描
-        IVYZ5733: "/inquire_icons/hunyinzhuangtai.svg", // 婚姻状态
-        PersonEnterprisePro: "/inquire_icons/renqiguanxi.svg", // 人企关系加强版
-        JRZQ0A03: "/inquire_icons/jiedaishenqing.svg", // 借贷申请记录
-        FLXG3D56: "/inquire_icons/jiedaiweiyue.svg", // 借贷违约失信
-        FLXG0V4B: "/inquire_icons/sifasheyu.svg", // 司法涉诉
-        JRZQ8203: "/inquire_icons/jiedaixingwei.svg", // 借贷行为记录
-        JRZQ09J8: "/inquire_icons/beijianguanrenyuan.svg", // 收入评估
-        JRZQ4B6C: "/inquire_icons/fengxianxingwei.svg", // 探针C风险评估
-    };
-    return iconMap[apiId] || "/inquire_icons/default.svg";
-};
-
-// 处理图标加载错误
-const handleIconError = (event) => {
-    // 如果图标加载失败，显示默认图标或隐藏
-    event.target.style.display = "none";
-};
-
-// 获取卡片样式类
-const getCardClass = (index) => {
-    const colorIndex = index % 4;
-    const colorClasses = [
-        'bg-gradient-to-br from-blue-50 via-blue-25 to-white ',
-        'bg-gradient-to-br from-green-50 via-green-25 to-white ',
-        'bg-gradient-to-br from-purple-50 via-purple-25 to-white ',
-        'bg-gradient-to-br from-orange-50 via-orange-25 to-white '
-    ];
-    return colorClasses[colorIndex];
-};
-
-onUnmounted(() => {
-    if (timer) {
-        clearInterval(timer);
-    }
-});
 </script>
 
 <template>
-    <div class="inquire-bg min-h-screen p-6">
-        <div class="mb-6 text-center text-3xl font-bold" style="color: var(--van-theme-primary);">
-            {{ featureData.product_name }}
-        </div>
-        <div class="card">
-            <div class="mb-4 text-lg font-semibold" style="color: var(--van-text-color);">基本信息</div>
-            <div class="mb-4">
-                <label for="name" class="form-label block mb-2">姓名</label>
-                <input v-model="name" id="name" type="text" placeholder="请输入姓名" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="idCard" class="form-label block mb-2">身份证号</label>
-                <input v-model="idCard" id="idCard" type="text" placeholder="请输入身份证号" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="mobile" class="form-label block mb-2">手机号</label>
-                <input v-model="mobile" id="mobile" type="tel" placeholder="请输入手机号" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="verificationCode" class="form-label block mb-2">验证码</label>
-                <div class="flex items-center gap-2">
-                    <input v-model="verificationCode" id="verificationCode" placeholder="请输入验证码" maxlength="6"
-                        class="form-input flex-1 min-w-0" @click="handleInputClick" />
-                    <button
-                        class="px-4 py-2 text-sm whitespace-nowrap flex-shrink-0 rounded-lg border transition-colors"
-                        :class="isCountingDown || !isPhoneNumberValid
-                            ? 'text-gray-400 border-gray-300 bg-gray-50'
-                            : 'text-white border-transparent'" :style="isCountingDown || !isPhoneNumberValid
-                                ? ''
-                                : 'background-color: var(--van-theme-primary);'"
-                        :disabled="isCountingDown || !isPhoneNumberValid" @click="sendVerificationCode">
-                        {{
-                            isCountingDown
-                                ? `${countdown}s重新获取`
-                                : "获取验证码"
-                        }}
-                    </button>
-                </div>
-            </div>
-
-            <div class="mb-4 flex items-center">
-                <input type="checkbox" v-model="agreeToTerms" />
-                <span class="ml-2 text-xs" style="color: var(--van-text-color-2);">
-                    我已阅读并同意
-                    <span @click="toUserAgreement" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《用户协议》</span>
-                    <span @click="toPrivacyPolicy" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《隐私政策》</span>
-                    <span @click="toAuthorization" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《授权书》</span>
-                </span>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-2">
-                <button
-                    class="flex-1 sm:w-24 rounded-xl sm:rounded-l-xl sm:rounded-r-none py-3 text-white text-base border transition-colors"
-                    style="background-color: var(--van-theme-primary-light); color: var(--van-theme-primary); border-color: var(--van-theme-primary);"
-                    @click="toExample">
-                    示例报告
-                </button>
-                <button
-                    class="flex-1 rounded-xl sm:rounded-l-none sm:rounded-r-xl py-3 text-white text-base transition-colors"
-                    style="background-color: var(--van-theme-primary);" @click="handleSubmit">
-                    {{ isLoggedIn ? '立即查询' : '前往登录' }}
-                </button>
-            </div>
-        </div>
-        <div class="card mt-3" v-if="featureData.features && featureData.features.length > 0">
-            <div class="mb-3 text-base font-semibold flex items-center" style="color: var(--van-text-color);">
-                <div class="w-1 h-5 rounded-full mr-2"
-                    style="background: linear-gradient(to bottom, var(--van-theme-primary), var(--van-theme-primary-dark));">
-                </div>
-                报告包含内容
-            </div>
-            <div class="grid grid-cols-4 gap-2">
-                <template v-for="(feature, index) in featureData.features" :key="feature.id">
-                    <!-- FLXG0V4B 特殊处理：显示8个独立的案件类型 -->
-                    <template v-if="feature.api_id === 'FLXG0V4B'">
-                        <div v-for="(caseType, caseIndex) in [
-                            { name: '管辖案件', icon: 'beijianguanrenyuan.svg' },
-                            { name: '刑事案件', icon: 'xingshi.svg' },
-                            { name: '民事案件', icon: 'minshianjianguanli.svg' },
-                            { name: '失信被执行', icon: 'shixinren.svg' },
-                            { name: '行政案件', icon: 'xingzhengfuwu.svg' },
-                            { name: '赔偿案件', icon: 'yuepeichang.svg' },
-                            { name: '执行案件', icon: 'zhixinganjian.svg' },
-                            { name: '限高被执行', icon: 'xianzhigaoxiaofei.svg' },
-                        ]" :key="`${feature.id}-${caseIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="mb-1">
-                                <img :src="`/inquire_icons/${caseType.icon}`" :alt="caseType.name"
-                                    class="w-6 h-6 drop-shadow-sm mx-auto" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight font-medium"
-                                style="word-break: break-all; line-height: 1.1; min-height: 28px; display: flex; align-items: center; justify-content: center;">
-                                {{ caseType.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG8B4D 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG8B4D'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '要素核查', icon: 'beijianguanrenyuan.svg' },
-                            { name: '运营商核验', icon: 'mingxiacheliang.svg' },
-                            { name: '公安重点人员检验', icon: 'xingshi.svg' },
-                            { name: '逾期风险综述', icon: 'huankuanyali.svg' },
-                            // { name: '法院曝光台信息', icon: 'sifasheyu.svg' },
-                            { name: '借贷评估', icon: 'jiedaishenqing.svg' },
-                            { name: '租赁风险评估', icon: 'jiedaixingwei.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            { name: '规则风险提示', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-squaretext-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- CJRZQ5E9F 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'JRZQ5E9F'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '信用评分', icon: 'huankuanyali.svg' },
-                            { name: '贷款行为分析', icon: 'jiedaixingwei.svg' },
-                            { name: '机构分析', icon: 'jiedaishenqing.svg' },
-                            { name: '时间趋势分析', icon: 'zhixinganjian.svg' },
-                            { name: '风险指标详情', icon: 'fengxianxingwei.svg' },
-                            { name: '专业建议', icon: 'yuepeichang.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- PersonEnterprisePro/CQYGL3F8E 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'PersonEnterprisePro' || feature.api_id === 'QYGL3F8E'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '投资企业记录', icon: 'renqiguanxi.svg' },
-                            { name: '高管任职记录', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉诉风险', icon: 'sifasheyu.svg' },
-                            { name: '对外投资历史', icon: 'renqiguanxi.svg' },
-                            { name: '融资历史', icon: 'huankuanyali.svg' },
-                            { name: '行政处罚', icon: 'xingzhengfuwu.svg' },
-                            { name: '经营异常', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG6A2C 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG6A2C'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '命中风险标注', icon: 'fengxianxingwei.svg' },
-                            { name: '公安重点人员核验', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉赌涉诈人员核验', icon: 'xingshi.svg' },
-                            { name: '风险名单', icon: 'jiedaiweiyue.svg' },
-                            { name: '历史借贷行为', icon: 'jiedaixingwei.svg' },
-                            { name: '近24个月放款情况', icon: 'jiedaishenqing.svg' },
-                            { name: '履约情况', icon: 'huankuanyali.svg' },
-                            { name: '历史逾期记录', icon: 'jiedaiweiyue.svg' },
-                            { name: '授信详情', icon: 'huankuanyali.svg' },
-                            { name: '租赁行为', icon: 'mingxiacheliang.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            // { name: '法院风险信息', icon: 'sifasheyu.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- 其他功能正常显示 -->
-                    <div v-else
-                        class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-between">
-                        <div class="flex items-center justify-center flex-1">
-                            <img :src="getFeatureIcon(feature.api_id)" :alt="feature.name"
-                                class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                        </div>
-                        <div class="text-xs leading-tight font-medium h-8 flex items-center justify-center text-center"
-                            style="word-break: break-all; line-height: 1.1">
-                            {{ feature.name }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div class="mt-3 text-center">
-                <div class="inline-flex items-center px-3 py-1.5 rounded-full border transition-all"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8)); border-color: var(--van-theme-primary);">
-                    <div class="w-1.5 h-1.5 rounded-full mr-1.5" style="background-color: var(--van-theme-primary);">
-                    </div>
-                    <span class="text-xs font-medium" style="color: var(--van-theme-primary);">更多信息请解锁报告</span>
-                </div>
-            </div>
-        </div>
-        <div class="card mt-4">
-            <div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);">
-                {{ featureData.product_name }}
-            </div>
-            <div class="mb-4 flex items-start justify-between">
-                <div class="text-lg" style="color: var(--van-text-color-2);">价格：</div>
-                <div>
-                    <div class="text-2xl font-semibold" style="color: var(--van-theme-primary);">
-                        ¥{{ featureData.sell_price }}
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-4 leading-relaxed" style="color: var(--van-text-color-2);" v-html="featureData.description">
-            </div>
-            <div class="mb-2 text-xs italic" style="color: var(--van-theme-primary);">
-                为保证用户的隐私以及数据安全，查询的结果生成30天之后将自动清除。
-            </div>
-        </div>
-    </div>
-    <Payment v-model="showPayment" :data="featureData" :id="queryId" type="query" @close="showPayment = false" />
-</template>
-
-<style scoped>
-.form-label {
-    @apply text-sm font-medium;
-    color: var(--van-text-color);
-}
-
-.form-input::placeholder {
-    color: var(--van-text-color-3);
-}
-
-.form-input {
-    @apply w-full border-b px-2 py-3 focus:outline-none text-base transition-colors;
-    min-height: 44px;
-    border-color: var(--van-border-color);
-    color: var(--van-text-color);
-    background-color: transparent;
-}
-
-.form-input:focus {
-    border-color: var(--van-theme-primary);
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-    .form-input {
-        font-size: 16px;
-        /* 防止iOS缩放 */
-        padding: 12px 8px;
-    }
-
-    .form-label {
-        font-size: 14px;
-        margin-bottom: 8px;
-    }
-}
-
-.inquire-bg {
-    /* 优雅的渐变背景 - 增强对比度 */
-    background: linear-gradient(135deg,
-            #f0f4f8 0%,
-            #e2e8f0 25%,
-            #cbd5e1 50%,
-            #e2e8f0 75%,
-            #f0f4f8 100%) !important;
-
-    /* 优化性能的纹理效果 - 减少层数 */
-    background-image:
-        /* 主要圆形纹理 */
-        radial-gradient(circle at 25% 75%, rgba(162, 37, 37, 0.15) 0%, transparent 65%),
-        radial-gradient(circle at 75% 25%, rgba(162, 37, 37, 0.12) 0%, transparent 60%),
-
-        /* 简化网格纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.06) 25%, transparent 25%, transparent 75%, rgba(162, 37, 37, 0.06) 75%) !important;
-
-    /* 优化尺寸和位置 */
-    background-size:
-        500px 500px,
-        450px 450px,
-        80px 80px !important;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0 !important;
-
-    /* 确保背景覆盖整个视口 */
-    min-height: 100vh;
-    position: relative;
-
-    /* 性能优化 */
-    background-attachment: fixed;
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 优化性能的叠加纹理层 */
-.inquire-bg::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        /* 简化圆形纹理 */
-        radial-gradient(circle at 20% 30%, rgba(162, 37, 37, 0.10) 0%, transparent 60%),
-        radial-gradient(circle at 80% 70%, rgba(162, 37, 37, 0.08) 0%, transparent 55%),
-
-        /* 简化线条纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.05) 0%, transparent 50%, rgba(162, 37, 37, 0.05) 100%);
-
-    background-size:
-        400px 400px,
-        350px 350px,
-        200px 2px;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0;
-
-    pointer-events: none;
-    z-index: -1;
-
-    /* 性能优化 */
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 卡片样式优化 */
-.card {
-    @apply shadow-lg rounded-xl p-6 transition-all hover:shadow-xl;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* 按钮悬停效果 */
-button:hover {
-    transform: translateY(-1px);
-}
-
-button:active {
-    transform: translateY(0);
-}
-</style>
+    <InquireForm :type="'normal'" :feature="feature" :feature-data="featureData" />
+</template>

src/views/Login.vue

@@ -148,67 +148,56 @@ const onClickLeft = () => {
 <template>
     <div class="login-layout ">
         <van-nav-bar fixed placeholder title="用户登录" left-text="" left-arrow @click-left="onClickLeft" />
-        <div class="login px-8 relative z-10">
-            <div class="mb-8 pt-8 text-left">
+        <div class="login px-4 relative z-10">
+            <div class="mb-8 pt-20 text-left">
                 <div class="flex flex-col items-center">
                     <img class="h-16 w-16 rounded-full shadow" src="/logo.jpg" alt="Logo" />
                     <div class="text-3xl mt-4 text-slate-700 font-bold">天远数据</div>
                 </div>
             </div>
 
-            <div class="space-y-5">
+            <!-- 登录表单 -->
+            <div class="login-form">
                 <!-- 手机号输入 -->
-                <div :class="['input-container', phoneFocused ? 'focused' : '']">
-                    <input v-model="phoneNumber" class="input-field" type="tel" placeholder="请输入手机号" maxlength="11"
-                        @focus="phoneFocused = true" @blur="phoneFocused = false" />
+                <div class="form-item">
+                    <div class="form-label">手机号</div>
+                    <input v-model="phoneNumber" class="form-input" type="tel" placeholder="请输入手机号" maxlength="11" />
                 </div>
 
                 <!-- 验证码输入 -->
-                <div v-if="!isPasswordLogin">
-                    <div class="flex items-center justify-between">
-                        <div :class="['input-container', codeFocused ? 'focused' : '']">
-                            <input v-model="verificationCode" id="verificationCode" class="input-field"
-                                placeholder="请输入验证码" maxlength="6" @focus="codeFocused = true"
-                                @blur="codeFocused = false" />
-                        </div>
-                        <button
-                            class="ml-2 px-4 py-2 text-sm font-bold flex-shrink-0 rounded-lg transition duration-300"
-                            :class="isCountingDown || !isPhoneNumberValid ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'text-white hover:opacity-90'"
-                            :style="isCountingDown || !isPhoneNumberValid ? '' : 'background-color: #a22525'"
-                            @click="sendVerificationCode">
-                            {{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
+                <div class="form-item">
+                    <div class="form-label">验证码</div>
+                    <div class="verification-input-wrapper">
+                        <input v-model="verificationCode" id="verificationCode" class="form-input verification-input"
+                            placeholder="请输入验证码" maxlength="6" />
+                        <button class="get-code-btn" :class="{ 'disabled': isCountingDown || !isPhoneNumberValid }"
+                            @click="sendVerificationCode" :disabled="isCountingDown || !isPhoneNumberValid">
+                            {{ isCountingDown ? `${countdown}s` : '获取验证码' }}
                         </button>
                     </div>
                 </div>
 
-                <!-- 密码输入 -->
-                <div v-if="isPasswordLogin" :class="['input-container', passwordFocused ? 'focused' : '']">
-                    <input v-model="password" class="input-field" type="password" placeholder="请输入密码"
-                        @focus="passwordFocused = true" @blur="passwordFocused = false" />
-                </div>
-
                 <!-- 协议同意框 -->
-                <div class="flex items-start space-x-2">
-                    <input type="checkbox" v-model="isAgreed" class="mt-1" />
-                    <span class="text-xs text-gray-400 leading-tight">
-                        未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
-                        <a class="cursor-pointer" style="color: #a22525" @click="toUserAgreement">
-                            《用户协议》
-                        </a>
-                        和
-                        <a class="cursor-pointer" style="color: #a22525" @click="toPrivacyPolicy">
-                            《隐私政策》
-                        </a>
-                    </span>
+                <div class="agreement-wrapper">
+                    <input type="checkbox" v-model="isAgreed" class="agreement-checkbox accent-primary"
+                        id="agreement" />
+                    <label for="agreement" class="agreement-text">
+                        我已阅读并同意
+                        <a class="agreement-link" @click="toUserAgreement">《用户协议》</a>
+                        <a class="agreement-link" @click="toPrivacyPolicy">《隐私政策》</a>
+                    </label>
                 </div>
-            </div>
 
-            <button
-                class="mt-20 w-full py-3 text-lg font-bold text-white rounded-full transition duration-300 hover:opacity-90"
-                style="background-color: #a22525"
-                @click="handleLogin">
-                登录
-            </button>
+                <!-- 提示文字 -->
+                <div class="notice-text">
+                    未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
+                </div>
+
+                <!-- 登录按钮 -->
+                <button class="login-btn" :class="{ 'disabled': !canLogin }" @click="handleLogin" :disabled="!canLogin">
+                    登 录
+                </button>
+            </div>
         </div>
 
         <!-- 点击验证组件 -->
@@ -219,70 +208,147 @@ const onClickLeft = () => {
 
 <style scoped>
 .login-layout {
-    background: linear-gradient(135deg, #f0d6d6 0%, #e8c8c8 50%, #e0b8b8 100%);
+    background-image: url('@/assets/images/login_bg.png');
     background-position: center;
+    background-repeat: no-repeat;
     background-size: cover;
     height: 100vh;
     position: relative;
     overflow: hidden;
 }
 
-.login-layout::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: 
-        radial-gradient(circle at 20% 80%, rgba(162, 37, 37, 0.20) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(162, 37, 37, 0.16) 0%, transparent 50%),
-        radial-gradient(circle at 40% 40%, rgba(162, 37, 37, 0.12) 0%, transparent 50%);
-    pointer-events: none;
+.login {}
+
+/* 登录表单 */
+.login-form {
+    background-color: var(--color-bg-primary);
+    padding: 2rem;
+    margin-top: 0.5rem;
+    box-shadow: 0px 0px 24px 0px #3F3F3F0F;
+    border-radius: 8px;
 }
 
-.login-layout::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: 
-        linear-gradient(45deg, transparent 40%, rgba(162, 37, 37, 0.04) 50%, transparent 60%),
-        linear-gradient(-45deg, transparent 40%, rgba(162, 37, 37, 0.03) 50%, transparent 60%);
-    background-size: 80px 80px;
-    pointer-events: none;
-}
-
-.login {
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 2rem;
-    margin: 2rem 1rem;
-    padding: 2rem 1rem;
-    box-shadow: 
-        0 20px 40px rgba(162, 37, 37, 0.15),
-        0 8px 16px rgba(162, 37, 37, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9);
-}
-
-.input-container {
-    border: 2px solid rgba(162, 37, 37, 0.1);
-    border-radius: 1rem;
-    transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.9);
-}
-
-.input-container.focused {
-    border: 2px solid #a22525;
-}
-
-.input-field {
-    width: 100%;
-    padding: 1rem;
-    background: transparent;
+/* 表单项 */
+.form-item {
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
     border: none;
+    border-bottom: 1px solid var(--color-border-primary);
+}
+
+.form-label {
+    font-size: 0.9375rem;
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+    margin-right: 1rem;
+    font-weight: 500;
+    min-width: 4rem;
+    flex-shrink: 0;
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.875rem 0;
+
+    font-size: 0.9375rem;
+    color: var(--color-text-primary);
     outline: none;
-    transition: border-color 0.3s ease;
+    background-color: transparent;
+}
+
+.form-input::placeholder {
+    color: var(--color-text-tertiary);
+}
+
+.form-input:focus {
+    border-bottom-color: var(--color-text-primary);
+}
+
+/* 验证码输入 */
+.verification-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.verification-input {
+    flex: 1;
+    padding-right: 6rem;
+}
+
+.get-code-btn {
+    position: absolute;
+    right: 0;
+    background: none;
+    border: none;
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    font-weight: 500;
+}
+
+.get-code-btn.disabled {
+    color: var(--color-gray-400);
+    cursor: not-allowed;
+}
+
+/* 协议同意 */
+.agreement-wrapper {
+    display: flex;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.agreement-checkbox {
+    flex-shrink: 0;
+    margin-right: 0.5rem;
+}
+
+.agreement-text {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    line-height: 1.4;
+}
+
+.agreement-link {
+    color: var(--color-primary);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+/* 提示文字 */
+.notice-text {
+    font-size: 0.6875rem;
+    color: var(--color-text-tertiary);
+    line-height: 1.5;
+    margin-bottom: 2rem;
+}
+
+/* 登录按钮 */
+.login-btn {
+    width: 100%;
+    padding: 0.875rem;
+    background-color: var(--color-primary);
+    color: var(--color-text-white);
+    border: none;
+    border-radius: 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.3s;
+    letter-spacing: 0.25rem;
+}
+
+.login-btn:hover {
+    opacity: 0.9;
+}
+
+.login-btn.disabled {
+    background-color: var(--color-gray-300);
+    cursor: not-allowed;
 }
 </style>

src/views/PromotionInquire.vue

@@ -1,43 +1,23 @@
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue";
-import { aesEncrypt } from "@/utils/crypto";
+import { ref, onMounted, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
-import { storeToRefs } from 'pinia'
-import { useUserStore } from '@/stores/userStore'
-import Payment from "@/components/Payment.vue";
-import CarNumberInput from "@/components/CarNumberInput.vue";
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/stores/userStore';
+import InquireForm from "@/components/InquireForm.vue";
 
 const route = useRoute();
 const router = useRouter();
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-const { mobile: userStoreMobile } = storeToRefs(userStore)
-const showPayment = ref(false);
-const pendingPayment = ref(false) // 用于标记是否需要在绑定手机号后进行支付
+const userStore = useUserStore();
+const { mobile: userStoreMobile } = storeToRefs(userStore);
 
-const queryId = ref(null);
-const name = ref("");
-const idCard = ref("");
-const mobile = ref("");
-const verificationCode = ref("");
-const agreeToTerms = ref(false);
-const isCountingDown = ref(false);
-const countdown = ref(60);
+const linkIdentifier = ref("");
 const feature = ref("");
 const featureData = ref({});
-const linkIdentifier = ref("");
 
-// 处理绑定手机号成功的回调
-function handleBindSuccess() {
-    if (pendingPayment.value) {
-        pendingPayment.value = false
-        submitRequest()
-    }
-}
-
-onBeforeMount(() => {
-    getProduct();
+onBeforeMount(async () => {
+    await getProduct();
 });
+
 onMounted(() => {
     isFinishPayment();
 });
@@ -49,6 +29,7 @@ function isFinishPayment() {
         router.push({ path: "/report", query: { orderNo } });
     }
 }
+
 async function getProduct() {
     linkIdentifier.value = route.params.linkIdentifier;
     const { data: agentLinkData, error: agentLinkError } = await useApiFetch(
@@ -74,588 +55,8 @@ async function getProduct() {
         }
     }
 }
-
-const isPhoneNumberValid = computed(() => {
-    return /^1[3-9]\d{9}$/.test(mobile.value);
-});
-const isIdCardValid = computed(() => /^\d{17}[\dX]$/i.test(idCard.value));
-
-function handleSubmit() {
-    if (!agreeToTerms.value) {
-        showToast({
-            message: `请阅读并同意用户协议和隐私政策`,
-        });
-        return;
-    }
-    if (
-        !validateField("name", name.value, (v) => v, "请输入姓名") ||
-        !validateField(
-            "mobile",
-            mobile.value,
-            (v) => isPhoneNumberValid.value,
-            "请输入有效的手机号"
-        ) ||
-        !validateField(
-            "idCard",
-            idCard.value,
-            (v) => isIdCardValid.value,
-            "请输入有效的身份证号码"
-        ) ||
-        !validateField(
-            "verificationCode",
-            verificationCode.value,
-            (v) => v,
-            "请输入验证码"
-        )
-    ) {
-        return;
-    }
-    // 检查是否需要绑定手机号
-    const token = localStorage.getItem('token')
-    console.log('userStoreMobile', userStoreMobile)
-    if (!token || !userStoreMobile.value) {
-        // 没有token或者没有手机号，弹出绑定手机号对话框
-        pendingPayment.value = true
-        dialogStore.openBindPhone()
-    } else {
-        // 已有token和手机号，直接进行支付
-        submitRequest()
-    }
-}
-const validateField = (field, value, validationFn, errorMessage) => {
-    if (isHasInput(field) && !validationFn(value)) {
-        showToast({ message: errorMessage });
-        return false;
-    }
-    return true;
-};
-const toHistory = () => {
-    router.push("/historyQuery");
-};
-const defaultInput = ["name", "idCard", "mobile", "verificationCode"];
-const isHasInput = (input) => {
-    return defaultInput.includes(input);
-};
-async function submitRequest() {
-    const req = {
-        name: name.value,
-        id_card: idCard.value,
-        mobile: mobile.value,
-        code: verificationCode.value
-    };
-    const reqStr = JSON.stringify(req);
-    const encodeData = aesEncrypt(reqStr, "ff83609b2b24fc73196aac3d3dfb874f");
-
-    const { data, error } = await useApiFetch(
-        `/query/service_agent/${feature.value}`
-    )
-        .post({ data: encodeData, agent_identifier: linkIdentifier.value })
-        .json();
-    if (data.value.code === 200) {
-        queryId.value = data.value.data.id;
-        localStorage.setItem("token", data.value.data.accessToken);
-        localStorage.setItem("refreshAfter", data.value.data.refreshAfter);
-        localStorage.setItem("accessExpire", data.value.data.accessExpire);
-        showPayment.value = true;
-    }
-}
-
-async function sendVerificationCode() {
-    if (isCountingDown.value || !isPhoneNumberValid.value) return;
-    if (!isPhoneNumberValid.value) {
-        showToast({ message: "请输入有效的手机号" });
-        return;
-    }
-
-    const { data, error } = await useApiFetch("/auth/sendSms")
-        .post({ mobile: mobile.value, actionType: "query" })
-        .json();
-
-    if (!error.value && data.value.code === 200) {
-        // 聚焦到验证码输入框
-        nextTick(() => {
-            const verificationCodeInput = document.getElementById('verificationCode');
-            if (verificationCodeInput) {
-                verificationCodeInput.focus();
-            }
-        });
-        showToast({ message: "验证码发送成功", type: "success" });
-        startCountdown();
-    } else {
-        showToast({ message: "验证码发送失败，请重试" });
-    }
-}
-let timer = null;
-
-function startCountdown() {
-    isCountingDown.value = true;
-    countdown.value = 60;
-    timer = setInterval(() => {
-        if (countdown.value > 0) {
-            countdown.value--;
-        } else {
-            clearInterval(timer);
-            isCountingDown.value = false;
-        }
-    }, 1000);
-}
-function toUserAgreement() {
-    router.push(`/userAgreement`);
-}
-
-function toPrivacyPolicy() {
-    router.push(`/privacyPolicy`);
-}
-function toAuthorization() {
-    router.push(`/authorization`);
-}
-
-const toExample = () => {
-    router.push(`/example?feature=${feature.value}`);
-};
-// 获取功能图标
-const getFeatureIcon = (apiId) => {
-    const iconMap = {
-        JRZQ4AA8: "/inquire_icons/huankuanyali.svg", // 还款压力
-        QCXG7A2B: "/inquire_icons/mingxiacheliang.svg", // 名下车辆
-        BehaviorRiskScan: "/inquire_icons/fengxianxingwei.svg", // 风险行为扫描
-        IVYZ5733: "/inquire_icons/hunyinzhuangtai.svg", // 婚姻状态
-        PersonEnterprisePro: "/inquire_icons/renqiguanxi.svg", // 人企关系加强版
-        JRZQ0A03: "/inquire_icons/jiedaishenqing.svg", // 借贷申请记录
-        FLXG3D56: "/inquire_icons/jiedaiweiyue.svg", // 借贷违约失信
-        FLXG0V4B: "/inquire_icons/sifasheyu.svg", // 司法涉诉
-        JRZQ8203: "/inquire_icons/jiedaixingwei.svg", // 借贷行为记录
-        JRZQ09J8: "/inquire_icons/beijianguanrenyuan.svg", // 收入评估
-        JRZQ4B6C: "/inquire_icons/fengxianxingwei.svg", // 信贷表现
-    };
-    return iconMap[apiId] || "/inquire_icons/default.svg";
-};
-
-// 处理图标加载错误
-const handleIconError = (event) => {
-    // 如果图标加载失败，显示默认图标或隐藏
-    event.target.style.display = "none";
-};
-
-// 获取卡片样式类
-const getCardClass = (index) => {
-    const colorIndex = index % 4;
-    const colorClasses = [
-        'bg-gradient-to-br from-blue-50 via-blue-25 to-white border-2 border-blue-200',
-        'bg-gradient-to-br from-green-50 via-green-25 to-white border-2 border-green-200',
-        'bg-gradient-to-br from-purple-50 via-purple-25 to-white border-2 border-purple-200',
-        'bg-gradient-to-br from-orange-50 via-orange-25 to-white border-2 border-orange-200'
-    ];
-    return colorClasses[colorIndex];
-};
-
-onUnmounted(() => {
-    if (timer) {
-        clearInterval(timer);
-    }
-});
 </script>
 
 <template>
-    <div class="inquire-bg min-h-screen p-6">
-        <div class="mb-6 text-center text-3xl font-bold" style="color: var(--van-theme-primary);">
-            {{ featureData.product_name }}
-        </div>
-        <div class="card">
-            <div class="mb-4 text-lg font-semibold" style="color: var(--van-text-color);">基本信息</div>
-            <div class="mb-4">
-                <label for="name" class="form-label block mb-2">姓名</label>
-                <input v-model="name" id="name" type="text" placeholder="请输入姓名" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="idCard" class="form-label block mb-2">身份证号</label>
-                <input v-model="idCard" id="idCard" type="text" placeholder="请输入身份证号" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="mobile" class="form-label block mb-2">手机号</label>
-                <input v-model="mobile" id="mobile" type="tel" placeholder="请输入手机号" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="verificationCode" class="form-label block mb-2">验证码</label>
-                <div class="flex items-center gap-2">
-                    <input v-model="verificationCode" id="verificationCode" placeholder="请输入验证码" maxlength="6"
-                        class="form-input flex-1 min-w-0" />
-                    <button
-                        class="px-4 py-2 text-sm whitespace-nowrap flex-shrink-0 rounded-lg border transition-colors"
-                        :class="isCountingDown || !isPhoneNumberValid
-                            ? 'text-gray-400 border-gray-300 bg-gray-50'
-                            : 'text-white border-transparent'" :style="isCountingDown || !isPhoneNumberValid
-                                ? ''
-                                : 'background-color: var(--van-theme-primary);'"
-                        :disabled="isCountingDown || !isPhoneNumberValid" @click="sendVerificationCode">
-                        {{
-                        isCountingDown
-                        ? `${countdown}s重新获取`
-                        : "获取验证码"
-                        }}
-                    </button>
-                </div>
-            </div>
-
-            <div class="mb-4 flex items-center">
-                <input type="checkbox" v-model="agreeToTerms" />
-                <span class="ml-2 text-xs" style="color: var(--van-text-color-2);">
-                    我已阅读并同意
-                    <span @click="toUserAgreement" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《用户协议》</span>
-                    <span @click="toPrivacyPolicy" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《隐私政策》</span>
-                    <span @click="toAuthorization" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《授权书》</span>
-                </span>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-2">
-                <button
-                    class="flex-1 sm:w-24 rounded-xl sm:rounded-l-xl sm:rounded-r-none py-3 text-white text-base border transition-colors"
-                    style="background-color: var(--van-theme-primary-light); color: var(--van-theme-primary); border-color: var(--van-theme-primary);"
-                    @click="toExample">
-                    示例报告
-                </button>
-                <button
-                    class="flex-1 rounded-xl sm:rounded-l-none sm:rounded-r-xl py-3 text-white text-base transition-colors"
-                    style="background-color: var(--van-theme-primary);" @click="handleSubmit">
-                    立即查询
-                </button>
-            </div>
-        </div>
-        <div class="card mt-3" v-if="featureData.features && featureData.features.length > 0">
-            <div class="mb-3 text-base font-semibold flex items-center" style="color: var(--van-text-color);">
-                <div class="w-1 h-5 rounded-full mr-2"
-                    style="background: linear-gradient(to bottom, var(--van-theme-primary), var(--van-theme-primary-dark));">
-                </div>
-                报告包含内容
-            </div>
-            <div class="grid grid-cols-4 gap-2">
-                <template v-for="(feature, index) in featureData.features" :key="feature.id">
-                    <!-- FLXG0V4B 特殊处理：显示8个独立的案件类型 -->
-                    <template v-if="feature.api_id === 'FLXG0V4B'">
-                        <div v-for="(caseType, caseIndex) in [
-                            { name: '管辖案件', icon: 'beijianguanrenyuan.svg' },
-                            { name: '刑事案件', icon: 'xingshi.svg' },
-                            { name: '民事案件', icon: 'minshianjianguanli.svg' },
-                            { name: '失信被执行', icon: 'shixinren.svg' },
-                            { name: '行政案件', icon: 'xingzhengfuwu.svg' },
-                            { name: '赔偿案件', icon: 'yuepeichang.svg' },
-                            { name: '执行案件', icon: 'zhixinganjian.svg' },
-                            { name: '限高被执行', icon: 'xianzhigaoxiaofei.svg' },
-                        ]" :key="`${feature.id}-${caseIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + caseIndex)">
-                            <div class="mb-1">
-                                <img :src="`/inquire_icons/${caseType.icon}`" :alt="caseType.name"
-                                    class="w-6 h-6 drop-shadow-sm mx-auto" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight font-medium"
-                                style="word-break: break-all; line-height: 1.1; min-height: 28px; display: flex; align-items: center; justify-content: center;">
-                                {{ caseType.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG8B4D 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG8B4D'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '要素核查', icon: 'beijianguanrenyuan.svg' },
-                            { name: '运营商核验', icon: 'mingxiacheliang.svg' },
-                            { name: '公安重点人员检验', icon: 'xingshi.svg' },
-    { name: '逾期风险综述', icon: 'huankuanyali.svg' },
-    { name: '法院曝光台信息', icon: 'sifasheyu.svg' },
-    { name: '借贷评估', icon: 'jiedaishenqing.svg' },
-    { name: '租赁风险评估', icon: 'jiedaixingwei.svg' },
-    { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-    { name: '规则风险提示', icon: 'fengxianxingwei.svg' },
-]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- CJRZQ5E9F 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'JRZQ5E9F'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '信用评分', icon: 'huankuanyali.svg' },
-                            { name: '贷款行为分析', icon: 'jiedaixingwei.svg' },
-                            { name: '机构分析', icon: 'jiedaishenqing.svg' },
-                            { name: '时间趋势分析', icon: 'zhixinganjian.svg' },
-                            { name: '风险指标详情', icon: 'fengxianxingwei.svg' },
-                            { name: '专业建议', icon: 'yuepeichang.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- PersonEnterprisePro/CQYGL3F8E 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'PersonEnterprisePro' || feature.api_id === 'QYGL3F8E'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '投资企业记录', icon: 'renqiguanxi.svg' },
-                            { name: '高管任职记录', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉诉风险', icon: 'sifasheyu.svg' },
-                            { name: '对外投资历史', icon: 'renqiguanxi.svg' },
-                            { name: '融资历史', icon: 'huankuanyali.svg' },
-                            { name: '行政处罚', icon: 'xingzhengfuwu.svg' },
-                            { name: '经营异常', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG6A2C 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG6A2C'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '命中风险标注', icon: 'fengxianxingwei.svg' },
-                            { name: '公安重点人员核验', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉赌涉诈人员核验', icon: 'xingshi.svg' },
-                            { name: '风险名单', icon: 'jiedaiweiyue.svg' },
-                            { name: '历史借贷行为', icon: 'jiedaixingwei.svg' },
-                            { name: '近24个月放款情况', icon: 'jiedaishenqing.svg' },
-                            { name: '履约情况', icon: 'huankuanyali.svg' },
-                            { name: '历史逾期记录', icon: 'jiedaiweiyue.svg' },
-                            { name: '授信详情', icon: 'huankuanyali.svg' },
-                            { name: '租赁行为', icon: 'mingxiacheliang.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            { name: '法院风险信息', icon: 'sifasheyu.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- 其他功能正常显示 -->
-                    <div v-else
-                        class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-between p-2 shadow-lg"
-                        :class="getCardClass(index)">
-                        <div class="flex items-center justify-center flex-1">
-                            <img :src="getFeatureIcon(feature.api_id)" :alt="feature.name"
-                                class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                        </div>
-                        <div class="text-xs leading-tight font-medium h-8 flex items-center justify-center"
-                            style="word-break: break-all; line-height: 1.1">
-                            {{ feature.name }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div class="mt-3 text-center">
-                <div class="inline-flex items-center px-3 py-1.5 rounded-full border transition-all"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8)); border-color: var(--van-theme-primary);">
-                    <div class="w-1.5 h-1.5 rounded-full mr-1.5" style="background-color: var(--van-theme-primary);">
-                    </div>
-                    <span class="text-xs font-medium" style="color: var(--van-theme-primary);">更多信息请解锁报告</span>
-                </div>
-            </div>
-        </div>
-        <div class="card mt-4">
-            <div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);">
-                {{ featureData.product_name }}
-            </div>
-            <div class="mb-4 flex items-start justify-between">
-                <div class="text-lg" style="color: var(--van-text-color-2);">价格：</div>
-                <div>
-                    <div class="text-2xl font-semibold" style="color: var(--van-theme-primary);">
-                        ¥{{ featureData.sell_price }}
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-4 leading-relaxed" style="color: var(--van-text-color-2);" v-html="featureData.description">
-            </div>
-            <div class="mb-2 text-xs italic" style="color: var(--van-theme-primary);">
-                为保证用户的隐私以及数据安全，查询的结果生成30天之后将自动清除。
-            </div>
-            <!-- <template v-if="featureData.features && featureData.features.length > 1">
-                <div class="mb-4 text-lg text-gray-800 font-semibold">
-                    报告包含内容
-                </div>
-                <div class="grid grid-cols-2 gap-4">
-                    <div v-for="(feature, index) in featureData.features" :key="feature.id"
-                        class="rounded-lg py-2 text-center text-sm text-gray-700 font-medium" :class="[
-                            (Math.floor(index / 2) + (index % 2)) % 2 === 0
-                                ? 'bg-gradient-to-r from-blue-200 via-blue-200 to-blue-100'
-                                : 'bg-gradient-to-r from-sky-200 via-sky-200 to-sky-100',
-                        ]">
-                        {{ feature.name }}
-                    </div>
-                </div>
-            </template> -->
-        </div>
-    </div>
-    <Payment v-model="showPayment" :data="featureData" :id="queryId" type="query" @close="showPayment = false" />
-    <BindPhoneDialog @bind-success="handleBindSuccess" />
-    <RecordFooter v-if="!webviewEnv" />
-    <div @click="toHistory"
-        class="fixed right-2 top-3/4 px-4 py-2 text-sm bg-blue-400 rounded-xl cursor-pointer text-white font-bold shadow active:bg-blue-500">
-        历史查询
-    </div>
-</template>
-
-<style scoped>
-.form-label {
-    @apply text-sm font-medium;
-    color: var(--van-text-color);
-}
-
-.form-input::placeholder {
-    color: var(--van-text-color-3);
-}
-
-.form-input {
-    @apply w-full border-b px-2 py-3 focus:outline-none text-base transition-colors;
-    min-height: 44px;
-    border-color: var(--van-border-color);
-    color: var(--van-text-color);
-    background-color: transparent;
-}
-
-.form-input:focus {
-    border-color: var(--van-theme-primary);
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-    .form-input {
-        font-size: 16px;
-        /* 防止iOS缩放 */
-        padding: 12px 8px;
-    }
-
-    .form-label {
-        font-size: 14px;
-        margin-bottom: 8px;
-    }
-}
-
-.inquire-bg {
-    /* 优雅的渐变背景 - 增强对比度 */
-    background: linear-gradient(135deg,
-            #f0f4f8 0%,
-            #e2e8f0 25%,
-            #cbd5e1 50%,
-            #e2e8f0 75%,
-            #f0f4f8 100%) !important;
-
-    /* 优化性能的纹理效果 - 减少层数 */
-    background-image:
-        /* 主要圆形纹理 */
-        radial-gradient(circle at 25% 75%, rgba(162, 37, 37, 0.15) 0%, transparent 65%),
-        radial-gradient(circle at 75% 25%, rgba(162, 37, 37, 0.12) 0%, transparent 60%),
-
-        /* 简化网格纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.06) 25%, transparent 25%, transparent 75%, rgba(162, 37, 37, 0.06) 75%) !important;
-
-    /* 优化尺寸和位置 */
-    background-size:
-        500px 500px,
-        450px 450px,
-        80px 80px !important;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0 !important;
-
-    /* 确保背景覆盖整个视口 */
-    min-height: 100vh;
-    position: relative;
-
-    /* 性能优化 */
-    background-attachment: fixed;
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 优化性能的叠加纹理层 */
-.inquire-bg::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        /* 简化圆形纹理 */
-        radial-gradient(circle at 20% 30%, rgba(162, 37, 37, 0.10) 0%, transparent 60%),
-        radial-gradient(circle at 80% 70%, rgba(162, 37, 37, 0.08) 0%, transparent 55%),
-
-        /* 简化线条纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.05) 0%, transparent 50%, rgba(162, 37, 37, 0.05) 100%);
-
-    background-size:
-        400px 400px,
-        350px 350px,
-        200px 2px;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0;
-
-    pointer-events: none;
-    z-index: -1;
-
-    /* 性能优化 */
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 卡片样式优化 */
-.card {
-    @apply shadow-lg rounded-xl p-6 transition-all hover:shadow-xl;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* 按钮悬停效果 */
-button:hover {
-    transform: translateY(-1px);
-}
-
-button:active {
-    transform: translateY(0);
-}
-</style>
+    <InquireForm :type="'promotion'" :feature="feature" :link-identifier="linkIdentifier" :feature-data="featureData" />
+</template>

src/views/VantThemeTest.vue

@@ -180,7 +180,7 @@
                         <span>主色调: <span class="font-mono">var(--van-theme-primary)</span></span>
                     </div>
                     <p class="text-sm text-gray-600">
-                        以上所有组件的主色调都已配置为 <span class="font-mono">#a22525</span>，通过 <span
+                        以上所有组件的主色调都已配置为 <span class="font-mono">#5d7eeb</span>，通过 <span
                             class="font-mono">var(--van-theme-primary)</span>
                         CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
                     </p>

src/views/index.vue

@@ -5,9 +5,12 @@ import SectionTitle from "@/components/SectionTitle.vue";
 
 const agentStore = useAgentStore();
 const { isAgent } = storeToRefs(agentStore);
-import personalDataIcon from "@/assets/images/index/personal_data_bg.png";
-import companyIcon from "@/assets/images/index/company_bg.png";
-import loanCheckIcon from "@/assets/images/index/loan_check_bg.png";
+import personalDataIcon from "@/assets/images/index/personal_data_bg.jpg";
+import companyIcon from "@/assets/images/index/company_bg.jpg";
+import loanCheckIcon from "@/assets/images/index/loan_check_bg.jpg";
+import marriageRiskIcon from "@/assets/images/index/marriage_risk_bg.jpg";
+import housekeepingRiskIcon from "@/assets/images/index/housekeeping_risk_bg.jpg";
+import preLoanRiskIcon from "@/assets/images/index/preloan_risk_bg.jpg";
 function toInquire(name) {
     router.push(`/inquire/${name}`);
 }
@@ -17,9 +20,6 @@ function toInvitation() {
 const toPromote = () => {
     router.push({ name: "promote" });
 };
-function toAgentVipApply() {
-    router.push({ name: "agentVipApply" });
-}
 
 const toHelp = () => {
     router.push("/help");
@@ -29,13 +29,11 @@ const toService = () => {
     router.push({ name: "service" });
 };
 
-const toIncome = () => {
-    router.push({ name: "subordinateList" });
-};
+function toHistory() {
+    router.push(`/historyQuery`);
+}
+
 
-const toWithdraw = () => {
-    router.push({ name: "withdraw" });
-};
 
 
 const services = ref([
@@ -44,29 +42,55 @@ const services = ref([
         name: "personalData",
         subtitle: "深度检测报告",
         bg: personalDataIcon,
-        goColor: "#A22525",
+        goColor: "var(--color-service-personal)",
     },
     {
         title: "小微企业",
         name: "companyinfo",
         subtitle: "信用报告",
         bg: companyIcon,
-        goColor: "#6B9DF9",
+        goColor: "var(--color-service-company)",
     },
     {
         title: "贷前背调",
         name: "preloanbackgroundcheck",
         subtitle: "风险评估",
         bg: loanCheckIcon,
-        goColor: "#E1A0E4",
+        goColor: "var(--color-service-loan)",
+    },
+]);
+
+const riskServices = ref([
+    {
+        title: "婚恋风险",
+        name: "marriage",
+        subtitle: "情感安全检测",
+        bg: marriageRiskIcon,
+        goColor: "var(--color-warning)",
+    },
+    {
+        title: "家政风险",
+        name: "homeservice",
+        subtitle: "服务安全保障",
+        bg: housekeepingRiskIcon,
+        goColor: "var(--color-info)",
+    },
+    {
+        title: "入职背调",
+        name: "backgroundcheck",
+        subtitle: "员工背景调查",
+        bg: preLoanRiskIcon,
+        goColor: "var(--color-danger)",
     },
 ]);
 
 const noticeText = ref([]);
-
-function toHistory() {
-    router.push(`/historyQuery`);
-}
+const toCooperation = () => {
+    window.location.href = "https://www.tianyuandata.com";
+};
+const toBigData = () => {
+    window.location.href = "https://www.tybigdata.com/";
+};
 </script>
 
 <template>
@@ -74,69 +98,47 @@ function toHistory() {
         <div class="relative p-4">
             <img class="h-full w-full rounded-xl overflow-hidden" src="@/assets/images/index/banner.png" />
         </div>
-        <div class="px-4 pb-2 mt-6">
-            <!-- 第一行 -->
-            <div class="grid grid-cols-4 gap-3 mb-3">
+        <div class="px-4 pb-2 mt-2">
+            <!-- 菜单项一行显示 -->
+            <div class="grid grid-cols-5 gap-2">
                 <div class="text-center flex flex-col justify-center items-center" @click="toInvitation">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/yqhy.png" alt="邀请好友" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/yqhy.png" alt="邀请好友" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">邀请好友</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toAgentVipApply">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/cwhy.png" alt="成为会员" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">成为会员</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">邀请好友</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toHelp">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/bzzx.png" alt="帮助中心" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/bzzx.png" alt="帮助中心" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">帮助中心</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">帮助中心</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toHistory">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/wdbg.png" alt="我的报告" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/wdbg.png" alt="我的报告" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">我的报告</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">我的报告</div>
                 </div>
-            </div>
-
-            <!-- 第二行 -->
-            <div class="grid grid-cols-4 gap-3">
                 <div class="text-center flex flex-col justify-center items-center" @click="toService">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/lxkf.png" alt="联系客服" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/lxkf.png" alt="联系客服" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">联系客服</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toIncome">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/srmx.png" alt="收入明细" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">收入明细</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toWithdraw">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/wytx.png" alt="我要提现" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">我要提现</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">联系客服</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toPromote">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/tgbg.png" alt="推广报告" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/tgbg.png" alt="推广报告" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">推广报告</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">推广报告</div>
                 </div>
             </div>
         </div>
 
-        <div class="relative p-4 pb-4 pt-2 mt-6">
+        <div class="relative p-4 pb-4 pt-2 mt-2">
             <SectionTitle title="查询服务" />
-            <div class="grid grid-cols-2 gap-6 my-4" style="grid-template-rows: repeat(2, 1fr);">
+            <div class="grid grid-cols-2 gap-4 my-4" style="grid-template-rows: repeat(2, 1fr);">
                 <template v-for="(service, index) in services" :key="index">
-                    <div class="relative flex flex-col px-4 py-2 rounded-xl min-h-24"
+                    <div class="relative flex flex-col px-4 py-2 rounded-xl min-h-24 shadow-lg"
                         :class="index === 0 ? 'row-span-2' : ''"
                         :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
                         @click=" toInquire(service.name)">
@@ -157,13 +159,31 @@ function toHistory() {
                     </div>
                 </template>
             </div>
+            <div class="grid grid-cols-3 gap-4 my-4">
+                <template v-for="(service, index) in riskServices" :key="index">
+                    <div class="relative flex flex-col px-3 py-2 rounded-xl min-h-20 shadow-lg"
+                        :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
+                        @click="toInquire(service.name)">
+                        <div class="min-h-16 flex flex-col items-start px-1">
+                            <div class="mt-1 max-w-max text-left text-gray-600 font-bold text-sm">
+                                {{ service.title }}
+                            </div>
+                            <div class="max-w-max text-left text-xs text-gray-600">
+                                <div>{{ service.subtitle }}</div>
+                            </div>
+                            <div class="mt-1 rounded-lg px-1 text-xs text-white shadow-xl w-max flex items-center"
+                                :style="`background-color: ${service.goColor}`">
+                                GO
+                                <img src="@/assets/images/index/go_icon.png" alt="右箭头"
+                                    class="ml-0.5 h-3 w-3 inline-block align-middle" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
             <SectionTitle title="其他服务" class="mt-8" />
-            <div class="mb-6 mt-6 py-4 flex flex-col items-center justify-center rounded-3xl from-blue-500 to-sky-400 bg-gradient-to-b text-center text-lg text-white line-height-12 shadow-xl"
-                @click="toCooperation">
-                <div class="flex items-center text-xl">
-                    天远数据邀您共赢，共享数据新价值！
-                </div>
-                <div class="flex items-center">点击进入商务合作</div>
+            <div class="mt-4 rounded-xl overflow-hidden bg-white shadow-xl" @click="toCooperation">
+                <img src="@/assets/images/index_a_banner.png" class="w-full h-full" alt="大数据服务横幅" mode="widthFix" />
             </div>
             <div class="mt-4 rounded-2xl overflow-hidden" @click="toBigData">
                 <img src="@/assets/images/index_b_banner.png" class="w-full h-full" mode="widthFix" />

tailwind.config.js

@@ -1,11 +1,113 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html", // 如果是 Vite 项目
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: [
+        "./index.html", // 如果是 Vite 项目
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                // 主题色系
+                primary: {
+                    DEFAULT: "#5D7EEB",
+                    50: "#F0F3FF",
+                    100: "#E1E8FF",
+                    200: "#C3D1FF",
+                    300: "#A5BAFF",
+                    400: "#87A3FF",
+                    500: "#5D7EEB",
+                    600: "#4A63BC",
+                    700: "#38488D",
+                    800: "#252D5E",
+                    900: "#13122F",
+                },
+                // 语义化颜色
+                success: {
+                    DEFAULT: "#07c160",
+                    50: "#f0f9f0",
+                    100: "#e1f5e1",
+                    200: "#c3ebc3",
+                    300: "#a5e1a5",
+                    400: "#87d787",
+                    500: "#07c160",
+                    600: "#059a4c",
+                    700: "#047338",
+                    800: "#024c24",
+                    900: "#012510",
+                },
+                warning: {
+                    DEFAULT: "#ff976a",
+                    50: "#fff5f0",
+                    100: "#ffebe1",
+                    200: "#ffd7c3",
+                    300: "#ffc3a5",
+                    400: "#ffaf87",
+                    500: "#ff976a",
+                    600: "#cc7955",
+                    700: "#995b40",
+                    800: "#663d2a",
+                    900: "#331f15",
+                },
+                danger: {
+                    DEFAULT: "#ee0a24",
+                    50: "#fdf2f2",
+                    100: "#fce5e5",
+                    200: "#f9caca",
+                    300: "#f6b0b0",
+                    400: "#f39595",
+                    500: "#ee0a24",
+                    600: "#be081d",
+                    700: "#8f0616",
+                    800: "#5f040e",
+                    900: "#300207",
+                },
+                // 中性色
+                gray: {
+                    50: "#fafafa",
+                    100: "#f5f5f5",
+                    200: "#e5e5e5",
+                    300: "#d4d4d4",
+                    400: "#a3a3a3",
+                    500: "#737373",
+                    600: "#525252",
+                    700: "#404040",
+                    800: "#262626",
+                    900: "#171717",
+                },
+                // 文本颜色
+                text: {
+                    primary: "#323233",
+                    secondary: "#646566",
+                    tertiary: "#969799",
+                },
+                // 背景颜色
+                background: {
+                    DEFAULT: "#ffffff",
+                    light: "#fafafa",
+                    dark: "#f8f8f8",
+                },
+                // 边框颜色
+                border: "#ebedf0",
+                // 活跃状态颜色
+                active: "#f2f3f5",
+            },
+            fontFamily: {
+                sans: [
+                    "Inter",
+                    "-apple-system",
+                    "BlinkMacSystemFont",
+                    "Segoe UI",
+                    "Roboto",
+                    "Oxygen",
+                    "Ubuntu",
+                    "Cantarell",
+                    "Fira Sans",
+                    "Droid Sans",
+                    "Helvetica Neue",
+                    "sans-serif",
+                ],
+            },
+        },
+    },
+    plugins: [],
 };