1
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
/* 宠物详情页面原型通用样式 */
|
||||
|
||||
/* 基础重置和变量 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* 项目色彩语义化系统 */
|
||||
--pet-primary: #FF8A80; /* 温暖珊瑚红 - 主要操作 */
|
||||
--pet-secondary: #81C784; /* 自然绿 - 健康相关 */
|
||||
--pet-accent: #64B5F6; /* 友好蓝 - 信息提示 */
|
||||
--pet-warning: #FFB74D; /* 温和橙 - 注意事项 */
|
||||
--pet-success: #A5D6A7; /* 清新绿 - 成功状态 */
|
||||
--pet-neutral: #F5F5F5; /* 中性灰 - 背景色 */
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-light: #999999;
|
||||
--text-white: #FFFFFF;
|
||||
|
||||
/* 间距系统 */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
|
||||
/* 圆角系统 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-round: 50%;
|
||||
|
||||
/* 阴影系统 */
|
||||
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
|
||||
--shadow-md: 0 4px 8px rgba(0,0,0,0.12);
|
||||
--shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 基础样式 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: var(--pet-neutral);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 375px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 通用组件样式 */
|
||||
.pet-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-round);
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--pet-primary);
|
||||
}
|
||||
|
||||
.pet-avatar-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--pet-primary);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--pet-secondary);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background: var(--pet-accent);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-light { color: var(--text-light); }
|
||||
.text-white { color: var(--text-white); }
|
||||
|
||||
.text-sm { font-size: 12px; }
|
||||
.text-md { font-size: 14px; }
|
||||
.text-lg { font-size: 16px; }
|
||||
.text-xl { font-size: 18px; }
|
||||
.text-2xl { font-size: 24px; }
|
||||
|
||||
.font-bold { font-weight: bold; }
|
||||
.font-medium { font-weight: 500; }
|
||||
|
||||
/* 布局工具类 */
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.text-center { text-align: center; }
|
||||
|
||||
.p-sm { padding: var(--spacing-sm); }
|
||||
.p-md { padding: var(--spacing-md); }
|
||||
.p-lg { padding: var(--spacing-lg); }
|
||||
|
||||
.m-sm { margin: var(--spacing-sm); }
|
||||
.m-md { margin: var(--spacing-md); }
|
||||
.m-lg { margin: var(--spacing-lg); }
|
||||
|
||||
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 375px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
+209
@@ -0,0 +1,209 @@
|
||||
// 宠物详情页面原型通用脚本
|
||||
|
||||
// 模拟宠物数据
|
||||
const mockPetData = {
|
||||
id: 1,
|
||||
name: "小橘",
|
||||
breed: "橘猫",
|
||||
gender: "公",
|
||||
age: "2岁3个月",
|
||||
weight: "4.2kg",
|
||||
birthday: "2022-03-15",
|
||||
adoptDate: "2022-04-20",
|
||||
avatar: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K",
|
||||
companionDays: 645,
|
||||
healthStatus: "healthy",
|
||||
personality: ["活泼", "粘人", "贪吃"],
|
||||
lastCheckup: "2024-01-15",
|
||||
nextVaccine: "2024-03-20"
|
||||
};
|
||||
|
||||
// 模拟记录数据
|
||||
const mockRecords = [
|
||||
{
|
||||
id: 1,
|
||||
type: "daily",
|
||||
title: "今天的体重记录",
|
||||
content: "小橘今天体重4.2kg，比上周增加了0.1kg",
|
||||
time: "2024-01-20 09:30",
|
||||
icon: "⚖️"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "health",
|
||||
title: "疫苗接种",
|
||||
content: "完成了狂犬疫苗第二针接种",
|
||||
time: "2024-01-18 14:20",
|
||||
icon: "💉"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "moment",
|
||||
title: "搞破坏现场",
|
||||
content: "把我的拖鞋咬坏了，但是看起来很开心的样子",
|
||||
time: "2024-01-17 16:45",
|
||||
icon: "😸"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "care",
|
||||
title: "洗澡记录",
|
||||
content: "给小橘洗了澡，全程很乖没有挣扎",
|
||||
time: "2024-01-15 10:00",
|
||||
icon: "🛁"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: "food",
|
||||
title: "换新猫粮",
|
||||
content: "尝试了新品牌的猫粮，适应性很好",
|
||||
time: "2024-01-14 18:30",
|
||||
icon: "🍽️"
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟健康数据
|
||||
const mockHealthData = {
|
||||
weight: [
|
||||
{ date: "2024-01-01", value: 4.0 },
|
||||
{ date: "2024-01-08", value: 4.1 },
|
||||
{ date: "2024-01-15", value: 4.1 },
|
||||
{ date: "2024-01-20", value: 4.2 }
|
||||
],
|
||||
healthScore: 85,
|
||||
vaccineStatus: {
|
||||
rabies: { status: "completed", nextDate: "2024-03-20" },
|
||||
feline: { status: "due", nextDate: "2024-02-15" }
|
||||
}
|
||||
};
|
||||
|
||||
// 工具函数
|
||||
const utils = {
|
||||
// 计算陪伴天数
|
||||
calculateCompanionDays(adoptDate) {
|
||||
const today = new Date();
|
||||
const adopt = new Date(adoptDate);
|
||||
const diffTime = Math.abs(today - adopt);
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(timeString) {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
},
|
||||
|
||||
// 获取健康状态颜色
|
||||
getHealthStatusColor(status) {
|
||||
const colors = {
|
||||
healthy: '#A5D6A7',
|
||||
warning: '#FFB74D',
|
||||
danger: '#FF8A80'
|
||||
};
|
||||
return colors[status] || colors.healthy;
|
||||
},
|
||||
|
||||
// 生成随机ID
|
||||
generateId() {
|
||||
return Date.now() + Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
};
|
||||
|
||||
// 通用交互函数
|
||||
const interactions = {
|
||||
// 显示提示信息
|
||||
showToast(message, type = 'info') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
z-index: 1000;
|
||||
animation: slideDown 0.3s ease;
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideUp 0.3s ease';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
// 模拟按钮点击
|
||||
handleButtonClick(action) {
|
||||
const actions = {
|
||||
edit: () => this.showToast('编辑功能'),
|
||||
addRecord: () => this.showToast('添加记录'),
|
||||
aiChat: () => this.showToast('AI聊天'),
|
||||
healthChart: () => this.showToast('健康图表'),
|
||||
timeline: () => this.showToast('成长时光'),
|
||||
share: () => this.showToast('分享功能')
|
||||
};
|
||||
|
||||
if (actions[action]) {
|
||||
actions[action]();
|
||||
} else {
|
||||
this.showToast(`${action} 功能`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 添加CSS动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideDown {
|
||||
from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
|
||||
to { transform: translateX(-50%) translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateX(-50%) translateY(0); opacity: 1; }
|
||||
to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 更新陪伴天数
|
||||
mockPetData.companionDays = utils.calculateCompanionDays(mockPetData.adoptDate);
|
||||
|
||||
// 添加淡入动画
|
||||
document.body.classList.add('fade-in');
|
||||
|
||||
console.log('宠物详情页面原型已加载');
|
||||
});
|
||||
@@ -0,0 +1,240 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,378 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,431 @@
|
||||
<!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>
|
||||
/* 仪表盘式特有样式 */
|
||||
.dashboard-header {
|
||||
background: linear-gradient(135deg, #2C3E50, #34495E);
|
||||
color: white;
|
||||
padding: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard-menu {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.pet-overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.pet-avatar-dashboard {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 3px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-change {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-change.positive {
|
||||
color: var(--pet-secondary);
|
||||
}
|
||||
|
||||
.metric-change.negative {
|
||||
color: var(--pet-warning);
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
}
|
||||
|
||||
.progress-ring svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-circle {
|
||||
fill: none;
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.progress-ring-bg {
|
||||
stroke: var(--pet-neutral);
|
||||
}
|
||||
|
||||
.progress-ring-progress {
|
||||
stroke: var(--pet-primary);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chart-period {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
background: var(--pet-neutral);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.mini-chart {
|
||||
height: 60px;
|
||||
background: linear-gradient(to right,
|
||||
var(--pet-accent) 0%,
|
||||
var(--pet-primary) 50%,
|
||||
var(--pet-secondary) 100%);
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mini-chart::before {
|
||||
content: '';
|
||||
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 50"><path d="M0,25 Q25,10 50,25 T100,25" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none"/></svg>') no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.status-indicators {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.status-item {
|
||||
background: white;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-sm);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-round);
|
||||
margin: var(--spacing-xs) auto 0;
|
||||
}
|
||||
|
||||
.status-good { background: var(--pet-secondary); }
|
||||
.status-warning { background: var(--pet-warning); }
|
||||
.status-danger { background: var(--pet-primary); }
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-btn-dashboard {
|
||||
flex: 1;
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn-dashboard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.action-btn-dashboard.secondary {
|
||||
background: var(--pet-accent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 仪表盘头部 -->
|
||||
<div class="dashboard-header">
|
||||
<div class="dashboard-nav">
|
||||
<div class="dashboard-title">宠物健康仪表盘</div>
|
||||
<button class="dashboard-menu">⋯</button>
|
||||
</div>
|
||||
|
||||
<div class="pet-overview">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="pet-avatar-dashboard">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold">小橘</h2>
|
||||
<p class="text-sm">橘猫 · 公 · 2岁3个月</p>
|
||||
<p class="text-sm">健康评分: 85/100</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心指标网格 -->
|
||||
<div class="metrics-grid">
|
||||
<!-- 体重指标 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">体重</span>
|
||||
<span class="metric-icon">⚖️</span>
|
||||
</div>
|
||||
<div class="metric-value">4.2kg</div>
|
||||
<div class="metric-change positive">
|
||||
<span>↗</span>
|
||||
<span>+0.1kg 本周</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动指标 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">活动量</span>
|
||||
<span class="metric-icon">🏃</span>
|
||||
</div>
|
||||
<div class="metric-value">78%</div>
|
||||
<div class="metric-change positive">
|
||||
<span>↗</span>
|
||||
<span>+5% 昨日</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲指标 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">食欲</span>
|
||||
<span class="metric-icon">🍽️</span>
|
||||
</div>
|
||||
<div class="metric-value">92%</div>
|
||||
<div class="metric-change negative">
|
||||
<span>↘</span>
|
||||
<span>-3% 本周</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠指标 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">睡眠</span>
|
||||
<span class="metric-icon">😴</span>
|
||||
</div>
|
||||
<div class="metric-value">14h</div>
|
||||
<div class="metric-change positive">
|
||||
<span>→</span>
|
||||
<span>正常范围</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康评分环形图 -->
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">健康评分</span>
|
||||
<span class="chart-period">本月</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-ring">
|
||||
<svg width="80" height="80">
|
||||
<circle class="progress-ring-circle progress-ring-bg"
|
||||
cx="40" cy="40" r="32" stroke-width="8"/>
|
||||
<circle class="progress-ring-circle progress-ring-progress"
|
||||
cx="40" cy="40" r="32" stroke-width="8"
|
||||
stroke-dasharray="201.06" stroke-dashoffset="30.16"/>
|
||||
</svg>
|
||||
<div class="progress-text">85</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-secondary">
|
||||
比上月提升了 3 分
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体重趋势图 -->
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">体重趋势</span>
|
||||
<span class="chart-period">近30天</span>
|
||||
</div>
|
||||
<div class="mini-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 状态指示器 -->
|
||||
<div class="status-indicators">
|
||||
<div class="status-item">
|
||||
<div class="status-icon">💉</div>
|
||||
<div class="status-label">疫苗</div>
|
||||
<div class="status-dot status-good"></div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon">🐛</div>
|
||||
<div class="status-label">驱虫</div>
|
||||
<div class="status-dot status-warning"></div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon">🦷</div>
|
||||
<div class="status-label">牙齿</div>
|
||||
<div class="status-dot status-good"></div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon">👁️</div>
|
||||
<div class="status-label">眼部</div>
|
||||
<div class="status-dot status-good"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速操作 -->
|
||||
<div class="quick-actions">
|
||||
<button class="action-btn-dashboard" onclick="interactions.handleButtonClick('addRecord')">
|
||||
记录数据
|
||||
</button>
|
||||
<button class="action-btn-dashboard secondary" onclick="interactions.handleButtonClick('healthChart')">
|
||||
详细报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 仪表盘式特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 动画化进度环
|
||||
const progressCircle = document.querySelector('.progress-ring-progress');
|
||||
const radius = 32;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const progress = 85; // 85%
|
||||
const offset = circumference - (progress / 100) * circumference;
|
||||
|
||||
progressCircle.style.strokeDasharray = circumference;
|
||||
progressCircle.style.strokeDashoffset = circumference;
|
||||
|
||||
setTimeout(() => {
|
||||
progressCircle.style.strokeDashoffset = offset;
|
||||
}, 500);
|
||||
|
||||
// 数值动画
|
||||
const metricValues = document.querySelectorAll('.metric-value');
|
||||
metricValues.forEach(value => {
|
||||
const finalValue = value.textContent;
|
||||
value.textContent = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
value.style.transition = 'all 1s ease';
|
||||
value.textContent = finalValue;
|
||||
}, 300);
|
||||
});
|
||||
|
||||
console.log('仪表盘式原型已加载');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,489 @@
|
||||
<!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>
|
||||
/* 社交媒体式特有样式 */
|
||||
.social-header {
|
||||
background: white;
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.social-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.social-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
background: white;
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 8px solid var(--pet-neutral);
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 3px solid var(--pet-primary);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
flex: 1;
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message-btn {
|
||||
background: var(--pet-neutral);
|
||||
color: var(--text-primary);
|
||||
border: none;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
background: white;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.post-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-round);
|
||||
}
|
||||
|
||||
.post-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.post-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding: 0 var(--spacing-md) var(--spacing-md);
|
||||
}
|
||||
|
||||
.post-text {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: var(--pet-neutral);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-light);
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-top: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
color: var(--text-light);
|
||||
font-size: 14px;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.action-btn.active {
|
||||
color: var(--pet-primary);
|
||||
}
|
||||
|
||||
.stories-section {
|
||||
background: white;
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 8px solid var(--pet-neutral);
|
||||
}
|
||||
|
||||
.stories-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stories-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.story-item {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.story-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 3px solid var(--pet-accent);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.story-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.floating-compose {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-round);
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-compose:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--pet-accent);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 社交媒体头部导航 -->
|
||||
<div class="social-header">
|
||||
<div class="social-nav">
|
||||
<button class="back-btn">←</button>
|
||||
<div class="social-title">小橘的主页</div>
|
||||
<button class="more-btn">⋯</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人资料区域 -->
|
||||
<div class="profile-section">
|
||||
<div class="profile-header">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="profile-avatar">
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">小橘 🐱</div>
|
||||
<div class="profile-bio">
|
||||
橘猫 · 公 · 2岁3个月<br>
|
||||
<span class="tag">活泼</span>
|
||||
<span class="tag">粘人</span>
|
||||
<span class="tag">贪吃</span><br>
|
||||
陪伴了我们 645 个美好日子 ❤️
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">127</div>
|
||||
<div class="stat-label">动态</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">5</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="action-buttons">
|
||||
<button class="follow-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||||
📝 记录动态
|
||||
</button>
|
||||
<button class="message-btn" onclick="interactions.handleButtonClick('aiChat')">
|
||||
💬 AI聊天
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 故事/亮点区域 -->
|
||||
<div class="stories-section">
|
||||
<div class="stories-title">精彩时刻</div>
|
||||
<div class="stories-list">
|
||||
<div class="story-item">
|
||||
<div class="story-avatar" style="background: var(--pet-secondary); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
|
||||
💉
|
||||
</div>
|
||||
<div class="story-label">疫苗</div>
|
||||
</div>
|
||||
<div class="story-item">
|
||||
<div class="story-avatar" style="background: var(--pet-warning); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
|
||||
🛁
|
||||
</div>
|
||||
<div class="story-label">洗澡</div>
|
||||
</div>
|
||||
<div class="story-item">
|
||||
<div class="story-avatar" style="background: var(--pet-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
|
||||
🎂
|
||||
</div>
|
||||
<div class="story-label">生日</div>
|
||||
</div>
|
||||
<div class="story-item">
|
||||
<div class="story-avatar" style="background: var(--pet-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
|
||||
🏠
|
||||
</div>
|
||||
<div class="story-label">到家</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 动态列表 -->
|
||||
<div class="posts-feed">
|
||||
<!-- 动态1 -->
|
||||
<div class="post-item">
|
||||
<div class="post-header">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="post-avatar">
|
||||
<div class="post-info">
|
||||
<div class="post-author">小橘的铲屎官</div>
|
||||
<div class="post-time">2小时前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-text">
|
||||
今天给小橘测了体重，4.2kg啦！比上周又重了0.1kg，看来最近的营养很充足 😊
|
||||
#体重记录 #健康成长
|
||||
</div>
|
||||
<div class="post-image">⚖️</div>
|
||||
<div class="post-actions">
|
||||
<button class="action-btn active">
|
||||
<span>❤️</span>
|
||||
<span>12</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>💬</span>
|
||||
<span>3</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>🔄</span>
|
||||
<span>分享</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 动态2 -->
|
||||
<div class="post-item">
|
||||
<div class="post-header">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="post-avatar">
|
||||
<div class="post-info">
|
||||
<div class="post-author">小橘的铲屎官</div>
|
||||
<div class="post-time">1天前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-text">
|
||||
疫苗接种完成！小橘今天很勇敢，全程没有叫唤。医生说恢复得很好，下次接种是3月20号。
|
||||
#疫苗接种 #健康档案
|
||||
</div>
|
||||
<div class="post-image">💉</div>
|
||||
<div class="post-actions">
|
||||
<button class="action-btn">
|
||||
<span>❤️</span>
|
||||
<span>8</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>💬</span>
|
||||
<span>1</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>🔄</span>
|
||||
<span>分享</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 动态3 -->
|
||||
<div class="post-item">
|
||||
<div class="post-header">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="post-avatar">
|
||||
<div class="post-info">
|
||||
<div class="post-author">小橘的铲屎官</div>
|
||||
<div class="post-time">2天前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-text">
|
||||
哈哈哈，小橘又搞破坏了！把我的拖鞋咬得稀烂，但是看它那得意的小表情，我竟然舍不得生气 😹
|
||||
#日常搞怪 #可爱瞬间
|
||||
</div>
|
||||
<div class="post-image">😸</div>
|
||||
<div class="post-actions">
|
||||
<button class="action-btn active">
|
||||
<span>❤️</span>
|
||||
<span>15</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>💬</span>
|
||||
<span>5</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span>🔄</span>
|
||||
<span>分享</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮发布按钮 -->
|
||||
<button class="floating-compose" onclick="interactions.handleButtonClick('addRecord')">
|
||||
✏️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 社交媒体式特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 点赞动画
|
||||
const likeButtons = document.querySelectorAll('.action-btn');
|
||||
likeButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
if (this.textContent.includes('❤️')) {
|
||||
this.classList.toggle('active');
|
||||
|
||||
// 简单的点赞动画
|
||||
this.style.transform = 'scale(1.2)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'scale(1)';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log('社交媒体式原型已加载');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,464 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,419 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,506 @@
|
||||
<!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>
|
||||
/* 游戏化式特有样式 */
|
||||
.game-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-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="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
|
||||
animation: twinkle 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.game-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(45deg, #FFD700, #FFA500);
|
||||
color: #333;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.pet-avatar-game {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 4px solid #FFD700;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
|
||||
to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
|
||||
}
|
||||
|
||||
.pet-name-game {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.pet-title {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.exp-bar-container {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 20px;
|
||||
padding: 4px;
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.exp-bar {
|
||||
background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
||||
height: 20px;
|
||||
border-radius: 16px;
|
||||
width: 75%;
|
||||
position: relative;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.exp-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.achievements-section {
|
||||
background: rgba(255,255,255,0.95);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.achievements-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.achievement-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.achievement-item.unlocked {
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.achievement-item.locked {
|
||||
background: #F0F0F0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.achievement-name {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.daily-tasks {
|
||||
background: rgba(255,255,255,0.95);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tasks-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md);
|
||||
background: #F8F9FA;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-item.completed {
|
||||
background: linear-gradient(135deg, #4CAF50, #8BC34A);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 2px solid #ddd;
|
||||
margin-right: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-item.completed .task-checkbox {
|
||||
background: white;
|
||||
color: #4CAF50;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.task-reward {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.task-points {
|
||||
background: #FFD700;
|
||||
color: #333;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.game-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.game-btn {
|
||||
background: linear-gradient(135deg, var(--pet-primary), #FF6B6B);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 15px rgba(255, 138, 128, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.game-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 138, 128, 0.4);
|
||||
}
|
||||
|
||||
.game-btn.secondary {
|
||||
background: linear-gradient(135deg, var(--pet-accent), #4FC3F7);
|
||||
box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
.floating-coins {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: #333;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container game-container">
|
||||
<div class="game-background"></div>
|
||||
|
||||
<!-- 游戏头部 -->
|
||||
<div class="game-header">
|
||||
<div class="level-badge">🏆 Lv.15 宠物大师</div>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="pet-avatar-game">
|
||||
<h1 class="pet-name-game">小橘</h1>
|
||||
<p class="pet-title">传奇橘猫战士</p>
|
||||
|
||||
<div class="exp-bar-container">
|
||||
<div class="exp-bar">
|
||||
<div class="exp-text">EXP: 1250/1500</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 属性面板 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">❤️</div>
|
||||
<div class="stat-value">85</div>
|
||||
<div class="stat-label">健康值</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">😊</div>
|
||||
<div class="stat-value">92</div>
|
||||
<div class="stat-label">快乐值</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🍽️</div>
|
||||
<div class="stat-value">78</div>
|
||||
<div class="stat-label">饱食度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🏃</div>
|
||||
<div class="stat-value">65</div>
|
||||
<div class="stat-label">活力值</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成就系统 -->
|
||||
<div class="achievements-section">
|
||||
<h2 class="achievements-title">🏆 成就收集</h2>
|
||||
<div class="achievements-grid">
|
||||
<div class="achievement-item unlocked">
|
||||
<div class="achievement-icon">🥇</div>
|
||||
<div class="achievement-name">初次见面</div>
|
||||
</div>
|
||||
<div class="achievement-item unlocked">
|
||||
<div class="achievement-icon">💉</div>
|
||||
<div class="achievement-name">疫苗勇士</div>
|
||||
</div>
|
||||
<div class="achievement-item unlocked">
|
||||
<div class="achievement-icon">🛁</div>
|
||||
<div class="achievement-name">洗澡达人</div>
|
||||
</div>
|
||||
<div class="achievement-item locked">
|
||||
<div class="achievement-icon">🎂</div>
|
||||
<div class="achievement-name">生日快乐</div>
|
||||
</div>
|
||||
<div class="achievement-item unlocked">
|
||||
<div class="achievement-icon">⚖️</div>
|
||||
<div class="achievement-name">体重管家</div>
|
||||
</div>
|
||||
<div class="achievement-item locked">
|
||||
<div class="achievement-icon">🏠</div>
|
||||
<div class="achievement-name">一周年</div>
|
||||
</div>
|
||||
<div class="achievement-item unlocked">
|
||||
<div class="achievement-icon">😸</div>
|
||||
<div class="achievement-name">搞怪专家</div>
|
||||
</div>
|
||||
<div class="achievement-item locked">
|
||||
<div class="achievement-icon">👑</div>
|
||||
<div class="achievement-name">宠物之王</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 每日任务 -->
|
||||
<div class="daily-tasks">
|
||||
<h2 class="tasks-title">📋 每日任务</h2>
|
||||
|
||||
<div class="task-item completed">
|
||||
<div class="task-checkbox">✓</div>
|
||||
<div class="task-content">
|
||||
<div class="task-name">记录体重</div>
|
||||
<div class="task-reward">奖励: 经验值 +50</div>
|
||||
</div>
|
||||
<div class="task-points">+50 EXP</div>
|
||||
</div>
|
||||
|
||||
<div class="task-item">
|
||||
<div class="task-checkbox"></div>
|
||||
<div class="task-content">
|
||||
<div class="task-name">添加一条记录</div>
|
||||
<div class="task-reward">奖励: 金币 +100</div>
|
||||
</div>
|
||||
<div class="task-points">+100 💰</div>
|
||||
</div>
|
||||
|
||||
<div class="task-item">
|
||||
<div class="task-checkbox"></div>
|
||||
<div class="task-content">
|
||||
<div class="task-name">与AI助手聊天</div>
|
||||
<div class="task-reward">奖励: 经验值 +30</div>
|
||||
</div>
|
||||
<div class="task-points">+30 EXP</div>
|
||||
</div>
|
||||
|
||||
<div class="task-item">
|
||||
<div class="task-checkbox"></div>
|
||||
<div class="task-content">
|
||||
<div class="task-name">查看健康报告</div>
|
||||
<div class="task-reward">奖励: 金币 +50</div>
|
||||
</div>
|
||||
<div class="task-points">+50 💰</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 游戏操作 -->
|
||||
<div class="game-actions">
|
||||
<button class="game-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||||
📝 记录冒险
|
||||
</button>
|
||||
<button class="game-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
|
||||
💬 召唤助手
|
||||
</button>
|
||||
<button class="game-btn" onclick="interactions.handleButtonClick('healthChart')">
|
||||
📊 查看属性
|
||||
</button>
|
||||
<button class="game-btn secondary" onclick="interactions.handleButtonClick('timeline')">
|
||||
⏰ 冒险日志
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮金币显示 -->
|
||||
<div class="floating-coins">
|
||||
💰 2,450
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 游戏化式特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 经验条动画
|
||||
setTimeout(() => {
|
||||
const expBar = document.querySelector('.exp-bar');
|
||||
expBar.style.width = '83%'; // 1250/1500
|
||||
}, 1000);
|
||||
|
||||
// 任务点击交互
|
||||
const taskItems = document.querySelectorAll('.task-item:not(.completed)');
|
||||
taskItems.forEach(task => {
|
||||
task.addEventListener('click', function() {
|
||||
this.classList.add('completed');
|
||||
const checkbox = this.querySelector('.task-checkbox');
|
||||
checkbox.textContent = '✓';
|
||||
|
||||
// 金币动画
|
||||
const coins = document.querySelector('.floating-coins');
|
||||
const currentCoins = parseInt(coins.textContent.replace(/[^\d]/g, ''));
|
||||
const newCoins = currentCoins + 50;
|
||||
coins.textContent = `💰 ${newCoins.toLocaleString()}`;
|
||||
|
||||
// 简单的奖励动画
|
||||
coins.style.transform = 'scale(1.2)';
|
||||
setTimeout(() => {
|
||||
coins.style.transform = 'scale(1)';
|
||||
}, 300);
|
||||
|
||||
interactions.showToast('任务完成！获得奖励！', 'success');
|
||||
});
|
||||
});
|
||||
|
||||
// 成就悬停效果
|
||||
const achievements = document.querySelectorAll('.achievement-item');
|
||||
achievements.forEach(achievement => {
|
||||
achievement.addEventListener('mouseenter', function() {
|
||||
if (this.classList.contains('unlocked')) {
|
||||
this.style.transform = 'scale(1.1)';
|
||||
}
|
||||
});
|
||||
|
||||
achievement.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
console.log('游戏化式原型已加载');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,551 @@
|
||||
<!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>
|
||||
/* 专业医疗式特有样式 */
|
||||
.medical-container {
|
||||
background: #F8F9FA;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.medical-header {
|
||||
background: #2C5282;
|
||||
color: white;
|
||||
padding: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.patient-id {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.emergency-btn {
|
||||
background: #E53E3E;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.patient-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.patient-details h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.patient-meta {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.medical-tabs {
|
||||
background: white;
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-bottom: 3px solid transparent;
|
||||
font-weight: 500;
|
||||
color: #4A5568;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #2C5282;
|
||||
border-bottom-color: #2C5282;
|
||||
background: #F7FAFC;
|
||||
}
|
||||
|
||||
.medical-section {
|
||||
background: white;
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: #EDF2F7;
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
color: #2D3748;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.section-action {
|
||||
background: #2C5282;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vital-signs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.vital-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: #F7FAFC;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.vital-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #2D3748;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.vital-label {
|
||||
font-size: 12px;
|
||||
color: #718096;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.vital-status {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
margin-top: var(--spacing-xs);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-normal {
|
||||
background: #C6F6D5;
|
||||
color: #22543D;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background: #FEFCBF;
|
||||
color: #744210;
|
||||
}
|
||||
|
||||
.status-critical {
|
||||
background: #FED7D7;
|
||||
color: #742A2A;
|
||||
}
|
||||
|
||||
.medical-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.medical-table th {
|
||||
background: #EDF2F7;
|
||||
padding: var(--spacing-sm);
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #2D3748;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.medical-table td {
|
||||
padding: var(--spacing-sm);
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
font-size: 14px;
|
||||
color: #4A5568;
|
||||
}
|
||||
|
||||
.medical-table tr:hover {
|
||||
background: #F7FAFC;
|
||||
}
|
||||
|
||||
.treatment-item {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.treatment-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.treatment-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.treatment-name {
|
||||
font-weight: bold;
|
||||
color: #2D3748;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.treatment-details {
|
||||
font-size: 14px;
|
||||
color: #718096;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.treatment-date {
|
||||
font-size: 12px;
|
||||
color: #A0AEC0;
|
||||
white-space: nowrap;
|
||||
margin-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.alert-box {
|
||||
background: #FED7D7;
|
||||
border: 1px solid #FEB2B2;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
font-size: 20px;
|
||||
color: #E53E3E;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: bold;
|
||||
color: #742A2A;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: 14px;
|
||||
color: #742A2A;
|
||||
}
|
||||
|
||||
.medical-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
background: #F7FAFC;
|
||||
}
|
||||
|
||||
.medical-btn {
|
||||
background: #2C5282;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.medical-btn:hover {
|
||||
background: #2A4365;
|
||||
}
|
||||
|
||||
.medical-btn.secondary {
|
||||
background: #4A5568;
|
||||
}
|
||||
|
||||
.medical-btn.emergency {
|
||||
background: #E53E3E;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container medical-container">
|
||||
<!-- 医疗头部 -->
|
||||
<div class="medical-header">
|
||||
<div class="header-top">
|
||||
<div class="patient-id">患者编号: PET-2024-001</div>
|
||||
<button class="emergency-btn">🚨 紧急联系</button>
|
||||
</div>
|
||||
|
||||
<div class="patient-info">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="patient-avatar">
|
||||
<div class="patient-details">
|
||||
<h1>小橘</h1>
|
||||
<div class="patient-meta">
|
||||
品种: 橘猫 (Felis catus)<br>
|
||||
性别: 雄性 (已绝育)<br>
|
||||
年龄: 2岁3个月 | 体重: 4.2kg<br>
|
||||
主治医师: 张医生 | 建档日期: 2022-04-20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医疗标签页 -->
|
||||
<div class="medical-tabs">
|
||||
<div class="tab-item active">概览</div>
|
||||
<div class="tab-item">生命体征</div>
|
||||
<div class="tab-item">治疗记录</div>
|
||||
<div class="tab-item">检查报告</div>
|
||||
<div class="tab-item">用药记录</div>
|
||||
</div>
|
||||
|
||||
<!-- 重要提醒 -->
|
||||
<div class="alert-box">
|
||||
<div class="alert-icon">⚠️</div>
|
||||
<div class="alert-content">
|
||||
<div class="alert-title">驱虫提醒</div>
|
||||
<div class="alert-message">距离上次驱虫已超过3个月，建议尽快安排驱虫治疗</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生命体征 -->
|
||||
<div class="medical-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<span>📊</span>
|
||||
<span>生命体征监测</span>
|
||||
</div>
|
||||
<button class="section-action">更新数据</button>
|
||||
</div>
|
||||
|
||||
<div class="vital-signs">
|
||||
<div class="vital-item">
|
||||
<div class="vital-value">4.2</div>
|
||||
<div class="vital-label">体重 (kg)</div>
|
||||
<div class="vital-status status-normal">正常</div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-value">38.5</div>
|
||||
<div class="vital-label">体温 (°C)</div>
|
||||
<div class="vital-status status-normal">正常</div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-value">85</div>
|
||||
<div class="vital-label">健康评分</div>
|
||||
<div class="vital-status status-normal">良好</div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-value">120</div>
|
||||
<div class="vital-label">心率 (bpm)</div>
|
||||
<div class="vital-status status-warning">偏高</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体重趋势图 -->
|
||||
<div class="chart-placeholder">
|
||||
📈 体重趋势图 (近30天)
|
||||
</div>
|
||||
|
||||
<!-- 疫苗记录 -->
|
||||
<div class="medical-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<span>💉</span>
|
||||
<span>疫苗接种记录</span>
|
||||
</div>
|
||||
<button class="section-action">添加记录</button>
|
||||
</div>
|
||||
|
||||
<table class="medical-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>疫苗类型</th>
|
||||
<th>接种日期</th>
|
||||
<th>有效期</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>狂犬疫苗</td>
|
||||
<td>2024-01-18</td>
|
||||
<td>2025-01-18</td>
|
||||
<td><span class="vital-status status-normal">有效</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>猫三联疫苗</td>
|
||||
<td>2023-12-15</td>
|
||||
<td>2024-12-15</td>
|
||||
<td><span class="vital-status status-normal">有效</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>猫瘟疫苗</td>
|
||||
<td>2023-11-20</td>
|
||||
<td>2024-11-20</td>
|
||||
<td><span class="vital-status status-warning">即将到期</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 治疗记录 -->
|
||||
<div class="medical-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<span>🏥</span>
|
||||
<span>最近治疗记录</span>
|
||||
</div>
|
||||
<button class="section-action">查看全部</button>
|
||||
</div>
|
||||
|
||||
<div class="treatment-item">
|
||||
<div class="treatment-info">
|
||||
<div class="treatment-name">狂犬疫苗接种</div>
|
||||
<div class="treatment-details">
|
||||
接种狂犬疫苗第二针，患者配合良好，无不良反应。
|
||||
建议观察24小时，如有异常及时联系。
|
||||
</div>
|
||||
</div>
|
||||
<div class="treatment-date">2024-01-18</div>
|
||||
</div>
|
||||
|
||||
<div class="treatment-item">
|
||||
<div class="treatment-info">
|
||||
<div class="treatment-name">常规体检</div>
|
||||
<div class="treatment-details">
|
||||
全面体检，各项指标正常。体重增长良好，
|
||||
建议继续保持现有饮食和运动习惯。
|
||||
</div>
|
||||
</div>
|
||||
<div class="treatment-date">2024-01-15</div>
|
||||
</div>
|
||||
|
||||
<div class="treatment-item">
|
||||
<div class="treatment-info">
|
||||
<div class="treatment-name">驱虫治疗</div>
|
||||
<div class="treatment-details">
|
||||
体内外驱虫，使用拜耳驱虫药。
|
||||
下次驱虫时间建议3个月后。
|
||||
</div>
|
||||
</div>
|
||||
<div class="treatment-date">2023-10-20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医疗操作 -->
|
||||
<div class="medical-actions">
|
||||
<button class="medical-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||||
📝 添加记录
|
||||
</button>
|
||||
<button class="medical-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
|
||||
📊 健康报告
|
||||
</button>
|
||||
<button class="medical-btn" onclick="interactions.handleButtonClick('aiChat')">
|
||||
🤖 AI诊断
|
||||
</button>
|
||||
<button class="medical-btn emergency" onclick="interactions.handleButtonClick('emergency')">
|
||||
🚨 紧急求助
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 专业医疗式特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 标签页切换
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
interactions.showToast(`切换到${this.textContent}页面`);
|
||||
});
|
||||
});
|
||||
|
||||
// 生命体征数值动画
|
||||
const vitalValues = document.querySelectorAll('.vital-value');
|
||||
vitalValues.forEach((value, index) => {
|
||||
const finalValue = value.textContent;
|
||||
value.textContent = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
let current = 0;
|
||||
const target = parseFloat(finalValue);
|
||||
const increment = target / 20;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
current = target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
value.textContent = current.toFixed(1);
|
||||
}, 50);
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// 表格行悬停效果
|
||||
const tableRows = document.querySelectorAll('.medical-table tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.backgroundColor = '#EDF2F7';
|
||||
});
|
||||
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.backgroundColor = '';
|
||||
});
|
||||
});
|
||||
|
||||
console.log('专业医疗式原型已加载');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,567 @@
|
||||
<!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>
|
||||
/* 故事书式特有样式 */
|
||||
.storybook-container {
|
||||
background: linear-gradient(135deg, #FFF8E1, #F3E5AB);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.storybook-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"><path d="M20,20 Q30,10 40,20 T60,20" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/><circle cx="80" cy="30" r="2" fill="rgba(139,69,19,0.1)"/><path d="M10,80 Q20,70 30,80 T50,80" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/></svg>') repeat;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.book-cover {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: linear-gradient(135deg, #8B4513, #A0522D);
|
||||
color: white;
|
||||
padding: var(--spacing-xl);
|
||||
text-align: center;
|
||||
border-radius: 0 0 var(--spacing-lg) var(--spacing-lg);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.book-subtitle {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.book-avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 4px solid rgba(255,255,255,0.8);
|
||||
margin: 0 auto var(--spacing-md);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.book-meta {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.story-page {
|
||||
background: #FFFEF7;
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid #E8E2D4;
|
||||
}
|
||||
|
||||
.story-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #E8E2D4, transparent);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(90deg, #F5F5DC, #FFFEF7);
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 2px solid #E8E2D4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-number {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-md);
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 12px;
|
||||
color: #8B7355;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #5D4E37;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.chapter-subtitle {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: #8B7355;
|
||||
}
|
||||
|
||||
.story-content {
|
||||
padding: var(--spacing-lg);
|
||||
font-family: 'Georgia', serif;
|
||||
line-height: 1.8;
|
||||
color: #3E2723;
|
||||
}
|
||||
|
||||
.story-paragraph {
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-indent: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.story-illustration {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, #FFE0B2, #FFCC80);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
margin: var(--spacing-lg) 0;
|
||||
border: 2px solid #E8E2D4;
|
||||
}
|
||||
|
||||
.story-quote {
|
||||
background: #F5F5DC;
|
||||
border-left: 4px solid #8B4513;
|
||||
padding: var(--spacing-md);
|
||||
margin: var(--spacing-lg) 0;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.story-quote::before {
|
||||
content: '"';
|
||||
font-size: 48px;
|
||||
color: #8B4513;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: var(--spacing-md);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.timeline-entry {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
background: #8B4513;
|
||||
color: white;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.timeline-story {
|
||||
flex: 1;
|
||||
background: #F9F7F4;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid #E8E2D4;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-weight: bold;
|
||||
color: #5D4E37;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.timeline-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.character-profile {
|
||||
background: #F5F5DC;
|
||||
border: 2px solid #8B4513;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
.character-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #5D4E37;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.character-traits {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.trait-tag {
|
||||
background: #8B4513;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md);
|
||||
background: #F5F5DC;
|
||||
border-top: 1px solid #E8E2D4;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #8B4513;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #A0522D;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
background: #CCCCCC;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.page-indicator {
|
||||
font-family: 'Georgia', serif;
|
||||
font-size: 14px;
|
||||
color: #8B7355;
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
width: 30px;
|
||||
height: 60px;
|
||||
background: #DC143C;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 60%, 0 80%);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.story-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
background: #F5F5DC;
|
||||
}
|
||||
|
||||
.story-btn {
|
||||
flex: 1;
|
||||
background: #8B4513;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: 'Georgia', serif;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.story-btn:hover {
|
||||
background: #A0522D;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.story-btn.secondary {
|
||||
background: #5D4E37;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container storybook-container">
|
||||
<div class="storybook-background"></div>
|
||||
|
||||
<!-- 书籍封面 -->
|
||||
<div class="book-cover">
|
||||
<div class="bookmark"></div>
|
||||
<h1 class="book-title">小橘的奇妙冒险</h1>
|
||||
<p class="book-subtitle">一只橘猫的温暖故事</p>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="book-avatar">
|
||||
<div class="book-meta">
|
||||
作者：小橘的铲屎官 | 出版日期：2022年4月20日<br>
|
||||
已陪伴 645 个美好日子
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第一章：角色介绍 -->
|
||||
<div class="story-page">
|
||||
<div class="page-header">
|
||||
<div class="page-number">第 1 页</div>
|
||||
<h2 class="chapter-title">第一章：主角登场</h2>
|
||||
<p class="chapter-subtitle">一只特别的橘猫</p>
|
||||
</div>
|
||||
|
||||
<div class="story-content">
|
||||
<div class="character-profile">
|
||||
<div class="character-header">
|
||||
<div class="character-name">小橘</div>
|
||||
<div class="character-traits">
|
||||
<span class="trait-tag">活泼</span>
|
||||
<span class="trait-tag">粘人</span>
|
||||
<span class="trait-tag">贪吃</span>
|
||||
<span class="trait-tag">聪明</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="story-paragraph">
|
||||
在一个春暖花开的日子里，一只名叫小橘的橘猫来到了这个温暖的家。
|
||||
它有着一身金黄色的毛发，就像阳光一样温暖明亮。从那一刻起，
|
||||
这个家就充满了欢声笑语。
|
||||
</p>
|
||||
|
||||
<div class="story-illustration">🏠</div>
|
||||
|
||||
<p class="story-paragraph">
|
||||
小橘不仅仅是一只普通的猫咪，它有着独特的性格和无穷的魅力。
|
||||
每天早晨，它都会用轻柔的叫声唤醒主人，仿佛在说："新的一天开始了，
|
||||
让我们一起创造美好的回忆吧！"
|
||||
</p>
|
||||
|
||||
<div class="story-quote">
|
||||
"从小橘来到我们家的那一刻起，我就知道，我们的生活将会变得更加精彩。"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二章：成长记录 -->
|
||||
<div class="story-page">
|
||||
<div class="page-header">
|
||||
<div class="page-number">第 2 页</div>
|
||||
<h2 class="chapter-title">第二章：成长足迹</h2>
|
||||
<p class="chapter-subtitle">记录每一个珍贵时刻</p>
|
||||
</div>
|
||||
|
||||
<div class="story-content">
|
||||
<p class="story-paragraph">
|
||||
时光荏苒，小橘在这个家里健康快乐地成长着。每一个重要的时刻，
|
||||
都被细心地记录下来，成为这本故事书中最珍贵的篇章。
|
||||
</p>
|
||||
|
||||
<div class="timeline-entry">
|
||||
<div class="timeline-date">2024-01-20</div>
|
||||
<div class="timeline-story">
|
||||
<div class="timeline-title">体重记录</div>
|
||||
<div class="timeline-text">
|
||||
今天小橘的体重达到了4.2kg，比上周增加了0.1kg。
|
||||
看着它健康成长，心中满怀欣慰。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-entry">
|
||||
<div class="timeline-date">2024-01-18</div>
|
||||
<div class="timeline-story">
|
||||
<div class="timeline-title">勇敢的疫苗接种</div>
|
||||
<div class="timeline-text">
|
||||
小橘今天接种了狂犬疫苗第二针。整个过程中它表现得非常勇敢，
|
||||
医生都夸奖它是个好孩子。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-entry">
|
||||
<div class="timeline-date">2024-01-17</div>
|
||||
<div class="timeline-story">
|
||||
<div class="timeline-title">搞怪小能手</div>
|
||||
<div class="timeline-text">
|
||||
小橘又发挥了它的"破坏天赋"，把我的拖鞋咬得稀烂。
|
||||
但看着它那得意的小表情，我竟然舍不得生气。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="story-illustration">📖</div>
|
||||
|
||||
<p class="story-paragraph">
|
||||
每一个平凡的日子，都因为小橘的存在而变得特别。
|
||||
它用自己的方式诠释着什么是陪伴，什么是爱。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三章：健康档案 -->
|
||||
<div class="story-page">
|
||||
<div class="page-header">
|
||||
<div class="page-number">第 3 页</div>
|
||||
<h2 class="chapter-title">第三章：健康守护</h2>
|
||||
<p class="chapter-subtitle">用心呵护每一天</p>
|
||||
</div>
|
||||
|
||||
<div class="story-content">
|
||||
<p class="story-paragraph">
|
||||
作为一个负责任的铲屎官，记录小橘的健康状况是每天的重要任务。
|
||||
从体重变化到疫苗接种，从日常护理到定期体检，
|
||||
每一个细节都关乎着小橘的健康和幸福。
|
||||
</p>
|
||||
|
||||
<div class="story-illustration">📊</div>
|
||||
|
||||
<div class="story-quote">
|
||||
"健康是最大的财富，对于小橘来说也是如此。我愿意用我的细心和爱心，
|
||||
守护它的每一天。"
|
||||
</div>
|
||||
|
||||
<p class="story-paragraph">
|
||||
目前小橘的健康评分是85分，这是一个令人满意的成绩。
|
||||
定期的体检显示它的各项指标都在正常范围内，
|
||||
这让我们对未来充满了信心。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page-navigation">
|
||||
<button class="nav-btn" disabled>← 上一页</button>
|
||||
<div class="page-indicator">第 3 页 / 共 5 页</div>
|
||||
<button class="nav-btn">下一页 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 故事操作 -->
|
||||
<div class="story-actions">
|
||||
<button class="story-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||||
📝 续写故事
|
||||
</button>
|
||||
<button class="story-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
|
||||
💬 故事助手
|
||||
</button>
|
||||
<button class="story-btn" onclick="interactions.handleButtonClick('share')">
|
||||
📚 分享故事
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 故事书式特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentPage = 1;
|
||||
const totalPages = 5;
|
||||
|
||||
// 翻页功能
|
||||
const prevBtn = document.querySelector('.nav-btn:first-child');
|
||||
const nextBtn = document.querySelector('.nav-btn:last-child');
|
||||
const pageIndicator = document.querySelector('.page-indicator');
|
||||
|
||||
function updateNavigation() {
|
||||
prevBtn.disabled = currentPage === 1;
|
||||
nextBtn.disabled = currentPage === totalPages;
|
||||
pageIndicator.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
|
||||
}
|
||||
|
||||
nextBtn.addEventListener('click', function() {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
updateNavigation();
|
||||
|
||||
// 翻页动画
|
||||
const pages = document.querySelectorAll('.story-page');
|
||||
pages.forEach(page => {
|
||||
page.style.transform = 'rotateY(-10deg)';
|
||||
page.style.opacity = '0.8';
|
||||
|
||||
setTimeout(() => {
|
||||
page.style.transform = 'rotateY(0deg)';
|
||||
page.style.opacity = '1';
|
||||
}, 300);
|
||||
});
|
||||
|
||||
interactions.showToast(`翻到第 ${currentPage} 页`);
|
||||
}
|
||||
});
|
||||
|
||||
prevBtn.addEventListener('click', function() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
updateNavigation();
|
||||
|
||||
// 翻页动画
|
||||
const pages = document.querySelectorAll('.story-page');
|
||||
pages.forEach(page => {
|
||||
page.style.transform = 'rotateY(10deg)';
|
||||
page.style.opacity = '0.8';
|
||||
|
||||
setTimeout(() => {
|
||||
page.style.transform = 'rotateY(0deg)';
|
||||
page.style.opacity = '1';
|
||||
}, 300);
|
||||
});
|
||||
|
||||
interactions.showToast(`翻到第 ${currentPage} 页`);
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载动画
|
||||
const storyPages = document.querySelectorAll('.story-page');
|
||||
storyPages.forEach((page, index) => {
|
||||
page.style.opacity = '0';
|
||||
page.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
page.style.transition = 'all 0.6s ease';
|
||||
page.style.opacity = '1';
|
||||
page.style.transform = 'translateY(0)';
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// 书签悬停效果
|
||||
const bookmark = document.querySelector('.bookmark');
|
||||
bookmark.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.1)';
|
||||
});
|
||||
|
||||
bookmark.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
console.log('故事书式原型已加载');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,552 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V1</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V1 特有样式 */
|
||||
.dashboard-v1-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pet-avatar-dashboard {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 4px solid var(--pet-primary);
|
||||
margin: 0 auto var(--spacing-md);
|
||||
box-shadow: 0 8px 24px rgba(255, 138, 128, 0.3);
|
||||
}
|
||||
|
||||
.pet-name-large {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.pet-subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.quick-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--pet-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.metric-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.trend-positive {
|
||||
color: var(--pet-secondary);
|
||||
}
|
||||
|
||||
.trend-negative {
|
||||
color: var(--pet-warning);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #E2E8F0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||||
border-radius: 4px;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.health-dashboard {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.health-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.health-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.health-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-round);
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E2E8F0 306deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.health-circle::before {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.health-score {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.health-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.activity-cards {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||
border-left: 4px solid var(--pet-accent);
|
||||
}
|
||||
|
||||
.activity-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.action-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.floating-summary {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 8px 32px rgba(255, 138, 128, 0.4);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-summary:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v1-container">
|
||||
<!-- 宠物信息头部卡片 -->
|
||||
<div class="dashboard-header">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="pet-avatar-dashboard">
|
||||
<h1 class="pet-name-large">小橘</h1>
|
||||
<p class="pet-subtitle">橘猫 · 公 · 2岁3个月 · 健康状态良好</p>
|
||||
|
||||
<div class="quick-stats">
|
||||
<div class="quick-stat">
|
||||
<div class="stat-number">645</div>
|
||||
<div class="stat-label">陪伴天数</div>
|
||||
</div>
|
||||
<div class="quick-stat">
|
||||
<div class="stat-number">4.2kg</div>
|
||||
<div class="stat-label">当前体重</div>
|
||||
</div>
|
||||
<div class="quick-stat">
|
||||
<div class="stat-number">85</div>
|
||||
<div class="stat-label">健康评分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心指标卡片 -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">体重趋势</span>
|
||||
<span class="metric-icon">⚖️</span>
|
||||
</div>
|
||||
<div class="metric-value">4.2kg</div>
|
||||
<div class="metric-trend trend-positive">
|
||||
<span>↗</span>
|
||||
<span>+0.1kg 本周</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 84%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">活动指数</span>
|
||||
<span class="metric-icon">🏃</span>
|
||||
</div>
|
||||
<div class="metric-value">78%</div>
|
||||
<div class="metric-trend trend-positive">
|
||||
<span>↗</span>
|
||||
<span>+5% 昨日</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 78%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">食欲状态</span>
|
||||
<span class="metric-icon">🍽️</span>
|
||||
</div>
|
||||
<div class="metric-value">92%</div>
|
||||
<div class="metric-trend trend-negative">
|
||||
<span>↘</span>
|
||||
<span>-3% 本周</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 92%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-title">睡眠质量</span>
|
||||
<span class="metric-icon">😴</span>
|
||||
</div>
|
||||
<div class="metric-value">14h</div>
|
||||
<div class="metric-trend trend-positive">
|
||||
<span>→</span>
|
||||
<span>正常范围</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 87%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康仪表盘 -->
|
||||
<div class="health-dashboard">
|
||||
<h2 class="dashboard-title">健康状态仪表盘</h2>
|
||||
<div class="health-grid">
|
||||
<div class="health-item">
|
||||
<div class="health-circle">
|
||||
<div class="health-score">85</div>
|
||||
</div>
|
||||
<div class="health-label">综合健康</div>
|
||||
</div>
|
||||
<div class="health-item">
|
||||
<div class="health-circle" style="background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 324deg, #E2E8F0 324deg);">
|
||||
<div class="health-score">90</div>
|
||||
</div>
|
||||
<div class="health-label">疫苗状态</div>
|
||||
</div>
|
||||
<div class="health-item">
|
||||
<div class="health-circle" style="background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E2E8F0 252deg);">
|
||||
<div class="health-score">70</div>
|
||||
</div>
|
||||
<div class="health-label">驱虫状态</div>
|
||||
</div>
|
||||
<div class="health-item">
|
||||
<div class="health-circle" style="background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E2E8F0 331deg);">
|
||||
<div class="health-score">92</div>
|
||||
</div>
|
||||
<div class="health-label">营养状态</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近活动卡片 -->
|
||||
<div class="activity-cards">
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="activity-title">
|
||||
<span>⚖️</span>
|
||||
<span>体重记录</span>
|
||||
</div>
|
||||
<div class="activity-time">2小时前</div>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
今天测量体重4.2kg，比上周增加了0.1kg，成长状态良好
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="activity-title">
|
||||
<span>💉</span>
|
||||
<span>疫苗接种</span>
|
||||
</div>
|
||||
<div class="activity-time">1天前</div>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
完成了狂犬疫苗第二针接种，医生说恢复情况很好
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速操作网格 -->
|
||||
<div class="action-grid">
|
||||
<div class="action-card" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="action-icon">📝</div>
|
||||
<div class="action-title">添加记录</div>
|
||||
<div class="action-subtitle">记录日常数据</div>
|
||||
</div>
|
||||
|
||||
<div class="action-card" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="action-icon">💬</div>
|
||||
<div class="action-title">AI助手</div>
|
||||
<div class="action-subtitle">智能健康咨询</div>
|
||||
</div>
|
||||
|
||||
<div class="action-card" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="action-icon">📊</div>
|
||||
<div class="action-title">健康报告</div>
|
||||
<div class="action-subtitle">详细数据分析</div>
|
||||
</div>
|
||||
|
||||
<div class="action-card" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="action-icon">⏰</div>
|
||||
<div class="action-title">成长时光</div>
|
||||
<div class="action-subtitle">时间轴记录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮摘要按钮 -->
|
||||
<div class="floating-summary" onclick="interactions.handleButtonClick('summary')">
|
||||
📋
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V1 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 进度条动画
|
||||
const progressBars = document.querySelectorAll('.progress-fill');
|
||||
progressBars.forEach((bar, index) => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0%';
|
||||
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// 健康圆环动画
|
||||
const healthCircles = document.querySelectorAll('.health-circle');
|
||||
healthCircles.forEach((circle, index) => {
|
||||
setTimeout(() => {
|
||||
circle.style.animation = 'rotateIn 0.8s ease forwards';
|
||||
}, index * 150);
|
||||
});
|
||||
|
||||
// 卡片入场动画
|
||||
const cards = document.querySelectorAll('.metric-card, .activity-card, .action-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
console.log('卡片仪表盘式 V1 原型已加载');
|
||||
});
|
||||
|
||||
// 添加旋转动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
transform: rotate(-180deg) scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,626 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V2</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V2 特有样式 - 侧重数据可视化 */
|
||||
.dashboard-v2-container {
|
||||
background: #F8FAFC;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: linear-gradient(135deg, var(--pet-primary), var(--pet-accent));
|
||||
color: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 20px 40px rgba(255, 138, 128, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-card::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;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 4px solid rgba(255,255,255,0.8);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.hero-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.hero-details {
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #E2E8F0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.icon-weight {
|
||||
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-activity {
|
||||
background: linear-gradient(135deg, #4ECDC4, #44A08D);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-food {
|
||||
background: linear-gradient(135deg, #45B7D1, #96CEB4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-sleep {
|
||||
background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.metric-display {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value-large {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.metric-unit {
|
||||
font-size: 14px;
|
||||
color: var(--text-light);
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-change {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: 14px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.change-positive {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.change-negative {
|
||||
color: #EF4444;
|
||||
}
|
||||
|
||||
.change-neutral {
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.mini-chart {
|
||||
height: 40px;
|
||||
background: linear-gradient(90deg, #E5E7EB, #F3F4F6);
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
clip-path: polygon(0 80%, 25% 60%, 50% 40%, 75% 30%, 100% 20%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.full-width-card {
|
||||
grid-column: 1 / -1;
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.health-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.health-metric {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.health-circle-v2 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-round);
|
||||
margin: 0 auto var(--spacing-sm);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circle-85 {
|
||||
background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 306deg, #E5E7EB 306deg);
|
||||
}
|
||||
|
||||
.circle-90 {
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 324deg, #E5E7EB 324deg);
|
||||
}
|
||||
|
||||
.circle-70 {
|
||||
background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E5E7EB 252deg);
|
||||
}
|
||||
|
||||
.circle-92 {
|
||||
background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E5E7EB 331deg);
|
||||
}
|
||||
|
||||
.health-circle-v2::before {
|
||||
content: '';
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.health-value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.health-name {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recent-activities {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.activity-item-v2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
background: #F8FAFC;
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid var(--pet-accent);
|
||||
}
|
||||
|
||||
.activity-icon-v2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--pet-accent);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.activity-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.activity-name {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.activity-timestamp {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-buttons-v2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-btn-v2 {
|
||||
background: white;
|
||||
border: 2px solid var(--pet-primary);
|
||||
color: var(--pet-primary);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn-v2:hover {
|
||||
background: var(--pet-primary);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v2-container">
|
||||
<!-- 英雄卡片 -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-content">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="hero-avatar">
|
||||
<div class="hero-info">
|
||||
<h1 class="hero-name">小橘</h1>
|
||||
<p class="hero-details">橘猫 · 公 · 2岁3个月</p>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">645</div>
|
||||
<div class="hero-stat-label">陪伴天数</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">85</div>
|
||||
<div class="hero-stat-label">健康评分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 仪表盘网格 -->
|
||||
<div class="dashboard-grid">
|
||||
<!-- 体重卡片 -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">体重</span>
|
||||
<div class="card-icon icon-weight">⚖️</div>
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div class="metric-value-large">
|
||||
4.2<span class="metric-unit">kg</span>
|
||||
</div>
|
||||
<div class="metric-change change-positive">
|
||||
<span>↗</span>
|
||||
<span>+0.1kg 本周</span>
|
||||
</div>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动卡片 -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">活动量</span>
|
||||
<div class="card-icon icon-activity">🏃</div>
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div class="metric-value-large">
|
||||
78<span class="metric-unit">%</span>
|
||||
</div>
|
||||
<div class="metric-change change-positive">
|
||||
<span>↗</span>
|
||||
<span>+5% 昨日</span>
|
||||
</div>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-line" style="clip-path: polygon(0 60%, 25% 40%, 50% 50%, 75% 30%, 100% 25%, 100% 100%, 0 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲卡片 -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">食欲</span>
|
||||
<div class="card-icon icon-food">🍽️</div>
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div class="metric-value-large">
|
||||
92<span class="metric-unit">%</span>
|
||||
</div>
|
||||
<div class="metric-change change-negative">
|
||||
<span>↘</span>
|
||||
<span>-3% 本周</span>
|
||||
</div>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-line" style="clip-path: polygon(0 40%, 25% 30%, 50% 35%, 75% 45%, 100% 50%, 100% 100%, 0 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠卡片 -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">睡眠</span>
|
||||
<div class="card-icon icon-sleep">😴</div>
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div class="metric-value-large">
|
||||
14<span class="metric-unit">h</span>
|
||||
</div>
|
||||
<div class="metric-change change-neutral">
|
||||
<span>→</span>
|
||||
<span>正常范围</span>
|
||||
</div>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-line" style="clip-path: polygon(0 50%, 25% 45%, 50% 50%, 75% 48%, 100% 52%, 100% 100%, 0 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康概览卡片 -->
|
||||
<div class="dashboard-grid">
|
||||
<div class="full-width-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">健康状态概览</span>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, var(--pet-secondary), var(--pet-accent)); color: white;">📊</div>
|
||||
</div>
|
||||
|
||||
<div class="health-overview">
|
||||
<div class="health-metric">
|
||||
<div class="health-circle-v2 circle-85">
|
||||
<div class="health-value">85</div>
|
||||
</div>
|
||||
<div class="health-name">综合健康</div>
|
||||
</div>
|
||||
<div class="health-metric">
|
||||
<div class="health-circle-v2 circle-90">
|
||||
<div class="health-value">90</div>
|
||||
</div>
|
||||
<div class="health-name">疫苗状态</div>
|
||||
</div>
|
||||
<div class="health-metric">
|
||||
<div class="health-circle-v2 circle-70">
|
||||
<div class="health-value">70</div>
|
||||
</div>
|
||||
<div class="health-name">驱虫状态</div>
|
||||
</div>
|
||||
<div class="health-metric">
|
||||
<div class="health-circle-v2 circle-92">
|
||||
<div class="health-value">92</div>
|
||||
</div>
|
||||
<div class="health-name">营养状态</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recent-activities">
|
||||
<h3 style="margin-bottom: var(--spacing-md); color: var(--text-primary); font-weight: bold;">最近活动</h3>
|
||||
<div class="activity-list">
|
||||
<div class="activity-item-v2">
|
||||
<div class="activity-icon-v2">⚖️</div>
|
||||
<div class="activity-details">
|
||||
<div class="activity-name">体重记录</div>
|
||||
<div class="activity-desc">今天体重4.2kg，比上周增加了0.1kg</div>
|
||||
</div>
|
||||
<div class="activity-timestamp">2小时前</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item-v2">
|
||||
<div class="activity-icon-v2" style="background: var(--pet-secondary);">💉</div>
|
||||
<div class="activity-details">
|
||||
<div class="activity-name">疫苗接种</div>
|
||||
<div class="activity-desc">完成了狂犬疫苗第二针接种</div>
|
||||
</div>
|
||||
<div class="activity-timestamp">1天前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons-v2">
|
||||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="btn-icon">📝</div>
|
||||
<div>添加记录</div>
|
||||
</div>
|
||||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="btn-icon">💬</div>
|
||||
<div>AI助手</div>
|
||||
</div>
|
||||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="btn-icon">📊</div>
|
||||
<div>健康报告</div>
|
||||
</div>
|
||||
<div class="action-btn-v2" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="btn-icon">⏰</div>
|
||||
<div>成长时光</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V2 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 卡片入场动画
|
||||
const cards = document.querySelectorAll('.dashboard-card, .full-width-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(30px)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 150);
|
||||
});
|
||||
|
||||
// 数值动画
|
||||
const metricValues = document.querySelectorAll('.metric-value-large');
|
||||
metricValues.forEach(value => {
|
||||
const text = value.textContent;
|
||||
const number = parseFloat(text);
|
||||
const unit = text.replace(number.toString(), '');
|
||||
|
||||
let current = 0;
|
||||
const increment = number / 30;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= number) {
|
||||
current = number;
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
if (unit.includes('%') || unit.includes('h')) {
|
||||
value.innerHTML = Math.round(current) + `<span class="metric-unit">${unit}</span>`;
|
||||
} else {
|
||||
value.innerHTML = current.toFixed(1) + `<span class="metric-unit">${unit}</span>`;
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// 健康圆环动画
|
||||
const healthCircles = document.querySelectorAll('.health-circle-v2');
|
||||
healthCircles.forEach((circle, index) => {
|
||||
setTimeout(() => {
|
||||
circle.style.animation = 'scaleIn 0.8s ease forwards';
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
console.log('卡片仪表盘式 V2 原型已加载');
|
||||
});
|
||||
|
||||
// 添加缩放动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
50% { transform: translateX(-10px) translateY(-10px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,613 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V3</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V3 特有样式 - 侧重层次感和深度 */
|
||||
.dashboard-v3-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent), var(--pet-secondary));
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-round);
|
||||
border: 4px solid var(--pet-primary);
|
||||
box-shadow: 0 15px 35px rgba(255, 138, 128, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-avatar::after {
|
||||
content: '🏆';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
background: var(--pet-warning);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.profile-subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.profile-badges {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
.metrics-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.metric-card-v3 {
|
||||
background: rgba(255,255,255,0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.metric-card-v3:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 45px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.metric-card-v3::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.metric-card-v3.weight::before {
|
||||
background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
|
||||
}
|
||||
|
||||
.metric-card-v3.activity::before {
|
||||
background: linear-gradient(90deg, #4ECDC4, #44A08D);
|
||||
}
|
||||
|
||||
.metric-card-v3.food::before {
|
||||
background: linear-gradient(90deg, #45B7D1, #96CEB4);
|
||||
}
|
||||
|
||||
.metric-card-v3.sleep::before {
|
||||
background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
|
||||
}
|
||||
|
||||
.metric-header-v3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.metric-title-v3 {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.metric-icon-v3 {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.icon-weight-v3 {
|
||||
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
||||
}
|
||||
|
||||
.icon-activity-v3 {
|
||||
background: linear-gradient(135deg, #4ECDC4, #44A08D);
|
||||
}
|
||||
|
||||
.icon-food-v3 {
|
||||
background: linear-gradient(135deg, #45B7D1, #96CEB4);
|
||||
}
|
||||
|
||||
.icon-sleep-v3 {
|
||||
background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
|
||||
}
|
||||
|
||||
.metric-value-v3 {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-progress {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #E5E7EB;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.progress-bar-v3 {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
transition: width 1.5s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-weight {
|
||||
background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
|
||||
}
|
||||
|
||||
.progress-activity {
|
||||
background: linear-gradient(90deg, #4ECDC4, #44A08D);
|
||||
}
|
||||
|
||||
.progress-food {
|
||||
background: linear-gradient(90deg, #45B7D1, #96CEB4);
|
||||
}
|
||||
|
||||
.progress-sleep {
|
||||
background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
|
||||
}
|
||||
|
||||
.metric-status {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dashboard-summary {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.summary-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.overall-score {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overall-score::before {
|
||||
content: '';
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.score-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.health-indicators {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.indicator-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.indicator-value {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.indicator-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-panel {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.action-grid-v3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-item-v3 {
|
||||
background: rgba(255,255,255,0.8);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-item-v3::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.action-item-v3:hover {
|
||||
border-color: var(--pet-primary);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 35px rgba(255, 138, 128, 0.3);
|
||||
}
|
||||
|
||||
.action-item-v3:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.action-icon-v3 {
|
||||
font-size: 28px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-title-v3 {
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.action-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v3-container">
|
||||
<!-- 个人资料卡片 -->
|
||||
<div class="profile-card">
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<h1 class="profile-name">小橘</h1>
|
||||
<p class="profile-subtitle">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
|
||||
<div class="profile-badges">
|
||||
<span class="badge">健康宝宝</span>
|
||||
<span class="badge">活泼可爱</span>
|
||||
<span class="badge">疫苗完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 指标卡片网格 -->
|
||||
<div class="metrics-container">
|
||||
<div class="metric-card-v3 weight">
|
||||
<div class="metric-header-v3">
|
||||
<span class="metric-title-v3">体重监测</span>
|
||||
<div class="metric-icon-v3 icon-weight-v3">⚖️</div>
|
||||
</div>
|
||||
<div class="metric-value-v3">4.2kg</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar-v3 progress-weight" style="width: 84%;"></div>
|
||||
</div>
|
||||
<div class="metric-status">健康范围内 (+0.1kg)</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card-v3 activity">
|
||||
<div class="metric-header-v3">
|
||||
<span class="metric-title-v3">活动指数</span>
|
||||
<div class="metric-icon-v3 icon-activity-v3">🏃</div>
|
||||
</div>
|
||||
<div class="metric-value-v3">78%</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar-v3 progress-activity" style="width: 78%;"></div>
|
||||
</div>
|
||||
<div class="metric-status">活跃状态 (+5%)</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card-v3 food">
|
||||
<div class="metric-header-v3">
|
||||
<span class="metric-title-v3">食欲状态</span>
|
||||
<div class="metric-icon-v3 icon-food-v3">🍽️</div>
|
||||
</div>
|
||||
<div class="metric-value-v3">92%</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar-v3 progress-food" style="width: 92%;"></div>
|
||||
</div>
|
||||
<div class="metric-status">食欲旺盛 (-3%)</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card-v3 sleep">
|
||||
<div class="metric-header-v3">
|
||||
<span class="metric-title-v3">睡眠质量</span>
|
||||
<div class="metric-icon-v3 icon-sleep-v3">😴</div>
|
||||
</div>
|
||||
<div class="metric-value-v3">14h</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar-v3 progress-sleep" style="width: 87%;"></div>
|
||||
</div>
|
||||
<div class="metric-status">睡眠充足</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康总结仪表盘 -->
|
||||
<div class="dashboard-summary">
|
||||
<div class="summary-header">
|
||||
<h2 class="summary-title">健康状态总览</h2>
|
||||
<div class="overall-score">
|
||||
<div class="score-value">85</div>
|
||||
</div>
|
||||
<div class="score-label">综合健康评分</div>
|
||||
</div>
|
||||
|
||||
<div class="health-indicators">
|
||||
<div class="indicator">
|
||||
<div class="indicator-icon">💉</div>
|
||||
<div class="indicator-value">完成</div>
|
||||
<div class="indicator-label">疫苗状态</div>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<div class="indicator-icon">🐛</div>
|
||||
<div class="indicator-value">需要</div>
|
||||
<div class="indicator-label">驱虫提醒</div>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<div class="indicator-icon">🦷</div>
|
||||
<div class="indicator-value">良好</div>
|
||||
<div class="indicator-label">牙齿健康</div>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<div class="indicator-icon">👁️</div>
|
||||
<div class="indicator-value">正常</div>
|
||||
<div class="indicator-label">眼部检查</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作面板 -->
|
||||
<div class="action-panel">
|
||||
<div class="action-grid-v3">
|
||||
<div class="action-item-v3" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="action-icon-v3">📝</div>
|
||||
<div class="action-title-v3">记录数据</div>
|
||||
<div class="action-desc">添加健康记录</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item-v3" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="action-icon-v3">💬</div>
|
||||
<div class="action-title-v3">AI咨询</div>
|
||||
<div class="action-desc">智能健康建议</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item-v3" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="action-icon-v3">📊</div>
|
||||
<div class="action-title-v3">详细报告</div>
|
||||
<div class="action-desc">查看趋势分析</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item-v3" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="action-icon-v3">⏰</div>
|
||||
<div class="action-title-v3">成长记录</div>
|
||||
<div class="action-desc">时间轴展示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V3 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 卡片层叠入场动画
|
||||
const cards = document.querySelectorAll('.profile-card, .metric-card-v3, .dashboard-summary, .action-panel');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(50px) scale(0.9)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0) scale(1)';
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// 进度条动画
|
||||
setTimeout(() => {
|
||||
const progressBars = document.querySelectorAll('.progress-bar-v3');
|
||||
progressBars.forEach((bar, index) => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0%';
|
||||
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, index * 300);
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
// 整体评分圆环动画
|
||||
setTimeout(() => {
|
||||
const overallScore = document.querySelector('.overall-score');
|
||||
overallScore.style.animation = 'rotateScale 1.2s ease forwards';
|
||||
}, 1500);
|
||||
|
||||
// 指标数值动画
|
||||
const metricValues = document.querySelectorAll('.metric-value-v3');
|
||||
metricValues.forEach((value, index) => {
|
||||
const text = value.textContent;
|
||||
const number = parseFloat(text);
|
||||
const unit = text.replace(number.toString(), '');
|
||||
|
||||
setTimeout(() => {
|
||||
let current = 0;
|
||||
const increment = number / 25;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= number) {
|
||||
current = number;
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
if (unit.includes('%') || unit.includes('h')) {
|
||||
value.textContent = Math.round(current) + unit;
|
||||
} else {
|
||||
value.textContent = current.toFixed(1) + unit;
|
||||
}
|
||||
}, 40);
|
||||
}, index * 400);
|
||||
});
|
||||
|
||||
console.log('卡片仪表盘式 V3 原型已加载');
|
||||
});
|
||||
|
||||
// 添加动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rotateScale {
|
||||
0% {
|
||||
transform: rotate(-180deg) scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-90deg) scale(0.8);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,712 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V4</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V4 特有样式 - 侧重简洁现代风格 */
|
||||
.dashboard-v4-container {
|
||||
background: #FAFBFC;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
background: white;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F3F4;
|
||||
}
|
||||
|
||||
.pet-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.pet-avatar-v4 {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: var(--radius-xl);
|
||||
border: 3px solid var(--pet-primary);
|
||||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.25);
|
||||
}
|
||||
|
||||
.pet-info-v4 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pet-name-v4 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.pet-meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
background: #E8F5E8;
|
||||
color: #2E7D32;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quick-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
padding-top: var(--spacing-lg);
|
||||
border-top: 1px solid #F1F3F4;
|
||||
}
|
||||
|
||||
.quick-metric {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.metrics-grid-v4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.metric-card-v4 {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F3F4;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.metric-card-v4:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.metric-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-value-v4 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.metric-unit-v4 {
|
||||
font-size: 16px;
|
||||
color: var(--text-light);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.metric-icon-v4 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-weight-v4 {
|
||||
background: linear-gradient(135deg, #FF6B6B, #FF8A80);
|
||||
}
|
||||
|
||||
.icon-activity-v4 {
|
||||
background: linear-gradient(135deg, #4CAF50, #81C784);
|
||||
}
|
||||
|
||||
.icon-food-v4 {
|
||||
background: linear-gradient(135deg, #2196F3, #64B5F6);
|
||||
}
|
||||
|
||||
.icon-sleep-v4 {
|
||||
background: linear-gradient(135deg, #9C27B0, #BA68C8);
|
||||
}
|
||||
|
||||
.metric-trend-v4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.trend-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.trend-up {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.trend-down {
|
||||
background: #FF5722;
|
||||
}
|
||||
|
||||
.trend-stable {
|
||||
background: #9E9E9E;
|
||||
}
|
||||
|
||||
.trend-text {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.progress-name {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #F1F3F4;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill-v4 {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 1.2s ease;
|
||||
}
|
||||
|
||||
.progress-weight-v4 {
|
||||
background: linear-gradient(90deg, #FF6B6B, #FF8A80);
|
||||
}
|
||||
|
||||
.progress-activity-v4 {
|
||||
background: linear-gradient(90deg, #4CAF50, #81C784);
|
||||
}
|
||||
|
||||
.progress-food-v4 {
|
||||
background: linear-gradient(90deg, #2196F3, #64B5F6);
|
||||
}
|
||||
|
||||
.progress-sleep-v4 {
|
||||
background: linear-gradient(90deg, #9C27B0, #BA68C8);
|
||||
}
|
||||
|
||||
.health-summary {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F3F4;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.summary-score {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.score-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #F1F3F4 306deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.score-circle::before {
|
||||
content: '';
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.score-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.health-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.health-item-v4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.health-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: #F8F9FA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.health-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.health-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.health-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.actions-v4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-button-v4 {
|
||||
background: white;
|
||||
border: 2px solid #F1F3F4;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-button-v4:hover {
|
||||
border-color: var(--pet-primary);
|
||||
background: #FFF8F7;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.action-icon-v4 {
|
||||
font-size: 28px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-title-v4 {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.action-subtitle-v4 {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v4-container">
|
||||
<!-- 头部信息区域 -->
|
||||
<div class="header-section">
|
||||
<div class="pet-profile">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" class="pet-avatar-v4">
|
||||
<div class="pet-info-v4">
|
||||
<h1 class="pet-name-v4">小橘</h1>
|
||||
<p class="pet-meta">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
|
||||
<div class="status-badge">
|
||||
<span>●</span>
|
||||
<span>健康状态良好</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-metrics">
|
||||
<div class="quick-metric">
|
||||
<div class="metric-number">4.2kg</div>
|
||||
<div class="metric-label">当前体重</div>
|
||||
</div>
|
||||
<div class="quick-metric">
|
||||
<div class="metric-number">85分</div>
|
||||
<div class="metric-label">健康评分</div>
|
||||
</div>
|
||||
<div class="quick-metric">
|
||||
<div class="metric-number">127条</div>
|
||||
<div class="metric-label">记录总数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 仪表盘区域 -->
|
||||
<div class="dashboard-section">
|
||||
<h2 class="section-title">健康指标</h2>
|
||||
|
||||
<div class="metrics-grid-v4">
|
||||
<!-- 体重指标 -->
|
||||
<div class="metric-card-v4">
|
||||
<div class="metric-top">
|
||||
<div class="metric-info">
|
||||
<div class="metric-name">体重</div>
|
||||
<div class="metric-value-v4">
|
||||
4.2<span class="metric-unit-v4">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-icon-v4 icon-weight-v4">⚖️</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-trend-v4">
|
||||
<div class="trend-indicator trend-up">↗</div>
|
||||
<span class="trend-text">比上周增加 0.1kg</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-name">健康范围</span>
|
||||
<span class="progress-percent">84%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill-v4 progress-weight-v4" style="width: 84%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动指标 -->
|
||||
<div class="metric-card-v4">
|
||||
<div class="metric-top">
|
||||
<div class="metric-info">
|
||||
<div class="metric-name">活动量</div>
|
||||
<div class="metric-value-v4">
|
||||
78<span class="metric-unit-v4">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-icon-v4 icon-activity-v4">🏃</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-trend-v4">
|
||||
<div class="trend-indicator trend-up">↗</div>
|
||||
<span class="trend-text">比昨日增加 5%</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-name">活跃度</span>
|
||||
<span class="progress-percent">78%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill-v4 progress-activity-v4" style="width: 78%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲指标 -->
|
||||
<div class="metric-card-v4">
|
||||
<div class="metric-top">
|
||||
<div class="metric-info">
|
||||
<div class="metric-name">食欲</div>
|
||||
<div class="metric-value-v4">
|
||||
92<span class="metric-unit-v4">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-icon-v4 icon-food-v4">🍽️</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-trend-v4">
|
||||
<div class="trend-indicator trend-down">↘</div>
|
||||
<span class="trend-text">比上周减少 3%</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-name">食欲状态</span>
|
||||
<span class="progress-percent">92%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill-v4 progress-food-v4" style="width: 92%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠指标 -->
|
||||
<div class="metric-card-v4">
|
||||
<div class="metric-top">
|
||||
<div class="metric-info">
|
||||
<div class="metric-name">睡眠</div>
|
||||
<div class="metric-value-v4">
|
||||
14<span class="metric-unit-v4">h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-icon-v4 icon-sleep-v4">😴</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-trend-v4">
|
||||
<div class="trend-indicator trend-stable">→</div>
|
||||
<span class="trend-text">保持正常范围</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-name">睡眠质量</span>
|
||||
<span class="progress-percent">87%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill-v4 progress-sleep-v4" style="width: 87%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康总结 -->
|
||||
<div class="health-summary">
|
||||
<div class="summary-score">
|
||||
<div class="score-circle">
|
||||
<div class="score-number">85</div>
|
||||
</div>
|
||||
<div class="score-description">综合健康评分 - 良好状态</div>
|
||||
</div>
|
||||
|
||||
<div class="health-items">
|
||||
<div class="health-item-v4">
|
||||
<div class="health-icon">💉</div>
|
||||
<div class="health-details">
|
||||
<div class="health-name">疫苗接种</div>
|
||||
<div class="health-status">已完成，状态良好</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="health-item-v4">
|
||||
<div class="health-icon">🐛</div>
|
||||
<div class="health-details">
|
||||
<div class="health-name">驱虫治疗</div>
|
||||
<div class="health-status">需要更新，3个月前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="health-item-v4">
|
||||
<div class="health-icon">🦷</div>
|
||||
<div class="health-details">
|
||||
<div class="health-name">牙齿健康</div>
|
||||
<div class="health-status">状态良好</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="health-item-v4">
|
||||
<div class="health-icon">👁️</div>
|
||||
<div class="health-details">
|
||||
<div class="health-name">眼部检查</div>
|
||||
<div class="health-status">正常，无异常</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="actions-v4">
|
||||
<div class="action-button-v4" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="action-icon-v4">📝</div>
|
||||
<div class="action-title-v4">添加记录</div>
|
||||
<div class="action-subtitle-v4">记录健康数据</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button-v4" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="action-icon-v4">💬</div>
|
||||
<div class="action-title-v4">AI助手</div>
|
||||
<div class="action-subtitle-v4">智能健康咨询</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button-v4" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="action-icon-v4">📊</div>
|
||||
<div class="action-title-v4">详细报告</div>
|
||||
<div class="action-subtitle-v4">查看趋势分析</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button-v4" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="action-icon-v4">⏰</div>
|
||||
<div class="action-title-v4">成长时光</div>
|
||||
<div class="action-subtitle-v4">时间轴记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V4 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 渐进式加载动画
|
||||
const elements = document.querySelectorAll('.header-section, .metric-card-v4, .health-summary, .action-button-v4');
|
||||
elements.forEach((element, index) => {
|
||||
element.style.opacity = '0';
|
||||
element.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
element.style.transition = 'all 0.5s ease';
|
||||
element.style.opacity = '1';
|
||||
element.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
// 进度条动画
|
||||
setTimeout(() => {
|
||||
const progressBars = document.querySelectorAll('.progress-fill-v4');
|
||||
progressBars.forEach((bar, index) => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0%';
|
||||
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, index * 200);
|
||||
});
|
||||
}, 800);
|
||||
|
||||
// 评分圆环动画
|
||||
setTimeout(() => {
|
||||
const scoreCircle = document.querySelector('.score-circle');
|
||||
scoreCircle.style.animation = 'scoreReveal 1.5s ease forwards';
|
||||
}, 1200);
|
||||
|
||||
// 数值计数动画
|
||||
const metricValues = document.querySelectorAll('.metric-value-v4');
|
||||
metricValues.forEach((value, index) => {
|
||||
const text = value.innerHTML;
|
||||
const numberMatch = text.match(/[\d.]+/);
|
||||
if (numberMatch) {
|
||||
const number = parseFloat(numberMatch[0]);
|
||||
const restText = text.replace(numberMatch[0], '');
|
||||
|
||||
setTimeout(() => {
|
||||
let current = 0;
|
||||
const increment = number / 20;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= number) {
|
||||
current = number;
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
if (restText.includes('%') || restText.includes('h')) {
|
||||
value.innerHTML = Math.round(current) + restText;
|
||||
} else {
|
||||
value.innerHTML = current.toFixed(1) + restText;
|
||||
}
|
||||
}, 50);
|
||||
}, index * 300);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('卡片仪表盘式 V4 原型已加载');
|
||||
});
|
||||
|
||||
// 添加动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes scoreReveal {
|
||||
0% {
|
||||
transform: scale(0.8) rotate(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(-45deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,724 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V5</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V5 - 基本信息卡片化，统计数据仪表盘化 */
|
||||
.dashboard-v5-container {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 基本信息卡片区域 */
|
||||
.pet-info-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.pet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
border-bottom: 2px solid #F8F9FA;
|
||||
}
|
||||
|
||||
.pet-avatar-v5 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-xl);
|
||||
border: 4px solid var(--pet-primary);
|
||||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pet-avatar-v5::after {
|
||||
content: '❤️';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
background: white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.pet-basic-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pet-name-v5 {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.pet-breed-info {
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.pet-tags {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pet-tag {
|
||||
background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-item-v5 {
|
||||
background: #F8F9FA;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid var(--pet-primary);
|
||||
}
|
||||
|
||||
.info-label-v5 {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.info-value-v5 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 统计数据仪表盘区域 */
|
||||
.dashboard-section-v5 {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-title-v5 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dashboard-grid-v5 {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.metrics-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.metric-gauge {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gauge-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gauge-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(#E5E7EB 0deg, #E5E7EB 360deg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
transition: all 1.5s ease;
|
||||
}
|
||||
|
||||
.gauge-weight {
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 302deg, transparent 302deg);
|
||||
}
|
||||
|
||||
.gauge-activity {
|
||||
background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 281deg, transparent 281deg);
|
||||
}
|
||||
|
||||
.gauge-food {
|
||||
background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, transparent 331deg);
|
||||
}
|
||||
|
||||
.gauge-sleep {
|
||||
background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 313deg, transparent 313deg);
|
||||
}
|
||||
|
||||
.gauge-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.gauge-unit {
|
||||
font-size: 10px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.gauge-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.health-dashboard {
|
||||
background: #F8F9FA;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.health-score-display {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.health-score-circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.health-score-circle::before {
|
||||
content: '';
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.health-score-number {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.health-score-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.health-indicators-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.health-indicator-v5 {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: white;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.indicator-icon-v5 {
|
||||
font-size: 20px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.indicator-status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.status-good {
|
||||
color: var(--pet-secondary);
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: var(--pet-warning);
|
||||
}
|
||||
|
||||
.indicator-name {
|
||||
font-size: 10px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* 最近记录卡片 */
|
||||
.recent-records-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.records-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.records-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.view-all-btn {
|
||||
color: var(--pet-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.record-item-v5 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
background: #F8F9FA;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
border-left: 4px solid var(--pet-accent);
|
||||
}
|
||||
|
||||
.record-icon-v5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--pet-accent);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.record-content-v5 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-title-v5 {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.record-desc-v5 {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.record-time-v5 {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 操作按钮卡片 */
|
||||
.actions-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.actions-grid-v5 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-btn-v5 {
|
||||
background: #F8F9FA;
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn-v5:hover {
|
||||
border-color: var(--pet-primary);
|
||||
background: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.2);
|
||||
}
|
||||
|
||||
.action-icon-v5 {
|
||||
font-size: 28px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.action-text-v5 {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v5-container">
|
||||
<!-- 基本信息卡片 -->
|
||||
<div class="pet-info-card">
|
||||
<div class="pet-header">
|
||||
<div class="pet-avatar-v5">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 16px;">
|
||||
</div>
|
||||
<div class="pet-basic-info">
|
||||
<h1 class="pet-name-v5">小橘</h1>
|
||||
<p class="pet-breed-info">橘猫 · 公 · 2岁3个月</p>
|
||||
<div class="pet-tags">
|
||||
<span class="pet-tag">活泼</span>
|
||||
<span class="pet-tag">粘人</span>
|
||||
<span class="pet-tag">健康</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item-v5">
|
||||
<div class="info-label-v5">生日</div>
|
||||
<div class="info-value-v5">2022年3月15日</div>
|
||||
</div>
|
||||
<div class="info-item-v5">
|
||||
<div class="info-label-v5">到家日期</div>
|
||||
<div class="info-value-v5">2022年4月20日</div>
|
||||
</div>
|
||||
<div class="info-item-v5">
|
||||
<div class="info-label-v5">陪伴天数</div>
|
||||
<div class="info-value-v5">645天</div>
|
||||
</div>
|
||||
<div class="info-item-v5">
|
||||
<div class="info-label-v5">当前体重</div>
|
||||
<div class="info-value-v5">4.2kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计数据仪表盘 -->
|
||||
<div class="dashboard-section-v5">
|
||||
<div class="section-header">
|
||||
<span class="section-icon">📊</span>
|
||||
<h2 class="section-title-v5">健康数据仪表盘</h2>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid-v5">
|
||||
<div class="metrics-overview">
|
||||
<!-- 体重仪表 -->
|
||||
<div class="metric-gauge">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bg">
|
||||
<div class="gauge-fill gauge-weight"></div>
|
||||
<div class="gauge-center">
|
||||
<div class="gauge-value">4.2</div>
|
||||
<div class="gauge-unit">kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gauge-label">体重监测</div>
|
||||
<div class="gauge-status">健康范围 84%</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动仪表 -->
|
||||
<div class="metric-gauge">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bg">
|
||||
<div class="gauge-fill gauge-activity"></div>
|
||||
<div class="gauge-center">
|
||||
<div class="gauge-value">78</div>
|
||||
<div class="gauge-unit">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gauge-label">活动指数</div>
|
||||
<div class="gauge-status">活跃状态</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲仪表 -->
|
||||
<div class="metric-gauge">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bg">
|
||||
<div class="gauge-fill gauge-food"></div>
|
||||
<div class="gauge-center">
|
||||
<div class="gauge-value">92</div>
|
||||
<div class="gauge-unit">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gauge-label">食欲状态</div>
|
||||
<div class="gauge-status">食欲旺盛</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠仪表 -->
|
||||
<div class="metric-gauge">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bg">
|
||||
<div class="gauge-fill gauge-sleep"></div>
|
||||
<div class="gauge-center">
|
||||
<div class="gauge-value">14</div>
|
||||
<div class="gauge-unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gauge-label">睡眠时长</div>
|
||||
<div class="gauge-status">睡眠充足</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康总览仪表盘 -->
|
||||
<div class="health-dashboard">
|
||||
<h3 class="dashboard-title">综合健康评估</h3>
|
||||
|
||||
<div class="health-score-display">
|
||||
<div class="health-score-circle">
|
||||
<div class="health-score-number">85</div>
|
||||
</div>
|
||||
<div class="health-score-text">健康状态良好</div>
|
||||
</div>
|
||||
|
||||
<div class="health-indicators-grid">
|
||||
<div class="health-indicator-v5">
|
||||
<div class="indicator-icon-v5">💉</div>
|
||||
<div class="indicator-status status-good">完成</div>
|
||||
<div class="indicator-name">疫苗</div>
|
||||
</div>
|
||||
<div class="health-indicator-v5">
|
||||
<div class="indicator-icon-v5">🐛</div>
|
||||
<div class="indicator-status status-warning">需要</div>
|
||||
<div class="indicator-name">驱虫</div>
|
||||
</div>
|
||||
<div class="health-indicator-v5">
|
||||
<div class="indicator-icon-v5">🦷</div>
|
||||
<div class="indicator-status status-good">良好</div>
|
||||
<div class="indicator-name">牙齿</div>
|
||||
</div>
|
||||
<div class="health-indicator-v5">
|
||||
<div class="indicator-icon-v5">👁️</div>
|
||||
<div class="indicator-status status-good">正常</div>
|
||||
<div class="indicator-name">眼部</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近记录卡片 -->
|
||||
<div class="recent-records-card">
|
||||
<div class="records-header">
|
||||
<h3 class="records-title">最近记录</h3>
|
||||
<a href="#" class="view-all-btn" onclick="interactions.handleButtonClick('viewRecords')">查看全部</a>
|
||||
</div>
|
||||
|
||||
<div class="record-item-v5">
|
||||
<div class="record-icon-v5">⚖️</div>
|
||||
<div class="record-content-v5">
|
||||
<div class="record-title-v5">体重记录</div>
|
||||
<div class="record-desc-v5">今天体重4.2kg，比上周增加了0.1kg</div>
|
||||
</div>
|
||||
<div class="record-time-v5">2小时前</div>
|
||||
</div>
|
||||
|
||||
<div class="record-item-v5">
|
||||
<div class="record-icon-v5" style="background: var(--pet-secondary);">💉</div>
|
||||
<div class="record-content-v5">
|
||||
<div class="record-title-v5">疫苗接种</div>
|
||||
<div class="record-desc-v5">完成了狂犬疫苗第二针接种</div>
|
||||
</div>
|
||||
<div class="record-time-v5">1天前</div>
|
||||
</div>
|
||||
|
||||
<div class="record-item-v5">
|
||||
<div class="record-icon-v5" style="background: var(--pet-warning);">🛁</div>
|
||||
<div class="record-content-v5">
|
||||
<div class="record-title-v5">洗澡护理</div>
|
||||
<div class="record-desc-v5">给小橘洗了澡，全程很乖没有挣扎</div>
|
||||
</div>
|
||||
<div class="record-time-v5">3天前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮卡片 -->
|
||||
<div class="actions-card">
|
||||
<div class="actions-grid-v5">
|
||||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="action-icon-v5">📝</div>
|
||||
<div class="action-text-v5">添加记录</div>
|
||||
</div>
|
||||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="action-icon-v5">💬</div>
|
||||
<div class="action-text-v5">AI助手</div>
|
||||
</div>
|
||||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="action-icon-v5">📊</div>
|
||||
<div class="action-text-v5">健康报告</div>
|
||||
</div>
|
||||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="action-icon-v5">⏰</div>
|
||||
<div class="action-text-v5">成长时光</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V5 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 卡片入场动画
|
||||
const cards = document.querySelectorAll('.pet-info-card, .dashboard-grid-v5, .recent-records-card, .actions-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(30px)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// 仪表盘动画
|
||||
setTimeout(() => {
|
||||
const gauges = document.querySelectorAll('.gauge-fill');
|
||||
gauges.forEach((gauge, index) => {
|
||||
setTimeout(() => {
|
||||
gauge.style.animation = 'gaugeRotate 2s ease forwards';
|
||||
}, index * 300);
|
||||
});
|
||||
}, 800);
|
||||
|
||||
// 健康评分动画
|
||||
setTimeout(() => {
|
||||
const healthScore = document.querySelector('.health-score-circle');
|
||||
healthScore.style.animation = 'scoreAppear 1.5s ease forwards';
|
||||
}, 1500);
|
||||
|
||||
console.log('卡片仪表盘式 V5 原型已加载');
|
||||
});
|
||||
|
||||
// 添加动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes gaugeRotate {
|
||||
from {
|
||||
transform: rotate(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scoreAppear {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,778 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V6</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V6 - 温馨家庭风格，基本信息卡片化，数据可视化仪表盘 */
|
||||
.dashboard-v6-container {
|
||||
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 宠物档案卡片 */
|
||||
.pet-profile-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pet-profile-card::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="20" cy="20" r="1" fill="rgba(255,182,159,0.1)"/><circle cx="80" cy="60" r="1.5" fill="rgba(255,182,159,0.1)"/><path d="M10,80 Q20,70 30,80" stroke="rgba(255,182,159,0.1)" stroke-width="1" fill="none"/></svg>') repeat;
|
||||
animation: float 15s infinite linear;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pet-intro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
border-bottom: 2px dashed #FFE4D6;
|
||||
}
|
||||
|
||||
.pet-avatar-v6 {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 20px;
|
||||
border: 4px solid var(--pet-primary);
|
||||
box-shadow: 0 10px 30px rgba(255, 138, 128, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pet-avatar-v6::after {
|
||||
content: '🌟';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: var(--pet-warning);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.pet-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pet-name-v6 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
}
|
||||
|
||||
.pet-subtitle-v6 {
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.pet-personality {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.personality-tag {
|
||||
background: linear-gradient(135deg, #FFB6C1, #FFA07A);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(255, 182, 159, 0.3);
|
||||
}
|
||||
|
||||
.basic-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: 15px;
|
||||
border: 2px solid #FFE4D6;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(255, 182, 159, 0.2);
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.info-label-v6 {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value-v6 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 数据仪表盘区域 */
|
||||
.dashboard-panel {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
}
|
||||
|
||||
.panel-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dashboard-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.metric-widget {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.widget-container {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
background: #F0F0F0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.widget-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.progress-weight-v6 {
|
||||
background: conic-gradient(#FF6B6B 0deg, #FF6B6B 302deg, transparent 302deg);
|
||||
}
|
||||
|
||||
.progress-activity-v6 {
|
||||
background: conic-gradient(#4CAF50 0deg, #4CAF50 281deg, transparent 281deg);
|
||||
}
|
||||
|
||||
.progress-food-v6 {
|
||||
background: conic-gradient(#2196F3 0deg, #2196F3 331deg, transparent 331deg);
|
||||
}
|
||||
|
||||
.progress-sleep-v6 {
|
||||
background: conic-gradient(#9C27B0 0deg, #9C27B0 313deg, transparent 313deg);
|
||||
}
|
||||
|
||||
.widget-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.widget-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.widget-unit {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.widget-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.widget-description {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 健康总览 */
|
||||
.health-overview-panel {
|
||||
background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
|
||||
border-radius: 15px;
|
||||
padding: var(--spacing-lg);
|
||||
border: 2px solid #FFE4D6;
|
||||
}
|
||||
|
||||
.overview-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.overall-health-score {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #F0F0F0 306deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
|
||||
}
|
||||
|
||||
.overall-health-score::before {
|
||||
content: '';
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
background: white;
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.overall-score-value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.overall-score-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.health-status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-icon-vaccine {
|
||||
background: linear-gradient(135deg, #4CAF50, #81C784);
|
||||
}
|
||||
|
||||
.status-icon-deworming {
|
||||
background: linear-gradient(135deg, #FF9800, #FFB74D);
|
||||
}
|
||||
|
||||
.status-icon-dental {
|
||||
background: linear-gradient(135deg, #2196F3, #64B5F6);
|
||||
}
|
||||
|
||||
.status-icon-eye {
|
||||
background: linear-gradient(135deg, #9C27B0, #BA68C8);
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 温馨记录卡片 */
|
||||
.memories-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.memories-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.memories-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
}
|
||||
|
||||
.memory-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
|
||||
border-radius: 15px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
border: 2px solid #FFE4D6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.memory-item:hover {
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 8px 20px rgba(255, 182, 159, 0.2);
|
||||
}
|
||||
|
||||
.memory-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
|
||||
}
|
||||
|
||||
.memory-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.memory-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.memory-description {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.memory-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 温馨操作区 */
|
||||
.cozy-actions {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.actions-grid-v6 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cozy-action-btn {
|
||||
background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
|
||||
border: 2px solid #FFE4D6;
|
||||
border-radius: 15px;
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cozy-action-btn:hover {
|
||||
background: white;
|
||||
border-color: var(--pet-primary);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(255, 138, 128, 0.3);
|
||||
}
|
||||
|
||||
.cozy-action-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cozy-action-text {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v6-container">
|
||||
<!-- 宠物档案卡片 -->
|
||||
<div class="pet-profile-card">
|
||||
<div class="profile-content">
|
||||
<div class="pet-intro">
|
||||
<div class="pet-avatar-v6">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 20px;">
|
||||
</div>
|
||||
<div class="pet-details">
|
||||
<h1 class="pet-name-v6">小橘 🧡</h1>
|
||||
<p class="pet-subtitle-v6">我家的小太阳 · 橘猫 · 公 · 2岁3个月</p>
|
||||
<div class="pet-personality">
|
||||
<span class="personality-tag">超级活泼</span>
|
||||
<span class="personality-tag">特别粘人</span>
|
||||
<span class="personality-tag">小吃货</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basic-info-grid">
|
||||
<div class="info-card">
|
||||
<div class="info-icon">🎂</div>
|
||||
<div class="info-label-v6">生日</div>
|
||||
<div class="info-value-v6">2022年3月15日</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-icon">🏠</div>
|
||||
<div class="info-label-v6">到家纪念日</div>
|
||||
<div class="info-value-v6">2022年4月20日</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-icon">💕</div>
|
||||
<div class="info-label-v6">陪伴天数</div>
|
||||
<div class="info-value-v6">645天</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-icon">⚖️</div>
|
||||
<div class="info-label-v6">当前体重</div>
|
||||
<div class="info-value-v6">4.2kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康数据仪表盘 -->
|
||||
<div class="dashboard-panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">小橘的健康仪表盘 📊</h2>
|
||||
<p class="panel-subtitle">用数据守护每一天的健康</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-metrics">
|
||||
<!-- 体重监测 -->
|
||||
<div class="metric-widget">
|
||||
<div class="widget-container">
|
||||
<div class="widget-bg">
|
||||
<div class="widget-progress progress-weight-v6"></div>
|
||||
<div class="widget-inner">
|
||||
<div class="widget-value">4.2</div>
|
||||
<div class="widget-unit">kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-label">体重监测</div>
|
||||
<div class="widget-description">健康范围内 84%</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动指数 -->
|
||||
<div class="metric-widget">
|
||||
<div class="widget-container">
|
||||
<div class="widget-bg">
|
||||
<div class="widget-progress progress-activity-v6"></div>
|
||||
<div class="widget-inner">
|
||||
<div class="widget-value">78</div>
|
||||
<div class="widget-unit">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-label">活动指数</div>
|
||||
<div class="widget-description">今天很活跃哦</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲状态 -->
|
||||
<div class="metric-widget">
|
||||
<div class="widget-container">
|
||||
<div class="widget-bg">
|
||||
<div class="widget-progress progress-food-v6"></div>
|
||||
<div class="widget-inner">
|
||||
<div class="widget-value">92</div>
|
||||
<div class="widget-unit">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-label">食欲状态</div>
|
||||
<div class="widget-description">小吃货本色</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠时长 -->
|
||||
<div class="metric-widget">
|
||||
<div class="widget-container">
|
||||
<div class="widget-bg">
|
||||
<div class="widget-progress progress-sleep-v6"></div>
|
||||
<div class="widget-inner">
|
||||
<div class="widget-value">14</div>
|
||||
<div class="widget-unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-label">睡眠时长</div>
|
||||
<div class="widget-description">睡得很香甜</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康总览 -->
|
||||
<div class="health-overview-panel">
|
||||
<div class="overview-header">
|
||||
<div class="overall-health-score">
|
||||
<div class="overall-score-value">85</div>
|
||||
</div>
|
||||
<div class="overall-score-label">综合健康评分 - 棒棒哒！</div>
|
||||
</div>
|
||||
|
||||
<div class="health-status-grid">
|
||||
<div class="status-item">
|
||||
<div class="status-icon status-icon-vaccine">💉</div>
|
||||
<div class="status-info">
|
||||
<div class="status-name">疫苗接种</div>
|
||||
<div class="status-value">已完成，很勇敢</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon status-icon-deworming">🐛</div>
|
||||
<div class="status-info">
|
||||
<div class="status-name">驱虫治疗</div>
|
||||
<div class="status-value">需要更新啦</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon status-icon-dental">🦷</div>
|
||||
<div class="status-info">
|
||||
<div class="status-name">牙齿健康</div>
|
||||
<div class="status-value">白白的小牙</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-icon status-icon-eye">👁️</div>
|
||||
<div class="status-info">
|
||||
<div class="status-name">眼部检查</div>
|
||||
<div class="status-value">亮晶晶的眼睛</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨记录卡片 -->
|
||||
<div class="memories-card">
|
||||
<div class="memories-header">
|
||||
<h3 class="memories-title">最近的温馨时光 💝</h3>
|
||||
</div>
|
||||
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">⚖️</div>
|
||||
<div class="memory-content">
|
||||
<div class="memory-title">今天的体重记录</div>
|
||||
<div class="memory-description">小橘今天4.2kg啦，比上周又重了一点点，健康成长中～</div>
|
||||
</div>
|
||||
<div class="memory-time">2小时前</div>
|
||||
</div>
|
||||
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon" style="background: linear-gradient(135deg, var(--pet-secondary), var(--pet-warning));">💉</div>
|
||||
<div class="memory-content">
|
||||
<div class="memory-title">勇敢的疫苗接种</div>
|
||||
<div class="memory-description">小橘今天打疫苗超级勇敢，全程没有叫唤，医生都夸它乖</div>
|
||||
</div>
|
||||
<div class="memory-time">1天前</div>
|
||||
</div>
|
||||
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon" style="background: linear-gradient(135deg, var(--pet-warning), var(--pet-primary));">🛁</div>
|
||||
<div class="memory-content">
|
||||
<div class="memory-title">香香的洗澡时光</div>
|
||||
<div class="memory-description">给小橘洗了个舒服的澡澡，现在毛毛软软香香的</div>
|
||||
</div>
|
||||
<div class="memory-time">3天前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨操作区 -->
|
||||
<div class="cozy-actions">
|
||||
<div class="actions-grid-v6">
|
||||
<div class="cozy-action-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="cozy-action-icon">📝</div>
|
||||
<div class="cozy-action-text">记录美好</div>
|
||||
</div>
|
||||
<div class="cozy-action-btn" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="cozy-action-icon">💬</div>
|
||||
<div class="cozy-action-text">AI小助手</div>
|
||||
</div>
|
||||
<div class="cozy-action-btn" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="cozy-action-icon">📊</div>
|
||||
<div class="cozy-action-text">健康报告</div>
|
||||
</div>
|
||||
<div class="cozy-action-btn" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="cozy-action-icon">⏰</div>
|
||||
<div class="cozy-action-text">成长相册</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 卡片仪表盘式 V6 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 温馨的入场动画
|
||||
const cards = document.querySelectorAll('.pet-profile-card, .dashboard-panel, .memories-card, .cozy-actions');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(40px) scale(0.95)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0) scale(1)';
|
||||
}, index * 250);
|
||||
});
|
||||
|
||||
// 仪表盘动画
|
||||
setTimeout(() => {
|
||||
const widgets = document.querySelectorAll('.widget-progress');
|
||||
widgets.forEach((widget, index) => {
|
||||
setTimeout(() => {
|
||||
widget.style.animation = 'widgetSpin 2.5s ease forwards';
|
||||
}, index * 400);
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
// 健康评分动画
|
||||
setTimeout(() => {
|
||||
const healthScore = document.querySelector('.overall-health-score');
|
||||
healthScore.style.animation = 'heartbeat 1.5s ease forwards';
|
||||
}, 2000);
|
||||
|
||||
console.log('温馨卡片仪表盘式 V6 原型已加载');
|
||||
});
|
||||
|
||||
// 添加温馨动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
50% { transform: translateX(-20px) translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes widgetSpin {
|
||||
from {
|
||||
transform: rotate(-180deg) scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heartbeat {
|
||||
0%, 100% { transform: scale(1); }
|
||||
25% { transform: scale(1.05); }
|
||||
50% { transform: scale(1.1); }
|
||||
75% { transform: scale(1.05); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,679 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>宠物详情 - 卡片仪表盘式 V7</title>
|
||||
<link rel="stylesheet" href="assets/css/common.css">
|
||||
<style>
|
||||
/* 卡片仪表盘式 V7 - 科技感风格，基本信息卡片化，数据可视化仪表盘 */
|
||||
.dashboard-v7-container {
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 宠物信息卡片 */
|
||||
.pet-info-panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pet-info-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #00d4ff, #ff0080, #ffaa00);
|
||||
animation: neonFlow 3s linear infinite;
|
||||
}
|
||||
|
||||
.pet-header-v7 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.pet-avatar-v7 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #00d4ff;
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pet-avatar-v7::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(45deg, #00d4ff, #ff0080, #ffaa00, #00d4ff);
|
||||
z-index: -1;
|
||||
animation: borderRotate 3s linear infinite;
|
||||
}
|
||||
|
||||
.pet-main-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pet-name-v7 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(45deg, #00d4ff, #ff0080);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.pet-type-info {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.pet-status-indicators {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
background: rgba(0, 212, 255, 0.2);
|
||||
border: 1px solid #00d4ff;
|
||||
color: #00d4ff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-chip.warning {
|
||||
background: rgba(255, 170, 0, 0.2);
|
||||
border-color: #ffaa00;
|
||||
color: #ffaa00;
|
||||
}
|
||||
|
||||
.status-chip.success {
|
||||
background: rgba(0, 255, 127, 0.2);
|
||||
border-color: #00ff7f;
|
||||
color: #00ff7f;
|
||||
}
|
||||
|
||||
.info-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-cell {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: var(--spacing-md);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-cell:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: #00d4ff;
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.info-cell-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.info-cell-label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.info-cell-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 数据仪表盘 */
|
||||
.analytics-dashboard {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
padding: var(--spacing-xl);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dashboard-header-v7 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.dashboard-title-v7 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(45deg, #00d4ff, #ff0080, #ffaa00);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.metrics-grid-v7 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.metric-display-v7 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-gauge-v7 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gauge-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(rgba(255, 255, 255, 0.1) 0deg, rgba(255, 255, 255, 0.1) 360deg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gauge-progress-v7 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-round);
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.gauge-weight-v7 {
|
||||
background: conic-gradient(#ff0080 0deg, #ff0080 302deg, transparent 302deg);
|
||||
}
|
||||
|
||||
.gauge-activity-v7 {
|
||||
background: conic-gradient(#00ff7f 0deg, #00ff7f 281deg, transparent 281deg);
|
||||
}
|
||||
|
||||
.gauge-food-v7 {
|
||||
background: conic-gradient(#00d4ff 0deg, #00d4ff 331deg, transparent 331deg);
|
||||
}
|
||||
|
||||
.gauge-sleep-v7 {
|
||||
background: conic-gradient(#ffaa00 0deg, #ffaa00 313deg, transparent 313deg);
|
||||
}
|
||||
|
||||
.gauge-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: var(--radius-round);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.gauge-value-v7 {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.gauge-unit-v7 {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.metric-label-v7 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-status-v7 {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* 系统状态面板 */
|
||||
.system-status {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: var(--spacing-lg);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.status-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.overall-status-display {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-round);
|
||||
background: conic-gradient(#00ff7f 0deg, #00ff7f 306deg, rgba(255, 255, 255, 0.1) 306deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
position: relative;
|
||||
box-shadow: 0 0 40px rgba(0, 255, 127, 0.4);
|
||||
}
|
||||
|
||||
.overall-status-display::before {
|
||||
content: '';
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-radius: var(--radius-round);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.overall-status-value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #00ff7f;
|
||||
}
|
||||
|
||||
.overall-status-label {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-indicators-v7 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.status-indicator-v7 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: var(--radius-round);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.dot-online {
|
||||
background: #00ff7f;
|
||||
box-shadow: 0 0 10px #00ff7f;
|
||||
}
|
||||
|
||||
.dot-warning {
|
||||
background: #ffaa00;
|
||||
box-shadow: 0 0 10px #ffaa00;
|
||||
}
|
||||
|
||||
.indicator-text {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 控制面板 */
|
||||
.control-panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--spacing-md);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.control-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.control-button {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #00d4ff;
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.control-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.control-icon-v7 {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(45deg, #00d4ff, #ff0080);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.control-text-v7 {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container dashboard-v7-container">
|
||||
<!-- 宠物信息面板 -->
|
||||
<div class="pet-info-panel">
|
||||
<div class="pet-header-v7">
|
||||
<div class="pet-avatar-v7">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||||
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 20px;">
|
||||
</div>
|
||||
<div class="pet-main-info">
|
||||
<h1 class="pet-name-v7">XIAOJU.EXE</h1>
|
||||
<p class="pet-type-info">ORANGE_CAT v2.3 | MALE | RUNTIME: 645 DAYS</p>
|
||||
<div class="pet-status-indicators">
|
||||
<span class="status-chip success">ONLINE</span>
|
||||
<span class="status-chip">HEALTHY</span>
|
||||
<span class="status-chip warning">UPDATE_NEEDED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-matrix">
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-icon">🎂</div>
|
||||
<div class="info-cell-label">BIRTH_DATE</div>
|
||||
<div class="info-cell-value">2022.03.15</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-icon">🏠</div>
|
||||
<div class="info-cell-label">INSTALL_DATE</div>
|
||||
<div class="info-cell-value">2022.04.20</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-icon">💕</div>
|
||||
<div class="info-cell-label">UPTIME</div>
|
||||
<div class="info-cell-value">645 DAYS</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-icon">⚖️</div>
|
||||
<div class="info-cell-label">WEIGHT</div>
|
||||
<div class="info-cell-value">4.2 KG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据分析仪表盘 -->
|
||||
<div class="analytics-dashboard">
|
||||
<div class="dashboard-header-v7">
|
||||
<h2 class="dashboard-title-v7">HEALTH ANALYTICS DASHBOARD</h2>
|
||||
<p class="dashboard-subtitle">Real-time monitoring system</p>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid-v7">
|
||||
<!-- 体重监测 -->
|
||||
<div class="metric-display-v7">
|
||||
<div class="metric-gauge-v7">
|
||||
<div class="gauge-outer">
|
||||
<div class="gauge-progress-v7 gauge-weight-v7"></div>
|
||||
<div class="gauge-inner">
|
||||
<div class="gauge-value-v7">4.2</div>
|
||||
<div class="gauge-unit-v7">KG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-label-v7">WEIGHT_MONITOR</div>
|
||||
<div class="metric-status-v7">OPTIMAL_RANGE: 84%</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动监测 -->
|
||||
<div class="metric-display-v7">
|
||||
<div class="metric-gauge-v7">
|
||||
<div class="gauge-outer">
|
||||
<div class="gauge-progress-v7 gauge-activity-v7"></div>
|
||||
<div class="gauge-inner">
|
||||
<div class="gauge-value-v7">78</div>
|
||||
<div class="gauge-unit-v7">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-label-v7">ACTIVITY_INDEX</div>
|
||||
<div class="metric-status-v7">STATUS: ACTIVE</div>
|
||||
</div>
|
||||
|
||||
<!-- 食欲监测 -->
|
||||
<div class="metric-display-v7">
|
||||
<div class="metric-gauge-v7">
|
||||
<div class="gauge-outer">
|
||||
<div class="gauge-progress-v7 gauge-food-v7"></div>
|
||||
<div class="gauge-inner">
|
||||
<div class="gauge-value-v7">92</div>
|
||||
<div class="gauge-unit-v7">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-label-v7">APPETITE_LEVEL</div>
|
||||
<div class="metric-status-v7">STATUS: EXCELLENT</div>
|
||||
</div>
|
||||
|
||||
<!-- 睡眠监测 -->
|
||||
<div class="metric-display-v7">
|
||||
<div class="metric-gauge-v7">
|
||||
<div class="gauge-outer">
|
||||
<div class="gauge-progress-v7 gauge-sleep-v7"></div>
|
||||
<div class="gauge-inner">
|
||||
<div class="gauge-value-v7">14</div>
|
||||
<div class="gauge-unit-v7">H</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-label-v7">SLEEP_DURATION</div>
|
||||
<div class="metric-status-v7">STATUS: OPTIMAL</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统状态 -->
|
||||
<div class="system-status">
|
||||
<div class="status-header">
|
||||
<div class="overall-status-display">
|
||||
<div class="overall-status-value">85</div>
|
||||
</div>
|
||||
<div class="overall-status-label">SYSTEM_HEALTH_SCORE</div>
|
||||
</div>
|
||||
|
||||
<div class="status-indicators-v7">
|
||||
<div class="status-indicator-v7">
|
||||
<div class="indicator-dot dot-online"></div>
|
||||
<div class="indicator-text">VACCINE_MODULE: ACTIVE</div>
|
||||
</div>
|
||||
<div class="status-indicator-v7">
|
||||
<div class="indicator-dot dot-warning"></div>
|
||||
<div class="indicator-text">DEWORMING: UPDATE_REQUIRED</div>
|
||||
</div>
|
||||
<div class="status-indicator-v7">
|
||||
<div class="indicator-dot dot-online"></div>
|
||||
<div class="indicator-text">DENTAL_SYSTEM: OPTIMAL</div>
|
||||
</div>
|
||||
<div class="status-indicator-v7">
|
||||
<div class="indicator-dot dot-online"></div>
|
||||
<div class="indicator-text">VISION_SENSOR: NORMAL</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制面板 -->
|
||||
<div class="control-panel">
|
||||
<div class="control-grid">
|
||||
<div class="control-button" onclick="interactions.handleButtonClick('addRecord')">
|
||||
<div class="control-icon-v7">📝</div>
|
||||
<div class="control-text-v7">LOG_DATA</div>
|
||||
</div>
|
||||
<div class="control-button" onclick="interactions.handleButtonClick('aiChat')">
|
||||
<div class="control-icon-v7">💬</div>
|
||||
<div class="control-text-v7">AI_ASSISTANT</div>
|
||||
</div>
|
||||
<div class="control-button" onclick="interactions.handleButtonClick('healthChart')">
|
||||
<div class="control-icon-v7">📊</div>
|
||||
<div class="control-text-v7">ANALYTICS</div>
|
||||
</div>
|
||||
<div class="control-button" onclick="interactions.handleButtonClick('timeline')">
|
||||
<div class="control-icon-v7">⏰</div>
|
||||
<div class="control-text-v7">TIMELINE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/common.js"></script>
|
||||
<script>
|
||||
// 科技感仪表盘 V7 特有交互
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 科技感入场动画
|
||||
const panels = document.querySelectorAll('.pet-info-panel, .analytics-dashboard, .control-panel');
|
||||
panels.forEach((panel, index) => {
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(50px) scale(0.9)';
|
||||
|
||||
setTimeout(() => {
|
||||
panel.style.transition = 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
||||
panel.style.opacity = '1';
|
||||
panel.style.transform = 'translateY(0) scale(1)';
|
||||
}, index * 300);
|
||||
});
|
||||
|
||||
// 仪表盘扫描动画
|
||||
setTimeout(() => {
|
||||
const gauges = document.querySelectorAll('.gauge-progress-v7');
|
||||
gauges.forEach((gauge, index) => {
|
||||
setTimeout(() => {
|
||||
gauge.style.animation = 'scanRotate 3s ease forwards';
|
||||
}, index * 500);
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
// 系统状态动画
|
||||
setTimeout(() => {
|
||||
const statusDisplay = document.querySelector('.overall-status-display');
|
||||
statusDisplay.style.animation = 'systemBoot 2s ease forwards';
|
||||
}, 2000);
|
||||
|
||||
console.log('科技感仪表盘 V7 系统已启动');
|
||||
});
|
||||
|
||||
// 添加科技感动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes neonFlow {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
@keyframes borderRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes scanRotate {
|
||||
from {
|
||||
transform: rotate(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes systemBoot {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user