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>
|