首页 > 分享 > PetCare宠物健康管理APP原型图

PetCare宠物健康管理APP原型图

萌宠菠菠乐园
2025-11-17 12:38

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PetCare - 智能宠物管理平台</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet"> <style> :root { --primary: #8A9EA1; --secondary: #B4C5C8; --accent: #E8A598; --light: #F8F6F3; --dark: #4C5B5E; --success: #A0C1B9; --warning: #E8B598; --danger: #E89898; --radius: 12px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.05); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Nunito', sans-serif; color: var(--dark); background-color: #fafafa; line-height: 1.6; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 头部样式 */ header { background-color: white; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-icon { background: var(--primary); color: white; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .logo-text { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; color: var(--dark); } .logo-text span { color: var(--accent); } .nav-links { display: flex; gap: 32px; } .nav-links a { text-decoration: none; color: var(--dark); font-weight: 600; font-size: 16px; position: relative; transition: var(--transition); } .nav-links a:hover { color: var(--accent); } .nav-links a.active:after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: var(--accent); } .user-section { display: flex; align-items: center; gap: 20px; } .notification-btn, .user-profile { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--light); cursor: pointer; color: var(--dark); position: relative; transition: var(--transition); } .notification-btn:hover, .user-profile:hover { background: var(--secondary); color: white; } .notification-btn:after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; border: 2px solid white; } /* 主内容区样式 */ .main-content { display: grid; grid-template-columns: 280px 1fr; gap: 30px; margin-top: 40px; } .sidebar { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); align-self: start; position: sticky; top: 90px; } .sidebar-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--secondary); color: var(--dark); } .pet-list { display: flex; flex-direction: column; gap: 16px; } .pet-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); cursor: pointer; transition: var(--transition); border: 1px solid transparent; } .pet-card:hover { border-color: var(--secondary); } .pet-card.active { border-color: var(--accent); background: rgba(232, 165, 152, 0.08); } .pet-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--secondary); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; } .pet-info h3 { font-size: 16px; font-weight: 600; } .pet-info p { font-size: 13px; color: #888; } .add-pet { display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--primary); font-weight: 600; cursor: pointer; border-radius: var(--radius); transition: var(--transition); } .add-pet:hover { background: var(--light); } .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; } .dashboard-card { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .dashboard-card.wide { grid-column: span 2; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .card-title { font-size: 18px; font-weight: 700; } .card-action { color: var(--primary); font-weight: 600; font-size: 14px; cursor: pointer; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-card { background: var(--light); border-radius: var(--radius); padding: 20px; text-align: center; transition: var(--transition); } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 24px; } .stat-food .stat-icon { background: rgba(168, 217, 72, 0.2); color: #A8D948; } .stat-health .stat-icon { background: rgba(232, 165, 152, 0.2); color: var(--accent); } .stat-activity .stat-icon { background: rgba(127, 199, 217, 0.2); color: #7FC7D9; } .stat-weight .stat-icon { background: rgba(179, 164, 217, 0.2); color: #B3A4D9; } .stat-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; } .stat-label { font-size: 14px; color: var(--dark); } .task-list { display: flex; flex-direction: column; gap: 16px; } .task-item { display: flex; align-items: center; padding: 12px; border-radius: 8px; background: var(--light); } .task-info { flex-grow: 1; margin-left: 12px; } .task-title { font-weight: 600; margin-bottom: 4px; } .task-desc { font-size: 14px; color: #888; } .task-time { font-size: 13px; color: var(--primary); } .activity-list { display: flex; flex-direction: column; gap: 16px; } .activity-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(138, 158, 161, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary); } .activity-content h4 { font-weight: 600; margin-bottom: 4px; } .activity-content p { font-size: 14px; color: #888; } .activity-time { font-size: 13px; color: var(--primary); } /* 图表容器 */ .chart-container { height: 300px; position: relative; } /* 页脚样式 */ footer { background: var(--dark); color: white; padding: 40px 0; margin-top: 60px; } .footer-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .footer-column h3 { font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-column h3:after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--accent); } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: #ddd; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent); } .copyright { text-align: center; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; color: #aaa; } /* 响应式设计 */ @media (max-width: 992px) { .dashboard { grid-template-columns: 1fr; } .dashboard-card.wide { grid-column: span 1; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .footer-content { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } .sidebar { position: relative; top: 0; } .stats-grid { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; } .nav-links { display: none; } } </style> </head> <body> <header> <div class="container"> <nav class="navbar"> <a href="#" class="logo"> <div class="logo-icon"> <i class="fas fa-paw"></i> </div> <div class="logo-text">Pet<span>Care</span></div> </a> <div class="nav-links"> <a href="#" class="active">仪表盘</a> <a href="#">健康追踪</a> <a href="#">喂养计划</a> <a href="#">活动记录</a> <a href="#">提醒事项</a> </div> <div class="user-section"> <div class="notification-btn"> <i class="fas fa-bell"></i> </div> <div class="user-profile"> <i class="fas fa-user"></i> </div> </div> </nav> </div> </header> <div class="container"> <div class="main-content"> <div class="sidebar"> <h3 class="sidebar-title">我的宠物</h3> <div class="pet-list"> <div class="pet-card active"> <div class="pet-avatar"> <i class="fas fa-dog"></i> </div> <div class="pet-info"> <h3>豆豆</h3> <p>边境牧羊犬 · 2岁</p> </div> </div> <div class="pet-card"> <div class="pet-avatar"> <i class="fas fa-cat"></i> </div> <div class="pet-info"> <h3>球球</h3> <p>英国短毛猫 · 3岁</p> </div> </div> <div class="add-pet"> <div class="pet-avatar"> <i class="fas fa-plus"></i> </div> <div class="pet-info"> <h3>添加新宠物</h3> </div> </div> </div> </div> <div class="dashboard"> <div class="dashboard-card"> <div class="card-header"> <h3 class="card-title">健康概览</h3> <div class="card-action">详情</div> </div> <div class="stats-grid"> <div class="stat-card stat-food"> <div class="stat-icon"> <i class="fas fa-utensils"></i> </div> <div class="stat-value">87%</div> <div class="stat-label">进食规律</div> </div> <div class="stat-card stat-health"> <div class="stat-icon"> <i class="fas fa-heartbeat"></i> </div> <div class="stat-value">92</div> <div class="stat-label">健康指数</div> </div> <div class="stat-card stat-activity"> <div class="stat-icon"> <i class="fas fa-running"></i> </div> <div class="stat-value">75%</div> <div class="stat-label">活动量</div> </div> <div class="stat-card stat-weight"> <div class="stat-icon"> <i class="fas fa-weight"></i> </div> <div class="stat-value">18.5kg</div> <div class="stat-label">体重</div> </div> </div> </div> <div class="dashboard-card"> <div class="card-header"> <h3 class="card-title">今日任务</h3> <div class="card-action">全部</div> </div> <div class="task-list"> <div class="task-item"> <div class="task-check"> <i class="far fa-circle"></i> </div> <div class="task-info"> <div class="task-title">上午喂食</div> <div class="task-desc">狗粮 250g + 营养剂</div> </div> <div class="task-time">08:30</div> </div> <div class="task-item"> <div class="task-check"> <i class="far fa-circle"></i> </div> <div class="task-info"> <div class="task-title">户外散步</div> <div class="task-desc">公园散步 30分钟</div> </div> <div class="task-time">15:00</div> </div> <div class="task-item"> <div class="task-check"> <i class="far fa-check-circle" style="color: var(--success)"></i> </div> <div class="task-info"> <div class="task-title">清洁水盆</div> <div class="task-desc">更换新鲜饮用水</div> </div> <div class="task-time">10:00</div> </div> </div> </div> <div class="dashboard-card wide"> <div class="card-header"> <h3 class="card-title">近期活动</h3> <div class="card-action">查看历史</div> </div> <div class="activity-list"> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-bone"></i> </div> <div class="activity-content"> <h4>喂食记录</h4> <p>豆豆在08:30完成了早餐</p> </div> <div class="activity-time">10分钟前</div> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-pills"></i> </div> <div class="activity-content"> <h4>健康提醒</h4> <p>豆豆的驱虫药还剩3天</p> </div> <div class="activity-time">1小时前</div> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-walking"></i> </div> <div class="activity-content"> <h4>活动报告</h4> <p>昨日散步距离：3.2公里</p> </div> <div class="activity-time">昨天</div> </div> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-clipboard-check"></i> </div> <div class="activity-content"> <h4>健康检查</h4> <p>完成了本月的定期检查</p> </div> <div class="activity-time">2天前</div> </div> </div> </div> <div class="dashboard-card wide"> <div class="card-header"> <h3 class="card-title">体重变化趋势</h3> <div class="card-action">数据导出</div> </div> <div class="chart-container">  <canvas id="weightChart"></canvas> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer-content"> <div class="footer-column"> <h3>关于我们</h3> <div class="footer-links"> <a href="#">公司简介</a> <a href="#">团队介绍</a> <a href="#">发展历程</a> <a href="#">加入我们</a> </div> </div> <div class="footer-column"> <h3>产品服务</h3> <div class="footer-links"> <a href="#">智能项圈</a> <a href="#">健康监测</a> <a href="#">喂食管理</a> <a href="#">活动追踪</a> </div> </div> <div class="footer-column"> <h3>支持帮助</h3> <div class="footer-links"> <a href="#">使用指南</a> <a href="#">常见问题</a> <a href="#">服务支持</a> <a href="#">联系我们</a> </div> </div> <div class="footer-column"> <h3>关注我们</h3> <div class="footer-links"> <a href="#"><i class="fab fa-weixin"></i> 微信公众号</a> <a href="#"><i class="fab fa-weibo"></i> 新浪微博</a> <a href="#"><i class="fab fa-douban"></i> 豆瓣小组</a> <a href="#"><i class="fab fa-bilibili"></i> Bilibili</a> </div> </div> </div> <div class="copyright"> © 2023 PetCare 智能宠物管理平台版权所有 </div> </div> </footer> <script src="https://gcore.jsdelivr.net/npm/chart.js"></script> <script> // 初始化图表 document.addEventListener('DOMContentLoaded', function() { const ctx = document.getElementById('weightChart').getContext('2d'); // 宠物体重数据 const weightData = { labels: ['1月', '2月', '3月', '4月', '5月', '6月'], datasets: [{ label: '豆豆体重 (kg)', data: [17.2, 17.5, 17.8, 18.1, 18.3, 18.5], backgroundColor: 'rgba(232, 165, 152, 0.2)', borderColor: '#E8A598', borderWidth: 2, pointBackgroundColor: '#fff', pointBorderWidth: 2, pointRadius: 5, tension: 0.3, fill: true }] }; // 创建图表 const weightChart = new Chart(ctx, { type: 'line', data: weightData, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, min: 16, grid: { color: 'rgba(0, 0, 0, 0.05)' } }, x: { grid: { display: false } } } } }); // 添加宠物卡片交互 const petCards = document.querySelectorAll('.pet-card'); petCards.forEach(card => { card.addEventListener('click', function() { petCards.forEach(c => c.classList.remove('active')); this.classList.add('active'); }); }); // 添加新宠物 const addPetBtn = document.querySelector('.add-pet'); addPetBtn.addEventListener('click', function() { alert('添加新宠物功能即将开放！'); }); }); </script> </body> </html>