yvan/pet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
yvan
2025-08-12 20:06:22 +08:00
parent 34988874a0
commit 5877a1ee43
11 changed files with 4904 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/layout11-horizontal-scroll.html
+616
View File
@@ -0,0 +1,616 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方案11：横向滑动卡片式</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;
}
.family-btn {
width: 40px;
height: 40px;
border-radius: 20px;
background: linear-gradient(135deg, #FF9A9E, #FECFEF);
color: white;
border: none;
font-size: 16px;
cursor: pointer;
}
.pets-scroll {
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);
position: relative;
backdrop-filter: blur(20px);
}
.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-indicator {
position: absolute;
bottom: -2px;
right: -2px;
width: 20px;
height: 20px;
border-radius: 10px;
background: #4CAF50;
border: 3px solid white;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.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;
margin-bottom: 20px;
}
.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;
}
.recent-activities {
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;
}
.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);
}
.ai-assistant {
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;
}
</style>
</head>
<body>
<div class="header">
<div class="header-left">
<h1>🏠 宠物之家</h1>
<p>4只毛孩子的温馨日常</p>
</div>
<button class="family-btn">👨‍👩‍👧‍👦</button>
</div>
<div class="pets-scroll">
<div class="pets-container">
<div class="pet-card">
<div class="pet-header">
<div class="pet-avatar">
🐱
<div class="status-indicator">💚</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-indicator">💚</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-indicator">💚</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="recent-activities">
<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-assistant">
<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>