590 lines
16 KiB
HTML
590 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>
|
||
<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>
|
||
/* ==========================================================
|
||
配色方案：极光紫 (Aurora Purple)
|
||
主色：深邃紫罗兰 + 霓虹蓝紫渐变
|
||
性格：科技感、神秘、高级、时尚
|
||
========================================================== */
|
||
:root {
|
||
/* ----- 品牌主色 (Primary) ----- */
|
||
--primary: #7C3AED; /* 紫罗兰主色 */
|
||
--primary-dark: #5B21B6; /* 深紫按压态 */
|
||
--primary-light: rgba(124, 58, 237, 0.15); /* 浅紫背景 */
|
||
--primary-gradient: linear-gradient(135deg, #7C3AED, #4F46E5); /* 紫蓝渐变 */
|
||
|
||
/* ----- 中性色 (Neutral) ----- */
|
||
--bg-primary: #F8F7FC; /* 极浅灰紫背景 */
|
||
--bg-card: #FFFFFF; /* 卡片纯白 */
|
||
--text-primary: #1E1028; /* 深紫黑文字 */
|
||
--text-secondary: #6B5E7E; /* 紫灰辅助文字 */
|
||
--text-disabled: #B8AED0; /* 浅灰紫禁用 */
|
||
--border-light: #EDE9F5; /* 浅紫分割线 */
|
||
--shadow-card: 0 4px 16px rgba(94, 48, 176, 0.10);
|
||
|
||
/* ----- 功能色 (Functional) ----- */
|
||
--highlight: #EF4444; /* 红点/警告 */
|
||
--success: #10B981; /* 翠绿成功 */
|
||
--disabled-bg: #E8E3F0;
|
||
--disabled-text: #B8AED0;
|
||
|
||
/* ----- 尺寸 (Size) ----- */
|
||
--radius-large: 20px;
|
||
--radius-medium: 12px;
|
||
--radius-full: 40px;
|
||
--tab-height: 72px;
|
||
}
|
||
|
||
/* 全局重置 */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg-primary);
|
||
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(--bg-primary);
|
||
border-radius: 40px;
|
||
box-shadow: 0 20px 60px rgba(94, 48, 176, 0.15);
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1px solid rgba(124, 58, 237, 0.08);
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar {
|
||
background: var(--text-primary);
|
||
padding: 12px 20px 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: rgba(255,255,255,0.65);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
.status-bar span:last-child { display: flex; gap: 6px; }
|
||
|
||
/* 导航栏 (深色渐变) */
|
||
.nav-bar {
|
||
background: var(--primary-gradient);
|
||
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.3px;
|
||
}
|
||
.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(--primary-dark);
|
||
}
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: rgba(255,255,255,0.25);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
color: white;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
/* 内容区 */
|
||
.content { padding: 20px 16px 100px; }
|
||
|
||
/* 欢迎卡片 (渐变) */
|
||
.greeting-card {
|
||
background: var(--primary-gradient);
|
||
border-radius: var(--radius-large);
|
||
padding: 18px 20px 20px;
|
||
color: white;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
|
||
}
|
||
.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: rgba(255,255,255,0.2);
|
||
backdrop-filter: blur(4px);
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
padding: 4px 14px;
|
||
border-radius: var(--radius-full);
|
||
color: white;
|
||
}
|
||
.greeting-card .stats {
|
||
display: flex;
|
||
gap: 24px;
|
||
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: rgba(255,255,255,0.95);
|
||
}
|
||
.greeting-card .stats .stat-item .label {
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.7);
|
||
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: var(--radius-full);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
box-shadow: var(--shadow-card);
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s;
|
||
cursor: default;
|
||
}
|
||
.category-tabs .tab.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
font-weight: 600;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
|
||
}
|
||
|
||
/* 日期选择器 */
|
||
.date-selector {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.date-item {
|
||
flex: 1;
|
||
background: white;
|
||
border-radius: var(--radius-medium);
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-card);
|
||
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);
|
||
}
|
||
.date-item.active .day { color: var(--primary-dark); }
|
||
.date-item.disabled { opacity: 0.35; }
|
||
|
||
/* 课程卡片 */
|
||
.course-card {
|
||
background: white;
|
||
border-radius: var(--radius-large);
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow-card);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
transition: transform 0.1s;
|
||
}
|
||
.course-card .icon-placeholder {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: var(--radius-medium);
|
||
background: var(--primary-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
color: var(--primary);
|
||
}
|
||
.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 12px;
|
||
border-radius: var(--radius-full);
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
}
|
||
.course-card .btn-book {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 20px;
|
||
border-radius: var(--radius-full);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
cursor: default;
|
||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
|
||
transition: all 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
.course-card .btn-book.disabled {
|
||
background: var(--disabled-bg);
|
||
color: var(--disabled-text);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 个人中心预览 */
|
||
.profile-preview {
|
||
margin-top: 12px;
|
||
background: white;
|
||
border-radius: var(--radius-large);
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.profile-preview .row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.profile-preview .row .big-avatar {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: var(--primary-gradient);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
color: white;
|
||
}
|
||
.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(--bg-primary);
|
||
border-radius: var(--radius-medium);
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
transition: all 0.15s;
|
||
}
|
||
.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);
|
||
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;
|
||
}
|
||
|
||
/* 底部 TabBar */
|
||
.tab-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--text-primary);
|
||
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: rgba(255,255,255,0.45);
|
||
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: #A78BFA; }
|
||
.tab-item.active .icon { color: #A78BFA; }
|
||
|
||
.tab-item.cta-tab { position: relative; top: -12px; }
|
||
.tab-item.cta-tab .icon {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
|
||
}
|
||
.tab-item.cta-tab.active .icon { background: var(--primary-dark); }
|
||
|
||
/* 响应式 */
|
||
@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>
|
||
|
||
<!-- 分类标签 -->
|
||
<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>
|
||
<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> |