420 lines
14 KiB
HTML
420 lines
14 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>
|
||
/* 极简主义式特有样式 */
|
||
.minimal-container {
|
||
background: #FFFFFF;
|
||
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
.minimal-header {
|
||
padding: var(--spacing-xl) var(--spacing-lg);
|
||
text-align: center;
|
||
border-bottom: 1px solid #F0F0F0;
|
||
}
|
||
|
||
.minimal-avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: var(--radius-round);
|
||
margin: 0 auto var(--spacing-lg);
|
||
display: block;
|
||
border: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.minimal-name {
|
||
font-size: 32px;
|
||
font-weight: 300;
|
||
color: #1A1A1A;
|
||
margin-bottom: var(--spacing-sm);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.minimal-subtitle {
|
||
font-size: 16px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.minimal-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-xl);
|
||
}
|
||
|
||
.minimal-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.minimal-stat-number {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.minimal-stat-label {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.minimal-section {
|
||
padding: var(--spacing-xl) var(--spacing-lg);
|
||
border-bottom: 1px solid #F8F8F8;
|
||
}
|
||
|
||
.minimal-section:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-bottom: var(--spacing-lg);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 16px;
|
||
color: #1A1A1A;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
color: #666666;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.minimal-actions {
|
||
padding: var(--spacing-xl) var(--spacing-lg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.minimal-btn {
|
||
background: #1A1A1A;
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
border-radius: 0;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.minimal-btn:hover {
|
||
background: #333333;
|
||
}
|
||
|
||
.minimal-btn.secondary {
|
||
background: transparent;
|
||
color: #1A1A1A;
|
||
border: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.minimal-btn.secondary:hover {
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
.recent-activity {
|
||
padding: var(--spacing-xl) var(--spacing-lg);
|
||
}
|
||
|
||
.activity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: var(--spacing-md) 0;
|
||
border-bottom: 1px solid #F8F8F8;
|
||
}
|
||
|
||
.activity-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.activity-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-title {
|
||
font-size: 16px;
|
||
color: #1A1A1A;
|
||
font-weight: 400;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.activity-description {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
white-space: nowrap;
|
||
margin-left: var(--spacing-md);
|
||
}
|
||
|
||
.health-indicator {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: var(--radius-round);
|
||
background: #4CAF50;
|
||
margin-left: var(--spacing-sm);
|
||
}
|
||
|
||
.health-indicator.warning {
|
||
background: #FF9800;
|
||
}
|
||
|
||
.health-indicator.danger {
|
||
background: #F44336;
|
||
}
|
||
|
||
.minimal-divider {
|
||
height: 1px;
|
||
background: #F0F0F0;
|
||
margin: var(--spacing-xl) 0;
|
||
}
|
||
|
||
.floating-edit {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: var(--radius-round);
|
||
background: #1A1A1A;
|
||
color: white;
|
||
border: none;
|
||
font-size: 18px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.floating-edit:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 25px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* 极简动画 */
|
||
.fade-in-up {
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.minimal-section:nth-child(1) { animation-delay: 0.1s; }
|
||
.minimal-section:nth-child(2) { animation-delay: 0.2s; }
|
||
.minimal-section:nth-child(3) { animation-delay: 0.3s; }
|
||
.minimal-section:nth-child(4) { animation-delay: 0.4s; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container minimal-container">
|
||
<!-- 极简头部 -->
|
||
<div class="minimal-header fade-in-up">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="minimal-avatar">
|
||
<h1 class="minimal-name">小橘</h1>
|
||
<p class="minimal-subtitle">橘猫 · 公 · 2岁3个月</p>
|
||
|
||
<div class="minimal-stats">
|
||
<div class="minimal-stat">
|
||
<div class="minimal-stat-number">645</div>
|
||
<div class="minimal-stat-label">Days</div>
|
||
</div>
|
||
<div class="minimal-stat">
|
||
<div class="minimal-stat-number">4.2</div>
|
||
<div class="minimal-stat-label">Weight</div>
|
||
</div>
|
||
<div class="minimal-stat">
|
||
<div class="minimal-stat-number">85</div>
|
||
<div class="minimal-stat-label">Health</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="minimal-section fade-in-up">
|
||
<h2 class="section-title">基本信息</h2>
|
||
<div class="info-list">
|
||
<div class="info-row">
|
||
<span class="info-label">品种</span>
|
||
<span class="info-value">橘猫</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">性别</span>
|
||
<span class="info-value">公</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">生日</span>
|
||
<span class="info-value">2022-03-15</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">到家日期</span>
|
||
<span class="info-value">2022-04-20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康状态 -->
|
||
<div class="minimal-section fade-in-up">
|
||
<h2 class="section-title">健康状态</h2>
|
||
<div class="info-list">
|
||
<div class="info-row">
|
||
<span class="info-label">体重</span>
|
||
<span class="info-value">4.2kg <span class="health-indicator"></span></span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">疫苗</span>
|
||
<span class="info-value">已完成 <span class="health-indicator"></span></span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">驱虫</span>
|
||
<span class="info-value">需要更新 <span class="health-indicator warning"></span></span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">上次体检</span>
|
||
<span class="info-value">2024-01-15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近活动 -->
|
||
<div class="minimal-section fade-in-up">
|
||
<h2 class="section-title">最近活动</h2>
|
||
<div class="activity-list">
|
||
<div class="activity-item">
|
||
<div class="activity-content">
|
||
<div class="activity-title">体重记录</div>
|
||
<div class="activity-description">今天体重4.2kg，比上周增加了0.1kg</div>
|
||
</div>
|
||
<div class="activity-time">2小时前</div>
|
||
</div>
|
||
|
||
<div class="activity-item">
|
||
<div class="activity-content">
|
||
<div class="activity-title">疫苗接种</div>
|
||
<div class="activity-description">完成了狂犬疫苗第二针接种</div>
|
||
</div>
|
||
<div class="activity-time">1天前</div>
|
||
</div>
|
||
|
||
<div class="activity-item">
|
||
<div class="activity-content">
|
||
<div class="activity-title">日常护理</div>
|
||
<div class="activity-description">给小橘洗了澡，全程很乖没有挣扎</div>
|
||
</div>
|
||
<div class="activity-time">3天前</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="minimal-actions fade-in-up">
|
||
<button class="minimal-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||
添加记录
|
||
</button>
|
||
<button class="minimal-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
|
||
AI 助手
|
||
</button>
|
||
<button class="minimal-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
|
||
健康报告
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 悬浮编辑按钮 -->
|
||
<button class="floating-edit" onclick="interactions.handleButtonClick('edit')">
|
||
✎
|
||
</button>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 极简主义式特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 延迟加载动画
|
||
const elements = document.querySelectorAll('.fade-in-up');
|
||
elements.forEach((el, index) => {
|
||
setTimeout(() => {
|
||
el.style.animationDelay = `${index * 0.1}s`;
|
||
el.classList.add('fade-in-up');
|
||
}, 100);
|
||
});
|
||
|
||
// 简单的滚动效果
|
||
let ticking = false;
|
||
|
||
function updateScrollEffect() {
|
||
const scrolled = window.pageYOffset;
|
||
const header = document.querySelector('.minimal-header');
|
||
|
||
if (scrolled > 50) {
|
||
header.style.transform = `translateY(${-scrolled * 0.1}px)`;
|
||
header.style.opacity = Math.max(0.3, 1 - scrolled / 300);
|
||
} else {
|
||
header.style.transform = 'translateY(0)';
|
||
header.style.opacity = '1';
|
||
}
|
||
|
||
ticking = false;
|
||
}
|
||
|
||
function requestScrollUpdate() {
|
||
if (!ticking) {
|
||
requestAnimationFrame(updateScrollEffect);
|
||
ticking = true;
|
||
}
|
||
}
|
||
|
||
window.addEventListener('scroll', requestScrollUpdate);
|
||
|
||
console.log('极简主义式原型已加载');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|