130 lines
4.5 KiB
CSS
130 lines
4.5 KiB
CSS
/**
|
|
* ============================================================
|
|
* 健身房预约小程序 · 珊瑚橙配色方案 (CSS Variables)
|
|
* ============================================================
|
|
*
|
|
* 主题风格：珊瑚橙 (Coral Orange)
|
|
* 主色：温暖珊瑚橙 + 柔和米白
|
|
* 性格：亲切、阳光、活力、温暖
|
|
* 适用场景：轻运动、瑜伽、女性友好、社区型健身房
|
|
*
|
|
* 使用方式：在项目入口文件中引入本文件，或在 :root 中复制变量
|
|
* 示例：color: var(--primary); background: var(--bg-primary);
|
|
* ============================================================
|
|
*/
|
|
|
|
:root {
|
|
/* ==========================================================
|
|
1. 品牌主色 (Primary) —— 珊瑚橙 / 暖橙渐变
|
|
用于核心操作按钮、品牌高亮、渐变背景
|
|
========================================================== */
|
|
|
|
/** 主色：温暖珊瑚橙，代表活力与亲切感 */
|
|
--primary: #FF6B4A;
|
|
|
|
/** 主色按压态：深橙，用于按钮点击反馈 */
|
|
--primary-dark: #E55A3A;
|
|
|
|
/** 主色浅色背景：半透明橙，用于标签、选中态背景 */
|
|
--primary-light: rgba(255, 107, 74, 0.15);
|
|
|
|
/** 主色渐变：珊瑚橙到浅橙红，用于导航栏、欢迎卡片、按钮 */
|
|
--primary-gradient: linear-gradient(135deg, #FF6B4A, #FF8A65);
|
|
|
|
/** 渐变辅助色：用于数据卡片或图表的渐变更丰富 */
|
|
--primary-gradient-start: #FF6B4A;
|
|
--primary-gradient-end: #FF8A65;
|
|
|
|
/* ==========================================================
|
|
2. 中性色 (Neutral) —— 暖色系/米白/暖灰
|
|
用于背景、文字、分割线等基础界面
|
|
========================================================== */
|
|
|
|
/** 暖棕黑：底部TabBar、导航栏背景、重要文字 */
|
|
--secondary: #2D1F1A;
|
|
|
|
/** 全局背景色：暖白米色，营造温馨舒适感 */
|
|
--bg-primary: #FDF8F5;
|
|
|
|
/** 纯白色：卡片、浮层、按钮文字 */
|
|
--white: #FFFFFF;
|
|
|
|
/** 暖棕黑：用于重要标题、用户名等主要文字 */
|
|
--text-primary: #2D1F1A;
|
|
|
|
/** 暖灰色：用于次要描述、场馆地址、日期等辅助文字 */
|
|
--text-secondary: #8A7A72;
|
|
|
|
/** 浅暖灰：用于禁用状态文字、占位符 */
|
|
--text-disabled: #C5B5AD;
|
|
|
|
/** 暖色分割线：用于列表、卡片分割 */
|
|
--border-light: #F0E8E3;
|
|
|
|
/** 卡片阴影：带有橙色调的轻度投影 */
|
|
--shadow-card: 0 4px 16px rgba(255, 107, 74, 0.12);
|
|
|
|
/* ==========================================================
|
|
3. 功能色 (Functional) —— 反馈/状态/警告
|
|
用于提示、错误、成功等交互反馈
|
|
========================================================== */
|
|
|
|
/** 高亮警告红：未读消息红点、取消预约、危险操作 */
|
|
--highlight: #FF4757;
|
|
|
|
/** 成功状态：翠绿色，用于完成、通过等正向反馈 */
|
|
--success: #2ED573;
|
|
|
|
/** 警告状态：琥珀色，用于提醒、注意 */
|
|
--warning: #FFA502;
|
|
|
|
/** 信息状态：淡蓝色，用于一般提示 */
|
|
--info: #4A90D9;
|
|
|
|
/** 禁用/不可用状态：背景色和文字色 */
|
|
--disabled-bg: #F0E8E3;
|
|
--disabled-text: #C5B5AD;
|
|
|
|
/* ==========================================================
|
|
4. 圆角 & 尺寸 (Radius & Size)
|
|
便于统一界面风格
|
|
========================================================== */
|
|
|
|
/** 大圆角：卡片、弹窗、主要容器 */
|
|
--radius-large: 20px;
|
|
|
|
/** 中圆角：按钮、输入框、次级卡片 */
|
|
--radius-medium: 12px;
|
|
|
|
/** 小圆角：标签、头像、小元素 */
|
|
--radius-small: 8px;
|
|
|
|
/** 全圆角：胶囊按钮、标签、头像 */
|
|
--radius-full: 40px;
|
|
|
|
/** 底部TabBar高度 */
|
|
--tab-height: 72px;
|
|
|
|
/** 导航栏高度 */
|
|
--nav-height: 56px;
|
|
|
|
/* ==========================================================
|
|
5. 额外辅助变量 (Extra Utilities)
|
|
========================================================== */
|
|
|
|
/** 主色文字颜色 (通常为白色) */
|
|
--primary-text-color: #FFFFFF;
|
|
|
|
/** 渐变背景的文本颜色 (通常为白色) */
|
|
--gradient-text-color: #FFFFFF;
|
|
|
|
/** 卡片内边距 (统一) */
|
|
--card-padding: 16px;
|
|
|
|
/** 页面左右安全间距 */
|
|
--page-padding: 16px;
|
|
|
|
/** 字体家族 */
|
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|