1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 src/styles/variables.scss

@@ -1,55 +1,75 @@
// 根据截图提取的精确颜色值
$bg-primary: #ffffff;
$bg-secondary: #f5f5f5;
$bg-tertiary: #fafafa;
$bg-dark: #1a1a1a;
// ===== 主色调系统 =====
$primary: #64EDFB;
$primary-light: #E2FDFE;
$primary-dark: #4DD5E8;
$primary-hover: #7DF0FF;

// ===== 背景色系统 =====
$bg-primary: #ffffff;
$bg-secondary: #F8F9FA;
$bg-tertiary: #E2FDFE;
$bg-card: #ffffff;
$bg-card-hover: #F8F9FA;
$bg-dark: #1a1a1a;
$bg-overlay: rgba(0, 0, 0, 0.4);

// ===== 文本颜色系统 =====
$text-primary: #1a1a1a;
$text-secondary: #666666;
$text-tertiary: #999999;
$text-disabled: #CCCCCC;
$text-white: #ffffff;
$text-on-primary: #1a1a1a;

// 主色调 - 根据截图中的蓝色按钮
$primary-blue: #1890ff;
$primary-light-blue: #e6f7ff;
$primary-dark-blue: #096dd9;
// ===== 语义化颜色 =====
$success: #10B981;
$success-light: #D1FAE5;
$warning: #F59E0B;
$warning-light: #FEF3C7;
$error: #EF4444;
$error-light: #FEE2E2;
$info: #3B82F6;
$info-light: #DBEAFE;

// 功能色
$success-green: #52c41a;
$error-red: #ff4d4f;
$warning-orange: #faad14;
$info-blue: #1890ff;
// ===== 涨跌颜色 =====
$up-green: #10B981;
$down-red: #EF4444;

// 涨跌颜色
$up-green: #52c41a;
$down-red: #ff4d4f;
// ===== 边框颜色 =====
$border-color: #E5E7EB;
$border-light: #F3F4F6;
$border-dark: #D1D5DB;
$border-focus: #64EDFB;

// 边框
$border-color: #e8e8e8;
$border-light: #f0f0f0;
$border-dark: #d9d9d9;
// ===== 阴影系统 =====
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
$button-shadow: 0 2px 4px rgba(100, 237, 251, 0.2);
$button-shadow-hover: 0 4px 8px rgba(100, 237, 251, 0.3);

// 阴影
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

// 间距
// ===== 间距系统 =====
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;
$spacing-xxxl: 32px;

// 圆角
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 16px;
// ===== 圆角系统 =====
$radius-xs: 4px;
$radius-sm: 8px;
$radius-md: 12px;
$radius-lg: 16px;
$radius-xl: 20px;
$radius-pill: 24px;
$radius-round: 50%;

// 字体大小
// ===== 字体大小系统 =====
$font-xs: 10px;
$font-sm: 12px;
$font-md: 14px;
@@ -57,3 +77,9 @@
$font-xl: 18px;
$font-xxl: 20px;
$font-title: 24px;
$font-display: 28px;

// ===== 过渡动画 =====
$transition-fast: 0.15s ease;
$transition-base: 0.2s ease;
$transition-slow: 0.3s ease;