初始化uni-app
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
unpackage/
|
||||
.hbuilderx/
|
||||
.DS_Store
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* ============================================
|
||||
* 健身房管理系统小程序 - 全局配色变量
|
||||
* 主题：活力运动风格
|
||||
* 主色调：深蓝专业 + 活力橙热情
|
||||
* 兼容暗色/浅色模式基础，保证可访问性
|
||||
* ============================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ========== 主品牌色 ========== */
|
||||
--primary-dark: #0B2B4B; /* 深蓝主色 - 用于头部导航栏、重要按钮、品牌标识，体现专业信赖感 */
|
||||
--primary-deep: #1A4A6F; /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
|
||||
--primary-light: #2C6288; /* 浅蓝色（预留）- 用于选中态或辅助背景，保持和谐渐变 */
|
||||
|
||||
/* ========== 强调/行动色 ========== */
|
||||
--accent-orange: #FF6B35; /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */
|
||||
--accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */
|
||||
--accent-orange-dark: #E55A2B; /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */
|
||||
|
||||
/* ========== 背景色系 ========== */
|
||||
--bg-light: #F9FAFE; /* 全局浅灰蓝背景 - 柔和且提升深蓝/橙色的视觉舒适度 */
|
||||
--bg-white: #FFFFFF; /* 纯白卡片背景 - 用于内容卡片、表单区域，提高可读性与层次感 */
|
||||
--bg-gray: #F2F5F9; /* 浅灰辅助背景 - 分割区域或禁用态背景 */
|
||||
|
||||
/* ========== 文本色系 ========== */
|
||||
--text-dark: #1E2A3A; /* 主要文字 - 标题、正文，保证高对比度 */
|
||||
--text-muted: #5E6F8D; /* 辅助文字 - 次要信息、占位符，保持易读性 */
|
||||
--text-light: #8A99B4; /* 更浅文字 - 提示语、时间戳，但需注意与背景对比 */
|
||||
--text-inverse: #FFFFFF; /* 反白文字 - 深色/橙色背景上的文字 */
|
||||
|
||||
/* ========== 边框/分割线 ========== */
|
||||
--border-light: #E9EDF2; /* 浅边框 - 卡片分割、列表边界，细腻柔和 */
|
||||
--border-focus: #FF6B35; /* 聚焦边框 - 输入框选中或强调区域，使用橙色点缀 */
|
||||
|
||||
/* ========== 状态颜色（功能性） ========== */
|
||||
--success-green: #2ECC71; /* 成功绿 - 已完成课程、健康打卡 */
|
||||
--warning-amber: #F39C12; /* 警示橙黄 - 提醒、到期提示 */
|
||||
--error-red: #E74C3C; /* 错误红 - 异常情况或取消预约 */
|
||||
--info-blue: #3498DB; /* 信息蓝 - 提示气泡、帮助文字 */
|
||||
|
||||
/* ========== 渐变色 (提升活力感) ========== */
|
||||
--gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%); /* 橙色渐变 - 会员按钮、重要徽章 */
|
||||
--gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%); /* 深蓝渐变 - 头部banner或特别卡片 */
|
||||
--gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%); /* 微弱渐变 - 增加细节精致度 */
|
||||
|
||||
/* ========== 阴影层级 ========== */
|
||||
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05); /* 卡片小阴影 轻量浮起 */
|
||||
--shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08); /* 中等阴影 - 弹窗或下拉菜单 */
|
||||
--shadow-lg: 0 20px 35px rgba(0, 0, 0, 0.12); /* 大阴影 - 模态框、悬浮元素 */
|
||||
--shadow-orange-glow: 0 4px 12px rgba(255, 107, 53, 0.25); /* 橙色光晕 - 增强CTA吸引力 */
|
||||
|
||||
/* ========== 圆角规范 (柔和运动风) ========== */
|
||||
--radius-sm: 12px; /* 小组件、标签圆角 */
|
||||
--radius-md: 20px; /* 标准卡片圆角 */
|
||||
--radius-lg: 28px; /* 大容器、头部卡片圆角 */
|
||||
--radius-full: 999px; /* 胶囊按钮、头像完全圆角 */
|
||||
|
||||
/* ========== 布局与间距 ========== */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
|
||||
/* ========== 字体 (移动端优先) ========== */
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-size-xs: 0.7rem; /* 辅助标注 */
|
||||
--font-size-sm: 0.8rem; /* 次要文字 */
|
||||
--font-size-base: 0.9rem; /* 正文基准 */
|
||||
--font-size-md: 1rem; /* 小标题 */
|
||||
--font-size-lg: 1.2rem; /* 卡片标题 */
|
||||
--font-size-xl: 1.4rem; /* 大数字/欢迎语 */
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
}
|
||||
|
||||
/* ========== 暗色模式适配（可选，保持品牌一致性） ========== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* 暗色模式下微调背景与文字，保留品牌色核心 */
|
||||
--bg-light: #121826;
|
||||
--bg-white: #1E2636;
|
||||
--bg-gray: #0F141F;
|
||||
--text-dark: #EDF2F7;
|
||||
--text-muted: #9AA9C1;
|
||||
--border-light: #2A3346;
|
||||
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
/* 保留主色深蓝与橙色不变，但可适当提高对比 */
|
||||
--primary-dark: #123A5E; /* 亮一点保证深色背景可见度 */
|
||||
--accent-orange: #FF7846; /* 稍微提亮橙色 */
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 辅助类 (方便开发直接复用) ========== */
|
||||
.bg-primary {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: var(--accent-orange);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
.text-accent {
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
.btn-orange {
|
||||
background: var(--gradient-orange);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 10px 20px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
box-shadow: var(--shadow-orange-glow);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-orange:active {
|
||||
transform: scale(0.97);
|
||||
background: var(--accent-orange-dark);
|
||||
}
|
||||
.card-default {
|
||||
background: var(--bg-white);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
@@ -0,0 +1,570 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>健身房管理系统 | 动感配色方案</title>
|
||||
<!-- 引入Font Awesome 6 (免费图标库，增强视觉) -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #F5F7FC; /* 整体背景柔和灰白，衬托主色 */
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
padding: 24px 20px 48px;
|
||||
color: #1E2A3A;
|
||||
}
|
||||
|
||||
/* 主色调变量定义 – 活力运动风格
|
||||
主色: 动感深蓝 (#0B2B4B) – 权威、专业、沉稳
|
||||
辅色: 活力橙 (#FF6B35) – 热情、能量、行动召唤
|
||||
背景浅色: #F9FAFE, 卡片白, 强调蓝绿渐变点缀
|
||||
*/
|
||||
:root {
|
||||
--primary-dark: #0B2B4B; /* 深蓝主色，用于头部、重要按钮、边框强调 */
|
||||
--primary-deep: #1A4A6F; /* 中深蓝，用于hover、次级强调 */
|
||||
--accent-orange: #FF6B35; /* 活力橙，CTA、会员卡片、高亮标签 */
|
||||
--accent-orange-light: #FF8C5A;
|
||||
--bg-light: #F9FAFE;
|
||||
--card-white: #FFFFFF;
|
||||
--text-dark: #1E2A3A;
|
||||
--text-muted: #5E6F8D;
|
||||
--border-light: #E9EDF2;
|
||||
--success-green: #2ECC71;
|
||||
--warning-amber: #F39C12;
|
||||
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);
|
||||
--gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
|
||||
--gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);
|
||||
}
|
||||
|
||||
/* 整体容器 */
|
||||
.demo-container {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
background: var(--bg-light);
|
||||
border-radius: 36px;
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 状态栏模拟 (小程序顶部风格) */
|
||||
.status-bar {
|
||||
background: var(--primary-dark);
|
||||
padding: 12px 20px 6px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 主头部导航 */
|
||||
.main-header {
|
||||
background: var(--primary-dark);
|
||||
padding: 12px 20px 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo-area h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.logo-area h2 i {
|
||||
color: var(--accent-orange);
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.logo-area p {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.header-actions i {
|
||||
font-size: 1.4rem;
|
||||
background: rgba(255,255,255,0.15);
|
||||
padding: 8px;
|
||||
border-radius: 30px;
|
||||
margin-left: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 欢迎卡片 + 活力橙强调 */
|
||||
.welcome-card {
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
padding: 18px 20px;
|
||||
margin-top: 12px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.welcome-text h4 {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welcome-text h3 {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 4px;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.badge-member {
|
||||
background: var(--gradient-orange);
|
||||
padding: 8px 16px;
|
||||
border-radius: 40px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 4px 8px rgba(255,107,53,0.2);
|
||||
}
|
||||
|
||||
/* 主要指标卡片区 */
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--card-white);
|
||||
flex: 1;
|
||||
border-radius: 24px;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.stat-card i {
|
||||
font-size: 1.8rem;
|
||||
color: var(--accent-orange);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 功能菜单 grid */
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
padding: 8px 20px 20px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
background: var(--card-white);
|
||||
border-radius: 20px;
|
||||
padding: 12px 6px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--border-light);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
font-size: 1.8rem;
|
||||
color: var(--primary-deep);
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
transform: scale(0.96);
|
||||
background: #FEF5F0;
|
||||
}
|
||||
|
||||
/* 课程/热门活动区域 */
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 20px 4px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.section-title h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.section-title a {
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-orange);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.class-list {
|
||||
padding: 8px 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.class-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-left: 5px solid var(--accent-orange);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.class-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255,107,53,0.1);
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.class-icon i {
|
||||
font-size: 1.8rem;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.class-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.class-info h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.class-info p {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.class-time {
|
||||
font-size: 0.75rem;
|
||||
background: #F0F3F9;
|
||||
padding: 4px 10px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-deep);
|
||||
}
|
||||
|
||||
/* 底部导航栏 (Tab Bar 模拟) */
|
||||
.bottom-tab {
|
||||
background: white;
|
||||
backdrop-filter: blur(0px);
|
||||
border-top: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 20px 22px;
|
||||
border-radius: 0 0 36px 36px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
transition: 0.1s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tab-item i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-item span {
|
||||
font-size: 0.7rem;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: var(--accent-orange);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 教练推荐卡片额外装饰 */
|
||||
.trainer-spot {
|
||||
background: var(--gradient-blue);
|
||||
margin: 0 20px 20px;
|
||||
border-radius: 28px;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.trainer-info h4 {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.trainer-info h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.trainer-btn {
|
||||
background: var(--accent-orange);
|
||||
border: none;
|
||||
padding: 8px 18px;
|
||||
border-radius: 50px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 配色展示条 / 设计说明 */
|
||||
.color-palette-show {
|
||||
max-width: 450px;
|
||||
margin: 28px auto 0;
|
||||
background: white;
|
||||
border-radius: 32px;
|
||||
padding: 18px 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.color-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: var(--primary-dark);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.color-swatches {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swatch-circle {
|
||||
height: 50px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.swatch span {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 20px 0 8px;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: var(--border-light);
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
i, .tab-item, .menu-item, .stat-card {
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-container">
|
||||
<!-- 模拟小程序状态栏/胶囊区 -->
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<span><i class="fas fa-signal"></i> <i class="fas fa-battery-full"></i></span>
|
||||
</div>
|
||||
|
||||
<!-- 主头部深蓝区 -->
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<div class="logo-area">
|
||||
<h2><i class="fas fa-dumbbell"></i> IRONPULSE</h2>
|
||||
<p>智能健身 · 即刻燃动</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<i class="fas fa-bell"></i>
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户欢迎卡片，橙色高亮会员 -->
|
||||
<div class="welcome-card">
|
||||
<div class="welcome-text">
|
||||
<h4>欢迎回来，</h4>
|
||||
<h3>张峻铭 <span style="font-size: 0.8rem;">💪</span></h3>
|
||||
</div>
|
||||
<div class="badge-member">MVP 黑金会员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关键指标 活力橙点缀 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-fire"></i>
|
||||
<div class="stat-number">1,280</div>
|
||||
<div class="stat-label">今日卡路里</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div class="stat-number">126</div>
|
||||
<div class="stat-label">运动分钟</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
<div class="stat-number">12</div>
|
||||
<div class="stat-label">本月课程</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能区 网格菜单（四大模块） -->
|
||||
<div class="menu-grid">
|
||||
<div class="menu-item"><i class="fas fa-qrcode"></i><span>签到</span></div>
|
||||
<div class="menu-item"><i class="fas fa-chalkboard-user"></i><span>团课预约</span></div>
|
||||
<div class="menu-item"><i class="fas fa-chart-line"></i><span>体测报告</span></div>
|
||||
<div class="menu-item"><i class="fas fa-cog"></i><span>我的会籍</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 热门课程板块 (动态橙边风格) -->
|
||||
<div class="section-title">
|
||||
<h3><i class="fas fa-heartbeat" style="color: var(--accent-orange); margin-right: 6px;"></i> 热门团课</h3>
|
||||
<a href="#">查看全部 →</a>
|
||||
</div>
|
||||
<div class="class-list">
|
||||
<div class="class-card">
|
||||
<div class="class-icon"><i class="fas fa-bicycle"></i></div>
|
||||
<div class="class-info">
|
||||
<h4>极速燃脂 · 动感单车</h4>
|
||||
<p>张教练 | 综合有氧</p>
|
||||
</div>
|
||||
<div class="class-time">19:30 满员</div>
|
||||
</div>
|
||||
<div class="class-card">
|
||||
<div class="class-icon"><i class="fas fa-hand-fist"></i></div>
|
||||
<div class="class-info">
|
||||
<h4>搏击风暴 · 泰拳基础</h4>
|
||||
<p>李娜 | 格斗区</p>
|
||||
</div>
|
||||
<div class="class-time">18:00 火热</div>
|
||||
</div>
|
||||
<div class="class-card">
|
||||
<div class="class-icon"><i class="fas fa-person-walking"></i></div>
|
||||
<div class="class-info">
|
||||
<h4>普拉提核心唤醒</h4>
|
||||
<p>Elena | 瑜伽室</p>
|
||||
</div>
|
||||
<div class="class-time">明早 09:30</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 教练推荐 使用深蓝渐变+橙色按钮 -->
|
||||
<div class="trainer-spot">
|
||||
<div class="trainer-info">
|
||||
<h4>🌟 明星私教推荐</h4>
|
||||
<h3>Alex 王 · 增肌塑形专家</h3>
|
||||
<p style="font-size: 0.7rem; opacity:0.85;">剩余3个时段可约</p>
|
||||
</div>
|
||||
<div class="trainer-btn">立即预约</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部tab栏 当前选中“首页”凸显橙色-->
|
||||
<div class="bottom-tab">
|
||||
<div class="tab-item active"><i class="fas fa-home"></i><span>首页</span></div>
|
||||
<div class="tab-item"><i class="fas fa-calendar-alt"></i><span>日程</span></div>
|
||||
<div class="tab-item"><i class="fas fa-chart-simple"></i><span>数据</span></div>
|
||||
<div class="tab-item"><i class="fas fa-user"></i><span>我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配色方案展示区，直观看到颜色搭配，帮助设计决策 -->
|
||||
<div class="color-palette-show">
|
||||
<div class="color-title">
|
||||
<i class="fas fa-palette" style="color: #FF6B35;"></i> 健身房管理系统 · 能量配色方案
|
||||
</div>
|
||||
<div class="color-swatches">
|
||||
<div class="swatch">
|
||||
<div class="swatch-circle" style="background: #0B2B4B;"></div>
|
||||
<span>深蓝主色 #0B2B4B<br>专业信赖</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-circle" style="background: #FF6B35;"></div>
|
||||
<span>活力橙 #FF6B35<br>行动/热情</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-circle" style="background: #1A4A6F;"></div>
|
||||
<span>深邃辅助 #1A4A6F</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-circle" style="background: #F9FAFE; border:1px solid #E2E8F0;"></div>
|
||||
<span>浅色背景 #F9FAFE</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-circle" style="background: #FFFFFF; border:1px solid #E2E8F0;"></div>
|
||||
<span>卡片白 #FFFFFF</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="note">
|
||||
<i class="fas fa-lightbulb" style="color: #FF6B35;"></i> 设计理念：深蓝色传递专业与稳定感，活力橙色提升运动热情与CTA转化。<br>
|
||||
圆润卡片 + 强烈对比，适合健身管理小程序的年轻、力量与现代氛围。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 额外注释：颜色可访问性强，橙蓝互补但明度舒适 -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
@@ -1,64 +1,72 @@
|
||||
{
|
||||
"name": "gym-manage-uniapp",
|
||||
"appid": "",
|
||||
"description": "Gym Management System Mobile App",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
"name" : "gym-manage-uniapp",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
"modules": {},
|
||||
"distribute": {
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios": {},
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
"quickapp": {},
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "3"
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "gym-manage-uniapp",
|
||||
"version": "1.0.0",
|
||||
"description": "Gym Management System Mobile App",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"dev:mp-weixin": "uni -p mp-weixin",
|
||||
"build:mp-weixin": "uni build -p mp-weixin",
|
||||
"dev:h5": "uni",
|
||||
"build:h5": "uni build"
|
||||
},
|
||||
"keywords": [
|
||||
"uniapp",
|
||||
"gym",
|
||||
"management"
|
||||
],
|
||||
"author": "Novalon",
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -1,28 +1,17 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "健身房管理系统",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#007AFF",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
}
|
||||
]
|
||||
}
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="title">健身房管理系统</text>
|
||||
<text class="subtitle">欢迎使用 UniApp 移动端</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '健身房管理系统'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log('Index page loaded')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,13 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
@@ -0,0 +1 @@
|
||||
// 任何第三方框架，包括图标库，字体等都需要写在这里，并附上网址。
|
||||
Reference in New Issue
Block a user