580 lines
17 KiB
HTML
580 lines
17 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>方案7：多宠物轮播式布局</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, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
max-width: 375px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
background: rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(20px);
|
|
padding: 20px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-left h1 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.header-left p {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.add-pet-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
background: rgba(255,255,255,0.2);
|
|
border: 2px dashed rgba(255,255,255,0.5);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.add-pet-btn:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.pets-carousel {
|
|
padding: 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pets-slider {
|
|
display: flex;
|
|
transition: transform 0.3s ease;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.pet-card {
|
|
min-width: 280px;
|
|
margin-right: 20px;
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: 25px;
|
|
padding: 25px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pet-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
|
|
}
|
|
|
|
.pet-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.pet-avatar {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 35px;
|
|
background: linear-gradient(135deg, #FFE0B2, #FFCC80);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 35px;
|
|
margin-right: 15px;
|
|
position: relative;
|
|
box-shadow: 0 4px 15px rgba(255,138,128,0.3);
|
|
}
|
|
|
|
.status-dot {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 9px;
|
|
background: #4ECDC4;
|
|
border: 3px solid white;
|
|
}
|
|
|
|
.pet-info h3 {
|
|
font-size: 20px;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pet-info p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pet-mood {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.mood-tag {
|
|
background: #E8F5E8;
|
|
color: #4ECDC4;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.pet-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
background: #F8F9FA;
|
|
padding: 12px 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
display: block;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pet-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: #F0F0F0;
|
|
color: #666;
|
|
}
|
|
|
|
.carousel-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 0 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background: rgba(255,255,255,0.3);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dot.active {
|
|
background: white;
|
|
width: 24px;
|
|
}
|
|
|
|
.summary-section {
|
|
background: rgba(255,255,255,0.95);
|
|
margin: 0 20px 20px;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.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, #667eea, #764ba2);
|
|
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;
|
|
}
|
|
|
|
.recent-activities {
|
|
background: rgba(255,255,255,0.95);
|
|
margin: 0 20px 20px;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.floating-actions {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.floating-btn {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 28px;
|
|
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
|
|
color: white;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 20px rgba(255,107,107,0.4);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.floating-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.floating-btn.secondary {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 24px;
|
|
background: rgba(255,255,255,0.9);
|
|
color: #667eea;
|
|
font-size: 16px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.quick-stats {
|
|
background: rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(20px);
|
|
margin: 0 20px 20px;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.quick-stats-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stats-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stat-left {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stat-right {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<h1>🏠 我的宠物家庭</h1>
|
|
<p>3只毛孩子的温馨日常</p>
|
|
</div>
|
|
<div class="add-pet-btn">+</div>
|
|
</div>
|
|
|
|
<div class="pets-carousel">
|
|
<div class="pets-slider">
|
|
<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岁</p>
|
|
<div class="pet-mood">
|
|
<span class="mood-tag">开心</span>
|
|
<span class="mood-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">365</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 secondary">详情</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岁</p>
|
|
<div class="pet-mood">
|
|
<span class="mood-tag">温顺</span>
|
|
<span class="mood-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">1095</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 secondary">详情</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岁</p>
|
|
<div class="pet-mood">
|
|
<span class="mood-tag">安静</span>
|
|
<span class="mood-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">180</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 secondary">详情</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-dots">
|
|
<div class="dot active"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
|
|
<div class="quick-stats">
|
|
<div class="quick-stats-title">📊 家庭概览</div>
|
|
<div class="stats-row">
|
|
<span class="stat-left">总记录数</span>
|
|
<span class="stat-right">190条</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stat-left">本月新增</span>
|
|
<span class="stat-right">23条</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stat-left">待办提醒</span>
|
|
<span class="stat-right">5项</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stat-left">健康状态</span>
|
|
<span class="stat-right">全部良好</span>
|
|
</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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="floating-actions">
|
|
<button class="floating-btn secondary">📊</button>
|
|
<button class="floating-btn secondary">🔔</button>
|
|
<button class="floating-btn">📝</button>
|
|
</div>
|
|
</body>
|
|
</html>
|