614 lines
21 KiB
HTML
614 lines
21 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>宠物详情 - 卡片仪表盘式 V3</title>
|
|
<link rel="stylesheet" href="assets/css/common.css">
|
|
<style>
|
|
/* 卡片仪表盘式 V3 特有样式 - 侧重层次感和深度 */
|
|
.dashboard-v3-container {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.profile-card {
|
|
background: rgba(255,255,255,0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--spacing-xl);
|
|
margin-bottom: var(--spacing-lg);
|
|
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.profile-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent), var(--pet-secondary));
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
}
|
|
|
|
.profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: var(--radius-round);
|
|
border: 4px solid var(--pet-primary);
|
|
box-shadow: 0 15px 35px rgba(255, 138, 128, 0.4);
|
|
position: relative;
|
|
}
|
|
|
|
.profile-avatar::after {
|
|
content: '🏆';
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
background: var(--pet-warning);
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: var(--radius-round);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.profile-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.profile-name {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.profile-subtitle {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.profile-badges {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.badge {
|
|
background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
|
|
}
|
|
|
|
.metrics-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.metric-card-v3 {
|
|
background: rgba(255,255,255,0.9);
|
|
backdrop-filter: blur(15px);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.metric-card-v3:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 45px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.metric-card-v3::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
}
|
|
|
|
.metric-card-v3.weight::before {
|
|
background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
|
|
}
|
|
|
|
.metric-card-v3.activity::before {
|
|
background: linear-gradient(90deg, #4ECDC4, #44A08D);
|
|
}
|
|
|
|
.metric-card-v3.food::before {
|
|
background: linear-gradient(90deg, #45B7D1, #96CEB4);
|
|
}
|
|
|
|
.metric-card-v3.sleep::before {
|
|
background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
|
|
}
|
|
|
|
.metric-header-v3 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.metric-title-v3 {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.metric-icon-v3 {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
color: white;
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.icon-weight-v3 {
|
|
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
|
}
|
|
|
|
.icon-activity-v3 {
|
|
background: linear-gradient(135deg, #4ECDC4, #44A08D);
|
|
}
|
|
|
|
.icon-food-v3 {
|
|
background: linear-gradient(135deg, #45B7D1, #96CEB4);
|
|
}
|
|
|
|
.icon-sleep-v3 {
|
|
background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
|
|
}
|
|
|
|
.metric-value-v3 {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.metric-progress {
|
|
width: 100%;
|
|
height: 12px;
|
|
background: #E5E7EB;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.progress-bar-v3 {
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
transition: width 1.5s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-weight {
|
|
background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
|
|
}
|
|
|
|
.progress-activity {
|
|
background: linear-gradient(90deg, #4ECDC4, #44A08D);
|
|
}
|
|
|
|
.progress-food {
|
|
background: linear-gradient(90deg, #45B7D1, #96CEB4);
|
|
}
|
|
|
|
.progress-sleep {
|
|
background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
|
|
}
|
|
|
|
.metric-status {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-summary {
|
|
background: rgba(255,255,255,0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--spacing-xl);
|
|
margin-bottom: var(--spacing-lg);
|
|
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.summary-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.summary-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.overall-score {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: var(--radius-round);
|
|
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
|
|
margin: 0 auto var(--spacing-md);
|
|
position: relative;
|
|
}
|
|
|
|
.overall-score::before {
|
|
content: '';
|
|
width: 70px;
|
|
height: 70px;
|
|
background: white;
|
|
border-radius: var(--radius-round);
|
|
position: absolute;
|
|
}
|
|
|
|
.score-value {
|
|
position: relative;
|
|
z-index: 2;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.score-label {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.health-indicators {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.indicator {
|
|
text-align: center;
|
|
padding: var(--spacing-md);
|
|
background: rgba(255,255,255,0.5);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.indicator-icon {
|
|
font-size: 24px;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.indicator-value {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.indicator-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.action-panel {
|
|
background: rgba(255,255,255,0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.action-grid-v3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.action-item-v3 {
|
|
background: rgba(255,255,255,0.8);
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.action-item-v3::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.action-item-v3:hover {
|
|
border-color: var(--pet-primary);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 35px rgba(255, 138, 128, 0.3);
|
|
}
|
|
|
|
.action-item-v3:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.action-icon-v3 {
|
|
font-size: 28px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.action-title-v3 {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.action-desc {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container dashboard-v3-container">
|
|
<!-- 个人资料卡片 -->
|
|
<div class="profile-card">
|
|
<div class="profile-header">
|
|
<div class="profile-avatar">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
|
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
|
|
</div>
|
|
<div class="profile-details">
|
|
<h1 class="profile-name">小橘</h1>
|
|
<p class="profile-subtitle">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
|
|
<div class="profile-badges">
|
|
<span class="badge">健康宝宝</span>
|
|
<span class="badge">活泼可爱</span>
|
|
<span class="badge">疫苗完成</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 指标卡片网格 -->
|
|
<div class="metrics-container">
|
|
<div class="metric-card-v3 weight">
|
|
<div class="metric-header-v3">
|
|
<span class="metric-title-v3">体重监测</span>
|
|
<div class="metric-icon-v3 icon-weight-v3">⚖️</div>
|
|
</div>
|
|
<div class="metric-value-v3">4.2kg</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-bar-v3 progress-weight" style="width: 84%;"></div>
|
|
</div>
|
|
<div class="metric-status">健康范围内 (+0.1kg)</div>
|
|
</div>
|
|
|
|
<div class="metric-card-v3 activity">
|
|
<div class="metric-header-v3">
|
|
<span class="metric-title-v3">活动指数</span>
|
|
<div class="metric-icon-v3 icon-activity-v3">🏃</div>
|
|
</div>
|
|
<div class="metric-value-v3">78%</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-bar-v3 progress-activity" style="width: 78%;"></div>
|
|
</div>
|
|
<div class="metric-status">活跃状态 (+5%)</div>
|
|
</div>
|
|
|
|
<div class="metric-card-v3 food">
|
|
<div class="metric-header-v3">
|
|
<span class="metric-title-v3">食欲状态</span>
|
|
<div class="metric-icon-v3 icon-food-v3">🍽️</div>
|
|
</div>
|
|
<div class="metric-value-v3">92%</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-bar-v3 progress-food" style="width: 92%;"></div>
|
|
</div>
|
|
<div class="metric-status">食欲旺盛 (-3%)</div>
|
|
</div>
|
|
|
|
<div class="metric-card-v3 sleep">
|
|
<div class="metric-header-v3">
|
|
<span class="metric-title-v3">睡眠质量</span>
|
|
<div class="metric-icon-v3 icon-sleep-v3">😴</div>
|
|
</div>
|
|
<div class="metric-value-v3">14h</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-bar-v3 progress-sleep" style="width: 87%;"></div>
|
|
</div>
|
|
<div class="metric-status">睡眠充足</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 健康总结仪表盘 -->
|
|
<div class="dashboard-summary">
|
|
<div class="summary-header">
|
|
<h2 class="summary-title">健康状态总览</h2>
|
|
<div class="overall-score">
|
|
<div class="score-value">85</div>
|
|
</div>
|
|
<div class="score-label">综合健康评分</div>
|
|
</div>
|
|
|
|
<div class="health-indicators">
|
|
<div class="indicator">
|
|
<div class="indicator-icon">💉</div>
|
|
<div class="indicator-value">完成</div>
|
|
<div class="indicator-label">疫苗状态</div>
|
|
</div>
|
|
<div class="indicator">
|
|
<div class="indicator-icon">🐛</div>
|
|
<div class="indicator-value">需要</div>
|
|
<div class="indicator-label">驱虫提醒</div>
|
|
</div>
|
|
<div class="indicator">
|
|
<div class="indicator-icon">🦷</div>
|
|
<div class="indicator-value">良好</div>
|
|
<div class="indicator-label">牙齿健康</div>
|
|
</div>
|
|
<div class="indicator">
|
|
<div class="indicator-icon">👁️</div>
|
|
<div class="indicator-value">正常</div>
|
|
<div class="indicator-label">眼部检查</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作面板 -->
|
|
<div class="action-panel">
|
|
<div class="action-grid-v3">
|
|
<div class="action-item-v3" onclick="interactions.handleButtonClick('addRecord')">
|
|
<div class="action-icon-v3">📝</div>
|
|
<div class="action-title-v3">记录数据</div>
|
|
<div class="action-desc">添加健康记录</div>
|
|
</div>
|
|
|
|
<div class="action-item-v3" onclick="interactions.handleButtonClick('aiChat')">
|
|
<div class="action-icon-v3">💬</div>
|
|
<div class="action-title-v3">AI咨询</div>
|
|
<div class="action-desc">智能健康建议</div>
|
|
</div>
|
|
|
|
<div class="action-item-v3" onclick="interactions.handleButtonClick('healthChart')">
|
|
<div class="action-icon-v3">📊</div>
|
|
<div class="action-title-v3">详细报告</div>
|
|
<div class="action-desc">查看趋势分析</div>
|
|
</div>
|
|
|
|
<div class="action-item-v3" onclick="interactions.handleButtonClick('timeline')">
|
|
<div class="action-icon-v3">⏰</div>
|
|
<div class="action-title-v3">成长记录</div>
|
|
<div class="action-desc">时间轴展示</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/common.js"></script>
|
|
<script>
|
|
// 卡片仪表盘式 V3 特有交互
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 卡片层叠入场动画
|
|
const cards = document.querySelectorAll('.profile-card, .metric-card-v3, .dashboard-summary, .action-panel');
|
|
cards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(50px) scale(0.9)';
|
|
|
|
setTimeout(() => {
|
|
card.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0) scale(1)';
|
|
}, index * 200);
|
|
});
|
|
|
|
// 进度条动画
|
|
setTimeout(() => {
|
|
const progressBars = document.querySelectorAll('.progress-bar-v3');
|
|
progressBars.forEach((bar, index) => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, index * 300);
|
|
});
|
|
}, 1000);
|
|
|
|
// 整体评分圆环动画
|
|
setTimeout(() => {
|
|
const overallScore = document.querySelector('.overall-score');
|
|
overallScore.style.animation = 'rotateScale 1.2s ease forwards';
|
|
}, 1500);
|
|
|
|
// 指标数值动画
|
|
const metricValues = document.querySelectorAll('.metric-value-v3');
|
|
metricValues.forEach((value, index) => {
|
|
const text = value.textContent;
|
|
const number = parseFloat(text);
|
|
const unit = text.replace(number.toString(), '');
|
|
|
|
setTimeout(() => {
|
|
let current = 0;
|
|
const increment = number / 25;
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= number) {
|
|
current = number;
|
|
clearInterval(timer);
|
|
}
|
|
|
|
if (unit.includes('%') || unit.includes('h')) {
|
|
value.textContent = Math.round(current) + unit;
|
|
} else {
|
|
value.textContent = current.toFixed(1) + unit;
|
|
}
|
|
}, 40);
|
|
}, index * 400);
|
|
});
|
|
|
|
console.log('卡片仪表盘式 V3 原型已加载');
|
|
});
|
|
|
|
// 添加动画样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes rotateScale {
|
|
0% {
|
|
transform: rotate(-180deg) scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: rotate(-90deg) scale(0.8);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|