631 lines
19 KiB
HTML
631 lines
19 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>方案1：横向轮播卡片式</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 50%, #FECFEF 100%);
|
||
min-height: 100vh;
|
||
max-width: 375px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
background: rgba(255,255,255,0.95);
|
||
padding: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.header-left h1 {
|
||
font-size: 22px;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.header-left p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.header-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 18px;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.family-btn {
|
||
background: linear-gradient(135deg, #FF9A9E, #FECFEF);
|
||
color: white;
|
||
}
|
||
|
||
.add-btn {
|
||
background: #F0F0F0;
|
||
color: #666;
|
||
}
|
||
|
||
.pets-carousel {
|
||
padding: 20px 0;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pets-container {
|
||
display: inline-flex;
|
||
gap: 15px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.pet-card {
|
||
min-width: 280px;
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 25px;
|
||
padding: 25px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
||
backdrop-filter: blur(20px);
|
||
position: relative;
|
||
}
|
||
|
||
.pet-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pet-avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 30px;
|
||
background: linear-gradient(135deg, #FFE0B2, #FFCC80);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
margin-right: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.status-dot {
|
||
position: absolute;
|
||
bottom: -2px;
|
||
right: -2px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 9px;
|
||
background: #4CAF50;
|
||
border: 3px solid white;
|
||
}
|
||
|
||
.pet-info h3 {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.pet-info p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pet-tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tag {
|
||
background: #E8F5E8;
|
||
color: #4CAF50;
|
||
padding: 4px 8px;
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.pet-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
background: #F8F9FA;
|
||
padding: 12px 8px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 10px;
|
||
color: #999;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.pet-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
background: linear-gradient(135deg, #FF9A9E, #FECFEF);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-pet-card {
|
||
min-width: 200px;
|
||
background: rgba(255,255,255,0.7);
|
||
border: 3px dashed #FF9A9E;
|
||
border-radius: 25px;
|
||
padding: 40px 25px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.add-pet-card:hover {
|
||
background: rgba(255,255,255,0.9);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.add-icon {
|
||
font-size: 40px;
|
||
color: #FF9A9E;
|
||
margin-bottom: 15px;
|
||
display: block;
|
||
}
|
||
|
||
.add-text {
|
||
font-size: 16px;
|
||
color: #FF9A9E;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.summary-section {
|
||
background: rgba(255,255,255,0.95);
|
||
margin: 0 20px 20px;
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.summary-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.summary-card {
|
||
background: linear-gradient(135deg, #FF9A9E, #FECFEF);
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.summary-number {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.quick-btn {
|
||
background: rgba(255,255,255,0.95);
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 15px 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(20px);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.quick-btn:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.quick-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 6px;
|
||
display: block;
|
||
}
|
||
|
||
.quick-text {
|
||
font-size: 11px;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.activities-section {
|
||
background: rgba(255,255,255,0.95);
|
||
margin: 0 20px 20px;
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.activities-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #F0F0F0;
|
||
}
|
||
|
||
.activity-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.activity-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 16px;
|
||
background: #FFE0B2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.activity-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.activity-type {
|
||
background: #E3F2FD;
|
||
color: #2196F3;
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.ai-section {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
margin: 0 20px 80px;
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
color: white;
|
||
}
|
||
|
||
.ai-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ai-message {
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 15px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.ai-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.ai-btn {
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 15px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.floating-add {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 20px;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
background: linear-gradient(135deg, #FF9A9E, #FECFEF);
|
||
color: white;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 20px rgba(255,154,158,0.4);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.floating-add:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<h1>🏠 宠物之家</h1>
|
||
<p>4只毛孩子的温馨日常</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="header-btn family-btn">👨👩👧👦</button>
|
||
<button class="header-btn add-btn">➕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pets-carousel">
|
||
<div class="pets-container">
|
||
<div class="pet-card">
|
||
<div class="pet-header">
|
||
<div class="pet-avatar">
|
||
🐱
|
||
<div class="status-dot"></div>
|
||
</div>
|
||
<div class="pet-info">
|
||
<h3>小橘</h3>
|
||
<p>橘猫 · 2岁 · 陪伴365天</p>
|
||
<div class="pet-tags">
|
||
<span class="tag">活泼</span>
|
||
<span class="tag">粘人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pet-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">4.5kg</span>
|
||
<span class="stat-label">体重</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">89</span>
|
||
<span class="stat-label">记录</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">健康</span>
|
||
<span class="stat-label">状态</span>
|
||
</div>
|
||
</div>
|
||
<div class="pet-actions">
|
||
<button class="action-btn">记录</button>
|
||
<button class="action-btn">聊天</button>
|
||
<button class="action-btn">详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pet-card">
|
||
<div class="pet-header">
|
||
<div class="pet-avatar">
|
||
🐶
|
||
<div class="status-dot"></div>
|
||
</div>
|
||
<div class="pet-info">
|
||
<h3>小白</h3>
|
||
<p>金毛 · 3岁 · 陪伴1095天</p>
|
||
<div class="pet-tags">
|
||
<span class="tag">温顺</span>
|
||
<span class="tag">忠诚</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pet-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">25kg</span>
|
||
<span class="stat-label">体重</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">67</span>
|
||
<span class="stat-label">记录</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">健康</span>
|
||
<span class="stat-label">状态</span>
|
||
</div>
|
||
</div>
|
||
<div class="pet-actions">
|
||
<button class="action-btn">记录</button>
|
||
<button class="action-btn">聊天</button>
|
||
<button class="action-btn">详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pet-card">
|
||
<div class="pet-header">
|
||
<div class="pet-avatar">
|
||
🐰
|
||
<div class="status-dot"></div>
|
||
</div>
|
||
<div class="pet-info">
|
||
<h3>小灰</h3>
|
||
<p>垂耳兔 · 1岁 · 陪伴180天</p>
|
||
<div class="pet-tags">
|
||
<span class="tag">安静</span>
|
||
<span class="tag">可爱</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pet-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">1.2kg</span>
|
||
<span class="stat-label">体重</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">34</span>
|
||
<span class="stat-label">记录</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">健康</span>
|
||
<span class="stat-label">状态</span>
|
||
</div>
|
||
</div>
|
||
<div class="pet-actions">
|
||
<button class="action-btn">记录</button>
|
||
<button class="action-btn">聊天</button>
|
||
<button class="action-btn">详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="add-pet-card">
|
||
<span class="add-icon">➕</span>
|
||
<div class="add-text">添加新宠物</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-section">
|
||
<div class="summary-title">📊 家庭概览</div>
|
||
<div class="summary-grid">
|
||
<div class="summary-card">
|
||
<div class="summary-number">190</div>
|
||
<div class="summary-label">总记录数</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="summary-number">¥2,340</div>
|
||
<div class="summary-label">本月消费</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="summary-number">5</div>
|
||
<div class="summary-label">待办提醒</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="summary-number">3</div>
|
||
<div class="summary-label">家庭成员</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-actions">
|
||
<button class="quick-btn">
|
||
<span class="quick-icon">📝</span>
|
||
<span class="quick-text">快速记录</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-icon">💰</span>
|
||
<span class="quick-text">记账</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-icon">📸</span>
|
||
<span class="quick-text">拍照</span>
|
||
</button>
|
||
<button class="quick-btn">
|
||
<span class="quick-icon">🏥</span>
|
||
<span class="quick-text">领养</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="activities-section">
|
||
<div class="activities-title">⏰ 最近活动</div>
|
||
<div class="activity-item">
|
||
<div class="activity-avatar">🐱</div>
|
||
<div class="activity-content">
|
||
<div class="activity-text">小橘完成了今天的早餐</div>
|
||
<div class="activity-time">2小时前 · 日常记录</div>
|
||
</div>
|
||
<div class="activity-type">饮食</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-avatar">🐶</div>
|
||
<div class="activity-content">
|
||
<div class="activity-text">小白外出散步30分钟</div>
|
||
<div class="activity-time">3小时前 · 日常记录</div>
|
||
</div>
|
||
<div class="activity-type">运动</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-avatar">🐰</div>
|
||
<div class="activity-content">
|
||
<div class="activity-text">小灰吃了新鲜胡萝卜</div>
|
||
<div class="activity-time">5小时前 · 随手记</div>
|
||
</div>
|
||
<div class="activity-type">饮食</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-section">
|
||
<div class="ai-title">🤖 AI助手</div>
|
||
<div class="ai-message">
|
||
根据记录分析，小橘今天的活动量比平时少，建议增加一些互动游戏时间。
|
||
</div>
|
||
<div class="ai-actions">
|
||
<button class="ai-btn">查看详情</button>
|
||
<button class="ai-btn">开始聊天</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="floating-add">📝</button>
|
||
</body>
|
||
</html>
|