713 lines
24 KiB
HTML
713 lines
24 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>宠物详情 - 卡片仪表盘式 V4</title>
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<style>
|
||
/* 卡片仪表盘式 V4 特有样式 - 侧重简洁现代风格 */
|
||
.dashboard-v4-container {
|
||
background: #FAFBFC;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header-section {
|
||
background: white;
|
||
padding: var(--spacing-xl);
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid #F1F3F4;
|
||
}
|
||
|
||
.pet-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-lg);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.pet-avatar-v4 {
|
||
width: 90px;
|
||
height: 90px;
|
||
border-radius: var(--radius-xl);
|
||
border: 3px solid var(--pet-primary);
|
||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.25);
|
||
}
|
||
|
||
.pet-info-v4 {
|
||
flex: 1;
|
||
}
|
||
|
||
.pet-name-v4 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.pet-meta {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
background: #E8F5E8;
|
||
color: #2E7D32;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.quick-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-lg);
|
||
padding-top: var(--spacing-lg);
|
||
border-top: 1px solid #F1F3F4;
|
||
}
|
||
|
||
.quick-metric {
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-number {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.dashboard-section {
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-md);
|
||
padding-left: var(--spacing-sm);
|
||
}
|
||
|
||
.metrics-grid-v4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.metric-card-v4 {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid #F1F3F4;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.metric-card-v4:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.metric-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.metric-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.metric-name {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--spacing-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.metric-value-v4 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.metric-unit-v4 {
|
||
font-size: 16px;
|
||
color: var(--text-light);
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.metric-icon-v4 {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: white;
|
||
}
|
||
|
||
.icon-weight-v4 {
|
||
background: linear-gradient(135deg, #FF6B6B, #FF8A80);
|
||
}
|
||
|
||
.icon-activity-v4 {
|
||
background: linear-gradient(135deg, #4CAF50, #81C784);
|
||
}
|
||
|
||
.icon-food-v4 {
|
||
background: linear-gradient(135deg, #2196F3, #64B5F6);
|
||
}
|
||
|
||
.icon-sleep-v4 {
|
||
background: linear-gradient(135deg, #9C27B0, #BA68C8);
|
||
}
|
||
|
||
.metric-trend-v4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.trend-indicator {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: var(--radius-round);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: white;
|
||
}
|
||
|
||
.trend-up {
|
||
background: #4CAF50;
|
||
}
|
||
|
||
.trend-down {
|
||
background: #FF5722;
|
||
}
|
||
|
||
.trend-stable {
|
||
background: #9E9E9E;
|
||
}
|
||
|
||
.trend-text {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.progress-section {
|
||
margin-top: var(--spacing-md);
|
||
}
|
||
|
||
.progress-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.progress-name {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.progress-percent {
|
||
font-size: 12px;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.progress-track {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: #F1F3F4;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill-v4 {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
transition: width 1.2s ease;
|
||
}
|
||
|
||
.progress-weight-v4 {
|
||
background: linear-gradient(90deg, #FF6B6B, #FF8A80);
|
||
}
|
||
|
||
.progress-activity-v4 {
|
||
background: linear-gradient(90deg, #4CAF50, #81C784);
|
||
}
|
||
|
||
.progress-food-v4 {
|
||
background: linear-gradient(90deg, #2196F3, #64B5F6);
|
||
}
|
||
|
||
.progress-sleep-v4 {
|
||
background: linear-gradient(90deg, #9C27B0, #BA68C8);
|
||
}
|
||
|
||
.health-summary {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-xl);
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||
border: 1px solid #F1F3F4;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.summary-score {
|
||
text-align: center;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.score-circle {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: var(--radius-round);
|
||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #F1F3F4 306deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto var(--spacing-md);
|
||
position: relative;
|
||
}
|
||
|
||
.score-circle::before {
|
||
content: '';
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white;
|
||
border-radius: var(--radius-round);
|
||
position: absolute;
|
||
}
|
||
|
||
.score-number {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.score-description {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.health-items {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.health-item-v4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.health-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
background: #F8F9FA;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.health-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.health-name {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.health-status {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.actions-v4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.action-button-v4 {
|
||
background: white;
|
||
border: 2px solid #F1F3F4;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-button-v4:hover {
|
||
border-color: var(--pet-primary);
|
||
background: #FFF8F7;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.action-icon-v4 {
|
||
font-size: 28px;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.action-title-v4 {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.action-subtitle-v4 {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container dashboard-v4-container">
|
||
<!-- 头部信息区域 -->
|
||
<div class="header-section">
|
||
<div class="pet-profile">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="pet-avatar-v4">
|
||
<div class="pet-info-v4">
|
||
<h1 class="pet-name-v4">小橘</h1>
|
||
<p class="pet-meta">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
|
||
<div class="status-badge">
|
||
<span>●</span>
|
||
<span>健康状态良好</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-metrics">
|
||
<div class="quick-metric">
|
||
<div class="metric-number">4.2kg</div>
|
||
<div class="metric-label">当前体重</div>
|
||
</div>
|
||
<div class="quick-metric">
|
||
<div class="metric-number">85分</div>
|
||
<div class="metric-label">健康评分</div>
|
||
</div>
|
||
<div class="quick-metric">
|
||
<div class="metric-number">127条</div>
|
||
<div class="metric-label">记录总数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 仪表盘区域 -->
|
||
<div class="dashboard-section">
|
||
<h2 class="section-title">健康指标</h2>
|
||
|
||
<div class="metrics-grid-v4">
|
||
<!-- 体重指标 -->
|
||
<div class="metric-card-v4">
|
||
<div class="metric-top">
|
||
<div class="metric-info">
|
||
<div class="metric-name">体重</div>
|
||
<div class="metric-value-v4">
|
||
4.2<span class="metric-unit-v4">kg</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric-icon-v4 icon-weight-v4">⚖️</div>
|
||
</div>
|
||
|
||
<div class="metric-trend-v4">
|
||
<div class="trend-indicator trend-up">↗</div>
|
||
<span class="trend-text">比上周增加 0.1kg</span>
|
||
</div>
|
||
|
||
<div class="progress-section">
|
||
<div class="progress-label">
|
||
<span class="progress-name">健康范围</span>
|
||
<span class="progress-percent">84%</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill-v4 progress-weight-v4" style="width: 84%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 活动指标 -->
|
||
<div class="metric-card-v4">
|
||
<div class="metric-top">
|
||
<div class="metric-info">
|
||
<div class="metric-name">活动量</div>
|
||
<div class="metric-value-v4">
|
||
78<span class="metric-unit-v4">%</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric-icon-v4 icon-activity-v4">🏃</div>
|
||
</div>
|
||
|
||
<div class="metric-trend-v4">
|
||
<div class="trend-indicator trend-up">↗</div>
|
||
<span class="trend-text">比昨日增加 5%</span>
|
||
</div>
|
||
|
||
<div class="progress-section">
|
||
<div class="progress-label">
|
||
<span class="progress-name">活跃度</span>
|
||
<span class="progress-percent">78%</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill-v4 progress-activity-v4" style="width: 78%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 食欲指标 -->
|
||
<div class="metric-card-v4">
|
||
<div class="metric-top">
|
||
<div class="metric-info">
|
||
<div class="metric-name">食欲</div>
|
||
<div class="metric-value-v4">
|
||
92<span class="metric-unit-v4">%</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric-icon-v4 icon-food-v4">🍽️</div>
|
||
</div>
|
||
|
||
<div class="metric-trend-v4">
|
||
<div class="trend-indicator trend-down">↘</div>
|
||
<span class="trend-text">比上周减少 3%</span>
|
||
</div>
|
||
|
||
<div class="progress-section">
|
||
<div class="progress-label">
|
||
<span class="progress-name">食欲状态</span>
|
||
<span class="progress-percent">92%</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill-v4 progress-food-v4" style="width: 92%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 睡眠指标 -->
|
||
<div class="metric-card-v4">
|
||
<div class="metric-top">
|
||
<div class="metric-info">
|
||
<div class="metric-name">睡眠</div>
|
||
<div class="metric-value-v4">
|
||
14<span class="metric-unit-v4">h</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric-icon-v4 icon-sleep-v4">😴</div>
|
||
</div>
|
||
|
||
<div class="metric-trend-v4">
|
||
<div class="trend-indicator trend-stable">→</div>
|
||
<span class="trend-text">保持正常范围</span>
|
||
</div>
|
||
|
||
<div class="progress-section">
|
||
<div class="progress-label">
|
||
<span class="progress-name">睡眠质量</span>
|
||
<span class="progress-percent">87%</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill-v4 progress-sleep-v4" style="width: 87%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康总结 -->
|
||
<div class="health-summary">
|
||
<div class="summary-score">
|
||
<div class="score-circle">
|
||
<div class="score-number">85</div>
|
||
</div>
|
||
<div class="score-description">综合健康评分 - 良好状态</div>
|
||
</div>
|
||
|
||
<div class="health-items">
|
||
<div class="health-item-v4">
|
||
<div class="health-icon">💉</div>
|
||
<div class="health-details">
|
||
<div class="health-name">疫苗接种</div>
|
||
<div class="health-status">已完成，状态良好</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-item-v4">
|
||
<div class="health-icon">🐛</div>
|
||
<div class="health-details">
|
||
<div class="health-name">驱虫治疗</div>
|
||
<div class="health-status">需要更新，3个月前</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-item-v4">
|
||
<div class="health-icon">🦷</div>
|
||
<div class="health-details">
|
||
<div class="health-name">牙齿健康</div>
|
||
<div class="health-status">状态良好</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-item-v4">
|
||
<div class="health-icon">👁️</div>
|
||
<div class="health-details">
|
||
<div class="health-name">眼部检查</div>
|
||
<div class="health-status">正常，无异常</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="actions-v4">
|
||
<div class="action-button-v4" onclick="interactions.handleButtonClick('addRecord')">
|
||
<div class="action-icon-v4">📝</div>
|
||
<div class="action-title-v4">添加记录</div>
|
||
<div class="action-subtitle-v4">记录健康数据</div>
|
||
</div>
|
||
|
||
<div class="action-button-v4" onclick="interactions.handleButtonClick('aiChat')">
|
||
<div class="action-icon-v4">💬</div>
|
||
<div class="action-title-v4">AI助手</div>
|
||
<div class="action-subtitle-v4">智能健康咨询</div>
|
||
</div>
|
||
|
||
<div class="action-button-v4" onclick="interactions.handleButtonClick('healthChart')">
|
||
<div class="action-icon-v4">📊</div>
|
||
<div class="action-title-v4">详细报告</div>
|
||
<div class="action-subtitle-v4">查看趋势分析</div>
|
||
</div>
|
||
|
||
<div class="action-button-v4" onclick="interactions.handleButtonClick('timeline')">
|
||
<div class="action-icon-v4">⏰</div>
|
||
<div class="action-title-v4">成长时光</div>
|
||
<div class="action-subtitle-v4">时间轴记录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 卡片仪表盘式 V4 特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 渐进式加载动画
|
||
const elements = document.querySelectorAll('.header-section, .metric-card-v4, .health-summary, .action-button-v4');
|
||
elements.forEach((element, index) => {
|
||
element.style.opacity = '0';
|
||
element.style.transform = 'translateY(20px)';
|
||
|
||
setTimeout(() => {
|
||
element.style.transition = 'all 0.5s ease';
|
||
element.style.opacity = '1';
|
||
element.style.transform = 'translateY(0)';
|
||
}, index * 100);
|
||
});
|
||
|
||
// 进度条动画
|
||
setTimeout(() => {
|
||
const progressBars = document.querySelectorAll('.progress-fill-v4');
|
||
progressBars.forEach((bar, index) => {
|
||
const width = bar.style.width;
|
||
bar.style.width = '0%';
|
||
|
||
setTimeout(() => {
|
||
bar.style.width = width;
|
||
}, index * 200);
|
||
});
|
||
}, 800);
|
||
|
||
// 评分圆环动画
|
||
setTimeout(() => {
|
||
const scoreCircle = document.querySelector('.score-circle');
|
||
scoreCircle.style.animation = 'scoreReveal 1.5s ease forwards';
|
||
}, 1200);
|
||
|
||
// 数值计数动画
|
||
const metricValues = document.querySelectorAll('.metric-value-v4');
|
||
metricValues.forEach((value, index) => {
|
||
const text = value.innerHTML;
|
||
const numberMatch = text.match(/[\d.]+/);
|
||
if (numberMatch) {
|
||
const number = parseFloat(numberMatch[0]);
|
||
const restText = text.replace(numberMatch[0], '');
|
||
|
||
setTimeout(() => {
|
||
let current = 0;
|
||
const increment = number / 20;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= number) {
|
||
current = number;
|
||
clearInterval(timer);
|
||
}
|
||
|
||
if (restText.includes('%') || restText.includes('h')) {
|
||
value.innerHTML = Math.round(current) + restText;
|
||
} else {
|
||
value.innerHTML = current.toFixed(1) + restText;
|
||
}
|
||
}, 50);
|
||
}, index * 300);
|
||
}
|
||
});
|
||
|
||
console.log('卡片仪表盘式 V4 原型已加载');
|
||
});
|
||
|
||
// 添加动画样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes scoreReveal {
|
||
0% {
|
||
transform: scale(0.8) rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: scale(1.1) rotate(-45deg);
|
||
opacity: 0.7;
|
||
}
|
||
100% {
|
||
transform: scale(1) rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|