570 lines
17 KiB
HTML
570 lines
17 KiB
HTML
<!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> |