aiotagro/jiebanke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
14aca938dea45be3eb1caf80d968962d027b9bf9
jiebanke/website/flower.html

565 lines
29 KiB
HTML
Raw Normal View History

重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
<!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/flower.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 active" 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>
<!-- 送花服务横幅 -->
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<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>
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
</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-seedling"></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-truck"></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-paint-brush"></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-heart"></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-user-friends"></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-birthday-cake"></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-briefcase"></i>
</div>
<h3 class="h5 mb-3">商务鲜花</h3>
<p class="text-muted small">高端大气的商务场合用花</p>
</div>
</div>
</div>
</div>
</section>
<!-- 精选花束 -->
<section id="flowers" 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="flower-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>¥100以下</option>
<option>¥100-200</option>
<option>¥200-500</option>
<option>¥500以上</option>
</select>
</div>
<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">
<button class="btn btn-primary w-100">筛选</button>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="flowers-container">
<!-- 鲜花卡片将通过JS动态加载 -->
<div class="col-md-4 mb-4">
<div class="card flower-card h-100">
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<img src="images/flower-case1.svg" class="card-img-top" alt="玫瑰花束">
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
<div class="card-body">
<h5 class="card-title">经典红玫瑰</h5>
<p class="card-text">99朵红玫瑰，表达热烈的爱意，是情人节和纪念日的经典选择。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="price">¥299</span>
<span class="badge bg-danger">热销</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 flower-card h-100">
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<img src="images/flower-case2.svg" class="card-img-top" alt="康乃馨">
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
<div class="card-body">
<h5 class="card-title">温馨康乃馨</h5>
<p class="card-text">12朵粉色康乃馨，传递温暖的祝福，适合母亲节和探望长辈。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="price">¥128</span>
<span class="badge bg-success">推荐</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 flower-card h-100">
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<img src="images/flower-case3.svg" class="card-img-top" alt="向日葵">
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
<div class="card-body">
<h5 class="card-title">阳光向日葵</h5>
<p class="card-text">6朵向日葵搭配满天星，带来阳光般的温暖和积极的能量。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="price">¥168</span>
<span class="badge bg-warning text-dark">新品</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="customize" 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-lg-6 mb-4">
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<img src="images/flower-pattern.svg" alt="定制花束" class="img-fluid rounded">
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
</div>
<div class="col-lg-6 mb-4">
<h3 class="h4 mb-4">个性化定制服务</h3>
<p>我们的专业花艺师可根据您的需求定制专属花束，包括：</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>指定花材和颜色搭配</li>
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>个性化包装设计</li>
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>专属贺卡内容</li>
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>特殊场合定制方案</li>
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>定期配送服务</li>
</ul>
<a href="#" class="btn btn-primary btn-lg mt-3">立即定制</a>
</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="text-center">
<div class="service-icon bg-primary text-white rounded-circle mx-auto mb-3">
<i class="fa fa-bolt"></i>
</div>
<h3 class="h5 mb-3">急速配送</h3>
<p class="text-muted">同城配送最快2小时内送达，跨城配送1-2天内送达。</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="text-center">
<div class="service-icon bg-success text-white rounded-circle mx-auto mb-3">
<i class="fa fa-map-marker-alt"></i>
</div>
<h3 class="h5 mb-3">精准定位</h3>
<p class="text-muted">GPS定位系统确保配送地址准确无误。</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="text-center">
<div class="service-icon bg-info text-white rounded-circle mx-auto mb-3">
<i class="fa fa-shield-alt"></i>
</div>
<h3 class="h5 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-4 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="text-warning mb-2">
<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>
</div>
<p class="card-text">"情人节给女朋友订的99朵红玫瑰，花很新鲜，包装精美，准时送达。女朋友非常喜欢，服务真的很棒！"</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">用户: 张先生</small>
<small class="text-muted">2025-02-14</small>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="text-warning mb-2">
<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-alt"></i>
</div>
<p class="card-text">"母亲节给妈妈订的康乃馨，花很新鲜，配送也很及时。妈妈收到后很高兴，说这是她收到的最好的母亲节礼物。"</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">用户: 李女士</small>
<small class="text-muted">2025-05-12</small>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="text-warning mb-2">
<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>
</div>
<p class="card-text">"公司开业订购的花篮，数量多但质量很好，配送及时。开业当天效果非常好，客户和员工都很满意。"</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">用户: 王经理</small>
<small class="text-muted">2025-03-20</small>
</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">
可以指定配送日期和时间段。我们提供多种配送时间选项，包括工作日和节假日配送，满足您的不同需求。
</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">
如收到的鲜花有质量问题，请在24小时内联系客服并提供照片证据。我们将根据情况提供重新配送、部分退款或全额退款等解决方案。
</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">&copy; 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>
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<script src="js/enhanced-interactions.js"></script>
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
<script src="js/main.js"></script>
重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验
2025-09-21 21:12:27 +08:00
<script src="js/flower.js"></script>
重构关于我们、商家申请和案例页面，优化布局和内容展示
2025-09-18 19:52:08 +08:00
</body>
</html>
Reference in New Issue Copy Permalink