重写会员端，初步完善首页
This commit is contained in:
@@ -0,0 +1,624 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,590 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,591 @@
|
||||
<!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>
|
||||
/* ==========================================================
|
||||
配色方案：珊瑚橙 (Coral Orange)
|
||||
主色：温暖珊瑚橙 + 柔和米白
|
||||
性格：亲切、阳光、活力、温暖
|
||||
适用：轻运动、瑜伽、女性友好、社区型健身房
|
||||
========================================================== */
|
||||
:root {
|
||||
/* ----- 品牌主色 (Primary) ----- */
|
||||
--primary: #FF6B4A; /* 珊瑚橙主色 */
|
||||
--primary-dark: #E55A3A; /* 深橙按压态 */
|
||||
--primary-light: rgba(255, 107, 74, 0.15); /* 浅橙背景 */
|
||||
--primary-gradient: linear-gradient(135deg, #FF6B4A, #FF8A65); /* 橙红渐变 */
|
||||
|
||||
/* ----- 中性色 (Neutral) ----- */
|
||||
--bg-primary: #FDF8F5; /* 暖白米色背景 */
|
||||
--bg-card: #FFFFFF; /* 卡片纯白 */
|
||||
--text-primary: #2D1F1A; /* 暖棕黑文字 */
|
||||
--text-secondary: #8A7A72; /* 暖灰辅助文字 */
|
||||
--text-disabled: #C5B5AD; /* 浅暖灰禁用 */
|
||||
--border-light: #F0E8E3; /* 暖色分割线 */
|
||||
--shadow-card: 0 4px 16px rgba(255, 107, 74, 0.12);
|
||||
|
||||
/* ----- 功能色 (Functional) ----- */
|
||||
--highlight: #FF4757; /* 红点/警告 */
|
||||
--success: #2ED573; /* 翠绿成功 */
|
||||
--disabled-bg: #F0E8E3;
|
||||
--disabled-text: #C5B5AD;
|
||||
|
||||
/* ----- 尺寸 (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(255, 107, 74, 0.12);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 107, 74, 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(255, 107, 74, 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(255, 107, 74, 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(255, 107, 74, 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: #FF8A65; }
|
||||
.tab-item.active .icon { color: #FF8A65; }
|
||||
|
||||
.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(255, 107, 74, 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>
|
||||
Reference in New Issue
Block a user