first commit

src/assets/colors.css

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