779 lines
27 KiB
HTML
779 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>宠物详情 - 卡片仪表盘式 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>
|