127 lines
4.4 KiB
CSS
127 lines
4.4 KiB
CSS
/**
|
|
* ============================================================
|
|
* 健身房预约小程序 · 极光紫配色方案 (CSS Variables)
|
|
* ============================================================
|
|
*
|
|
* 主题风格：极光紫 (Aurora Purple)
|
|
* 主色：深邃紫罗兰 + 霓虹蓝紫渐变
|
|
* 性格：科技感、神秘、高级、时尚
|
|
* 适用场景：高端健身、时尚运动、科技感预约类小程序
|
|
*
|
|
* 使用方式：在项目入口文件中引入本文件，或在 :root 中复制变量
|
|
* 示例：color: var(--primary); background: var(--bg-primary);
|
|
* ============================================================
|
|
*/
|
|
|
|
:root {
|
|
/* ==========================================================
|
|
1. 品牌主色 (Primary) —— 极光紫 / 蓝紫渐变
|
|
用于核心操作按钮、品牌高亮、渐变背景
|
|
========================================================== */
|
|
|
|
/** 主色：深邃紫罗兰，代表神秘与高级感 */
|
|
--primary: #7C3AED;
|
|
|
|
/** 主色按压态：深紫，用于按钮点击反馈 */
|
|
--primary-dark: #5B21B6;
|
|
|
|
/** 主色浅色背景：半透明紫，用于标签、选中态背景 */
|
|
--primary-light: rgba(124, 58, 237, 0.15);
|
|
|
|
/** 主色渐变：紫罗兰到靛蓝，用于导航栏、欢迎卡片、按钮 */
|
|
--primary-gradient: linear-gradient(135deg, #7C3AED, #4F46E5);
|
|
|
|
/** 渐变辅助色：用于数据卡片或图表的渐变更丰富 */
|
|
--primary-gradient-start: #7C3AED;
|
|
--primary-gradient-end: #4F46E5;
|
|
|
|
/* ==========================================================
|
|
2. 中性色 (Neutral) —— 深色/灰色/白色
|
|
用于背景、文字、分割线等基础界面
|
|
========================================================== */
|
|
|
|
/** 深紫黑：底部TabBar、导航栏背景、重要文字 */
|
|
--secondary: #1E1028;
|
|
|
|
/** 全局背景色：极浅灰紫，营造柔和科技感 */
|
|
--bg-primary: #F8F7FC;
|
|
|
|
/** 纯白色：卡片、浮层、按钮文字 */
|
|
--white: #FFFFFF;
|
|
|
|
/** 深紫黑：用于重要标题、用户名等主要文字 */
|
|
--text-primary: #1E1028;
|
|
|
|
/** 紫灰色：用于次要描述、场馆地址、日期等辅助文字 */
|
|
--text-secondary: #6B5E7E;
|
|
|
|
/** 浅灰紫：用于禁用状态文字、占位符 */
|
|
--text-disabled: #B8AED0;
|
|
|
|
/** 浅紫分割线：用于列表、卡片分割 */
|
|
--border-light: #EDE9F5;
|
|
|
|
/** 卡片阴影：带有紫色调的轻度投影 */
|
|
--shadow-card: 0 4px 16px rgba(94, 48, 176, 0.10);
|
|
|
|
/* ==========================================================
|
|
3. 功能色 (Functional) —— 反馈/状态/警告
|
|
用于提示、错误、成功等交互反馈
|
|
========================================================== */
|
|
|
|
/** 高亮警告红：未读消息红点、取消预约、危险操作 */
|
|
--highlight: #EF4444;
|
|
|
|
/** 成功状态：翠绿色，用于完成、通过等正向反馈 */
|
|
--success: #10B981;
|
|
|
|
/** 警告状态：琥珀色，用于提醒、注意 */
|
|
--warning: #F59E0B;
|
|
|
|
/** 信息状态：淡蓝色，用于一般提示 */
|
|
--info: #3B82F6;
|
|
|
|
/** 禁用/不可用状态：背景色和文字色 */
|
|
--disabled-bg: #E8E3F0;
|
|
--disabled-text: #B8AED0;
|
|
|
|
/* ==========================================================
|
|
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;
|
|
}
|