97 lines
3.5 KiB
CSS
97 lines
3.5 KiB
CSS
/**
|
|
* ============================================================
|
|
* 健身房预约小程序 · 全局配色方案 (CSS Variables)
|
|
* ============================================================
|
|
*
|
|
* 主题风格：能量黑 + 荧光绿 + 科技灰
|
|
* 适用场景：健身/运动/预约类小程序或移动端H5
|
|
* 设计理念：硬核力量感 + 现代科技感 + 清晰易用
|
|
*
|
|
* 使用方式：在项目入口文件中引入本文件，或在 :root 中复制变量
|
|
* 示例：color: var(--primary); background: var(--bg-primary);
|
|
* ============================================================
|
|
*/
|
|
|
|
:root {
|
|
/* ==========================================================
|
|
1. 品牌主色 (Primary) —— 荧光绿 / 能量绿
|
|
用于核心操作按钮、选中状态、品牌高亮
|
|
========================================================== */
|
|
|
|
/** 主色：明亮荧光绿，代表活力与健康指标 */
|
|
--primary: #00E676;
|
|
|
|
/** 主色按压态：用于按钮点击、加载进度条等反馈 */
|
|
--primary-dark: #00C853;
|
|
|
|
/** 主色浅色背景：用于标签、选中态背景、轻量高亮 (半透明) */
|
|
--primary-light: rgba(0, 230, 118, 0.15);
|
|
|
|
/** 主色渐变终点：用于数据卡片、图表渐变的辅助色 (蓝绿) */
|
|
--primary-gradient-end: #00BFA5;
|
|
|
|
/* ==========================================================
|
|
2. 中性色 (Neutral) —— 深色/灰色/白色
|
|
用于背景、文字、分割线等基础界面
|
|
========================================================== */
|
|
|
|
/** 深空黑：顶部导航、底部TabBar、卡片深色背景 */
|
|
--secondary: #1A1A1A;
|
|
|
|
/** 全局背景色：浅灰，使主色更突出，视觉干净 */
|
|
--bg-primary: #F5F7FA;
|
|
|
|
/** 纯白色：卡片、浮层、按钮文字 */
|
|
--white: #FFFFFF;
|
|
|
|
/** 深灰色：用于重要标题、用户名等主要文字 */
|
|
--text-primary: #1E1E1E;
|
|
|
|
/** 中灰色：用于次要描述、场馆地址、日期等辅助文字 */
|
|
--text-secondary: #7A7E84;
|
|
|
|
/** 浅灰色：用于禁用状态文字、占位符 */
|
|
--text-disabled: #BDBDBD;
|
|
|
|
/** 极浅灰：分割线、边框、轻量背景区分 */
|
|
--border-light: #EEEEEE;
|
|
|
|
/** 卡片阴影：轻度投影，提升层次感 */
|
|
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
|
|
/* ==========================================================
|
|
3. 功能色 (Functional) —— 反馈/状态/警告
|
|
用于提示、错误、成功等交互反馈
|
|
========================================================== */
|
|
|
|
/** 高亮警告红：未读消息红点、取消预约、倒计时、危险操作 */
|
|
--highlight: #FF5252;
|
|
|
|
/** 成功状态：通常复用主色，但独立定义便于统一调整 */
|
|
--success: var(--primary);
|
|
|
|
/** 禁用/不可用状态：背景色和文字色 */
|
|
--disabled-bg: #E0E0E0;
|
|
--disabled-text: #BDBDBD;
|
|
|
|
/* ==========================================================
|
|
4. 圆角 & 尺寸 (Radius & Size)
|
|
便于统一界面风格
|
|
========================================================== */
|
|
|
|
/** 大圆角：卡片、弹窗、主要容器 */
|
|
--radius-large: 20px;
|
|
|
|
/** 中圆角：按钮、输入框、次级卡片 */
|
|
--radius-medium: 12px;
|
|
|
|
/** 小圆角：标签、头像、小元素 */
|
|
--radius-small: 8px;
|
|
|
|
/** 全圆角：胶囊按钮、标签 */
|
|
--radius-full: 40px;
|
|
|
|
/** 底部TabBar高度 */
|
|
--tab-height: 72px;
|
|
}
|