version temp3
This commit is contained in:
liangzai
195
COLOR_GUIDE.md
Normal file
195
COLOR_GUIDE.md
Normal file
@@ -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)
|
||||
@@ -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. 提供了完整的颜色变量系统，便于维护和扩展
|
||||
|
||||
## 参考文档
|
||||
|
||||
|
||||
211
src/assets/colors.css
Normal file
211
src/assets/colors.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/index/company_bg.jpg
Normal file
BIN
src/assets/images/index/company_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/images/index/housekeeping_risk_bg.jpg
Normal file
BIN
src/assets/images/index/housekeeping_risk_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/index/loan_check_bg.jpg
Normal file
BIN
src/assets/images/index/loan_check_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/images/index/marriage_risk_bg.jpg
Normal file
BIN
src/assets/images/index/marriage_risk_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/index/personal_data_bg.jpg
Normal file
BIN
src/assets/images/index/personal_data_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/index/preloan_risk_bg.jpg
Normal file
BIN
src/assets/images/index/preloan_risk_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/images/index_a_banner.png
Normal file
BIN
src/assets/images/index_a_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 507 KiB After Width: | Height: | Size: 74 KiB |
BIN
src/assets/images/report/backgroundcheck_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/backgroundcheck_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/report/backgroundcheck_report_bg.jpg
Normal file
BIN
src/assets/images/report/backgroundcheck_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/images/report/dqfx_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/dqfx_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
BIN
src/assets/images/report/dqfx_report_bg.jpg
Normal file
BIN
src/assets/images/report/dqfx_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/report/fxzl.png
Normal file
BIN
src/assets/images/report/fxzl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/images/report/gazdryhy.png
Normal file
BIN
src/assets/images/report/gazdryhy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/images/report/gazdryhycp.png
Normal file
BIN
src/assets/images/report/gazdryhycp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/report/grdsj_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/grdsj_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
BIN
src/assets/images/report/grdsj_report_bg.jpg
Normal file
BIN
src/assets/images/report/grdsj_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
BIN
src/assets/images/report/gsdfx.png
Normal file
BIN
src/assets/images/report/gsdfx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/images/report/homeservice_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/homeservice_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/report/homeservice_report_bg.jpg
Normal file
BIN
src/assets/images/report/homeservice_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/images/report/marriage_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/marriage_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/report/marriage_report_bg.jpg
Normal file
BIN
src/assets/images/report/marriage_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/report/sdszhycp.png
Normal file
BIN
src/assets/images/report/sdszhycp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/report/xwqy_inquire_bg.jpg
Normal file
BIN
src/assets/images/report/xwqy_inquire_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
BIN
src/assets/images/report/xwqy_report_bg.jpg
Normal file
BIN
src/assets/images/report/xwqy_report_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 4.5 KiB |
BIN
src/assets/images/report/yqfxgl.png
Normal file
BIN
src/assets/images/report/yqfxgl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/report/yqsjfb.png
Normal file
BIN
src/assets/images/report/yqsjfb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/images/report/yyshy.png
Normal file
BIN
src/assets/images/report/yyshy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 5.0 KiB |
BIN
src/assets/images/report/zlfxpg.png
Normal file
BIN
src/assets/images/report/zlfxpg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 11 KiB |
@@ -1,4 +1,5 @@
|
||||
@import "./base.css";
|
||||
@import "./colors.css";
|
||||
@import "./nprogress.css";
|
||||
@import "./vant-theme.css";
|
||||
@tailwind base;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
/* 主色调 - 可以根据需要修改这个变量来改变整个主题 */
|
||||
--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;
|
||||
/* 覆盖 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-text-color: #323233;
|
||||
--van-text-color-2: #646566;
|
||||
--van-text-color-3: #969799;
|
||||
|
||||
/* 背景色 */
|
||||
--van-background-color: #ffffff;
|
||||
--van-background-color-light: #fafafa;
|
||||
/* 背景色 */
|
||||
--van-background-color: #ffffff;
|
||||
--van-background-color-light: #fafafa;
|
||||
|
||||
/* 边框色 */
|
||||
--van-border-color: #ebedf0;
|
||||
/* 边框色 */
|
||||
--van-border-color: #ebedf0;
|
||||
|
||||
/* 活跃状态颜色 */
|
||||
--van-active-color: #f2f3f5;
|
||||
/* 活跃状态颜色 */
|
||||
--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;
|
||||
}
|
||||
1
src/auto-imports.d.ts
vendored
1
src/auto-imports.d.ts
vendored
@@ -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']
|
||||
|
||||
@@ -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: "贷款风险评估",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
|
||||
@@ -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);">
|
||||
我已阅读并同意
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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(() => { });
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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],
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: '👔' },
|
||||
|
||||
@@ -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],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: '👔' },
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
<InquireForm :type="'normal'" :feature="feature" :feature-data="featureData" />
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
<InquireForm :type="'promotion'" :feature="feature" :link-identifier="linkIdentifier" :feature-data="featureData" />
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user