Skip to content

V
VueJS_692556

realdreamer / VueJS_692556
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS_692556
提交 9ea5442d 编写于 作者: R root
浏览文件
操作

Thu Jul 3 19:21:00 CST 2025 inscode

上级 aa50c4cb
显示空白变更内容
内联 并排
Showing with 179 addition and 0 deletion
fitness-tracker.html 0 → 100644
浏览文件 @ 9ea5442d
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>健身管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
</head>
<body class="min-h-screen bg-gray-50">
<div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<!-- 导航栏 -->
<div class="navbar bg-base-100 shadow-sm lg:hidden">
<div class="flex-none">
<label for="my-drawer" class="btn btn-square btn-ghost">
<i class="fas fa-bars text-xl"></i>
</label>
</div>
<div class="flex-1">
<a class="btn btn-ghost text-xl">健身管理系统</a>
</div>
</div>
<!-- 主内容区 -->
<main class="flex-1 p-6" id="main-content">
<!-- 页面内容将通过JavaScript动态加载 -->
<div class="text-center py-20" id="loading">
<span class="loading loading-spinner loading-lg"></span>
</div>
</main>
</div>
<!-- 侧边栏 -->
<div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label>
<div class="menu p-4 w-80 h-full bg-base-200 text-base-content">
<div class="mb-8 mt-4">
<h1 class="text-2xl font-bold text-center">健身管理系统</h1>
</div>
<ul>
<li><a class="nav-link active" data-page="dashboard"><i class="fas fa-home"></i> 仪表盘</a></li>
<li><a class="nav-link" data-page="plans"><i class="fas fa-calendar-check"></i> 计划安排</a></li>
<li><a class="nav-link" data-page="tracking"><i class="fas fa-running"></i> 训练跟踪</a></li>
<li><a class="nav-link" data-page="analysis"><i class="fas fa-chart-line"></i> 数据分析</a></li>
</ul>
<div class="mt-auto">
<div class="divider"></div>
<div class="flex items-center gap-4 p-4">
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<div>
<h3 class="font-bold">用户名称</h3>
<p class="text-sm">健身爱好者</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 页面导航和内容加载逻辑
document.addEventListener('DOMContentLoaded', function() {
// 导航切换
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function() {
document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
this.classList.add('active');
loadPage(this.dataset.page);
});
});
// 初始加载仪表盘
loadPage('dashboard');
});
async function loadPage(page) {
const mainContent = document.getElementById('main-content');
const loading = document.getElementById('loading');
loading.classList.remove('hidden');
mainContent.innerHTML = '<div class="text-center py-20" id="loading"><span class="loading loading-spinner loading-lg"></span></div>';
try {
let content = '';
switch(page) {
case 'dashboard':
content = await loadDashboard();
break;
case 'plans':
content = await loadPlans();
break;
case 'tracking':
content = await loadTracking();
break;
case 'analysis':
content = await loadAnalysis();
break;
}
mainContent.innerHTML = content;
} catch (error) {
mainContent.innerHTML = `<div class="alert alert-error">加载页面失败: ${error.message}</div>`;
}
}
// 各页面加载函数
async function loadDashboard() {
return `<div class="space-y-6">
<h2 class="text-2xl font-bold">健身仪表盘</h2>
<div class="stats shadow w-full">
<div class="stat">
<div class="stat-figure text-primary">
<i class="fas fa-calendar-alt text-3xl"></i>
</div>
<div class="stat-title">本周训练</div>
<div class="stat-value text-primary">3次</div>
<div class="stat-desc">完成率 75%</div>
</div>
<div class="stat">
<div class="stat-figure text-secondary">
<i class="fas fa-fire text-3xl"></i>
</div>
<div class="stat-title">卡路里消耗</div>
<div class="stat-value text-secondary">1,200</div>
<div class="stat-desc">本周总计</div>
</div>
<div class="stat">
<div class="stat-figure text-accent">
<i class="fas fa-weight text-3xl"></i>
</div>
<div class="stat-title">体重变化</div>
<div class="stat-value text-accent">-1.2kg</div>
<div class="stat-desc">本月变化</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card bg-base-100 shadow">
<div class="card-body">
<h3 class="card-title">近期训练记录</h3>
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>日期</th>
<th>训练类型</th>
<th>时长</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025-06-28</td>
<td>力量训练</td>
<td>45分钟</td>
</tr>
<tr>
<td>2025-06-26</td>
<td>有氧运动</td>
<td>30分钟</td>
</tr>
<tr>
<td>2025-06-24</td>
<td>瑜伽</td>
<td>60分钟</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card bg-base-100 shadow">
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或