novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重写会员端，初步完善首页

Browse Source
This commit is contained in:
liwentao
2026-07-15 17:26:07 +08:00
parent cacc8997ec
commit 7e45ecd144
26 changed files with 3405 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/style/base/style1.css
+96
View File
@@ -0,0 +1,96 @@
/**
* ============================================================
* 健身房预约小程序 · 全局配色方案 (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;
}
gym-manage-uniapp/style/base/style2.css
+129
View File
@@ -0,0 +1,129 @@
/**
* ============================================================
* 健身房预约小程序 · 珊瑚橙配色方案 (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;
}
gym-manage-uniapp/style/base/style3.css
+126
View File
@@ -0,0 +1,126 @@
/**
* ============================================================
* 健身房预约小程序 · 极光紫配色方案 (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;
}