Files
jiebanke/website/flower.html

565 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<!-- 送花服务横幅 -->
<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>
<!-- 服务介绍 -->
<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">
<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>
<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">
<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>
<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">
<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>
<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">
<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>
<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>
<script src="js/enhanced-interactions.js"></script>
<script src="js/main.js"></script>
<script src="js/flower.js"></script>
</body>
</html>