一个宠物领养公益平台的首页模板，目标是提升用户领养转化率并增强平台透明度与信任感。网站应包含多个关键模块：1）可领养宠物展示区，支持按品种、年龄、性格筛选，并配有真实照片与简短性格描述；2）清晰可视化的领养流程图，帮助新用户快速理解申请步骤；3）领养者反馈板块，展示真实用户故事与评价，增强说服力；4）志愿者招募与捐助入口，鼓励社区参与；5）地图定位模块，支持根据城市或定位查找附近可领养机构或收容点。整体视觉风格需温暖、亲切，建议使用米黄、浅橙、浅棕等柔和色系搭配柔光阴影，照片使用真实宠物形象，突出眼神交流和亲近感。页面布局应简洁清晰，适配移动端访问，具备基础的 CTA（如"立即领养"、"了解流程"）按钮引导用户行动。
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心宠物领养平台 - 给它们一个温暖的家</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#F5E8C7', // 米黄色
secondary: '#FFA07A', // 浅橙色
tertiary: '#A67C52', // 浅棕色
light: '#FAF6F0', // 更浅的米黄色
dark: '#5D4037', // 深棕色
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.btn-primary {
@apply bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-6 rounded-full transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1;
}
.btn-secondary {
@apply bg-white hover:bg-gray-50 text-tertiary border border-tertiary font-medium py-3 px-6 rounded-full transition-all duration-300 shadow-sm hover:shadow-md;
}
.section-padding {
@apply py-16 md:py-24;
}
.section-title {
@apply text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4 text-center;
}
.section-subtitle {
@apply text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-3xl mx-auto text-center mb-12;
}
}
</style>
</head>
<body class="font-inter bg-light text-gray-800">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<a href="#" class="flex items-center">
<i class="fa fa-paw text-tertiary text-3xl mr-2"></i>
<span class="text-2xl font-bold text-dark">爱宠之家</span>
</a>
<!-- 桌面导航 -->
<nav class="hidden md:flex space-x-8">
<a href="#home" class="font-medium text-dark hover:text-tertiary transition-colors">首页</a>
<a href="#pets" class="font-medium text-dark hover:text-tertiary transition-colors">可领养宠物</a>
<a href="#process" class="font-medium text-dark hover:text-tertiary transition-colors">领养流程</a>
<a href="#stories" class="font-medium text-dark hover:text-tertiary transition-colors">成功故事</a>
<a href="#locations" class="font-medium text-dark hover:text-tertiary transition-colors">领养地点</a>
<a href="#volunteer" class="font-medium text-dark hover:text-tertiary transition-colors">加入我们</a>
</nav>
<!-- 移动端菜单按钮 -->
<button id="menu-toggle" class="md:hidden text-dark text-2xl">
<i class="fa fa-bars"></i>
</button>
<!-- 立即领养按钮 -->
<a href="#pets" class="hidden md:block btn-primary">
立即领养
</a>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
<div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
<a href="#home" class="font-medium text-dark hover:text-tertiary transition-colors py-2">首页</a>
<a href="#pets" class="font-medium text-dark hover:text-tertiary transition-colors py-2">可领养宠物</a>
<a href="#process" class="font-medium text-dark hover:text-tertiary transition-colors py-2">领养流程</a>
<a href="#stories" class="font-medium text-dark hover:text-tertiary transition-colors py-2">成功故事</a>
<a href="#locations" class="font-medium text-dark hover:text-tertiary transition-colors py-2">领养地点</a>
<a href="#volunteer" class="font-medium text-dark hover:text-tertiary transition-colors py-2">加入我们</a>
<a href="#pets" class="btn-primary text-center">
立即领养
</a>
</div>
</div>
</header>
<!-- 英雄区域 -->
<section id="home" class="pt-28 pb-16 md:pt-40 md:pb-24 bg-gradient-to-br from-primary/30 to-light relative overflow-hidden">
<div class="absolute top-0 right-0 w-full h-full bg-[url('https://picsum.photos/id/1025/1200/800')] bg-cover bg-center opacity-10"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-dark leading-tight text-shadow mb-6">
给它们一个<br>温暖的家
</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-700 mb-8 max-w-lg">
每一个生命都值得被爱。在爱宠之家，我们致力于为流浪的猫咪和狗狗寻找永久的家，同时帮助您找到最适合的伴侣。
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pets" class="btn-primary text-center">
<i class="fa fa-heart mr-2"></i> 寻找我的毛孩子
</a>
<a href="#process" class="btn-secondary text-center">
<i class="fa fa-info-circle mr-2"></i> 了解领养流程
</a>
</div>
<div class="flex items-center mt-10 space-x-6">
<div class="flex -space-x-2">
<img src="https://picsum.photos/id/64/100/100" alt="领养人照片" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://picsum.photos/id/65/100/100" alt="领养人照片" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://picsum.photos/id/66/100/100" alt="领养人照片" class="w-10 h-10 rounded-full border-2 border-white">
</div>
<p class="text-sm text-gray-600">
<span class="font-semibold text-tertiary">500+</span> 宠物已找到新家
</p>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform md:rotate-2 hover:rotate-0 transition-transform duration-500">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/70cb610edcc8459481e000c7d1f1dd62~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370349&x-signature=jmJazsyE0LgkbvzhpxWgPMQ6Sws%3D" alt="等待领养的宠物" class="w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
<p class="text-white font-medium text-lg">每一只宠物都值得被温柔以待</p>
</div>
</div>
<div class="absolute -bottom-6 -left-6 w-40 h-40 bg-secondary/30 rounded-full blur-2xl -z-10"></div>
<div class="absolute -top-6 -right-6 w-40 h-40 bg-tertiary/20 rounded-full blur-2xl -z-10"></div>
</div>
</div>
</div>
</section>
<!-- 可领养宠物展示区 -->
<section id="pets" class="section-padding bg-white">
<div class="container mx-auto px-4">
<h2 class="section-title">等待领养的毛孩子</h2>
<p class="section-subtitle">
浏览我们的可领养宠物列表，找到您的完美伴侣。每只宠物都经过健康检查和疫苗接种，期待着一个充满爱的家。
</p>
<!-- 筛选器 -->
<div class="mb-10 bg-light rounded-xl p-6 shadow-sm">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1">
<label class="block text-gray-700 font-medium mb-2">宠物类型</label>
<select class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-tertiary/50 focus:border-tertiary">
<option value="">全部</option>
<option value="dog">狗狗</option>
<option value="cat">猫咪</option>
</select>
</div>
<div class="flex-1">
<label class="block text-gray-700 font-medium mb-2">年龄</label>
<select class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-tertiary/50 focus:border-tertiary">
<option value="">全部</option>
<option value="baby">幼年</option>
<option value="young">青年</option>
<option value="adult">成年</option>
<option value="senior">老年</option>
</select>
</div>
<div class="flex-1">
<label class="block text-gray-700 font-medium mb-2">性格</label>
<select class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-tertiary/50 focus:border-tertiary">
<option value="">全部</option>
<option value="playful">活泼好动</option>
<option value="calm">安静温顺</option>
<option value="friendly">友好亲人</option>
<option value="independent">独立自主</option>
</select>
</div>
<div class="flex items-end">
<button class="w-full md:w-auto btn-primary">
<i class="fa fa-search mr-2"></i> 筛选
</button>
</div>
</div>
</div>
<!-- 宠物卡片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- 宠物卡片 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/23654b4de74d408e81839d8411939c35~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370213&x-signature=iJgqcQCAgf%2F5FqAWb1EdhCIps0M%3D" alt="金毛犬" class="w-full h-64 object-cover">
<div class="absolute top-4 left-4 bg-secondary text-white text-sm font-medium py-1 px-3 rounded-full">
狗狗
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<h3 class="text-xl font-bold text-dark">金金</h3>
<span class="text-sm text-gray-600">1岁</span>
</div>
<p class="text-gray-600 mb-4">金金是一只活泼开朗的金毛犬，非常友好，喜欢和人互动，适合有孩子的家庭。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">友善</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">活泼</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">聪明</span>
</div>
<a href="#" class="block w-full text-center py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
申请领养
</a>
</div>
</div>
<!-- 宠物卡片 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/10596a60e6fd431290b8f4764d2d086c~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370259&x-signature=byWql7HGh4e6S%2FZicArjmtHAIaw%3D" alt="橘猫" class="w-full h-64 object-cover">
<div class="absolute top-4 left-4 bg-secondary text-white text-sm font-medium py-1 px-3 rounded-full">
猫咪
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<h3 class="text-xl font-bold text-dark">米米</h3>
<span class="text-sm text-gray-600">2岁</span>
</div>
<p class="text-gray-600 mb-4">米米是一只温顺的波斯猫，喜欢安静的环境，偶尔会撒娇，适合独居或安静的家庭。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">温顺</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">独立</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">粘人</span>
</div>
<a href="#" class="block w-full text-center py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
申请领养
</a>
</div>
</div>
<!-- 宠物卡片 3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/e2aa792674c843c9be1f48cf123baf6b~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370288&x-signature=ONm%2BGHHpPhVK4kNwrigJIft7WVs%3D" alt="拉布拉多" class="w-full h-64 object-cover">
<div class="absolute top-4 left-4 bg-secondary text-white text-sm font-medium py-1 px-3 rounded-full">
狗狗
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<h3 class="text-xl font-bold text-dark">多多</h3>
<span class="text-sm text-gray-600">3岁</span>
</div>
<p class="text-gray-600 mb-4">多多是一只训练有素的拉布拉多，非常聪明，已经学会了很多指令，适合有经验的主人。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">聪明</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">听话</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">温顺</span>
</div>
<a href="#" class="block w-full text-center py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
申请领养
</a>
</div>
</div>
<!-- 宠物卡片 4 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/0921f5ff476f4c488966147d52d8a925~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370312&x-signature=za3WUTvA80kgvGzT%2B13rGqIbzfA%3D" alt="布偶猫" class="w-full h-64 object-cover">
<div class="absolute top-4 left-4 bg-secondary text-white text-sm font-medium py-1 px-3 rounded-full">
猫咪
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<h3 class="text-xl font-bold text-dark">布布</h3>
<span class="text-sm text-gray-600">1岁</span>
</div>
<p class="text-gray-600 mb-4">
布布是一只漂亮的布偶猫，毛发柔软，性格温顺，喜欢被人抚摸，是理想的伴侣猫。
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">漂亮</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">温顺</span>
<span class="text-xs bg-primary/50 text-tertiary py-1 px-2 rounded-full">亲人</span>
</div>
<a href="#" class="block w-full text-center py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
申请领养
</a>
</div>
</div>
</div>
<!-- 查看更多按钮 -->
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center text-tertiary font-medium hover:text-tertiary/80 transition-colors">
查看更多宠物 <i class="fa fa-long-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- 领养流程 -->
<section id="process" class="section-padding bg-primary/20">
<div class="container mx-auto px-4">
<h2 class="section-title">领养流程</h2>
<p class="section-subtitle">
领养一只宠物是一项长期的承诺，我们希望确保每只宠物都能找到最适合它们的家。以下是我们的领养流程：
</p>
<div class="relative">
<!-- 连接线 -->
<div class="hidden md:block absolute left-1/2 top-1/4 bottom-1/4 w-1 bg-tertiary/30 transform -translate-x-1/2"></div>
<!-- 步骤列表 -->
<div class="space-y-12 md:space-y-24 relative">
<!-- 步骤 1 -->
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
<h3 class="text-xl font-bold text-dark mb-3">浏览与选择</h3>
<p class="text-gray-600">
浏览我们网站上的可领养宠物，根据您的生活方式和偏好选择合适的伴侣。每只宠物都有详细的介绍和照片。
</p>
</div>
<div class="flex items-center justify-center w-16 h-16 bg-tertiary text-white rounded-full text-2xl font-bold mb-8 md:mb-0 z-10">
1
</div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-white p-6 rounded-xl shadow-md">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/b6f2dbf8bffd45239fe49477abead799~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370164&x-signature=PBZd%2Fk2YHdJyeTJlS0wVgRH7FDw%3D" alt="浏览宠物" class="w-full h-48 object-cover rounded-lg mb-4">
<p class="text-gray-700 text-sm italic">在我们的网站上轻松找到您心仪的毛孩子</p>
</div>
</div>
</div>
<!-- 步骤 2 -->
<div class="flex flex-col md:flex-row-reverse items-center">
<div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 md:text-left">
<h3 class="text-xl font-bold text-dark mb-3">提交申请</h3>
<p class="text-gray-600">
填写领养申请表，提供您的个人信息、居住环境和生活方式等资料，帮助我们评估您是否适合领养该宠物。
</p>
</div>
<div class="flex items-center justify-center w-16 h-16 bg-tertiary text-white rounded-full text-2xl font-bold mb-8 md:mb-0 z-10">
2
</div>
<div class="md:w-1/2 md:pr-12">
<div class="bg-white p-6 rounded-xl shadow-md">
<img src="https://picsum.photos/id/180/600/400" alt="提交申请" class="w-full h-48 object-cover rounded-lg mb-4">
<p class="text-gray-700 text-sm italic">填写详细的申请表，帮助我们了解您的情况</p>
</div>
</div>
</div>
<!-- 步骤 3 -->
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
<h3 class="text-xl font-bold text-dark mb-3">面谈与家访</h3>
<p class="text-gray-600">
我们会安排与您的面谈，进一步了解您的需求和期望，并可能进行家访，确保您的居住环境适合宠物生活。
</p>
</div>
<div class="flex items-center justify-center w-16 h-16 bg-tertiary text-white rounded-full text-2xl font-bold mb-8 md:mb-0 z-10">
3
</div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-white p-6 rounded-xl shadow-md">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/11846e23f65d4dbf99dcc5ce4269b672~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370128&x-signature=cX%2FTW4zNffWBLFkejrCtlvrYkcM%3D" alt="面谈与家访" class="w-full h-48 object-cover rounded-lg mb-4">
<p class="text-gray-700 text-sm italic">我们会确保您的家庭环境适合宠物生活</p>
</div>
</div>
</div>
<!-- 步骤 4 -->
<div class="flex flex-col md:flex-row-reverse items-center">
<div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 md:text-left">
<h3 class="text-xl font-bold text-dark mb-3">签约与接领</h3>
<p class="text-gray-600">
如果申请通过，您将签署领养协议并支付少量领养费用（用于宠物医疗和护理），然后就可以将您的新伙伴带回家了。
</p>
</div>
<div class="flex items-center justify-center w-16 h-16 bg-tertiary text-white rounded-full text-2xl font-bold mb-8 md:mb-0 z-10">
4
</div>
<div class="md:w-1/2 md:pr-12">
<div class="bg-white p-6 rounded-xl shadow-md">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/e50c0f208ae74b84a82ff7e9f71c3226~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370100&x-signature=ph0z3J%2FJOHJAkUm0aWZoe3ZCW5U%3D" alt="签约与接领" class="w-full h-48 object-cover rounded-lg mb-4">
<p class="text-gray-700 text-sm italic">签署领养协议，开启幸福生活</p>
</div>
</div>
</div>
</div>
</div>
<!-- 开始领养按钮 -->
<div class="text-center mt-16">
<a href="#pets" class="btn-primary">
<i class="fa fa-heart mr-2"></i> 开始领养之旅
</a>
</div>
</div>
</section>
<!-- 领养者反馈 -->
<section id="stories" class="section-padding bg-white">
<div class="container mx-auto px-4">
<h2 class="section-title">成功故事</h2>
<p class="section-subtitle">
每一个领养故事都是独特的。看看这些宠物如何在新家庭中幸福生活，以及领养如何改变了他们的主人的生活。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 故事卡片 1 -->
<div class="bg-light rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/e6020c0b1a0e4b2290e541fffeed58c9~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751369976&x-signature=xQwNVxJJCsGFQbCZch%2FVnGZ%2BjxY%3D" alt="领养故事照片" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/a87728932fb6447a9e4676c638e433ea~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751369953&x-signature=ld0XWo2fVXR3sdJzeU2hDBaWbgk%3D" alt="领养者照片" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-dark">李先生和小金</h4>
<p class="text-sm text-gray-500">领养于 2023年5月</p>
</div>
</div>
<p class="text-gray-600 mb-4">
"领养小金是我做过的最好的决定之一。他不仅给我的生活带来了无尽的欢乐，还让我每天都有了运动的动力。他是如此的友善和聪明，已经成为了家庭中不可或缺的一员。"
</p>
<div class="flex items-center text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span class="ml-2 text-gray-600 text-sm">5.0</span>
</div>
</div>
</div>
<!-- 故事卡片 2 -->
<div class="bg-light rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/84f0fd0d3d1946aaa7f0714274fe8c8f~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370031&x-signature=GGQVQWvc2C%2Fuwthc9h8WWEDq%2BXo%3D" alt="领养故事照片" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/65/100/100" alt="领养者照片" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-dark">王女士和阿橘</h4>
<p class="text-sm text-gray-500">领养于 2023年8月</p>
</div>
</div>
<p class="text-gray-600 mb-4">
"作为一个独居的上班族，阿橘给我的生活带来了很多温暖。每天下班回家，他都会在门口等我，让我不再感到孤单。他的性格很温顺，非常适合我的生活方式。"
</p>
<div class="flex items-center text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<span class="ml-2 text-gray-600 text-sm">4.5</span>
</div>
</div>
</div>
<!-- 故事卡片 3 -->
<div class="bg-light rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/42fb62f728d94484bf0177ce36498d2a~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751370075&x-signature=iSP6GpUuYR6KUwGYIV9mB53NZyY%3D" alt="领养故事照片" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/66/100/100" alt="领养者照片" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-dark">张先生一家和拉拉</h4>
<p class="text-sm text-gray-500">领养于 2023年10月</p>
</div>
</div>
<p class="text-gray-600 mb-4">
"拉拉是我们家的开心果，孩子们都非常喜欢他。他很有耐心，对孩子们非常友好，成为了孩子们最好的伙伴。领养过程很顺利，平台的工作人员给了我们很多有用的建议。"
</p>
<div class="flex items-center text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span class="ml-2 text-gray-600 text-sm">5.0</span>
</div>
</div>
</div>
</div>
<!-- 分享故事按钮 -->
<div class="text-center mt-12">
<a href="#" class="btn-secondary">
<i class="fa fa-share-alt mr-2"></i> 分享你的故事
</a>
</div>
</div>
</section>
<!-- 数据统计 -->
<section class="py-16 bg-tertiary/10">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-tertiary mb-2" id="counter-pets">500+</div>
<p class="text-gray-700">成功领养的宠物</p>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-tertiary mb-2" id="counter-families">300+</div>
<p class="text-gray-700">幸福的领养家庭</p>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-tertiary mb-2" id="counter-volunteers">100+</div>
<p class="text-gray-700">爱心志愿者</p>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-tertiary mb-2" id="counter-donations">¥200,000+</div>
<p class="text-gray-700">爱心捐款</p>
</div>
</div>
</div>
</section>
<!-- 地图定位模块 -->
<section id="locations" class="section-padding bg-white">
<div class="container mx-auto px-4">
<h2 class="section-title">领养地点</h2>
<p class="section-subtitle">
查找附近的领养中心和志愿者活动地点，我们的团队随时准备帮助您找到理想的伴侣。
</p>
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/3">
<div class="bg-light rounded-xl p-6 shadow-md h-full">
<h3 class="text-xl font-bold text-dark mb-4">选择城市</h3>
<div class="mb-6">
<input type="text" placeholder="输入城市名称" class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-tertiary/50 focus:border-tertiary">
</div>
<h3 class="text-xl font-bold text-dark mb-4">附近的领养中心</h3>
<div class="space-y-4 max-h-[400px] overflow-y-auto pr-2">
<!-- 领养中心 1 -->
<div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
<h4 class="font-bold text-dark mb-1">爱宠之家北京中心</h4>
<p class="text-gray-600 text-sm mb-2">北京市朝阳区建国路88号</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-phone mr-2"></i> 010-12345678
<span class="mx-2">|</span>
<i class="fa fa-clock-o mr-2"></i> 周一至周日 10:00-18:00
</div>
</div>
<!-- 领养中心 2 -->
<div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
<h4 class="font-bold text-dark mb-1">爱宠之家上海中心</h4>
<p class="text-gray-600 text-sm mb-2">上海市徐汇区淮海中路1200号</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-phone mr-2"></i> 021-23456789
<span class="mx-2">|</span>
<i class="fa fa-clock-o mr-2"></i> 周一至周日 10:00-18:00
</div>
</div>
<!-- 领养中心 3 -->
<div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
<h4 class="font-bold text-dark mb-1">爱宠之家广州中心</h4>
<p class="text-gray-600 text-sm mb-2">广州市天河区天河路385号</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-phone mr-2"></i> 020-34567890
<span class="mx-2">|</span>
<i class="fa fa-clock-o mr-2"></i> 周一至周日 10:00-18:00
</div>
</div>
<!-- 领养中心 4 -->
<div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
<h4 class="font-bold text-dark mb-1">爱宠之家深圳中心</h4>
<p class="text-gray-600 text-sm mb-2">深圳市南山区科技园南区8栋</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-phone mr-2"></i> 0755-45678901
<span class="mx-2">|</span>
<i class="fa fa-clock-o mr-2"></i> 周一至周日 10:00-18:00
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-2/3">
<div class="bg-light rounded-xl overflow-hidden shadow-md h-[500px] relative">
<!-- 地图占位 -->
<div class="w-full h-full bg-primary/20 flex items-center justify-center">
<div class="text-center">
<i class="fa fa-map-marker text-5xl text-tertiary mb-4"></i>
<p class="text-gray-600">地图将在这里显示</p>
<p class="text-gray-500 text-sm mt-2">选择城市后，将显示附近的领养中心位置</p>
</div>
</div>
<!-- 地图标记示例 -->
<div class="absolute top-1/4 left-1/3 transform -translate-x-1/2 -translate-y-1/2">
<div class="bg-tertiary text-white text-xs font-bold py-1 px-2 rounded shadow-md">
北京中心
</div>
<div class="w-4 h-4 bg-tertiary rounded-full mt-1 mx-auto relative">
<div class="absolute inset-0 bg-white rounded-full animate-ping"></div>
</div>
</div>
<div class="absolute top-1/2 left-2/3 transform -translate-x-1/2 -translate-y-1/2">
<div class="bg-tertiary text-white text-xs font-bold py-1 px-2 rounded shadow-md">
上海中心
</div>
<div class="w-4 h-4 bg-tertiary rounded-full mt-1 mx-auto relative">
<div class="absolute inset-0 bg-white rounded-full animate-ping"></div>
</div>
</div>
<div class="absolute bottom-1/4 right-1/3 transform -translate-x-1/2 -translate-y-1/2">
<div class="bg-tertiary text-white text-xs font-bold py-1 px-2 rounded shadow-md">
广州中心
</div>
<div class="w-4 h-4 bg-tertiary rounded-full mt-1 mx-auto relative">
<div class="absolute inset-0 bg-white rounded-full animate-ping"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 志愿者招募与捐助 -->
<section id="volunteer" class="section-padding bg-gradient-to-br from-tertiary/20 to-primary/30">
<div class="container mx-auto px-4">
<h2 class="section-title">加入我们</h2>
<p class="section-subtitle">
除了领养，您还可以通过其他方式帮助这些可爱的生命。无论是成为志愿者还是捐款，每一份爱心都能改变它们的命运。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 志愿者招募 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://picsum.photos/id/1060/600/400" alt="志愿者活动" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
<div class="p-6">
<h3 class="text-2xl font-bold text-white mb-2">成为志愿者</h3>
<p class="text-white/80">帮助照顾和关爱这些需要帮助的宠物</p>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">
作为志愿者，您可以参与到宠物照顾、活动组织、领养宣传等工作中。无论您是有经验的宠物爱好者还是新手，我们都欢迎您的加入。
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fa fa-check-circle text-tertiary mt-1 mr-2"></i>
<span class="text-gray-700">灵活的志愿者时间安排</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-tertiary mt-1 mr-2"></i>
<span class="text-gray-700">专业的培训和指导</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-tertiary mt-1 mr-2"></i>
<span class="text-gray-700">与志同道合的人一起工作</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-tertiary mt-1 mr-2"></i>
<span class="text-gray-700">获得志愿者证书和推荐信</span>
</li>
</ul>
<a href="#" class="block w-full text-center py-3 px-4 bg-tertiary hover:bg-tertiary/90 text-white font-medium rounded-lg transition-colors">
立即报名
</a>
</div>
</div>
<!-- 捐款支持 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
<div class="relative">
<img src="https://picsum.photos/id/1062/600/400" alt="捐款支持" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
<div class="p-6">
<h3 class="text-2xl font-bold text-white mb-2">捐款支持</h3>
<p class="text-white/80">您的捐款将用于宠物医疗和生活费用</p>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">
您的捐款将直接用于宠物的食物、医疗和生活环境改善。每一笔捐款都能帮助我们为更多的流浪动物提供帮助。
</p>
<!-- 捐款进度 -->
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium text-dark">本月目标：¥50,000</span>
<span class="font-medium text-tertiary">已筹：¥32,500 (65%)</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-tertiary h-3 rounded-full" style="width: 65%"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<button class="py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
¥50
</button>
<button class="py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
¥100
</button>
<button class="py-3 px-4 bg-primary hover:bg-primary/90 text-tertiary font-medium rounded-lg transition-colors">
¥200
</button>
</div>
<a href="#" class="block w-full text-center py-3 px-4 bg-tertiary hover:bg-tertiary/90 text-white font-medium rounded-lg transition-colors">
其他金额
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 订阅通讯 -->
<section class="py-16 bg-tertiary/10">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold text-dark mb-4">订阅我们的通讯</h2>
<p class="text-gray-600 mb-8">
获取最新的宠物领养信息、活动通知和养宠小贴士，成为我们社区的一员。
</p>
<form class="flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="输入您的邮箱地址" class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-tertiary/50 focus:border-tertiary">
<button type="submit" class="btn-primary whitespace-nowrap">
<i class="fa fa-paper-plane mr-2"></i> 立即订阅
</button>
</form>
<p class="text-gray-500 text-sm mt-4">
我们尊重您的隐私，不会向第三方分享您的信息。
</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center mb-6">
<i class="fa fa-paw text-secondary text-3xl mr-2"></i>
<span class="text-2xl font-bold">爱宠之家</span>
</div>
<p class="text-gray-400 mb-6">
我们致力于为每一只流浪宠物找到温暖的家，同时帮助人们找到最适合的伴侣。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-secondary transition-colors">
<i class="fa fa-weixin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-secondary transition-colors">
<i class="fa fa-weibo text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-secondary transition-colors">
<i class="fa fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-secondary transition-colors">
<i class="fa fa-youtube-play text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-6">快速链接</h3>
<ul class="space-y-3">
<li><a href="#home" class="text-gray-400 hover:text-secondary transition-colors">首页</a></li>
<li><a href="#pets" class="text-gray-400 hover:text-secondary transition-colors">可领养宠物</a></li>
<li><a href="#process" class="text-gray-400 hover:text-secondary transition-colors">领养流程</a></li>
<li><a href="#stories" class="text-gray-400 hover:text-secondary transition-colors">成功故事</a></li>
<li><a href="#locations" class="text-gray-400 hover:text-secondary transition-colors">领养地点</a></li>
<li><a href="#volunteer" class="text-gray-400 hover:text-secondary transition-colors">加入我们</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-6">联系方式</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fa fa-map-marker text-secondary mt-1 mr-3"></i>
<span class="text-gray-400">北京市朝阳区建国路88号爱宠大厦</span>
</li>
<li class="flex items-start">
<i class="fa fa-phone text-secondary mt-1 mr-3"></i>
<span class="text-gray-400">010-12345678</span>
</li>
<li class="flex items-start">
<i class="fa fa-envelope text-secondary mt-1 mr-3"></i>
<span class="text-gray-400">contact@petlove.com</span>
</li>
<li class="flex items-start">
<i class="fa fa-clock-o text-secondary mt-1 mr-3"></i>
<span class="text-gray-400">周一至周日 10:00-18:00</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-6">下载我们的应用</h3>
<p class="text-gray-400 mb-4">
随时随地浏览可领养宠物，提交申请，获取最新动态。
</p>
<div class="flex flex-col space-y-3">
<a href="#" class="bg-gray-800 hover:bg-gray-700 transition-colors p-3 rounded-lg flex items-center">
<i class="fa fa-apple text-2xl mr-3"></i>
<div>
<div class="text-xs">下载</div>
<div class="font-medium">App Store</div>
</div>
</a>
<a href="#" class="bg-gray-800 hover:bg-gray-700 transition-colors p-3 rounded-lg flex items-center">
<i class="fa fa-android text-2xl mr-3"></i>
<div>
<div class="text-xs">下载</div>
<div class="font-medium">Google Play</div>
</div>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
© 2025 爱宠之家 版权所有 | 京ICP备12345678号
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">隐私政策</a>
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">使用条款</a>
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">Cookie政策</a>
</div>
</div>
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-tertiary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-tertiary/90">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.classList.add('bg-white', 'shadow-md');
navbar.classList.remove('py-4');
navbar.classList.add('py-2');
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
navbar.classList.remove('bg-white', 'shadow-md');
navbar.classList.remove('py-2');
navbar.classList.add('py-4');
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
// 移动端菜单
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
if (mobileMenu.classList.contains('hidden')) {
menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
} else {
menuToggle.innerHTML = '<i class="fa fa-times"></i>';
}
});
// 回到顶部
backToTop.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// 关闭移动菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
}
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// 数字动画
function animateValue(id, start, end, duration) {
const obj = document.getElementById(id);
if (!obj) return;
let startTime = null;
const step = timestamp => {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const value = Math.floor(progress * (end - start) + start);
if (id === 'counter-donations') {
obj.innerHTML = '¥' + value.toLocaleString() + '+';
} else {
obj.innerHTML = value + '+';
}
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 检查元素是否在视口中
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// 滚动时检查并触发动画
let animationTriggered = false;
window.addEventListener('scroll', function() {
if (!animationTriggered && isInViewport(document.getElementById('counter-pets'))) {
animationTriggered = true;
animateValue('counter-pets', 0, 500, 2000);
animateValue('counter-families', 0, 300, 2000);
animateValue('counter-volunteers', 0, 100, 2000);
animateValue('counter-donations', 0, 200000, 2000);
}
});
</script>
</body></html>