594 lines
17 KiB
HTML
594 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>方案8：宠物仪表盘聚合式</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
max-width: 375px;
|
||
margin: 0 auto;
|
||
padding: 15px;
|
||
}
|
||
|
||
.header-card {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.add-pet-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
|
||
color: white;
|
||
border: none;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.add-pet-btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.pets-overview {
|
||
display: flex;
|
||
gap: 10px;
|
||
overflow-x: auto;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.pet-mini {
|
||
min-width: 80px;
|
||
text-align: center;
|
||
background: #F8F9FA;
|
||
border-radius: 15px;
|
||
padding: 12px 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.pet-mini.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
border-color: rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.pet-mini-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
background: #FFE0B2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
margin: 0 auto 8px;
|
||
}
|
||
|
||
.pet-mini.active .pet-mini-avatar {
|
||
background: rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.pet-mini-name {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.pet-mini-status {
|
||
font-size: 10px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.main-stats {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.stats-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stat-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
|
||
transform: rotate(45deg);
|
||
animation: shimmer 3s infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.today-focus {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.focus-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.focus-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.focus-item {
|
||
background: #F8F9FA;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
border-left: 4px solid #4ECDC4;
|
||
}
|
||
|
||
.focus-item.urgent {
|
||
border-left-color: #FF6B6B;
|
||
background: #FFF5F5;
|
||
}
|
||
|
||
.focus-item.completed {
|
||
border-left-color: #96CEB4;
|
||
background: #F0FFF4;
|
||
}
|
||
|
||
.focus-emoji {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
.focus-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.focus-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.activities-stream {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.stream-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.activity-timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.activity-timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, #667eea, #764ba2);
|
||
}
|
||
|
||
.activity-item {
|
||
position: relative;
|
||
margin-bottom: 15px;
|
||
background: #F8F9FA;
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.activity-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -22px;
|
||
top: 12px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background: #667eea;
|
||
border: 2px solid white;
|
||
}
|
||
|
||
.activity-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.activity-pet {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 12px;
|
||
background: #FFE0B2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.activity-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 11px;
|
||
color: #999;
|
||
}
|
||
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.quick-btn {
|
||
background: rgba(255,255,255,0.95);
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 15px 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.quick-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.quick-btn-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 6px;
|
||
display: block;
|
||
}
|
||
|
||
.quick-btn-text {
|
||
font-size: 11px;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.floating-record {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 20px;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 30px;
|
||
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
|
||
color: white;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
box-shadow: 0 6px 24px rgba(255,107,107,0.4);
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.floating-record:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.health-alerts {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 80px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.alerts-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.alert-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: #FFF3E0;
|
||
border-radius: 12px;
|
||
margin-bottom: 8px;
|
||
border-left: 4px solid #FFB74D;
|
||
}
|
||
|
||
.alert-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.alert-item.urgent {
|
||
background: #FFEBEE;
|
||
border-left-color: #FF6B6B;
|
||
}
|
||
|
||
.alert-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.alert-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.alert-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.alert-time {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header-card">
|
||
<div class="header-top">
|
||
<div>
|
||
<div class="header-title">🏠 宠物管家</div>
|
||
<div class="header-subtitle">3只毛孩子的智能管理</div>
|
||
</div>
|
||
<button class="add-pet-btn">+</button>
|
||
</div>
|
||
<div class="pets-overview">
|
||
<div class="pet-mini active">
|
||
<div class="pet-mini-avatar">🐱</div>
|
||
<div class="pet-mini-name">小橘</div>
|
||
<div class="pet-mini-status">健康</div>
|
||
</div>
|
||
<div class="pet-mini">
|
||
<div class="pet-mini-avatar">🐶</div>
|
||
<div class="pet-mini-name">小白</div>
|
||
<div class="pet-mini-status">活跃</div>
|
||
</div>
|
||
<div class="pet-mini">
|
||
<div class="pet-mini-avatar">🐰</div>
|
||
<div class="pet-mini-name">小灰</div>
|
||
<div class="pet-mini-status">安静</div>
|
||
</div>
|
||
<div class="pet-mini">
|
||
<div class="pet-mini-avatar">➕</div>
|
||
<div class="pet-mini-name">添加</div>
|
||
<div class="pet-mini-status">新宠物</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-stats">
|
||
<div class="stats-title">📊 家庭数据概览</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<span class="stat-icon">📝</span>
|
||
<div class="stat-number">190</div>
|
||
<div class="stat-label">总记录数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">📅</span>
|
||
<div class="stat-number">1640</div>
|
||
<div class="stat-label">陪伴天数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">💚</span>
|
||
<div class="stat-number">100%</div>
|
||
<div class="stat-label">健康率</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">🎯</span>
|
||
<div class="stat-number">23</div>
|
||
<div class="stat-label">本月记录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="today-focus">
|
||
<div class="focus-title">🎯 今日重点</div>
|
||
<div class="focus-content">
|
||
<div class="focus-item completed">
|
||
<span class="focus-emoji">🍽️</span>
|
||
<div class="focus-text">早餐完成</div>
|
||
<div class="focus-desc">3/3只已用餐</div>
|
||
</div>
|
||
<div class="focus-item">
|
||
<span class="focus-emoji">🚶</span>
|
||
<div class="focus-text">遛弯计划</div>
|
||
<div class="focus-desc">小白待遛弯</div>
|
||
</div>
|
||
<div class="focus-item urgent">
|
||
<span class="focus-emoji">💊</span>
|
||
<div class="focus-text">用药提醒</div>
|
||
<div class="focus-desc">小橘驱虫药</div>
|
||
</div>
|
||
<div class="focus-item">
|
||
<span class="focus-emoji">🛁</span>
|
||
<div class="focus-text">洗澡安排</div>
|
||
<div class="focus-desc">本周计划</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-actions">
|
||
<button class="quick-btn">
|
||
<span class="quick-btn-icon">📝</span>
|
||
<span class="quick-btn-text">快速记录</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-btn-icon">📸</span>
|
||
<span class="quick-btn-text">拍照记录</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-btn-icon">💬</span>
|
||
<span class="quick-btn-text">AI聊天</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-btn-icon">📊</span>
|
||
<span class="quick-btn-text">数据统计</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="activities-stream">
|
||
<div class="stream-title">⏰ 活动流</div>
|
||
<div class="activity-timeline">
|
||
<div class="activity-item">
|
||
<div class="activity-header">
|
||
<div class="activity-pet">🐱</div>
|
||
<div class="activity-text">小橘完成早餐</div>
|
||
<div class="activity-time">2小时前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-header">
|
||
<div class="activity-pet">🐶</div>
|
||
<div class="activity-text">小白外出散步</div>
|
||
<div class="activity-time">3小时前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-header">
|
||
<div class="activity-pet">🐰</div>
|
||
<div class="activity-text">小灰吃胡萝卜</div>
|
||
<div class="activity-time">4小时前</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-alerts">
|
||
<div class="alerts-title">🔔 健康提醒</div>
|
||
<div class="alert-item urgent">
|
||
<div class="alert-icon">💊</div>
|
||
<div class="alert-content">
|
||
<div class="alert-text">小橘驱虫药到期</div>
|
||
<div class="alert-time">明天</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert-item">
|
||
<div class="alert-icon">💉</div>
|
||
<div class="alert-content">
|
||
<div class="alert-text">小白疫苗接种</div>
|
||
<div class="alert-time">下周</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="floating-record">📝</button>
|
||
</body>
|
||
</html>
|