432 lines
14 KiB
HTML
432 lines
14 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>宠物详情 - 仪表盘式</title>
|
|
<link rel="stylesheet" href="assets/css/common.css">
|
|
<style>
|
|
/* 仪表盘式特有样式 */
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #2C3E50, #34495E);
|
|
color: white;
|
|
padding: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dashboard-menu {
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
color: white;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.pet-overview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.pet-avatar-dashboard {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: var(--radius-round);
|
|
border: 3px solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.metric-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-md);
|
|
box-shadow: var(--shadow-sm);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metric-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.metric-title {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.metric-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.metric-change {
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.metric-change.positive {
|
|
color: var(--pet-secondary);
|
|
}
|
|
|
|
.metric-change.negative {
|
|
color: var(--pet-warning);
|
|
}
|
|
|
|
.progress-ring {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto var(--spacing-md);
|
|
}
|
|
|
|
.progress-ring svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.progress-ring-circle {
|
|
fill: none;
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.progress-ring-bg {
|
|
stroke: var(--pet-neutral);
|
|
}
|
|
|
|
.progress-ring-progress {
|
|
stroke: var(--pet-primary);
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset 0.5s ease;
|
|
}
|
|
|
|
.progress-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.chart-container {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-md);
|
|
margin: var(--spacing-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.chart-title {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.chart-period {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
background: var(--pet-neutral);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.mini-chart {
|
|
height: 60px;
|
|
background: linear-gradient(to right,
|
|
var(--pet-accent) 0%,
|
|
var(--pet-primary) 50%,
|
|
var(--pet-secondary) 100%);
|
|
border-radius: var(--radius-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mini-chart::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path d="M0,25 Q25,10 50,25 T100,25" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none"/></svg>') no-repeat center;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.status-indicators {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.status-item {
|
|
background: white;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-sm);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 24px;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 10px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-round);
|
|
margin: var(--spacing-xs) auto 0;
|
|
}
|
|
|
|
.status-good { background: var(--pet-secondary); }
|
|
.status-warning { background: var(--pet-warning); }
|
|
.status-danger { background: var(--pet-primary); }
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.action-btn-dashboard {
|
|
flex: 1;
|
|
background: var(--pet-primary);
|
|
color: white;
|
|
border: none;
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn-dashboard:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.action-btn-dashboard.secondary {
|
|
background: var(--pet-accent);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 仪表盘头部 -->
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-nav">
|
|
<div class="dashboard-title">宠物健康仪表盘</div>
|
|
<button class="dashboard-menu">⋯</button>
|
|
</div>
|
|
|
|
<div class="pet-overview">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
|
alt="小橘" class="pet-avatar-dashboard">
|
|
<div>
|
|
<h2 class="text-lg font-bold">小橘</h2>
|
|
<p class="text-sm">橘猫 · 公 · 2岁3个月</p>
|
|
<p class="text-sm">健康评分: 85/100</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 核心指标网格 -->
|
|
<div class="metrics-grid">
|
|
<!-- 体重指标 -->
|
|
<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-change positive">
|
|
<span>↗</span>
|
|
<span>+0.1kg 本周</span>
|
|
</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-change positive">
|
|
<span>↗</span>
|
|
<span>+5% 昨日</span>
|
|
</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">92%</div>
|
|
<div class="metric-change negative">
|
|
<span>↘</span>
|
|
<span>-3% 本周</span>
|
|
</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-change positive">
|
|
<span>→</span>
|
|
<span>正常范围</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 健康评分环形图 -->
|
|
<div class="chart-container">
|
|
<div class="chart-header">
|
|
<span class="chart-title">健康评分</span>
|
|
<span class="chart-period">本月</span>
|
|
</div>
|
|
|
|
<div class="progress-ring">
|
|
<svg width="80" height="80">
|
|
<circle class="progress-ring-circle progress-ring-bg"
|
|
cx="40" cy="40" r="32" stroke-width="8"/>
|
|
<circle class="progress-ring-circle progress-ring-progress"
|
|
cx="40" cy="40" r="32" stroke-width="8"
|
|
stroke-dasharray="201.06" stroke-dashoffset="30.16"/>
|
|
</svg>
|
|
<div class="progress-text">85</div>
|
|
</div>
|
|
|
|
<div class="text-center text-sm text-secondary">
|
|
比上月提升了 3 分
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 体重趋势图 -->
|
|
<div class="chart-container">
|
|
<div class="chart-header">
|
|
<span class="chart-title">体重趋势</span>
|
|
<span class="chart-period">近30天</span>
|
|
</div>
|
|
<div class="mini-chart"></div>
|
|
</div>
|
|
|
|
<!-- 状态指示器 -->
|
|
<div class="status-indicators">
|
|
<div class="status-item">
|
|
<div class="status-icon">💉</div>
|
|
<div class="status-label">疫苗</div>
|
|
<div class="status-dot status-good"></div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-icon">🐛</div>
|
|
<div class="status-label">驱虫</div>
|
|
<div class="status-dot status-warning"></div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-icon">🦷</div>
|
|
<div class="status-label">牙齿</div>
|
|
<div class="status-dot status-good"></div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-icon">👁️</div>
|
|
<div class="status-label">眼部</div>
|
|
<div class="status-dot status-good"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快速操作 -->
|
|
<div class="quick-actions">
|
|
<button class="action-btn-dashboard" onclick="interactions.handleButtonClick('addRecord')">
|
|
记录数据
|
|
</button>
|
|
<button class="action-btn-dashboard secondary" onclick="interactions.handleButtonClick('healthChart')">
|
|
详细报告
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/common.js"></script>
|
|
<script>
|
|
// 仪表盘式特有交互
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 动画化进度环
|
|
const progressCircle = document.querySelector('.progress-ring-progress');
|
|
const radius = 32;
|
|
const circumference = 2 * Math.PI * radius;
|
|
const progress = 85; // 85%
|
|
const offset = circumference - (progress / 100) * circumference;
|
|
|
|
progressCircle.style.strokeDasharray = circumference;
|
|
progressCircle.style.strokeDashoffset = circumference;
|
|
|
|
setTimeout(() => {
|
|
progressCircle.style.strokeDashoffset = offset;
|
|
}, 500);
|
|
|
|
// 数值动画
|
|
const metricValues = document.querySelectorAll('.metric-value');
|
|
metricValues.forEach(value => {
|
|
const finalValue = value.textContent;
|
|
value.textContent = '0';
|
|
|
|
setTimeout(() => {
|
|
value.style.transition = 'all 1s ease';
|
|
value.textContent = finalValue;
|
|
}, 300);
|
|
});
|
|
|
|
console.log('仪表盘式原型已加载');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|