aiotagro/jiebanke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验

Browse Source
This commit is contained in:
ylweng
2025-09-21 21:12:27 +08:00
parent 467a4ead10
commit 14aca938de
64 changed files with 25067 additions and 18256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
website/animal.html
View File

@@ -62,16 +62,12 @@
</nav>
<!-- 动物认领横幅 -->
<section class="page-header animal-header">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center text-white">
<h1 class="display-3 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>
</div>
<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>
@@ -217,7 +213,7 @@
<!-- 动物卡片将通过JS动态加载 -->
<div class="col-md-4 mb-4">
<div class="card animal-card h-100">
<img src="images/animal1.svg" class="card-img-top" alt="小羊">
<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>
@@ -236,7 +232,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card animal-card h-100">
<img src="images/animal2.svg" class="card-img-top" alt="小兔">
<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>
@@ -255,7 +251,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card animal-card h-100">
<img src="images/animal3.svg" class="card-img-top" alt="小鸡">
<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>
@@ -341,7 +337,7 @@
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/animal-success1.jpg" class="card-img-top" alt="小羊认领">
<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>
@@ -354,7 +350,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/animal-success2.jpg" class="card-img-top" alt="兔子认领">
<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>
@@ -367,7 +363,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/animal-success3.jpg" class="card-img-top" alt="鸡认领">
<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>
@@ -533,6 +529,8 @@
<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>