627 lines
22 KiB
HTML
627 lines
22 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>宠物详情 - 卡片仪表盘式 V2</title>
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<style>
|
||
/* 卡片仪表盘式 V2 特有样式 - 侧重数据可视化 */
|
||
.dashboard-v2-container {
|
||
background: #F8FAFC;
|
||
}
|
||
|
||
.hero-card {
|
||
background: linear-gradient(135deg, var(--pet-primary), var(--pet-accent));
|
||
color: white;
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-xl);
|
||
margin: var(--spacing-md);
|
||
box-shadow: 0 20px 40px rgba(255, 138, 128, 0.3);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
|
||
animation: float 20s infinite linear;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.hero-avatar {
|
||
width: 90px;
|
||
height: 90px;
|
||
border-radius: var(--radius-round);
|
||
border: 4px solid rgba(255,255,255,0.8);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.hero-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.hero-name {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
margin-bottom: var(--spacing-xs);
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.hero-details {
|
||
opacity: 0.9;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.hero-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-stat-value {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hero-stat-label {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.dashboard-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.dashboard-card {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||
border: 1px solid #E2E8F0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.dashboard-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.icon-weight {
|
||
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
||
color: white;
|
||
}
|
||
|
||
.icon-activity {
|
||
background: linear-gradient(135deg, #4ECDC4, #44A08D);
|
||
color: white;
|
||
}
|
||
|
||
.icon-food {
|
||
background: linear-gradient(135deg, #45B7D1, #96CEB4);
|
||
color: white;
|
||
}
|
||
|
||
.icon-sleep {
|
||
background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
|
||
color: white;
|
||
}
|
||
|
||
.metric-display {
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-value-large {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.metric-unit {
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
margin-left: var(--spacing-xs);
|
||
}
|
||
|
||
.metric-change {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--spacing-xs);
|
||
font-size: 14px;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.change-positive {
|
||
color: #10B981;
|
||
}
|
||
|
||
.change-negative {
|
||
color: #EF4444;
|
||
}
|
||
|
||
.change-neutral {
|
||
color: #6B7280;
|
||
}
|
||
|
||
.mini-chart {
|
||
height: 40px;
|
||
background: linear-gradient(90deg, #E5E7EB, #F3F4F6);
|
||
border-radius: var(--radius-md);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60%;
|
||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||
clip-path: polygon(0 80%, 25% 60%, 50% 40%, 75% 30%, 100% 20%, 100% 100%, 0 100%);
|
||
}
|
||
|
||
.full-width-card {
|
||
grid-column: 1 / -1;
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||
border: 1px solid #E2E8F0;
|
||
}
|
||
|
||
.health-overview {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-lg);
|
||
margin-top: var(--spacing-lg);
|
||
}
|
||
|
||
.health-metric {
|
||
text-align: center;
|
||
}
|
||
|
||
.health-circle-v2 {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: var(--radius-round);
|
||
margin: 0 auto var(--spacing-sm);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.circle-85 {
|
||
background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 306deg, #E5E7EB 306deg);
|
||
}
|
||
|
||
.circle-90 {
|
||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 324deg, #E5E7EB 324deg);
|
||
}
|
||
|
||
.circle-70 {
|
||
background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E5E7EB 252deg);
|
||
}
|
||
|
||
.circle-92 {
|
||
background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E5E7EB 331deg);
|
||
}
|
||
|
||
.health-circle-v2::before {
|
||
content: '';
|
||
width: 40px;
|
||
height: 40px;
|
||
background: white;
|
||
border-radius: var(--radius-round);
|
||
position: absolute;
|
||
}
|
||
|
||
.health-value {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.health-name {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.recent-activities {
|
||
margin-top: var(--spacing-lg);
|
||
}
|
||
|
||
.activity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.activity-item-v2 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
padding: var(--spacing-md);
|
||
background: #F8FAFC;
|
||
border-radius: var(--radius-md);
|
||
border-left: 4px solid var(--pet-accent);
|
||
}
|
||
|
||
.activity-icon-v2 {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--pet-accent);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.activity-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-name {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.activity-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.activity-timestamp {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.action-buttons-v2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.action-btn-v2 {
|
||
background: white;
|
||
border: 2px solid var(--pet-primary);
|
||
color: var(--pet-primary);
|
||
padding: var(--spacing-lg);
|
||
border-radius: var(--radius-lg);
|
||
text-align: center;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-btn-v2:hover {
|
||
background: var(--pet-primary);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
|
||
}
|
||
|
||
.btn-icon {
|
||
font-size: 24px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container dashboard-v2-container">
|
||
<!-- 英雄卡片 -->
|
||
<div class="hero-card">
|
||
<div class="hero-content">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="hero-avatar">
|
||
<div class="hero-info">
|
||
<h1 class="hero-name">小橘</h1>
|
||
<p class="hero-details">橘猫 · 公 · 2岁3个月</p>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">645</div>
|
||
<div class="hero-stat-label">陪伴天数</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">85</div>
|
||
<div class="hero-stat-label">健康评分</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 仪表盘网格 -->
|
||
<div class="dashboard-grid">
|
||
<!-- 体重卡片 -->
|
||
<div class="dashboard-card">
|
||
<div class="card-header">
|
||
<span class="card-title">体重</span>
|
||
<div class="card-icon icon-weight">⚖️</div>
|
||
</div>
|
||
<div class="metric-display">
|
||
<div class="metric-value-large">
|
||
4.2<span class="metric-unit">kg</span>
|
||
</div>
|
||
<div class="metric-change change-positive">
|
||
<span>↗</span>
|
||
<span>+0.1kg 本周</span>
|
||
</div>
|
||
<div class="mini-chart">
|
||
<div class="chart-line"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 活动卡片 -->
|
||
<div class="dashboard-card">
|
||
<div class="card-header">
|
||
<span class="card-title">活动量</span>
|
||
<div class="card-icon icon-activity">🏃</div>
|
||
</div>
|
||
<div class="metric-display">
|
||
<div class="metric-value-large">
|
||
78<span class="metric-unit">%</span>
|
||
</div>
|
||
<div class="metric-change change-positive">
|
||
<span>↗</span>
|
||
<span>+5% 昨日</span>
|
||
</div>
|
||
<div class="mini-chart">
|
||
<div class="chart-line" style="clip-path: polygon(0 60%, 25% 40%, 50% 50%, 75% 30%, 100% 25%, 100% 100%, 0 100%);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 食欲卡片 -->
|
||
<div class="dashboard-card">
|
||
<div class="card-header">
|
||
<span class="card-title">食欲</span>
|
||
<div class="card-icon icon-food">🍽️</div>
|
||
</div>
|
||
<div class="metric-display">
|
||
<div class="metric-value-large">
|
||
92<span class="metric-unit">%</span>
|
||
</div>
|
||
<div class="metric-change change-negative">
|
||
<span>↘</span>
|
||
<span>-3% 本周</span>
|
||
</div>
|
||
<div class="mini-chart">
|
||
<div class="chart-line" style="clip-path: polygon(0 40%, 25% 30%, 50% 35%, 75% 45%, 100% 50%, 100% 100%, 0 100%);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 睡眠卡片 -->
|
||
<div class="dashboard-card">
|
||
<div class="card-header">
|
||
<span class="card-title">睡眠</span>
|
||
<div class="card-icon icon-sleep">😴</div>
|
||
</div>
|
||
<div class="metric-display">
|
||
<div class="metric-value-large">
|
||
14<span class="metric-unit">h</span>
|
||
</div>
|
||
<div class="metric-change change-neutral">
|
||
<span>→</span>
|
||
<span>正常范围</span>
|
||
</div>
|
||
<div class="mini-chart">
|
||
<div class="chart-line" style="clip-path: polygon(0 50%, 25% 45%, 50% 50%, 75% 48%, 100% 52%, 100% 100%, 0 100%);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康概览卡片 -->
|
||
<div class="dashboard-grid">
|
||
<div class="full-width-card">
|
||
<div class="card-header">
|
||
<span class="card-title">健康状态概览</span>
|
||
<div class="card-icon" style="background: linear-gradient(135deg, var(--pet-secondary), var(--pet-accent)); color: white;">📊</div>
|
||
</div>
|
||
|
||
<div class="health-overview">
|
||
<div class="health-metric">
|
||
<div class="health-circle-v2 circle-85">
|
||
<div class="health-value">85</div>
|
||
</div>
|
||
<div class="health-name">综合健康</div>
|
||
</div>
|
||
<div class="health-metric">
|
||
<div class="health-circle-v2 circle-90">
|
||
<div class="health-value">90</div>
|
||
</div>
|
||
<div class="health-name">疫苗状态</div>
|
||
</div>
|
||
<div class="health-metric">
|
||
<div class="health-circle-v2 circle-70">
|
||
<div class="health-value">70</div>
|
||
</div>
|
||
<div class="health-name">驱虫状态</div>
|
||
</div>
|
||
<div class="health-metric">
|
||
<div class="health-circle-v2 circle-92">
|
||
<div class="health-value">92</div>
|
||
</div>
|
||
<div class="health-name">营养状态</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recent-activities">
|
||
<h3 style="margin-bottom: var(--spacing-md); color: var(--text-primary); font-weight: bold;">最近活动</h3>
|
||
<div class="activity-list">
|
||
<div class="activity-item-v2">
|
||
<div class="activity-icon-v2">⚖️</div>
|
||
<div class="activity-details">
|
||
<div class="activity-name">体重记录</div>
|
||
<div class="activity-desc">今天体重4.2kg，比上周增加了0.1kg</div>
|
||
</div>
|
||
<div class="activity-timestamp">2小时前</div>
|
||
</div>
|
||
|
||
<div class="activity-item-v2">
|
||
<div class="activity-icon-v2" style="background: var(--pet-secondary);">💉</div>
|
||
<div class="activity-details">
|
||
<div class="activity-name">疫苗接种</div>
|
||
<div class="activity-desc">完成了狂犬疫苗第二针接种</div>
|
||
</div>
|
||
<div class="activity-timestamp">1天前</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-buttons-v2">
|
||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('addRecord')">
|
||
<div class="btn-icon">📝</div>
|
||
<div>添加记录</div>
|
||
</div>
|
||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('aiChat')">
|
||
<div class="btn-icon">💬</div>
|
||
<div>AI助手</div>
|
||
</div>
|
||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('healthChart')">
|
||
<div class="btn-icon">📊</div>
|
||
<div>健康报告</div>
|
||
</div>
|
||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('timeline')">
|
||
<div class="btn-icon">⏰</div>
|
||
<div>成长时光</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 卡片仪表盘式 V2 特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 卡片入场动画
|
||
const cards = document.querySelectorAll('.dashboard-card, .full-width-card');
|
||
cards.forEach((card, index) => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(30px)';
|
||
|
||
setTimeout(() => {
|
||
card.style.transition = 'all 0.6s ease';
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}, index * 150);
|
||
});
|
||
|
||
// 数值动画
|
||
const metricValues = document.querySelectorAll('.metric-value-large');
|
||
metricValues.forEach(value => {
|
||
const text = value.textContent;
|
||
const number = parseFloat(text);
|
||
const unit = text.replace(number.toString(), '');
|
||
|
||
let current = 0;
|
||
const increment = number / 30;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= number) {
|
||
current = number;
|
||
clearInterval(timer);
|
||
}
|
||
|
||
if (unit.includes('%') || unit.includes('h')) {
|
||
value.innerHTML = Math.round(current) + `<span class="metric-unit">${unit}</span>`;
|
||
} else {
|
||
value.innerHTML = current.toFixed(1) + `<span class="metric-unit">${unit}</span>`;
|
||
}
|
||
}, 50);
|
||
});
|
||
|
||
// 健康圆环动画
|
||
const healthCircles = document.querySelectorAll('.health-circle-v2');
|
||
healthCircles.forEach((circle, index) => {
|
||
setTimeout(() => {
|
||
circle.style.animation = 'scaleIn 0.8s ease forwards';
|
||
}, index * 100);
|
||
});
|
||
|
||
console.log('卡片仪表盘式 V2 原型已加载');
|
||
});
|
||
|
||
// 添加缩放动画
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes scaleIn {
|
||
from {
|
||
transform: scale(0);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateX(0) translateY(0); }
|
||
50% { transform: translateX(-10px) translateY(-10px); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|