542 lines
27 KiB
HTML
542 lines
27 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.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<link href="css/reward.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" 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 active" 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 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>
|
||
|
||
<!-- 推广优势 -->
|
||
<section id="benefits" 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="benefit-box">
|
||
<div class="benefit-icon">
|
||
<i class="fa fa-percentage"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">高额佣金</h3>
|
||
<p class="text-muted">根据不同服务享受12%-20%的高额佣金，收益可观。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="benefit-box">
|
||
<div class="benefit-icon">
|
||
<i class="fa fa-gift"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">额外奖励</h3>
|
||
<p class="text-muted">达到推广目标可获得额外现金奖励和精美礼品。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="benefit-box">
|
||
<div class="benefit-icon">
|
||
<i class="fa fa-chart-line"></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="commission-card">
|
||
<div class="commission-icon">
|
||
<i class="fa fa-plane"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">旅行结伴</h3>
|
||
<div class="commission-rate">15%</div>
|
||
<p class="text-muted small">用户通过您的推广完成旅行结伴订单，您可获得15%佣金</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="commission-card">
|
||
<div class="commission-icon">
|
||
<i class="fa fa-paw"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">动物认领</h3>
|
||
<div class="commission-rate">20%</div>
|
||
<p class="text-muted small">用户通过您的推广完成动物认领订单，您可获得20%佣金</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="commission-card">
|
||
<div class="commission-icon">
|
||
<i class="fa fa-seedling"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">送花服务</h3>
|
||
<div class="commission-rate">12%</div>
|
||
<p class="text-muted small">用户通过您的推广完成送花订单，您可获得12%佣金</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-4">
|
||
<div class="commission-card">
|
||
<div class="commission-icon">
|
||
<i class="fa fa-user-plus"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">新用户注册</h3>
|
||
<div class="commission-rate">¥10</div>
|
||
<p class="text-muted small">每成功推荐一位新用户注册，您可获得10元现金奖励</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="promotion-method">
|
||
<div class="method-icon">
|
||
<i class="fa fa-share-alt"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">社交媒体</h3>
|
||
<p class="text-muted">通过微信、微博、QQ空间等社交平台分享推广链接</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="promotion-method">
|
||
<div class="method-icon">
|
||
<i class="fa fa-blog"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">内容营销</h3>
|
||
<p class="text-muted">撰写相关主题文章或视频，嵌入推广链接</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="promotion-method">
|
||
<div class="method-icon">
|
||
<i class="fa fa-users"></i>
|
||
</div>
|
||
<h3 class="h5 mb-3">线下推广</h3>
|
||
<p class="text-muted">在社区、学校、公司等场所进行线下推广</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 佣金计算器 -->
|
||
<section id="calculator" 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="card shadow">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">推广服务类型</label>
|
||
<select class="form-select" id="serviceType">
|
||
<option value="travel">旅行结伴 (15%)</option>
|
||
<option value="animal">动物认领 (20%)</option>
|
||
<option value="flower">送花服务 (12%)</option>
|
||
<option value="register">新用户注册 (¥10)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">订单金额/数量</label>
|
||
<input type="number" class="form-control" id="orderValue" placeholder="请输入订单金额或注册人数">
|
||
</div>
|
||
</div>
|
||
<div class="text-center my-4">
|
||
<button class="btn btn-primary" onclick="calculateCommission()">计算收益</button>
|
||
</div>
|
||
<div class="result-area text-center py-3 bg-white rounded">
|
||
<h4>预计收益: <span id="resultAmount">¥0.00</span></h4>
|
||
</div>
|
||
</div>
|
||
</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 justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-hover">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th scope="col">排名</th>
|
||
<th scope="col">推广员</th>
|
||
<th scope="col">推广数量</th>
|
||
<th scope="col">获得佣金</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">1</th>
|
||
<td>张先生</td>
|
||
<td>128单</td>
|
||
<td>¥5,680</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">2</th>
|
||
<td>李女士</td>
|
||
<td>96单</td>
|
||
<td>¥4,250</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>王先生</td>
|
||
<td>87单</td>
|
||
<td>¥3,890</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">4</th>
|
||
<td>赵女士</td>
|
||
<td>75单</td>
|
||
<td>¥3,260</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">5</th>
|
||
<td>刘先生</td>
|
||
<td>68单</td>
|
||
<td>¥2,980</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</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-4 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">大学生创业故事</h5>
|
||
<p class="card-text">小李是一名大学生，通过推广结伴客平台，每月获得3000+元额外收入，不仅解决了生活费问题，还积累了创业经验。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">月收入: ¥3,500</small>
|
||
<span class="badge bg-success">持续增长</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">全职宝妈的副业</h5>
|
||
<p class="card-text">王女士是一位全职宝妈，利用闲暇时间推广结伴客服务，每月稳定收入2000元左右，实现了经济独立。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">月收入: ¥2,200</small>
|
||
<span class="badge bg-success">稳定收益</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">企业员工的兼职</h5>
|
||
<p class="card-text">陈先生是一名企业员工，利用业余时间推广服务，每月额外收入5000+元，大大提高了生活质量。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">月收入: ¥5,800</small>
|
||
<span class="badge bg-success">高收入</span>
|
||
</div>
|
||
</div>
|
||
</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 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">
|
||
佣金按月结算，每月10日结算上月佣金。您可以在个人中心查看收益明细并申请提现，支持微信、支付宝等多种提现方式。
|
||
</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>
|
||
function calculateCommission() {
|
||
const serviceType = document.getElementById('serviceType').value;
|
||
const orderValue = parseFloat(document.getElementById('orderValue').value) || 0;
|
||
let commission = 0;
|
||
|
||
switch(serviceType) {
|
||
case 'travel':
|
||
commission = orderValue * 0.15;
|
||
break;
|
||
case 'animal':
|
||
commission = orderValue * 0.20;
|
||
break;
|
||
case 'flower':
|
||
commission = orderValue * 0.12;
|
||
break;
|
||
case 'register':
|
||
commission = orderValue * 10;
|
||
break;
|
||
}
|
||
|
||
document.getElementById('resultAmount').textContent = '¥' + commission.toFixed(2);
|
||
}
|
||
</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/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> |