75 lines
1.8 KiB
SCSS
75 lines
1.8 KiB
SCSS
// ============================================
|
|
// 📌 字体大小 - 使用 rem 单位（推荐方案）
|
|
// ============================================
|
|
// 核心原理：
|
|
// 1. rem 相对于根元素（page/html）的字体大小计算
|
|
// 2. 只需要修改根字体大小，所有 rem 会自动缩放
|
|
// 3. 基准：1rem = 16px（浏览器默认值）
|
|
// 4. 字体缩放时，修改 document.documentElement.style.fontSize 即可
|
|
|
|
// 基础字号（基于 16px 基准）
|
|
$font-size-xs: 0.625rem; // 10px / 16px
|
|
$font-size-sm: 0.6875rem; // 11px / 16px
|
|
$font-size-base: 0.8125rem; // 13px / 16px
|
|
$font-size-md: 0.875rem; // 14px / 16px
|
|
$font-size-lg: 1rem; // 16px / 16px
|
|
$font-size-xl: 1.25rem; // 20px / 16px
|
|
$font-size-xxl: 1.5rem; // 24px / 16px
|
|
|
|
// ============================================
|
|
// 📌 SCSS 变量（主题、颜色等）
|
|
// ============================================
|
|
|
|
// 主题色
|
|
$primary-color: #1890ff;
|
|
$success-color: #52c41a;
|
|
$warning-color: #fa8c16;
|
|
$danger-color: #ff4d4f;
|
|
$info-color: #722ed1;
|
|
|
|
// 文字色
|
|
$text-primary: #333333;
|
|
$text-secondary: #666666;
|
|
$text-placeholder: #999999;
|
|
$text-disabled: #bbbbbb;
|
|
|
|
// 背景色
|
|
$bg-primary: #f5f5f5;
|
|
$bg-secondary: #ffffff;
|
|
$bg-card: #ffffff;
|
|
|
|
// 边框色
|
|
$border-color: #eeeeee;
|
|
$border-light: #f5f5f5;
|
|
|
|
// 标签色
|
|
$tag-blue: #e6f7ff;
|
|
$tag-blue-text: #1890ff;
|
|
$tag-green: #f6ffed;
|
|
$tag-green-text: #52c41a;
|
|
$tag-orange: #fff7e6;
|
|
$tag-orange-text: #fa8c16;
|
|
$tag-red: #fff1f0;
|
|
$tag-red-text: #ff4d4f;
|
|
$tag-grey: #f5f5f5;
|
|
$tag-grey-text: #999999;
|
|
|
|
// 尺寸
|
|
$nav-bar-height: 48px;
|
|
$tab-bar-height: 56px;
|
|
$status-bar-height: 28px;
|
|
|
|
// 圆角
|
|
$border-radius-sm: 6px;
|
|
$border-radius-md: 10px;
|
|
$border-radius-lg: 14px;
|
|
$border-radius-xl: 20px;
|
|
|
|
// 间距
|
|
$spacing-xs: 4px;
|
|
$spacing-sm: 8px;
|
|
$spacing-base: 12px;
|
|
$spacing-md: 16px;
|
|
$spacing-lg: 20px;
|
|
$spacing-xl: 24px;
|