From 6a39094090bb96721acd11941d84c84336faefd0 Mon Sep 17 00:00:00 2001 From: zj <1772600164@qq.com> Date: Fri, 09 Jan 2026 18:59:24 +0800 Subject: [PATCH] 1 --- src/styles/variables.scss | 92 +++++++++++++++++++++++++++++---------------- 1 files changed, 59 insertions(+), 33 deletions(-) diff --git a/src/styles/variables.scss b/src/styles/variables.scss index fa283bd..9a6208a 100644 --- a/src/styles/variables.scss +++ b/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; -- Gitblit v1.9.3