241 lines
8.3 KiB
HTML
241 lines
8.3 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>
|
||
/* 经典卡片式特有样式 */
|
||
.classic-header {
|
||
background: linear-gradient(135deg, var(--pet-primary), #FFB6C1);
|
||
color: white;
|
||
padding: var(--spacing-lg);
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.classic-header .edit-btn {
|
||
position: absolute;
|
||
top: var(--spacing-md);
|
||
right: var(--spacing-md);
|
||
background: rgba(255,255,255,0.2);
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
color: white;
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
border-radius: var(--radius-md);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.pet-info-main {
|
||
margin-top: -40px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.pet-avatar-card {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
margin: 0 var(--spacing-md);
|
||
box-shadow: var(--shadow-md);
|
||
text-align: center;
|
||
}
|
||
|
||
.pet-avatar-large {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: var(--radius-round);
|
||
border: 4px solid var(--pet-primary);
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--spacing-md);
|
||
margin-top: var(--spacing-lg);
|
||
}
|
||
|
||
.info-item {
|
||
background: var(--pet-neutral);
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
text-align: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.action-buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.action-btn {
|
||
background: white;
|
||
border: 2px solid var(--pet-primary);
|
||
color: var(--pet-primary);
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
text-align: center;
|
||
font-size: 12px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: var(--pet-primary);
|
||
color: white;
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 20px;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.recent-records {
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.record-item {
|
||
background: white;
|
||
border-radius: var(--radius-md);
|
||
padding: var(--spacing-md);
|
||
margin-bottom: var(--spacing-sm);
|
||
border-left: 4px solid var(--pet-accent);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.record-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.record-title {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.record-time {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.record-content {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部区域 -->
|
||
<div class="classic-header">
|
||
<button class="edit-btn" onclick="interactions.handleButtonClick('edit')">编辑</button>
|
||
<h1 class="text-xl font-bold">小橘的档案</h1>
|
||
<p class="text-sm">我的小宝贝</p>
|
||
</div>
|
||
|
||
<!-- 宠物基本信息 -->
|
||
<div class="pet-info-main">
|
||
<div class="pet-avatar-card">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="pet-avatar-large">
|
||
<h2 class="text-xl font-bold mb-sm">小橘</h2>
|
||
<p class="text-secondary">橘猫 · 公 · 2岁3个月</p>
|
||
<p class="text-sm text-light">陪伴了 645 天</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 详细信息网格 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-md">基本信息</h3>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">生日</div>
|
||
<div class="info-value">2022-03-15</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">体重</div>
|
||
<div class="info-value">4.2kg</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">到家日期</div>
|
||
<div class="info-value">2022-04-20</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">健康状态</div>
|
||
<div class="info-value" style="color: var(--pet-secondary)">良好</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速操作按钮 -->
|
||
<div class="action-buttons">
|
||
<button class="action-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||
<div class="action-icon">📝</div>
|
||
<div>添加记录</div>
|
||
</button>
|
||
<button class="action-btn" onclick="interactions.handleButtonClick('aiChat')">
|
||
<div class="action-icon">💬</div>
|
||
<div>AI聊天</div>
|
||
</button>
|
||
<button class="action-btn" onclick="interactions.handleButtonClick('healthChart')">
|
||
<div class="action-icon">📊</div>
|
||
<div>健康图表</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 最近记录 -->
|
||
<div class="recent-records">
|
||
<h3 class="text-lg font-bold mb-md">最近记录</h3>
|
||
|
||
<div class="record-item">
|
||
<div class="record-header">
|
||
<span class="record-title">⚖️ 今天的体重记录</span>
|
||
<span class="record-time">01-20 09:30</span>
|
||
</div>
|
||
<div class="record-content">小橘今天体重4.2kg，比上周增加了0.1kg</div>
|
||
</div>
|
||
|
||
<div class="record-item">
|
||
<div class="record-header">
|
||
<span class="record-title">💉 疫苗接种</span>
|
||
<span class="record-time">01-18 14:20</span>
|
||
</div>
|
||
<div class="record-content">完成了狂犬疫苗第二针接种</div>
|
||
</div>
|
||
|
||
<div class="record-item">
|
||
<div class="record-header">
|
||
<span class="record-title">😸 搞破坏现场</span>
|
||
<span class="record-time">01-17 16:45</span>
|
||
</div>
|
||
<div class="record-content">把我的拖鞋咬坏了，但是看起来很开心的样子</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 经典卡片式特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('经典卡片式原型已加载');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|