diff --git a/COLOR_GUIDE.md b/COLOR_GUIDE.md new file mode 100644 index 0000000..2a983a5 --- /dev/null +++ b/COLOR_GUIDE.md @@ -0,0 +1,195 @@ +# 颜色使用指南 + +## 🎨 主题色系统 + +本项目采用统一的颜色管理系统,支持主题切换和颜色规范化管理。 + +### 主色调 +- **主色调**: `#5D7EEB` (蓝色) +- **CSS变量**: `var(--color-primary)` +- **Tailwind类名**: `bg-primary`, `text-primary`, `border-primary` + +## 📁 文件结构 + +``` +src/assets/ +├── colors.css # 统一颜色变量定义 +├── vant-theme.css # Vant组件主题配置 +├── main.css # 主样式文件(导入所有样式) +└── base.css # 基础样式 + +tailwind.config.js # Tailwind颜色配置 +``` + +## 🎯 使用方式 + +### 1. CSS变量方式(推荐) + +```css +/* 在CSS中使用 */ +.my-button { + background-color: var(--color-primary); + color: var(--color-text-white); + border-color: var(--color-border-primary); +} + +.my-text { + color: var(--color-text-secondary); +} +``` + +### 2. Tailwind类名方式 + +```html + + + +
{{ description }}
+
diff --git a/src/components/TitleBanner.vue b/src/components/TitleBanner.vue
index e606d21..2e70511 100644
--- a/src/components/TitleBanner.vue
+++ b/src/components/TitleBanner.vue
@@ -10,10 +10,15 @@
diff --git a/src/layouts/HomeLayout.vue b/src/layouts/HomeLayout.vue
index f014db5..ce1c7cb 100644
--- a/src/layouts/HomeLayout.vue
+++ b/src/layouts/HomeLayout.vue
@@ -130,7 +130,7 @@ const toComplaint = () => {
position: fixed;
bottom: 6rem;
right: 1rem;
- background: #A22525;
+ background: #ff6b6b;
border-radius: 1.5rem;
padding: 0.25rem 1rem;
color: white;
@@ -140,6 +140,7 @@ const toComplaint = () => {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 2000;
}
+
.complaint-button i {
margin-right: 0.5rem;
}
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index b9b4a49..61e211d 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -1,17 +1,21 @@
-
- 以上所有组件的主色调都已配置为 #a22525,通过 #5d7eeb,通过 var(--van-theme-primary) CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
diff --git a/src/views/index.vue b/src/views/index.vue index a9b3e82..4eb336c 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -5,9 +5,12 @@ import SectionTitle from "@/components/SectionTitle.vue"; const agentStore = useAgentStore(); const { isAgent } = storeToRefs(agentStore); -import personalDataIcon from "@/assets/images/index/personal_data_bg.png"; -import companyIcon from "@/assets/images/index/company_bg.png"; -import loanCheckIcon from "@/assets/images/index/loan_check_bg.png"; +import personalDataIcon from "@/assets/images/index/personal_data_bg.jpg"; +import companyIcon from "@/assets/images/index/company_bg.jpg"; +import loanCheckIcon from "@/assets/images/index/loan_check_bg.jpg"; +import marriageRiskIcon from "@/assets/images/index/marriage_risk_bg.jpg"; +import housekeepingRiskIcon from "@/assets/images/index/housekeeping_risk_bg.jpg"; +import preLoanRiskIcon from "@/assets/images/index/preloan_risk_bg.jpg"; function toInquire(name) { router.push(`/inquire/${name}`); } @@ -17,9 +20,6 @@ function toInvitation() { const toPromote = () => { router.push({ name: "promote" }); }; -function toAgentVipApply() { - router.push({ name: "agentVipApply" }); -} const toHelp = () => { router.push("/help"); @@ -29,13 +29,11 @@ const toService = () => { router.push({ name: "service" }); }; -const toIncome = () => { - router.push({ name: "subordinateList" }); -}; +function toHistory() { + router.push(`/historyQuery`); +} + -const toWithdraw = () => { - router.push({ name: "withdraw" }); -}; const services = ref([ @@ -44,29 +42,55 @@ const services = ref([ name: "personalData", subtitle: "深度检测报告", bg: personalDataIcon, - goColor: "#A22525", + goColor: "var(--color-service-personal)", }, { title: "小微企业", name: "companyinfo", subtitle: "信用报告", bg: companyIcon, - goColor: "#6B9DF9", + goColor: "var(--color-service-company)", }, { title: "贷前背调", name: "preloanbackgroundcheck", subtitle: "风险评估", bg: loanCheckIcon, - goColor: "#E1A0E4", + goColor: "var(--color-service-loan)", + }, +]); + +const riskServices = ref([ + { + title: "婚恋风险", + name: "marriage", + subtitle: "情感安全检测", + bg: marriageRiskIcon, + goColor: "var(--color-warning)", + }, + { + title: "家政风险", + name: "homeservice", + subtitle: "服务安全保障", + bg: housekeepingRiskIcon, + goColor: "var(--color-info)", + }, + { + title: "入职背调", + name: "backgroundcheck", + subtitle: "员工背景调查", + bg: preLoanRiskIcon, + goColor: "var(--color-danger)", }, ]); const noticeText = ref([]); - -function toHistory() { - router.push(`/historyQuery`); -} +const toCooperation = () => { + window.location.href = "https://www.tianyuandata.com"; +}; +const toBigData = () => { + window.location.href = "https://www.tybigdata.com/"; +}; @@ -74,69 +98,47 @@ function toHistory() {
+
-
+
+
+
-
-
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 9348b41..04af5e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,113 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: [
- "./index.html", // 如果是 Vite 项目
- "./src/**/*.{vue,js,ts,jsx,tsx}",
- ],
- theme: {
- extend: {},
- },
- plugins: [],
+ content: [
+ "./index.html", // 如果是 Vite 项目
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ // 主题色系
+ primary: {
+ DEFAULT: "#5D7EEB",
+ 50: "#F0F3FF",
+ 100: "#E1E8FF",
+ 200: "#C3D1FF",
+ 300: "#A5BAFF",
+ 400: "#87A3FF",
+ 500: "#5D7EEB",
+ 600: "#4A63BC",
+ 700: "#38488D",
+ 800: "#252D5E",
+ 900: "#13122F",
+ },
+ // 语义化颜色
+ success: {
+ DEFAULT: "#07c160",
+ 50: "#f0f9f0",
+ 100: "#e1f5e1",
+ 200: "#c3ebc3",
+ 300: "#a5e1a5",
+ 400: "#87d787",
+ 500: "#07c160",
+ 600: "#059a4c",
+ 700: "#047338",
+ 800: "#024c24",
+ 900: "#012510",
+ },
+ warning: {
+ DEFAULT: "#ff976a",
+ 50: "#fff5f0",
+ 100: "#ffebe1",
+ 200: "#ffd7c3",
+ 300: "#ffc3a5",
+ 400: "#ffaf87",
+ 500: "#ff976a",
+ 600: "#cc7955",
+ 700: "#995b40",
+ 800: "#663d2a",
+ 900: "#331f15",
+ },
+ danger: {
+ DEFAULT: "#ee0a24",
+ 50: "#fdf2f2",
+ 100: "#fce5e5",
+ 200: "#f9caca",
+ 300: "#f6b0b0",
+ 400: "#f39595",
+ 500: "#ee0a24",
+ 600: "#be081d",
+ 700: "#8f0616",
+ 800: "#5f040e",
+ 900: "#300207",
+ },
+ // 中性色
+ gray: {
+ 50: "#fafafa",
+ 100: "#f5f5f5",
+ 200: "#e5e5e5",
+ 300: "#d4d4d4",
+ 400: "#a3a3a3",
+ 500: "#737373",
+ 600: "#525252",
+ 700: "#404040",
+ 800: "#262626",
+ 900: "#171717",
+ },
+ // 文本颜色
+ text: {
+ primary: "#323233",
+ secondary: "#646566",
+ tertiary: "#969799",
+ },
+ // 背景颜色
+ background: {
+ DEFAULT: "#ffffff",
+ light: "#fafafa",
+ dark: "#f8f8f8",
+ },
+ // 边框颜色
+ border: "#ebedf0",
+ // 活跃状态颜色
+ active: "#f2f3f5",
+ },
+ fontFamily: {
+ sans: [
+ "Inter",
+ "-apple-system",
+ "BlinkMacSystemFont",
+ "Segoe UI",
+ "Roboto",
+ "Oxygen",
+ "Ubuntu",
+ "Cantarell",
+ "Fira Sans",
+ "Droid Sans",
+ "Helvetica Neue",
+ "sans-serif",
+ ],
+ },
+ },
+ },
+ plugins: [],
};