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>
|