379 lines
13 KiB
HTML
379 lines
13 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>
|
||
/* 时间轴式特有样式 */
|
||
.timeline-header {
|
||
background: linear-gradient(45deg, var(--pet-accent), var(--pet-secondary));
|
||
padding: var(--spacing-lg);
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.timeline-header::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;
|
||
}
|
||
|
||
@keyframes float {
|
||
0% { transform: translateX(0) translateY(0); }
|
||
100% { transform: translateX(-50px) translateY(-50px); }
|
||
}
|
||
|
||
.pet-summary {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.pet-avatar-timeline {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: var(--radius-round);
|
||
border: 3px solid white;
|
||
}
|
||
|
||
.pet-info-timeline {
|
||
flex: 1;
|
||
}
|
||
|
||
.timeline-container {
|
||
padding: var(--spacing-md);
|
||
position: relative;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, var(--pet-primary), var(--pet-accent));
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: var(--spacing-lg);
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-md);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.timeline-item:hover {
|
||
transform: translateX(5px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -37px;
|
||
top: 20px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: var(--radius-round);
|
||
background: var(--pet-primary);
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 2px var(--pet-primary);
|
||
}
|
||
|
||
.timeline-date {
|
||
position: absolute;
|
||
left: -120px;
|
||
top: 15px;
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
font-weight: bold;
|
||
writing-mode: vertical-rl;
|
||
text-orientation: mixed;
|
||
}
|
||
|
||
.timeline-content {
|
||
margin-left: var(--spacing-md);
|
||
}
|
||
|
||
.timeline-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
}
|
||
|
||
.timeline-icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.timeline-description {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.timeline-stats {
|
||
background: var(--pet-neutral);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-md);
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: var(--pet-primary);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
margin-top: var(--spacing-xs);
|
||
}
|
||
|
||
.floating-actions {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.floating-btn {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: var(--radius-round);
|
||
background: var(--pet-primary);
|
||
color: white;
|
||
border: none;
|
||
font-size: 20px;
|
||
box-shadow: var(--shadow-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.floating-btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.milestone-item {
|
||
border-left: 4px solid var(--pet-warning);
|
||
}
|
||
|
||
.milestone-item::before {
|
||
background: var(--pet-warning);
|
||
box-shadow: 0 0 0 2px var(--pet-warning);
|
||
}
|
||
|
||
.health-item {
|
||
border-left: 4px solid var(--pet-secondary);
|
||
}
|
||
|
||
.health-item::before {
|
||
background: var(--pet-secondary);
|
||
box-shadow: 0 0 0 2px var(--pet-secondary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部区域 -->
|
||
<div class="timeline-header">
|
||
<div class="pet-summary">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="pet-avatar-timeline">
|
||
<div class="pet-info-timeline">
|
||
<h1 class="text-xl font-bold">小橘的成长时光</h1>
|
||
<p class="text-sm">橘猫 · 公 · 2岁3个月</p>
|
||
<p class="text-sm">陪伴了 645 个美好日子</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计数据 -->
|
||
<div class="timeline-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">645</div>
|
||
<div class="stat-label">陪伴天数</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">127</div>
|
||
<div class="stat-label">记录总数</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">85</div>
|
||
<div class="stat-label">健康评分</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间轴内容 -->
|
||
<div class="timeline-container">
|
||
<div class="timeline">
|
||
<!-- 最近记录 -->
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">01-20</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">⚖️</span>
|
||
<span>体重记录</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
今天测量体重4.2kg，比上周增加了0.1kg，成长状态良好。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康记录 -->
|
||
<div class="timeline-item health-item">
|
||
<div class="timeline-date">01-18</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">💉</span>
|
||
<span>疫苗接种</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
完成了狂犬疫苗第二针接种，医生说恢复情况很好。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日常记录 -->
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">01-17</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">😸</span>
|
||
<span>搞破坏现场</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
把我的拖鞋咬坏了，但是看起来很开心的样子，活泼的性格展现无遗。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 护理记录 -->
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">01-15</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">🛁</span>
|
||
<span>洗澡记录</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
给小橘洗了澡，全程很乖没有挣扎，用的是专用宠物洗发水。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 里程碑事件 -->
|
||
<div class="timeline-item milestone-item">
|
||
<div class="timeline-date">01-14</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">🍽️</span>
|
||
<span>换新猫粮</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
尝试了新品牌的猫粮，适应性很好，食欲旺盛。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重要里程碑 -->
|
||
<div class="timeline-item milestone-item">
|
||
<div class="timeline-date">04-20</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-title">
|
||
<span class="timeline-icon">🏠</span>
|
||
<span>到家纪念日</span>
|
||
</div>
|
||
<div class="timeline-description">
|
||
小橘来到我们家的第一天，从此开始了美好的陪伴时光。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮操作按钮 -->
|
||
<div class="floating-actions">
|
||
<button class="floating-btn" onclick="interactions.handleButtonClick('addRecord')" title="添加记录">
|
||
➕
|
||
</button>
|
||
<button class="floating-btn" onclick="interactions.handleButtonClick('aiChat')" title="AI聊天">
|
||
💬
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 时间轴式特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 添加滚动动画
|
||
const timelineItems = document.querySelectorAll('.timeline-item');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.animation = 'slideInRight 0.6s ease forwards';
|
||
}
|
||
});
|
||
});
|
||
|
||
timelineItems.forEach(item => {
|
||
observer.observe(item);
|
||
});
|
||
|
||
console.log('时间轴式原型已加载');
|
||
});
|
||
|
||
// 添加滑入动画
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes slideInRight {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|