553 lines
19 KiB
HTML
553 lines
19 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>宠物详情 - 卡片仪表盘式 V1</title>
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<style>
|
||
/* 卡片仪表盘式 V1 特有样式 */
|
||
.dashboard-v1-container {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.dashboard-header {
|
||
background: rgba(255,255,255,0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: var(--spacing-lg);
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.pet-avatar-dashboard {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: var(--radius-round);
|
||
border: 4px solid var(--pet-primary);
|
||
margin: 0 auto var(--spacing-md);
|
||
box-shadow: 0 8px 24px rgba(255, 138, 128, 0.3);
|
||
}
|
||
|
||
.pet-name-large {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.pet-subtitle {
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.quick-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.quick-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: var(--pet-primary);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
margin-top: var(--spacing-xs);
|
||
}
|
||
|
||
.metrics-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.metric-card {
|
||
background: rgba(255,255,255,0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.metric-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||
}
|
||
|
||
.metric-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.metric-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.metric-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.metric-trend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.trend-positive {
|
||
color: var(--pet-secondary);
|
||
}
|
||
|
||
.trend-negative {
|
||
color: var(--pet-warning);
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 8px;
|
||
background: #E2E8F0;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||
border-radius: 4px;
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
.health-dashboard {
|
||
background: rgba(255,255,255,0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-lg);
|
||
margin: var(--spacing-md);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.dashboard-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-lg);
|
||
text-align: center;
|
||
}
|
||
|
||
.health-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.health-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.health-circle {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: var(--radius-round);
|
||
margin: 0 auto var(--spacing-md);
|
||
position: relative;
|
||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E2E8F0 306deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.health-circle::before {
|
||
content: '';
|
||
width: 60px;
|
||
height: 60px;
|
||
background: white;
|
||
border-radius: var(--radius-round);
|
||
position: absolute;
|
||
}
|
||
|
||
.health-score {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.health-label {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.activity-cards {
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.activity-card {
|
||
background: rgba(255,255,255,0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-md);
|
||
margin-bottom: var(--spacing-md);
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||
border-left: 4px solid var(--pet-accent);
|
||
}
|
||
|
||
.activity-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.activity-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.activity-content {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.action-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.action-card {
|
||
background: rgba(255,255,255,0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
text-align: center;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 32px;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.action-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.action-subtitle {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.floating-summary {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: var(--pet-primary);
|
||
color: white;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: var(--radius-round);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
box-shadow: 0 8px 32px rgba(255, 138, 128, 0.4);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.floating-summary:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container dashboard-v1-container">
|
||
<!-- 宠物信息头部卡片 -->
|
||
<div class="dashboard-header">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="pet-avatar-dashboard">
|
||
<h1 class="pet-name-large">小橘</h1>
|
||
<p class="pet-subtitle">橘猫 · 公 · 2岁3个月 · 健康状态良好</p>
|
||
|
||
<div class="quick-stats">
|
||
<div class="quick-stat">
|
||
<div class="stat-number">645</div>
|
||
<div class="stat-label">陪伴天数</div>
|
||
</div>
|
||
<div class="quick-stat">
|
||
<div class="stat-number">4.2kg</div>
|
||
<div class="stat-label">当前体重</div>
|
||
</div>
|
||
<div class="quick-stat">
|
||
<div class="stat-number">85</div>
|
||
<div class="stat-label">健康评分</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心指标卡片 -->
|
||
<div class="metrics-row">
|
||
<div class="metric-card">
|
||
<div class="metric-header">
|
||
<span class="metric-title">体重趋势</span>
|
||
<span class="metric-icon">⚖️</span>
|
||
</div>
|
||
<div class="metric-value">4.2kg</div>
|
||
<div class="metric-trend trend-positive">
|
||
<span>↗</span>
|
||
<span>+0.1kg 本周</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 84%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric-card">
|
||
<div class="metric-header">
|
||
<span class="metric-title">活动指数</span>
|
||
<span class="metric-icon">🏃</span>
|
||
</div>
|
||
<div class="metric-value">78%</div>
|
||
<div class="metric-trend trend-positive">
|
||
<span>↗</span>
|
||
<span>+5% 昨日</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 78%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-row">
|
||
<div class="metric-card">
|
||
<div class="metric-header">
|
||
<span class="metric-title">食欲状态</span>
|
||
<span class="metric-icon">🍽️</span>
|
||
</div>
|
||
<div class="metric-value">92%</div>
|
||
<div class="metric-trend trend-negative">
|
||
<span>↘</span>
|
||
<span>-3% 本周</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 92%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric-card">
|
||
<div class="metric-header">
|
||
<span class="metric-title">睡眠质量</span>
|
||
<span class="metric-icon">😴</span>
|
||
</div>
|
||
<div class="metric-value">14h</div>
|
||
<div class="metric-trend trend-positive">
|
||
<span>→</span>
|
||
<span>正常范围</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 87%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康仪表盘 -->
|
||
<div class="health-dashboard">
|
||
<h2 class="dashboard-title">健康状态仪表盘</h2>
|
||
<div class="health-grid">
|
||
<div class="health-item">
|
||
<div class="health-circle">
|
||
<div class="health-score">85</div>
|
||
</div>
|
||
<div class="health-label">综合健康</div>
|
||
</div>
|
||
<div class="health-item">
|
||
<div class="health-circle" style="background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 324deg, #E2E8F0 324deg);">
|
||
<div class="health-score">90</div>
|
||
</div>
|
||
<div class="health-label">疫苗状态</div>
|
||
</div>
|
||
<div class="health-item">
|
||
<div class="health-circle" style="background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E2E8F0 252deg);">
|
||
<div class="health-score">70</div>
|
||
</div>
|
||
<div class="health-label">驱虫状态</div>
|
||
</div>
|
||
<div class="health-item">
|
||
<div class="health-circle" style="background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E2E8F0 331deg);">
|
||
<div class="health-score">92</div>
|
||
</div>
|
||
<div class="health-label">营养状态</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近活动卡片 -->
|
||
<div class="activity-cards">
|
||
<div class="activity-card">
|
||
<div class="activity-header">
|
||
<div class="activity-title">
|
||
<span>⚖️</span>
|
||
<span>体重记录</span>
|
||
</div>
|
||
<div class="activity-time">2小时前</div>
|
||
</div>
|
||
<div class="activity-content">
|
||
今天测量体重4.2kg，比上周增加了0.1kg，成长状态良好
|
||
</div>
|
||
</div>
|
||
|
||
<div class="activity-card">
|
||
<div class="activity-header">
|
||
<div class="activity-title">
|
||
<span>💉</span>
|
||
<span>疫苗接种</span>
|
||
</div>
|
||
<div class="activity-time">1天前</div>
|
||
</div>
|
||
<div class="activity-content">
|
||
完成了狂犬疫苗第二针接种，医生说恢复情况很好
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速操作网格 -->
|
||
<div class="action-grid">
|
||
<div class="action-card" onclick="interactions.handleButtonClick('addRecord')">
|
||
<div class="action-icon">📝</div>
|
||
<div class="action-title">添加记录</div>
|
||
<div class="action-subtitle">记录日常数据</div>
|
||
</div>
|
||
|
||
<div class="action-card" onclick="interactions.handleButtonClick('aiChat')">
|
||
<div class="action-icon">💬</div>
|
||
<div class="action-title">AI助手</div>
|
||
<div class="action-subtitle">智能健康咨询</div>
|
||
</div>
|
||
|
||
<div class="action-card" onclick="interactions.handleButtonClick('healthChart')">
|
||
<div class="action-icon">📊</div>
|
||
<div class="action-title">健康报告</div>
|
||
<div class="action-subtitle">详细数据分析</div>
|
||
</div>
|
||
|
||
<div class="action-card" onclick="interactions.handleButtonClick('timeline')">
|
||
<div class="action-icon">⏰</div>
|
||
<div class="action-title">成长时光</div>
|
||
<div class="action-subtitle">时间轴记录</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮摘要按钮 -->
|
||
<div class="floating-summary" onclick="interactions.handleButtonClick('summary')">
|
||
📋
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 卡片仪表盘式 V1 特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 进度条动画
|
||
const progressBars = document.querySelectorAll('.progress-fill');
|
||
progressBars.forEach((bar, index) => {
|
||
const width = bar.style.width;
|
||
bar.style.width = '0%';
|
||
|
||
setTimeout(() => {
|
||
bar.style.width = width;
|
||
}, index * 200);
|
||
});
|
||
|
||
// 健康圆环动画
|
||
const healthCircles = document.querySelectorAll('.health-circle');
|
||
healthCircles.forEach((circle, index) => {
|
||
setTimeout(() => {
|
||
circle.style.animation = 'rotateIn 0.8s ease forwards';
|
||
}, index * 150);
|
||
});
|
||
|
||
// 卡片入场动画
|
||
const cards = document.querySelectorAll('.metric-card, .activity-card, .action-card');
|
||
cards.forEach((card, index) => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
|
||
setTimeout(() => {
|
||
card.style.transition = 'all 0.6s ease';
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}, index * 100);
|
||
});
|
||
|
||
console.log('卡片仪表盘式 V1 原型已加载');
|
||
});
|
||
|
||
// 添加旋转动画
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes rotateIn {
|
||
from {
|
||
transform: rotate(-180deg) scale(0.5);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: rotate(0deg) scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|