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>
|