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

19
website/about.html
View File

@@ -36,6 +36,18 @@
<li class="nav-item">
<a class="nav-link active" 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" 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>
@@ -192,7 +204,7 @@
<div class="row">
<div class="col-md-4 mb-4">
<div class="card team-card text-center">
<img src="images/team-member1.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CEO 张总" width="150" height="150">
<img src="images/ceo-avatar.svg" class="card-img-top rounded-circle mx-auto mt-4" alt="CEO 张总" width="150" height="150">
<div class="card-body">
<h3 class="h5 card-title">张总</h3>
<p class="card-text text-muted">创始人兼CEO</p>
@@ -203,7 +215,7 @@
<div class="col-md-4 mb-4">
<div class="card team-card text-center">
<img src="images/team-member2.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CTO 李博士" width="150" height="150">
<img src="images/cto-avatar.svg" class="card-img-top rounded-circle mx-auto mt-4" alt="CTO 李博士" width="150" height="150">
<div class="card-body">
<h3 class="h5 card-title">李博士</h3>
<p class="card-text text-muted">首席技术官</p>
@@ -214,7 +226,7 @@
<div class="col-md-4 mb-4">
<div class="card team-card text-center">
<img src="images/team-member3.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="COO 王女士" width="150" height="150">
<img src="images/coo-avatar.svg" class="card-img-top rounded-circle mx-auto mt-4" alt="COO 王女士" width="150" height="150">
<div class="card-body">
<h3 class="h5 card-title">王女士</h3>
<p class="card-text text-muted">首席运营官</p>
@@ -310,6 +322,7 @@
<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>
</body>
</html>

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>

28
website/case.html
View File

@@ -36,6 +36,18 @@
<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" 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 active" href="case.html">成功案例</a>
</li>
@@ -71,7 +83,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/user-case1.jpg" class="img-fluid h-100 object-fit-cover" alt="川藏线骑行">
<img src="images/travel-case1.svg" class="img-fluid h-100 object-fit-cover" alt="川藏线骑行">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -91,7 +103,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/user-case2.jpg" class="img-fluid h-100 object-fit-cover" alt="云南背包客">
<img src="images/travel-case2.svg" class="img-fluid h-100 object-fit-cover" alt="云南背包客">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -111,7 +123,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/user-case3.jpg" class="img-fluid h-100 object-fit-cover" alt="东北滑雪">
<img src="images/travel-case3.svg" class="img-fluid h-100 object-fit-cover" alt="东北滑雪">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -131,7 +143,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/user-case4.jpg" class="img-fluid h-100 object-fit-cover" alt="农场体验">
<img src="images/farm-case.svg" class="img-fluid h-100 object-fit-cover" alt="农场体验">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -163,7 +175,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/merchant-case1.jpg" class="img-fluid h-100 object-fit-cover" alt="绿野农场">
<img src="images/farm-case.svg" class="img-fluid h-100 object-fit-cover" alt="绿野农场">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -183,7 +195,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/merchant-case2.jpg" class="img-fluid h-100 object-fit-cover" alt="花之语花店">
<img src="images/flower-case.svg" class="img-fluid h-100 object-fit-cover" alt="花之语花店">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -203,7 +215,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/merchant-case3.jpg" class="img-fluid h-100 object-fit-cover" alt="探险旅行社">
<img src="images/travel-case.svg" class="img-fluid h-100 object-fit-cover" alt="探险旅行社">
</div>
<div class="col-md-8">
<div class="card-body">
@@ -223,7 +235,7 @@
<div class="card case-card h-100">
<div class="row g-0">
<div class="col-md-4">
<img src="images/merchant-case4.jpg" class="img-fluid h-100 object-fit-cover" alt="民宿联盟">
<img src="images/travel-case.svg" class="img-fluid h-100 object-fit-cover" alt="民宿联盟">
</div>
<div class="col-md-8">
<div class="card-body">

12
website/contact.html
View File

@@ -37,6 +37,18 @@
<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" 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>

7
website/css/animal.css
View File

@@ -1,11 +1,6 @@
/* 动物认领页面样式 */
.page-header.animal-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%2327ae60"/><circle cx="30" cy="40" r="15" fill="%232ecc71" opacity="0.8"/><circle cx="70" cy="30" r="10" fill="%232ecc71" opacity="0.6"/><circle cx="50" cy="60" r="20" fill="%232ecc71" opacity="0.7"/></svg>');
background-size: cover;
background-position: center;
}
/* 动物认领页面现在使用统一的hero-section样式 */
.feature-icon {
width: 80px;

11
website/css/flower.css
View File

@@ -1,15 +1,6 @@
/* 送花服务页面样式 */
/* 页面头部样式 */
.flower-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ff6b6b"/><circle cx="20" cy="30" r="8" fill="%23f1c40f" opacity="0.8"/><circle cx="40" cy="20" r="6" fill="%23f1c40f" opacity="0.6"/><circle cx="30" cy="45" r="10" fill="%23f1c40f" opacity="0.7"/><circle cx="60" cy="35" r="7" fill="%23f1c40f" opacity="0.9"/><circle cx="50" cy="60" r="9" fill="%23f1c40f" opacity="0.8"/></svg>');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
padding: 3rem 0;
}
/* 送花服务页面现在使用统一的hero-section样式 */
/* 鲜花卡片样式 */
.flower-card {

8
website/css/reward.css
View File

@@ -1,12 +1,6 @@
/* 推广奖励页面样式 */
/* 页面头部样式 */
.page-header.reward-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f39c12"/><circle cx="20" cy="30" r="5" fill="%23ffffff" opacity="0.8"/><circle cx="40" cy="20" r="4" fill="%23ffffff" opacity="0.6"/><circle cx="30" cy="45" r="6" fill="%23ffffff" opacity="0.7"/><circle cx="60" cy="35" r="5" fill="%23ffffff" opacity="0.9"/><circle cx="50" cy="60" r="7" fill="%23ffffff" opacity="0.8"/><circle cx="75" cy="50" r="4" fill="%23ffffff" opacity="0.6"/></svg>');
background-size: cover;
background-position: center;
}
/* 推广奖励页面现在使用统一的hero-section样式 */
.benefit-box {
text-align: center;

87
website/css/style.css
View File

@@ -74,6 +74,93 @@ body {
overflow: hidden;
}
/* 各页面专属背景色 */
.hero-section.travel-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-section.animal-hero {
background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
}
.hero-section.flower-hero {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}
.hero-section.reward-hero {
background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
}
/* 统一页面头部样式 */
.page-header {
color: white;
padding: 120px 0 100px;
margin-bottom: 80px;
position: relative;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
}
.page-header .container {
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: var(--font-size-5xl);
font-weight: 700;
margin-bottom: 1.5rem;
}
.page-header .lead {
font-size: var(--font-size-xl);
margin-bottom: 2.5rem;
opacity: 0.9;
}
/* 响应式banner高度调整 */
@media (max-width: 768px) {
.hero-section {
padding: 100px 0 80px;
min-height: 400px;
}
.page-header {
padding: 100px 0 80px;
min-height: 400px;
}
.page-header h1 {
font-size: var(--font-size-4xl);
}
.page-header .lead {
font-size: var(--font-size-lg);
}
}
@media (max-width: 576px) {
.hero-section {
padding: 80px 0 60px;
min-height: 350px;
}
.page-header {
padding: 80px 0 60px;
min-height: 350px;
}
.page-header h1 {
font-size: var(--font-size-3xl);
}
.page-header .lead {
font-size: var(--font-size-base);
}
}
.hero-section::before {
content: "";
position: absolute;

24
website/css/travel.css
View File

@@ -1,28 +1,6 @@
/* 旅行结伴页面样式 */
.page-header.travel-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232ecc71"/><path d="M20,30 Q40,10 60,30 T100,30 L100,100 L20,100 Z" fill="%2327ae60" opacity="0.7"/></svg>');
background-size: cover;
background-position: center;
}
.travel-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: cover;
background-position: center;
position: relative;
}
.travel-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
/* 旅行结伴页面现在使用统一的hero-section样式 */
.travel-plan-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;

26
website/flower.html
View File

@@ -62,16 +62,12 @@
</nav>
<!-- 送花服务横幅 -->
<section class="page-header flower-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="#flowers" class="btn btn-light btn-lg btn-rounded me-3">精选花束</a>
<a href="#customize" class="btn btn-outline-light btn-lg btn-rounded">定制花束</a>
</div>
</div>
<section class="hero-section flower-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="#flowers" class="btn btn-light btn-lg btn-rounded me-3">精选花束</a>
<a href="#customize" class="btn btn-outline-light btn-lg btn-rounded">定制花束</a>
</div>
</section>
@@ -220,7 +216,7 @@
<!-- 鲜花卡片将通过JS动态加载 -->
<div class="col-md-4 mb-4">
<div class="card flower-card h-100">
<img src="images/flower1.svg" class="card-img-top" alt="玫瑰花束">
<img src="images/flower-case1.svg" class="card-img-top" alt="玫瑰花束">
<div class="card-body">
<h5 class="card-title">经典红玫瑰</h5>
<p class="card-text">99朵红玫瑰，表达热烈的爱意，是情人节和纪念日的经典选择。</p>
@@ -236,7 +232,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card flower-card h-100">
<img src="images/flower2.svg" class="card-img-top" alt="康乃馨">
<img src="images/flower-case2.svg" class="card-img-top" alt="康乃馨">
<div class="card-body">
<h5 class="card-title">温馨康乃馨</h5>
<p class="card-text">12朵粉色康乃馨，传递温暖的祝福，适合母亲节和探望长辈。</p>
@@ -252,7 +248,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card flower-card h-100">
<img src="images/flower3.svg" class="card-img-top" alt="向日葵">
<img src="images/flower-case3.svg" class="card-img-top" alt="向日葵">
<div class="card-body">
<h5 class="card-title">阳光向日葵</h5>
<p class="card-text">6朵向日葵搭配满天星，带来阳光般的温暖和积极的能量。</p>
@@ -284,7 +280,7 @@
</div>
<div class="row">
<div class="col-lg-6 mb-4">
<img src="images/customize-flower.jpg" alt="定制花束" class="img-fluid rounded">
<img src="images/flower-pattern.svg" alt="定制花束" class="img-fluid rounded">
</div>
<div class="col-lg-6 mb-4">
<h3 class="h4 mb-4">个性化定制服务</h3>
@@ -562,6 +558,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/flower.js"></script>
</body>
</html>

13
website/index.html
View File

@@ -36,6 +36,18 @@
<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" 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>
@@ -306,6 +318,7 @@
<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/font-awesome/7.0.0/js/all.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>
</body>
</html>

590
website/js/enhanced-interactions.js Normal file
View File

@@ -0,0 +1,590 @@
/**
* 增强交互体验管理器
* 统一管理整个网站的交互优化
*/
class EnhancedInteractionManager {
constructor() {
this.init();
}
init() {
this.setupGlobalInteractions();
this.setupLoadingStates();
this.setupFormEnhancements();
this.setupScrollEffects();
this.setupTooltips();
this.setupNotifications();
this.setupKeyboardNavigation();
this.setupMobileOptimizations();
}
// 全局交互设置
setupGlobalInteractions() {
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 返回顶部按钮
this.createBackToTopButton();
// 页面加载进度条
this.createLoadingBar();
// 全局错误处理
this.setupGlobalErrorHandling();
}
// 创建返回顶部按钮
createBackToTopButton() {
const backToTop = document.createElement('button');
backToTop.innerHTML = '<i class="fa fa-chevron-up"></i>';
backToTop.className = 'btn-back-to-top';
backToTop.setAttribute('aria-label', '返回顶部');
const style = document.createElement('style');
style.textContent = `
.btn-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #007bff;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}
.btn-back-to-top:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}
.btn-back-to-top.show {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.btn-back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
}
`;
document.head.appendChild(style);
document.body.appendChild(backToTop);
// 滚动显示/隐藏
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.add('show');
} else {
backToTop.classList.remove('show');
}
});
// 点击返回顶部
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
// 创建加载进度条
createLoadingBar() {
const loadingBar = document.createElement('div');
loadingBar.className = 'loading-bar';
const style = document.createElement('style');
style.textContent = `
.loading-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #007bff, #28a745);
z-index: 9999;
transition: width 0.3s ease;
}
`;
document.head.appendChild(style);
document.body.appendChild(loadingBar);
// 页面加载进度
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 30;
if (progress > 90) progress = 90;
loadingBar.style.width = progress + '%';
}, 200);
window.addEventListener('load', () => {
clearInterval(interval);
loadingBar.style.width = '100%';
setTimeout(() => {
loadingBar.style.opacity = '0';
setTimeout(() => loadingBar.remove(), 300);
}, 200);
});
}
// 设置加载状态
setupLoadingStates() {
// 为所有按钮添加加载状态
document.addEventListener('click', (e) => {
if (e.target.matches('button[type="submit"], .btn-primary, .btn-flower, .btn-animal')) {
this.showButtonLoading(e.target);
}
});
}
// 显示按钮加载状态
showButtonLoading(button) {
const originalText = button.innerHTML;
const originalDisabled = button.disabled;
button.disabled = true;
button.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i>处理中...';
// 模拟加载时间
setTimeout(() => {
button.disabled = originalDisabled;
button.innerHTML = originalText;
}, 2000);
}
// 表单增强
setupFormEnhancements() {
// 实时验证
document.querySelectorAll('input, textarea, select').forEach(field => {
field.addEventListener('blur', () => this.validateField(field));
field.addEventListener('input', () => this.clearFieldError(field));
});
// 表单提交增强
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', (e) => {
if (!this.validateForm(form)) {
e.preventDefault();
}
});
});
}
// 验证单个字段
validateField(field) {
const value = field.value.trim();
let isValid = true;
let message = '';
// 必填验证
if (field.hasAttribute('required') && !value) {
isValid = false;
message = '此字段为必填项';
}
// 邮箱验证
if (field.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
isValid = false;
message = '请输入有效的邮箱地址';
}
// 手机号验证
if (field.type === 'tel' && value && !/^1[3-9]\d{9}$/.test(value)) {
isValid = false;
message = '请输入有效的手机号码';
}
// 显示验证结果
if (!isValid) {
this.showFieldError(field, message);
} else {
this.showFieldSuccess(field);
}
return isValid;
}
// 显示字段错误
showFieldError(field, message) {
this.clearFieldFeedback(field);
field.classList.add('is-invalid');
const feedback = document.createElement('div');
feedback.className = 'invalid-feedback';
feedback.textContent = message;
field.parentNode.appendChild(feedback);
}
// 显示字段成功
showFieldSuccess(field) {
this.clearFieldFeedback(field);
field.classList.add('is-valid');
}
// 清除字段错误
clearFieldError(field) {
field.classList.remove('is-invalid');
const feedback = field.parentNode.querySelector('.invalid-feedback');
if (feedback) feedback.remove();
}
// 清除字段反馈
clearFieldFeedback(field) {
field.classList.remove('is-invalid', 'is-valid');
const feedback = field.parentNode.querySelector('.invalid-feedback, .valid-feedback');
if (feedback) feedback.remove();
}
// 验证整个表单
validateForm(form) {
let isValid = true;
const fields = form.querySelectorAll('input, textarea, select');
fields.forEach(field => {
if (!this.validateField(field)) {
isValid = false;
}
});
return isValid;
}
// 滚动效果
setupScrollEffects() {
// 导航栏滚动效果
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// 添加滚动样式
const style = document.createElement('style');
style.textContent = `
.navbar-scrolled {
background-color: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
`;
document.head.appendChild(style);
}
// 视差滚动效果
this.setupParallaxEffect();
}
// 视差滚动效果
setupParallaxEffect() {
const parallaxElements = document.querySelectorAll('.hero-section');
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
parallaxElements.forEach(element => {
const rate = scrolled * -0.5;
element.style.transform = `translateY(${rate}px)`;
});
});
}
// 工具提示
setupTooltips() {
// 为所有带有title属性的元素添加工具提示
document.querySelectorAll('[title]').forEach(element => {
element.addEventListener('mouseenter', (e) => {
this.showTooltip(e.target, e.target.getAttribute('title'));
});
element.addEventListener('mouseleave', () => {
this.hideTooltip();
});
});
}
// 显示工具提示
showTooltip(element, text) {
const tooltip = document.createElement('div');
tooltip.className = 'custom-tooltip';
tooltip.textContent = text;
const style = document.createElement('style');
style.textContent = `
.custom-tooltip {
position: absolute;
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.custom-tooltip.show {
opacity: 1;
}
`;
if (!document.querySelector('style[data-tooltip]')) {
style.setAttribute('data-tooltip', 'true');
document.head.appendChild(style);
}
document.body.appendChild(tooltip);
const rect = element.getBoundingClientRect();
tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
setTimeout(() => tooltip.classList.add('show'), 10);
}
// 隐藏工具提示
hideTooltip() {
const tooltip = document.querySelector('.custom-tooltip');
if (tooltip) {
tooltip.classList.remove('show');
setTimeout(() => tooltip.remove(), 300);
}
}
// 通知系统
setupNotifications() {
this.createNotificationContainer();
}
// 创建通知容器
createNotificationContainer() {
const container = document.createElement('div');
container.id = 'notification-container';
const style = document.createElement('style');
style.textContent = `
#notification-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
max-width: 400px;
}
.notification {
background: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-left: 4px solid #007bff;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
}
.notification.show {
opacity: 1;
transform: translateX(0);
}
.notification.success { border-left-color: #28a745; }
.notification.error { border-left-color: #dc3545; }
.notification.warning { border-left-color: #ffc107; }
.notification.info { border-left-color: #17a2b8; }
`;
document.head.appendChild(style);
document.body.appendChild(container);
}
// 显示通知
showNotification(message, type = 'info', duration = 5000) {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.innerHTML = `
<div class="d-flex justify-content-between align-items-start">
<div>
<strong>${this.getNotificationTitle(type)}</strong>
<div>${message}</div>
</div>
<button type="button" class="btn-close" onclick="this.parentElement.parentElement.remove()"></button>
</div>
`;
document.getElementById('notification-container').appendChild(notification);
setTimeout(() => notification.classList.add('show'), 10);
if (duration > 0) {
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, duration);
}
}
// 获取通知标题
getNotificationTitle(type) {
const titles = {
success: '成功',
error: '错误',
warning: '警告',
info: '提示'
};
return titles[type] || '通知';
}
// 键盘导航
setupKeyboardNavigation() {
document.addEventListener('keydown', (e) => {
// ESC键关闭模态框
if (e.key === 'Escape') {
const modals = document.querySelectorAll('.modal.show');
modals.forEach(modal => {
const modalInstance = bootstrap.Modal.getInstance(modal);
if (modalInstance) modalInstance.hide();
});
}
// Tab键焦点管理
if (e.key === 'Tab') {
this.manageFocus(e);
}
});
}
// 焦点管理
manageFocus(e) {
const focusableElements = document.querySelectorAll(
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
} else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
// 移动端优化
setupMobileOptimizations() {
// 触摸反馈
document.addEventListener('touchstart', (e) => {
if (e.target.matches('button, .btn, .card')) {
e.target.style.transform = 'scale(0.98)';
}
});
document.addEventListener('touchend', (e) => {
if (e.target.matches('button, .btn, .card')) {
setTimeout(() => {
e.target.style.transform = '';
}, 150);
}
});
// 防止双击缩放
let lastTouchEnd = 0;
document.addEventListener('touchend', (e) => {
const now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
e.preventDefault();
}
lastTouchEnd = now;
}, false);
// 移动端导航优化
this.setupMobileNavigation();
}
// 移动端导航优化
setupMobileNavigation() {
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarToggler && navbarCollapse) {
// 点击导航链接后自动关闭菜单
navbarCollapse.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth < 992) {
const collapse = new bootstrap.Collapse(navbarCollapse, {
hide: true
});
}
});
});
}
}
// 全局错误处理
setupGlobalErrorHandling() {
window.addEventListener('error', (e) => {
console.error('全局错误:', e.error);
this.showNotification('页面出现错误，请刷新重试', 'error');
});
window.addEventListener('unhandledrejection', (e) => {
console.error('未处理的Promise错误:', e.reason);
this.showNotification('网络请求失败，请检查网络连接', 'error');
});
}
// 性能监控
setupPerformanceMonitoring() {
// 页面加载性能
window.addEventListener('load', () => {
const perfData = performance.getEntriesByType('navigation')[0];
const loadTime = perfData.loadEventEnd - perfData.loadEventStart;
if (loadTime > 3000) {
console.warn('页面加载时间过长:', loadTime + 'ms');
}
});
}
}
// 全局实例
let enhancedInteractionManager;
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
enhancedInteractionManager = new EnhancedInteractionManager();
});
// 导出全局方法供其他脚本使用
window.showNotification = function(message, type, duration) {
if (enhancedInteractionManager) {
enhancedInteractionManager.showNotification(message, type, duration);
}
};
window.showButtonLoading = function(button) {
if (enhancedInteractionManager) {
enhancedInteractionManager.showButtonLoading(button);
}
};

51
website/merchant/apply.html
View File

@@ -11,18 +11,33 @@
<meta property="og:description" content="申请成为结伴客平台合作商家，填写商家入驻申请表单，加入我们的生态体系，为旅行者提供优质服务。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jiebanke.com/merchant/apply.html">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
<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">
</head>
<body>
<!-- 页面加载动画 -->
<div class="page-loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader-spinner">
<i class="fa fa-compass fa-spin"></i>
</div>
</div>
+++++++ REPLACE</div>
</replace_in_file>
<replace_in_file id="mf0jdrirk6h5pux001ij263rm1o89xgr">
<path>website/merchant/apply.html</path>
<diff>------- SEARCH
<!-- 页面滚动进度条 -->
<div class="scroll-progress"></div>
<!-- 返回顶部按钮 -->
<button class="back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
=======
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
@@ -42,6 +57,18 @@
<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" 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>
@@ -73,8 +100,6 @@
</section>
<!-- 申请步骤 -->
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="../js/main.js"></script>
<section class="container mb-5">
<div class="step-indicator">
<div class="step completed">
@@ -252,18 +277,18 @@
<div class="row">
<div class="col-md-4 mb-4">
<h5 class="mb-4">
<i class="bi bi-map-fill me-2"></i>结伴客
<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="fa-brands fa-wechat"></i>
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="social-icon me-2">
<i class="fa-brands fa-weibo"></i>
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="social-icon">
<i class="fa-brands fa-qq"></i>
<i class="fab fa-qq"></i>
</a>
</div>
</div>
@@ -322,6 +347,10 @@
</div>
</footer>
<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/twitter-bootstrap/5.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/js/all.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>
</body>
</html>

28
website/merchant/index.html
View File

@@ -11,16 +11,17 @@
<meta property="og:description" content="加入结伴客商家合作生态，为旅行者提供农场、花店和活动组织服务。了解合作优势、入驻流程和商家数据。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jiebanke.com/merchant/">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
<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">
</head>
<body>
<!-- 页面加载动画 -->
<div class="page-loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader-spinner">
<i class="fa fa-compass fa-spin"></i>
</div>
</div>
<!-- 导航栏 -->
@@ -42,6 +43,18 @@
<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" 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>
@@ -293,7 +306,7 @@
<p class="card-text">花店通过结伴客的送花服务功能，月订单量增长了150%，特别是在节日期间订单量激增。</p>
</div>
<div class="d-flex align-items-center mt-4">
<img src="../images/merchant-avatar2.svg" class="rounded-circle me-3" alt="花之语花店李女士" width="50" height="50">
<img src="../images/merchant-avatar1.svg" class="rounded-circle me-3" alt="花之语花店李女士" width="50" height="50">
<div>
<h6 class="mb-0">李女士</h6>
<small class="text-muted">花之语花店</small>
@@ -310,7 +323,7 @@
<p class="card-text">旅行社通过平台发布特色探险线路，成功吸引了大量年轻用户，成团率大幅提升。</p>
</div>
<div class="d-flex align-items-center mt-4">
<img src="../images/merchant-avatar3.svg" class="rounded-circle me-3" alt="探险旅行社张经理" width="50" height="50">
<img src="../images/user-avatar1.svg" class="rounded-circle me-3" alt="探险旅行社张经理" width="50" height="50">
<div>
<h6 class="mb-0">张经理</h6>
<small class="text-muted">探险旅行社</small>
@@ -410,5 +423,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/font-awesome/7.0.0/js/all.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>
</body>
</html>

43
website/merchant/policy.html
View File

@@ -11,16 +11,17 @@
<meta property="og:description" content="了解结伴客平台商家合作政策，包括合作原则、资质要求、服务标准、费用结算、权利义务等内容。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jiebanke.com/merchant/policy.html">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
<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">
</head>
<body>
<!-- 页面加载动画 -->
<div class="page-loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader-spinner">
<i class="fa fa-compass fa-spin"></i>
</div>
</div>
<!-- 导航栏 -->
@@ -42,6 +43,18 @@
<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" 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>
@@ -56,13 +69,7 @@
</div>
</nav>
<!-- 页面滚动进度条 -->
<div class="scroll-progress"></div>
<!-- 返回顶部按钮 -->
<button class="back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<!-- 合作政策横幅 -->
<section class="hero-section">
@@ -175,25 +182,23 @@
</section>
<!-- 页脚 -->
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="../js/main.js"></script>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<h5 class="mb-4">
<i class="fa-solid fa-map-location me-2"></i>结伴客
<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="fa-brands fa-weixin"></i>
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="social-icon me-2">
<i class="fa-brands fa-weibo"></i>
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="social-icon">
<i class="fa-brands fa-qq"></i>
<i class="fab fa-qq"></i>
</a>
</div>
</div>
@@ -252,7 +257,11 @@
</div>
</footer>
<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/twitter-bootstrap/5.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/js/all.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>
// 目录滚动高亮
document.addEventListener('DOMContentLoaded', function() {

18
website/reward.html
View File

@@ -62,16 +62,12 @@
</nav>
<!-- 推广奖励横幅 -->
<section class="page-header reward-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="#benefits" class="btn btn-light btn-lg btn-rounded me-3">查看奖励详情</a>
<a href="#calculator" class="btn btn-outline-light btn-lg btn-rounded">收益计算器</a>
</div>
</div>
<section class="hero-section reward-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="#benefits" class="btn btn-light btn-lg btn-rounded me-3">查看奖励详情</a>
<a href="#calculator" class="btn btn-outline-light btn-lg btn-rounded">收益计算器</a>
</div>
</section>
@@ -539,6 +535,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/reward.js"></script>
</body>
</html>

24
website/travel.html
View File

@@ -62,16 +62,12 @@
</nav>
<!-- 旅行结伴横幅 -->
<section class="page-header travel-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="#plans" 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 travel-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="#plans" 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>
@@ -244,7 +240,7 @@
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/travel-success1.jpg" class="card-img-top" alt="川藏线骑行">
<img src="images/travel-case1.svg" class="card-img-top" alt="川藏线骑行">
<div class="card-body">
<h5 class="card-title">川藏线骑行</h5>
<p class="card-text">通过结伴客平台，来自不同城市的三位骑行爱好者成功组队，完成了川藏线的挑战。</p>
@@ -257,7 +253,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/travel-success2.jpg" class="card-img-top" alt="云南背包客">
<img src="images/travel-case2.svg" class="card-img-top" alt="云南背包客">
<div class="card-body">
<h5 class="card-title">云南背包客之旅</h5>
<p class="card-text">两位独自旅行的女孩通过平台相识，结伴游览了大理、丽江和香格里拉。</p>
@@ -270,7 +266,7 @@
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/travel-success3.jpg" class="card-img-top" alt="东北滑雪">
<img src="images/travel-case3.svg" class="card-img-top" alt="东北滑雪">
<div class="card-body">
<h5 class="card-title">东北滑雪之旅</h5>
<p class="card-text">滑雪爱好者组成的四人小队，一起探索了东北各大滑雪场。</p>
@@ -436,6 +432,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/travel.js"></script>
</body>
</html>