465 lines
16 KiB
HTML
465 lines
16 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>
|
||
/* 杂志式特有样式 */
|
||
.magazine-container {
|
||
background: #FAFAFA;
|
||
}
|
||
|
||
.hero-section {
|
||
position: relative;
|
||
height: 300px;
|
||
background: linear-gradient(135deg, var(--pet-primary), var(--pet-accent));
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
color: white;
|
||
padding: var(--spacing-lg);
|
||
}
|
||
|
||
.hero-avatar {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: var(--radius-round);
|
||
border: 4px solid rgba(255,255,255,0.8);
|
||
margin-bottom: var(--spacing-md);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
margin-bottom: var(--spacing-xs);
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 16px;
|
||
opacity: 0.9;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: var(--spacing-lg);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.hero-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-stat-number {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.content-section {
|
||
background: white;
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.section-header {
|
||
background: linear-gradient(90deg, var(--pet-secondary), var(--pet-accent));
|
||
color: white;
|
||
padding: var(--spacing-md);
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.section-content {
|
||
padding: var(--spacing-lg);
|
||
}
|
||
|
||
.info-columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.info-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--spacing-sm) 0;
|
||
border-bottom: 1px solid #F0F0F0;
|
||
}
|
||
|
||
.info-label {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.info-value {
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.feature-article {
|
||
background: white;
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.article-image {
|
||
height: 150px;
|
||
background: linear-gradient(45deg, var(--pet-warning), var(--pet-secondary));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48px;
|
||
color: white;
|
||
}
|
||
|
||
.article-content {
|
||
padding: var(--spacing-lg);
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.article-excerpt {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.read-more {
|
||
color: var(--pet-primary);
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.gallery-section {
|
||
background: white;
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2px;
|
||
}
|
||
|
||
.gallery-item {
|
||
aspect-ratio: 1;
|
||
background: var(--pet-neutral);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: var(--text-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.gallery-item:hover {
|
||
transform: scale(1.05);
|
||
z-index: 2;
|
||
}
|
||
|
||
.quote-section {
|
||
background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
|
||
margin: var(--spacing-md);
|
||
padding: var(--spacing-lg);
|
||
border-radius: var(--radius-lg);
|
||
border-left: 4px solid var(--pet-primary);
|
||
position: relative;
|
||
}
|
||
|
||
.quote-text {
|
||
font-size: 16px;
|
||
font-style: italic;
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.quote-author {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
text-align: right;
|
||
}
|
||
|
||
.quote-icon {
|
||
position: absolute;
|
||
top: var(--spacing-md);
|
||
right: var(--spacing-md);
|
||
font-size: 32px;
|
||
color: var(--pet-primary);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.action-bar {
|
||
background: white;
|
||
padding: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.action-btn-magazine {
|
||
flex: 1;
|
||
background: var(--pet-primary);
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn-magazine:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.action-btn-magazine.secondary {
|
||
background: var(--pet-accent);
|
||
}
|
||
|
||
.action-btn-magazine.outline {
|
||
background: transparent;
|
||
color: var(--pet-primary);
|
||
border: 2px solid var(--pet-primary);
|
||
}
|
||
|
||
.magazine-footer {
|
||
text-align: center;
|
||
padding: var(--spacing-xl);
|
||
color: var(--text-light);
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container magazine-container">
|
||
<!-- 英雄区域 -->
|
||
<div class="hero-section">
|
||
<div class="hero-background"></div>
|
||
<div class="hero-content">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="hero-avatar">
|
||
<h1 class="hero-title">小橘</h1>
|
||
<p class="hero-subtitle">我的温暖小太阳</p>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-number">645</div>
|
||
<div>陪伴天数</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-number">127</div>
|
||
<div>美好记录</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-number">85</div>
|
||
<div>健康评分</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息区域 -->
|
||
<div class="content-section">
|
||
<div class="section-header">
|
||
📋 基本档案
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="info-columns">
|
||
<div class="info-column">
|
||
<div class="info-item">
|
||
<span class="info-label">品种</span>
|
||
<span class="info-value">橘猫</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">性别</span>
|
||
<span class="info-value">公</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">年龄</span>
|
||
<span class="info-value">2岁3个月</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-column">
|
||
<div class="info-item">
|
||
<span class="info-label">体重</span>
|
||
<span class="info-value">4.2kg</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">生日</span>
|
||
<span class="info-value">2022-03-15</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">到家日期</span>
|
||
<span class="info-value">2022-04-20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 特色文章 -->
|
||
<div class="feature-article">
|
||
<div class="article-image">📊</div>
|
||
<div class="article-content">
|
||
<h2 class="article-title">健康成长报告</h2>
|
||
<p class="article-excerpt">
|
||
小橘这个月的健康状况非常好！体重稳定增长，食欲旺盛，活动量充足。
|
||
疫苗接种按时完成，下次体检预约在3月20号。
|
||
</p>
|
||
<div class="article-meta">
|
||
<span>健康评分: 85/100</span>
|
||
<a href="#" class="read-more" onclick="interactions.handleButtonClick('healthChart')">查看详情 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 精彩瞬间画廊 -->
|
||
<div class="gallery-section">
|
||
<div class="section-header">
|
||
📸 精彩瞬间
|
||
</div>
|
||
<div class="gallery-grid">
|
||
<div class="gallery-item">😸</div>
|
||
<div class="gallery-item">🛁</div>
|
||
<div class="gallery-item">💉</div>
|
||
<div class="gallery-item">🍽️</div>
|
||
<div class="gallery-item">😴</div>
|
||
<div class="gallery-item">🎾</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引用区域 -->
|
||
<div class="quote-section">
|
||
<div class="quote-icon">"</div>
|
||
<div class="quote-text">
|
||
"小橘不仅仅是我的宠物，更是我生活中不可缺少的家人。
|
||
它的每一个小动作都能带给我无尽的快乐和温暖。"
|
||
</div>
|
||
<div class="quote-author">— 小橘的铲屎官</div>
|
||
</div>
|
||
|
||
<!-- 最新动态 -->
|
||
<div class="content-section">
|
||
<div class="section-header">
|
||
🕒 最新动态
|
||
</div>
|
||
<div class="section-content">
|
||
<div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
|
||
<div style="padding: var(--spacing-sm); background: var(--pet-neutral); border-radius: var(--radius-md);">
|
||
<div style="font-weight: bold; margin-bottom: var(--spacing-xs);">⚖️ 体重记录</div>
|
||
<div style="font-size: 14px; color: var(--text-secondary);">今天4.2kg，健康成长中</div>
|
||
<div style="font-size: 12px; color: var(--text-light); margin-top: var(--spacing-xs);">2小时前</div>
|
||
</div>
|
||
<div style="padding: var(--spacing-sm); background: var(--pet-neutral); border-radius: var(--radius-md);">
|
||
<div style="font-weight: bold; margin-bottom: var(--spacing-xs);">💉 疫苗接种</div>
|
||
<div style="font-size: 14px; color: var(--text-secondary);">狂犬疫苗第二针完成</div>
|
||
<div style="font-size: 12px; color: var(--text-light); margin-top: var(--spacing-xs);">1天前</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-bar">
|
||
<button class="action-btn-magazine" onclick="interactions.handleButtonClick('addRecord')">
|
||
📝 记录
|
||
</button>
|
||
<button class="action-btn-magazine secondary" onclick="interactions.handleButtonClick('aiChat')">
|
||
💬 聊天
|
||
</button>
|
||
<button class="action-btn-magazine outline" onclick="interactions.handleButtonClick('share')">
|
||
🔗 分享
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<div class="magazine-footer">
|
||
用爱记录每一个美好瞬间 ❤️
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 杂志式特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 视差滚动效果
|
||
window.addEventListener('scroll', function() {
|
||
const scrolled = window.pageYOffset;
|
||
const heroBackground = document.querySelector('.hero-background');
|
||
if (heroBackground) {
|
||
heroBackground.style.transform = `translateY(${scrolled * 0.5}px)`;
|
||
}
|
||
});
|
||
|
||
// 画廊项目悬停效果
|
||
const galleryItems = document.querySelectorAll('.gallery-item');
|
||
galleryItems.forEach(item => {
|
||
item.addEventListener('mouseenter', function() {
|
||
this.style.background = 'var(--pet-primary)';
|
||
this.style.color = 'white';
|
||
});
|
||
|
||
item.addEventListener('mouseleave', function() {
|
||
this.style.background = 'var(--pet-neutral)';
|
||
this.style.color = 'var(--text-light)';
|
||
});
|
||
});
|
||
|
||
console.log('杂志式原型已加载');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|