console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthier - 健康管理</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8 flex gap-8 overflow-x-auto">
<div class="min-w-[375px] h-[812px] bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<div class="flex items-center justify-between mb-8">
<div class="w-8 h-8 bg-gray-100 rounded-lg"></div>
<div class="text-xl font-semibold text-gray-900">今日状态</div>
<div class="w-8 h-8 bg-blue-500 rounded-lg"></div>
</div>
<div class="bg-blue-50 rounded-2xl p-6 mb-8">
<div class="text-sm text-gray-500 mb-2">今日步数</div>
<div class="text-4xl font-bold text-gray-900 mb-4">8,432<span class="text-lg ml-2">步</span></div>
<div class="h-2 bg-blue-100 rounded-full overflow-hidden">
<div class="w-3/4 h-full bg-blue-500"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-gray-50 p-4 rounded-xl">
<div class="text-sm text-gray-500 mb-1">心率</div>
<div class="text-2xl font-semibold">72<span class="text-sm ml-1">bpm</span></div>
</div>
<div class="bg-gray-50 p-4 rounded-xl">
<div class="text-sm text-gray-500 mb-1">睡眠</div>
<div class="text-2xl font-semibold">7.2<span class="text-sm ml-1">小时</span></div>
</div>
</div>
<div class="text-lg font-semibold mb-4">推荐课程</div>
<div class="space-y-4">
<div class="h-20 bg-[url('https://source.unsplash.com/featured/?yoga')] bg-cover rounded-xl p-4">
<div class="text-white font-medium">晨间瑜伽</div>
<div class="text-white text-sm opacity-90">15分钟 • 初级</div>
</div>
<div class="h-20 bg-[url('https://source.unsplash.com/featured/?running')] bg-cover rounded-xl p-4">
<div class="text-white font-medium">燃脂跑步</div>
<div class="text-white text-sm opacity-90">30分钟 • 中级</div>
</div>
</div>
</div>
<div class="min-w-[375px] h-[812px] bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<div class="flex items-center justify-between mb-8">
<div class="text-xl font-semibold">健康趋势</div>
<div class="flex gap-2">
<div class="w-8 h-8 bg-gray-100 rounded-lg"></div>
<div class="w-8 h-8 bg-gray-100 rounded-lg"></div>
</div>
</div>
<div class="h-48 bg-gray-50 rounded-xl mb-8"></div>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
<div>
<div class="text-sm text-gray-500">平均步数</div>
<div class="text-lg font-semibold">9,234</div>
</div>
<div class="w-12 h-12 bg-blue-500 rounded-lg"></div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
<div>
<div class="text-sm text-gray-500">消耗热量</div>
<div class="text-lg font-semibold">2,345<span class="text-sm ml-1">kcal</span></div>
</div>
<div class="w-12 h-12 bg-green-500 rounded-lg"></div>
</div>
</div>
</div>
<div class="min-w-[375px] h-[812px] bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<div class="text-xl font-semibold mb-8">训练计划</div>
<div class="h-48 bg-[url('https://source.unsplash.com/featured/?workout')] bg-cover rounded-xl mb-8 p-4">
<div class="text-white text-lg font-medium">每日挑战</div>
<div class="text-white text-sm">完成3组训练</div>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4 p-3 bg-gray-50 rounded-xl">
<div class="w-16 h-16 bg-[url('https://source.unsplash.com/featured/?abs')] bg-cover rounded-lg"></div>
<div>
<div class="font-medium">核心训练</div>
<div class="text-sm text-gray-500">12分钟 • 3个动作</div>
</div>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-50 rounded-xl">
<div class="w-16 h-16 bg-[url('https://source.unsplash.com/featured/?stretch')] bg-cover rounded-lg"></div>
<div>
<div class="font-medium">拉伸放松</div>
<div class="text-sm text-gray-500">8分钟 • 全身拉伸</div>
</div>
</div>
</div>
</div>
<div class="min-w-[375px] h-[812px] bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<div class="flex items-center gap-4 mb-8">
<div class="w-16 h-16 bg-[url('https://source.unsplash.com/featured/?face')] bg-cover rounded-full"></div>
<div>
<div class="text-xl font-semibold">张伟</div>
<div class="text-gray-500">保持健康 ��</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 mb-8">
<div class="bg-blue-50 p-3 rounded-xl text-center">
<div class="text-2xl font-bold">28</div>
<div class="text-xs text-gray-500">连续天数</div>
</div>
<div class="bg-green-50 p-3 rounded-xl text-center">
<div class="text-2xl font-bold">A+</div>
<div class="text-xs text-gray-500">健康评级</div>
</div>
<div class="bg-purple-50 p-3 rounded-xl text-center">
<div class="text-2xl font-bold">96%</div>
<div class="text-xs text-gray-500">完成率</div>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
<div>成就徽章</div>
<div class="flex gap-2">
<div class="w-8 h-8 bg-yellow-400 rounded-full"></div>
<div class="w-8 h-8 bg-gray-300 rounded-full"></div>
<div class="w-8 h-8 bg-gray-300 rounded-full"></div>
</div>
</div>
<div class="p-3 bg-gray-50 rounded-xl">
<div class="text-sm text-gray-500 mb-2">最近活动</div>
<div class="space-y-2">
<div class="h-4 bg-gray-200 rounded-full w-3/4"></div>
<div class="h-4 bg-gray-200 rounded-full w-2/3"></div>
</div>
</div>
</div>
</div>
</body>
</html>