536 lines
28 KiB
HTML
536 lines
28 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>动物认领 - 结伴客</title>
|
||
<meta name="description" content="认领可爱的动物，体验农场生活，与动物建立深厚的情感纽带。结伴客提供安全可靠的动物认领平台。">
|
||
<meta name="keywords" content="动物认领, 农场动物, 宠物认领, 动物互动, 农场体验">
|
||
|
||
<!-- CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<link href="css/animal.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||
<div class="container">
|
||
<!-- 添加Logo -->
|
||
<a class="navbar-brand" href="index.html">
|
||
<img src="images/logo.png" alt="结伴客 Logo" width="30" height="30" class="d-inline-block align-top me-2">
|
||
<i class="fa fa-map-marker-alt me-2"></i>结伴客
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="index.html">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">关于我们</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="travel.html">旅行结伴</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="animal.html">动物认领</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="flower.html">送花服务</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="reward.html">推广奖励</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="case.html">成功案例</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="merchant/">商家合作</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="contact.html">联系我们</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 动物认领横幅 -->
|
||
<section class="hero-section animal-hero">
|
||
<div class="container text-center position-relative">
|
||
<h1 class="display-2 fw-bold mb-4">动物认领</h1>
|
||
<p class="lead mb-5 fs-4">认领可爱的动物，体验农场生活<br>与动物建立深厚的情感纽带</p>
|
||
<a href="#animals" class="btn btn-light btn-lg btn-rounded me-3">查看可认领动物</a>
|
||
<a href="#process" class="btn btn-outline-light btn-lg btn-rounded">了解认领流程</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务介绍 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">为什么选择动物认领</h2>
|
||
<p class="lead">结伴客为您提供独特的动物认领体验</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 mb-4">
|
||
<div class="feature-box">
|
||
<div class="feature-icon">
|
||
<i class="fa fa-heart"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">情感连接</h3>
|
||
<p class="text-muted">与动物建立深厚的情感联系，体验无与伦比的陪伴与温暖。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="feature-box">
|
||
<div class="feature-icon">
|
||
<i class="fa fa-leaf"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">生态体验</h3>
|
||
<p class="text-muted">亲身参与动物照料，了解生态循环，体验绿色农场生活。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="feature-box">
|
||
<div class="feature-icon">
|
||
<i class="fa fa-sync-alt"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">持续互动</h3>
|
||
<p class="text-muted">定期更新动物状态，通过照片和视频了解动物近况。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 动物分类 -->
|
||
<section class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">动物分类</h2>
|
||
<p class="lead">选择您喜欢的动物类型</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-3 mb-4">
|
||
<div class="category-card">
|
||
<div class="category-icon">
|
||
<i class="fa fa-paw"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">小型哺乳动物</h3>
|
||
<p class="text-muted small">兔子、小羊、小猪等温顺可爱的动物</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="category-card">
|
||
<div class="category-icon">
|
||
<i class="fa fa-feather"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">禽类</h3>
|
||
<p class="text-muted small">鸡、鸭、鹅等家禽，体验收获新鲜蛋类</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="category-card">
|
||
<div class="category-icon">
|
||
<i class="fa fa-fish"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">水产类</h3>
|
||
<p class="text-muted small">鱼类、虾类等水产，体验水塘养殖乐趣</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="category-card">
|
||
<div class="category-icon">
|
||
<i class="fa fa-tree"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">特殊项目</h3>
|
||
<p class="text-muted small">蜜蜂、蚕等特殊养殖项目，体验不同乐趣</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 可认领动物列表 -->
|
||
<section id="animals" class="py-5">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">可认领动物</h2>
|
||
<p class="lead">查看当前可认领的可爱动物</p>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="animal-filter">
|
||
<h4 class="filter-title">筛选条件</h4>
|
||
<div class="row">
|
||
<div class="col-md-3 mb-3">
|
||
<select class="form-select">
|
||
<option selected>动物类型</option>
|
||
<option>兔子</option>
|
||
<option>小羊</option>
|
||
<option>小猪</option>
|
||
<option>鸡</option>
|
||
<option>鸭</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<select class="form-select">
|
||
<option selected>年龄</option>
|
||
<option>幼年 (0-6个月)</option>
|
||
<option>青年 (6个月-2岁)</option>
|
||
<option>成年 (2岁以上)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<select class="form-select">
|
||
<option selected>农场</option>
|
||
<option>绿野农场</option>
|
||
<option>阳光牧场</option>
|
||
<option>田园农庄</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<button class="btn btn-primary w-100">筛选</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row" id="animals-container">
|
||
<!-- 动物卡片将通过JS动态加载 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card animal-card h-100">
|
||
<img src="images/sheep1.svg" class="card-img-top" alt="小羊">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<h5 class="card-title">小羊咩咩</h5>
|
||
<span class="badge bg-success">可认领</span>
|
||
</div>
|
||
<p class="card-text">品种：绵羊<br>年龄：6个月<br>性格：温顺可爱，喜欢与人亲近</p>
|
||
<div class="animal-stats">
|
||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 98%满意度</span>
|
||
<span class="stat-item"><i class="fa fa-user-friends"></i> 12位认领者</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">农场：绿野农场</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card animal-card h-100">
|
||
<img src="images/rabbit1.svg" class="card-img-top" alt="小兔">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<h5 class="card-title">小白兔</h5>
|
||
<span class="badge bg-warning text-dark">已被认领</span>
|
||
</div>
|
||
<p class="card-text">品种：荷兰兔<br>年龄：4个月<br>性格：活泼好动，好奇心强</p>
|
||
<div class="animal-stats">
|
||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 95%满意度</span>
|
||
<span class="stat-item"><i class="fa fa-user-friends"></i> 8位认领者</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">农场：阳光牧场</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card animal-card h-100">
|
||
<img src="images/chicken1.svg" class="card-img-top" alt="小鸡">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between">
|
||
<h5 class="card-title">小花鸡</h5>
|
||
<span class="badge bg-success">可认领</span>
|
||
</div>
|
||
<p class="card-text">品种：芦花鸡<br>年龄：3个月<br>性格：聪明机警，产蛋量高</p>
|
||
<div class="animal-stats">
|
||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 92%满意度</span>
|
||
<span class="stat-item"><i class="fa fa-user-friends"></i> 5位认领者</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">农场：田园农庄</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center mt-4">
|
||
<button class="btn btn-outline-primary btn-lg">查看更多动物</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 认领流程 -->
|
||
<section id="process" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">认领流程</h2>
|
||
<p class="lead">简单几步，拥有属于您的动物伙伴</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-3 mb-4">
|
||
<div class="text-center">
|
||
<div class="step-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||
<i class="fa fa-search"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">1. 选择动物</h3>
|
||
<p class="text-muted">浏览可认领动物，选择您喜欢的动物伙伴</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="text-center">
|
||
<div class="step-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||
<i class="fa fa-file-contract"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">2. 签订协议</h3>
|
||
<p class="text-muted">在线签订认领协议，明确双方权利义务</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="text-center">
|
||
<div class="step-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||
<i class="fa fa-credit-card"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">3. 支付认领费</h3>
|
||
<p class="text-muted">支付一次性认领费和年度养护费用</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="text-center">
|
||
<div class="step-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||
<i class="fa fa-sync-alt"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">4. 持续互动</h3>
|
||
<p class="text-muted">定期获取动物近况，可实地探访互动</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 成功案例 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">认领成功案例</h2>
|
||
<p class="lead">看看其他用户与动物的美好故事</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100">
|
||
<img src="images/animal-case1.svg" class="card-img-top" alt="小羊认领">
|
||
<div class="card-body">
|
||
<h5 class="card-title">小羊咩咩的成长故事</h5>
|
||
<p class="card-text">来自北京的李女士认领了这只小羊，每月都会收到小羊的成长照片和视频，还专程到农场探访。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">认领者: 李女士</small>
|
||
<span class="badge bg-success">已认领8个月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100">
|
||
<img src="images/animal-case2.svg" class="card-img-top" alt="兔子认领">
|
||
<div class="card-body">
|
||
<h5 class="card-title">小白兔的温馨时光</h5>
|
||
<p class="card-text">上海的王先生为孩子认领了这只兔子，让孩子学会关爱动物，体验生命教育。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">认领者: 王先生</small>
|
||
<span class="badge bg-success">已认领1年</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100">
|
||
<img src="images/animal-case3.svg" class="card-img-top" alt="鸡认领">
|
||
<div class="card-body">
|
||
<h5 class="card-title">田园生活的开始</h5>
|
||
<p class="card-text">广州的张女士认领了一群鸡，不仅收获新鲜鸡蛋，还体验了乡村田园生活。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">认领者: 张女士</small>
|
||
<span class="badge bg-success">已认领6个月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold section-title">常见问题</h2>
|
||
<p class="lead">关于动物认领，您可能有以下疑问</p>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="accordion" id="faqAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="faq1">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
|
||
认领动物需要支付哪些费用？
|
||
</button>
|
||
</h2>
|
||
<div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
认领动物需要支付一次性认领费和年度养护费。认领费根据动物种类和年龄确定，年度养护费用于动物的日常照料、医疗和农场维护。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="faq2">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
|
||
如何了解认领动物的近况？
|
||
</button>
|
||
</h2>
|
||
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们会定期通过APP或微信推送动物的照片、视频和健康状况报告。认领者还可以预约实地探访，与动物亲密互动。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="faq3">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
|
||
如果我无法继续认领怎么办？
|
||
</button>
|
||
</h2>
|
||
<div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
如果因特殊原因无法继续认领，可以申请转让给其他用户或由农场接管。已支付的费用根据情况部分退还或转为捐赠。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="faq4">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
|
||
动物的健康和安全如何保障？
|
||
</button>
|
||
</h2>
|
||
<div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
合作农场均具备专业资质，配备专职兽医和饲养员。所有动物都定期体检和疫苗接种，确保健康安全。平台对农场进行定期检查和评估。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-4">
|
||
<h5 class="mb-4">
|
||
<i class="fa fa-map-marker-alt me-2"></i>结伴客
|
||
</h5>
|
||
<p>专注于结伴旅行活动的平台，包含独特的动物认领功能。</p>
|
||
<div class="d-flex">
|
||
<a href="#" class="social-icon me-2">
|
||
<i class="fab fa-weixin"></i>
|
||
</a>
|
||
<a href="#" class="social-icon me-2">
|
||
<i class="fab fa-weibo"></i>
|
||
</a>
|
||
<a href="#" class="social-icon">
|
||
<i class="fab fa-qq"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 mb-4">
|
||
<h5 class="mb-4">产品</h5>
|
||
<ul class="list-unstyled">
|
||
<li><a href="travel.html" class="d-block py-1">旅行结伴</a></li>
|
||
<li><a href="animal.html" class="d-block py-1">动物认领</a></li>
|
||
<li><a href="flower.html" class="d-block py-1">送花服务</a></li>
|
||
<li><a href="reward.html" class="d-block py-1">推广奖励</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-2 mb-4">
|
||
<h5 class="mb-4">关于</h5>
|
||
<ul class="list-unstyled">
|
||
<li><a href="about.html" class="d-block py-1">关于我们</a></li>
|
||
<li><a href="case.html" class="d-block py-1">成功案例</a></li>
|
||
<li><a href="merchant/" class="d-block py-1">商家合作</a></li>
|
||
<li><a href="contact.html" class="d-block py-1">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<h5 class="mb-4">联系我们</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="d-flex align-items-start mb-3">
|
||
<i class="fa fa-envelope me-2 mt-1"></i>
|
||
<span>master@gaohaotech.com</span>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<i class="fa fa-phone me-2 mt-1"></i>
|
||
<div>
|
||
<div>郑经理 15927219038</div>
|
||
<div>杜经理 13871378634</div>
|
||
</div>
|
||
</li>
|
||
<li class="d-flex align-items-start mb-3">
|
||
<i class="fa fa-map-marker-alt me-2 mt-1"></i>
|
||
<span>武汉市东湖高新技术开发区关山大道保利国际中心8楼</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row pt-4 mt-4 border-top border-secondary">
|
||
<div class="col-md-6 text-center text-md-start">
|
||
<p class="mb-0">© 2025 结伴客. 保留所有权利.</p>
|
||
<p class="mb-0 small">Copyright 2015 All rights reserved 鄂ICP备15009094号-1 jiebanke.com 武汉高灏科技有限责任公司</p>
|
||
</div>
|
||
<div class="col-md-6 text-center text-md-end">
|
||
<ul class="list-inline mb-0">
|
||
<li class="list-inline-item"><a href="terms.html">用户协议</a></li>
|
||
<li class="list-inline-item"><a href="privacy.html">隐私政策</a></li>
|
||
<li class="list-inline-item"><a href="#">网站地图</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 页面加载动画 -->
|
||
<div class="page-loader">
|
||
<div class="loader-spinner">
|
||
<i class="fa fa-compass fa-spin"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||
<script src="js/enhanced-interactions.js"></script>
|
||
<script src="js/main.js"></script>
|
||
<script src="js/animal.js"></script>
|
||
</body>
|
||
</html> |