624 lines
16 KiB
HTML
624 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>健身房预约 · 配色方案展示</title>
|
||
<!-- 使用 Inter 字体，现代感更强 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ===== CSS Variables (核心色板) ===== */
|
||
:root {
|
||
--primary: #00E676;
|
||
--primary-dark: #00C853;
|
||
--primary-light: rgba(0, 230, 118, 0.15);
|
||
--secondary: #1A1A1A;
|
||
--background: #F5F7FA;
|
||
--text-primary: #1E1E1E;
|
||
--text-secondary: #7A7E84;
|
||
--highlight: #FF5252;
|
||
--white: #FFFFFF;
|
||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||
--radius: 20px;
|
||
--radius-sm: 12px;
|
||
--tab-height: 72px;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--background);
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
padding: 16px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ===== 手机卡片容器 ===== */
|
||
.phone-mock {
|
||
max-width: 375px;
|
||
width: 100%;
|
||
background: var(--background);
|
||
border-radius: 40px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
}
|
||
|
||
/* ===== 状态栏 (模拟) ===== */
|
||
.status-bar {
|
||
background: var(--secondary);
|
||
padding: 12px 20px 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: rgba(255,255,255,0.7);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.status-bar span:last-child {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* ===== 导航栏 (深色) ===== */
|
||
.nav-bar {
|
||
background: var(--secondary);
|
||
padding: 8px 20px 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: white;
|
||
}
|
||
.nav-bar .title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
color: white;
|
||
}
|
||
.nav-bar .actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
.nav-bar .actions .badge {
|
||
position: relative;
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
}
|
||
.nav-bar .actions .badge::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -4px;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: var(--highlight);
|
||
border-radius: 50%;
|
||
border: 2px solid var(--secondary);
|
||
}
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--primary);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
color: var(--secondary);
|
||
}
|
||
|
||
/* ===== 主内容 ===== */
|
||
.content {
|
||
padding: 20px 16px 100px;
|
||
}
|
||
|
||
/* 欢迎卡片 + 数据 */
|
||
.greeting-card {
|
||
background: var(--secondary);
|
||
border-radius: var(--radius);
|
||
padding: 18px 20px 20px;
|
||
color: white;
|
||
margin-bottom: 24px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.greeting-card .row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.greeting-card .name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.greeting-card .badge-energy {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
padding: 4px 12px;
|
||
border-radius: 40px;
|
||
}
|
||
.greeting-card .stats {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-top: 16px;
|
||
}
|
||
.greeting-card .stats .stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.greeting-card .stats .stat-item .number {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
}
|
||
.greeting-card .stats .stat-item .label {
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.6);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* 快速分类标签 */
|
||
.category-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
overflow-x: auto;
|
||
padding-bottom: 4px;
|
||
scrollbar-width: none;
|
||
}
|
||
.category-tabs::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.category-tabs .tab {
|
||
background: white;
|
||
padding: 8px 18px;
|
||
border-radius: 40px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
box-shadow: var(--shadow);
|
||
transition: all 0.2s;
|
||
border: 1px solid transparent;
|
||
}
|
||
.category-tabs .tab.active {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
font-weight: 600;
|
||
border-color: var(--primary);
|
||
}
|
||
.category-tabs .tab:not(.active):hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
/* ===== 课程卡片 ===== */
|
||
.course-card {
|
||
background: white;
|
||
border-radius: var(--radius);
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
transition: transform 0.1s ease;
|
||
}
|
||
.course-card .icon-placeholder {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--primary-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
color: var(--primary-dark);
|
||
}
|
||
.course-card .info {
|
||
flex: 1;
|
||
}
|
||
.course-card .info .title {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: var(--text-primary);
|
||
}
|
||
.course-card .info .meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-top: 4px;
|
||
}
|
||
.course-card .info .meta .tag {
|
||
background: var(--primary-light);
|
||
color: var(--primary-dark);
|
||
padding: 2px 10px;
|
||
border-radius: 30px;
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
}
|
||
.course-card .btn-book {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
border: none;
|
||
padding: 8px 18px;
|
||
border-radius: 40px;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
cursor: default;
|
||
transition: background 0.15s;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 6px rgba(0, 230, 118, 0.3);
|
||
}
|
||
.course-card .btn-book.disabled {
|
||
background: #E0E0E0;
|
||
color: #BDBDBD;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 日期选择器 (模拟) */
|
||
.date-selector {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.date-item {
|
||
flex: 1;
|
||
background: white;
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
box-shadow: var(--shadow);
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
border: 2px solid transparent;
|
||
transition: all 0.1s;
|
||
}
|
||
.date-item .day {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
display: block;
|
||
}
|
||
.date-item .week {
|
||
font-size: 12px;
|
||
}
|
||
.date-item.active {
|
||
border-color: var(--primary);
|
||
background: var(--primary-light);
|
||
color: var(--primary-dark);
|
||
}
|
||
.date-item.active .day {
|
||
color: var(--primary-dark);
|
||
}
|
||
.date-item.disabled {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* 底部 TabBar (深色) */
|
||
.tab-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--secondary);
|
||
backdrop-filter: blur(10px);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 10px 0 18px;
|
||
border-top: 1px solid rgba(255,255,255,0.06);
|
||
height: var(--tab-height);
|
||
}
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: var(--text-secondary);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
transition: color 0.15s;
|
||
cursor: default;
|
||
}
|
||
.tab-item .icon {
|
||
font-size: 24px;
|
||
margin-bottom: 2px;
|
||
line-height: 1;
|
||
}
|
||
.tab-item.active {
|
||
color: var(--primary);
|
||
}
|
||
.tab-item.active .icon {
|
||
color: var(--primary);
|
||
}
|
||
/* 中间大按钮 (预约) */
|
||
.tab-item.cta-tab {
|
||
position: relative;
|
||
top: -12px;
|
||
}
|
||
.tab-item.cta-tab .icon {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||
}
|
||
.tab-item.cta-tab.active .icon {
|
||
background: var(--primary-dark);
|
||
}
|
||
|
||
/* ===== 个人中心预览 (第二屏简易) ===== */
|
||
.profile-preview {
|
||
margin-top: 12px;
|
||
background: white;
|
||
border-radius: var(--radius);
|
||
padding: 16px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.profile-preview .row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.profile-preview .row .big-avatar {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: linear-gradient(135deg, var(--primary), #00BFA5);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
color: var(--secondary);
|
||
}
|
||
.profile-preview .row .info h4 {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
.profile-preview .row .info p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.profile-preview .menu-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
.profile-preview .menu-grid .menu-item {
|
||
background: var(--background);
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
}
|
||
.profile-preview .menu-grid .menu-item .emoji {
|
||
display: block;
|
||
font-size: 22px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.profile-preview .menu-grid .menu-item:first-child {
|
||
color: var(--primary-dark);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
/* 辅助文案 */
|
||
.footnote {
|
||
text-align: center;
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
margin-top: 18px;
|
||
opacity: 0.7;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
/* 模拟分割线 */
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid #EEEEEE;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* 响应式微调 */
|
||
@media (max-width: 420px) {
|
||
.phone-mock {
|
||
border-radius: 24px;
|
||
}
|
||
.nav-bar .title {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="phone-mock">
|
||
<!-- 状态栏 -->
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>📶 📶 🔋</span>
|
||
</div>
|
||
|
||
<!-- 导航栏 (深色) -->
|
||
<div class="nav-bar">
|
||
<div class="title">💪 今日训练</div>
|
||
<div class="actions">
|
||
<span class="badge">🔔</span>
|
||
<div class="avatar">J</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容 -->
|
||
<div class="content">
|
||
|
||
<!-- 欢迎卡片 + 数据 (深色背景) -->
|
||
<div class="greeting-card">
|
||
<div class="row">
|
||
<span class="name">👋 你好，Jason</span>
|
||
<span class="badge-energy">🔥 今日 420 kcal</span>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="stat-item">
|
||
<span class="number">68</span>
|
||
<span class="label">总课时</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="number">12</span>
|
||
<span class="label">连续打卡</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="number">4.8</span>
|
||
<span class="label">⭐ 评分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分类标签 (active 使用主色) -->
|
||
<div class="category-tabs">
|
||
<span class="tab active">全部</span>
|
||
<span class="tab">力量区</span>
|
||
<span class="tab">有氧</span>
|
||
<span class="tab">瑜伽</span>
|
||
<span class="tab">私教</span>
|
||
<span class="tab">团课</span>
|
||
</div>
|
||
|
||
<!-- 日期选择器 (模拟) -->
|
||
<div class="date-selector">
|
||
<div class="date-item disabled">
|
||
<span class="day">12</span>
|
||
<span class="week">周日</span>
|
||
</div>
|
||
<div class="date-item">
|
||
<span class="day">13</span>
|
||
<span class="week">周一</span>
|
||
</div>
|
||
<div class="date-item active">
|
||
<span class="day">14</span>
|
||
<span class="week">周二</span>
|
||
</div>
|
||
<div class="date-item">
|
||
<span class="day">15</span>
|
||
<span class="week">周三</span>
|
||
</div>
|
||
<div class="date-item">
|
||
<span class="day">16</span>
|
||
<span class="week">周四</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 课程卡片 1 (可预约) -->
|
||
<div class="course-card">
|
||
<div class="icon-placeholder">🏋️</div>
|
||
<div class="info">
|
||
<div class="title">综合力量训练</div>
|
||
<div class="meta">
|
||
<span>⏱️ 45 min</span>
|
||
<span class="tag">🔥 热门</span>
|
||
<span>📍 力量区</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-book">预约</button>
|
||
</div>
|
||
|
||
<!-- 课程卡片 2 (已约满) -->
|
||
<div class="course-card">
|
||
<div class="icon-placeholder">🧘</div>
|
||
<div class="info">
|
||
<div class="title">流瑜伽 · 中级</div>
|
||
<div class="meta">
|
||
<span>⏱️ 60 min</span>
|
||
<span class="tag">🧘 瑜伽</span>
|
||
<span>📍 3号教室</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-book disabled">已约满</button>
|
||
</div>
|
||
|
||
<!-- 课程卡片 3 (可预约) -->
|
||
<div class="course-card">
|
||
<div class="icon-placeholder">🚴</div>
|
||
<div class="info">
|
||
<div class="title">动感单车 · 冲刺</div>
|
||
<div class="meta">
|
||
<span>⏱️ 40 min</span>
|
||
<span class="tag">⚡ 有氧</span>
|
||
<span>📍 单车房</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-book">预约</button>
|
||
</div>
|
||
|
||
<!-- 个人中心预览 (展示辅助色及卡片) -->
|
||
<div class="profile-preview">
|
||
<div class="row">
|
||
<div class="big-avatar">J</div>
|
||
<div class="info">
|
||
<h4>Jason Wang</h4>
|
||
<p>🏆 高级会员 · 已练 68 课时</p>
|
||
</div>
|
||
</div>
|
||
<div class="menu-grid">
|
||
<div class="menu-item"><span class="emoji">📊</span> 数据</div>
|
||
<div class="menu-item"><span class="emoji">🏅</span> 成就</div>
|
||
<div class="menu-item"><span class="emoji">⚙️</span> 设置</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footnote">配色方案 · 能量黑 + 荧光绿 · 预约小程序</div>
|
||
</div>
|
||
|
||
<!-- ===== 底部 TabBar (深色背景 + 主色激活) ===== -->
|
||
<div class="tab-bar">
|
||
<div class="tab-item active">
|
||
<span class="icon">🏠</span>
|
||
<span>首页</span>
|
||
</div>
|
||
<div class="tab-item">
|
||
<span class="icon">📅</span>
|
||
<span>课程</span>
|
||
</div>
|
||
<!-- 中间大按钮 (预约 CTA) -->
|
||
<div class="tab-item cta-tab active">
|
||
<span class="icon">➕</span>
|
||
<span>预约</span>
|
||
</div>
|
||
<div class="tab-item">
|
||
<span class="icon">💬</span>
|
||
<span>消息</span>
|
||
</div>
|
||
<div class="tab-item">
|
||
<span class="icon">👤</span>
|
||
<span>我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |