重构关于我们、商家申请和案例页面，优化布局和内容展示
This commit is contained in:
@@ -1,5 +1,36 @@
|
||||
# 结伴客项目文档目录
|
||||
|
||||
## 核心文档
|
||||
|
||||
### 产品需求
|
||||
- [产品需求文档](./requirements.md) - 小程序核心功能需求
|
||||
- [官网需求文档](./website_requirements.md) - 官方网站产品需求
|
||||
|
||||
### 技术文档
|
||||
- [系统架构文档](./architecture.md) - 整体技术架构设计
|
||||
- [详细设计文档](./detailed_design.md) - 数据库和API详细设计
|
||||
- [API接口文档](./API_DOCS.md) - 完整的API接口说明
|
||||
- [数据库设计](./database-design.md) - 数据库表结构和关系
|
||||
|
||||
### 开发文档
|
||||
- [开发计划](./development_plan.md) - 项目开发排期和任务分解
|
||||
- [部署指南](./DEPLOYMENT.md) - 系统部署和运维指南
|
||||
- [开发规范](./DEVELOPMENT_GUIDE.md) - 代码规范和开发流程
|
||||
|
||||
### 其他文档
|
||||
- [测试用例](./TEST_CASES.md) - 功能测试用例
|
||||
- [用户手册](./USER_MANUAL.md) - 最终用户使用指南
|
||||
- [常见问题](./FAQ.md) - 常见问题解答
|
||||
|
||||
## 文档维护
|
||||
|
||||
所有文档均使用Markdown格式编写，保持实时更新。建议阅读顺序：
|
||||
1. 产品需求文档 → 2. 系统架构文档 → 3. 详细设计文档 → 4. API接口文档
|
||||
|
||||
## 版本控制
|
||||
|
||||
文档版本与代码版本保持一致，重大变更需要更新版本历史记录。
|
||||
|
||||
## 📚 文档列表
|
||||
|
||||
### Java微服务版本文档
|
||||
|
||||
339
docs/website_requirements.md
Normal file
339
docs/website_requirements.md
Normal file
@@ -0,0 +1,339 @@
|
||||
# 结伴客官网产品需求文档
|
||||
|
||||
## 版本历史
|
||||
| 版本 | 日期 | 作者 | 描述 |
|
||||
|------|------|------|------|
|
||||
| v1.0 | 2024-01-15 | 产品经理 | 初始版本，定义官网核心需求 |
|
||||
| v1.1 | 2024-01-16 | 产品经理 | 补充SEO优化和性能需求 |
|
||||
|
||||
## 1. 项目概述
|
||||
|
||||
### 1.1 项目背景
|
||||
结伴客是一个专注于结伴旅行和动物认领的创新平台，官网作为品牌展示和用户转化的重要渠道，需要提供专业、可信的线上门户。
|
||||
|
||||
### 1.2 项目目标
|
||||
- **品牌展示**：建立专业、可信的品牌形象
|
||||
- **用户转化**：引导用户下载和使用小程序
|
||||
- **商家合作**：吸引优质商家入驻平台
|
||||
- **信息传递**：清晰传达平台价值和服务内容
|
||||
|
||||
### 1.3 成功标准
|
||||
- **访问量指标**：月均PV ≥ 50,000，UV ≥ 10,000
|
||||
- **转化率指标**：小程序跳转转化率 ≥ 15%
|
||||
- **商家入驻**：月均商家入驻申请 ≥ 20家
|
||||
- **SEO表现**：核心关键词搜索引擎排名前3页
|
||||
- **性能指标**：页面加载时间 ≤ 2秒，首屏时间 ≤ 1秒
|
||||
|
||||
## 2. 用户角色与用例
|
||||
|
||||
### 2.1 目标用户群体
|
||||
|
||||
#### 2.1.1 普通用户（C端用户）
|
||||
- **特征**：18-45岁，热爱旅行，对新鲜事物感兴趣
|
||||
- **使用场景**：了解平台功能，寻找旅行伙伴，体验动物认领
|
||||
- **核心需求**：快速了解平台价值，便捷跳转小程序
|
||||
|
||||
#### 2.1.2 商家用户（B端用户）
|
||||
- **特征**：花店老板、农场主、活动组织者
|
||||
- **使用场景**：了解合作政策，提交入驻申请
|
||||
- **核心需求**：清晰的合作流程，便捷的申请入口
|
||||
|
||||
#### 2.1.3 潜在投资者
|
||||
- **特征**：投资机构、个人投资者
|
||||
- **使用场景**：了解商业模式，评估投资价值
|
||||
- **核心需求**：专业的品牌形象，清晰的商业模式展示
|
||||
|
||||
### 2.2 用户用例图
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
A[普通用户] --> B[浏览官网首页]
|
||||
A --> C[查看成功案例]
|
||||
A --> D[跳转小程序]
|
||||
|
||||
E[商家用户] --> F[查看合作政策]
|
||||
E --> G[提交入驻申请]
|
||||
E --> H[查看收益数据]
|
||||
|
||||
I[潜在投资者] --> J[了解商业模式]
|
||||
I --> K[查看团队介绍]
|
||||
I --> L[联系商务合作]
|
||||
```
|
||||
|
||||
## 3. 功能需求
|
||||
|
||||
### 3.1 官网首页模块
|
||||
|
||||
#### 用户故事1：浏览官网首页
|
||||
**As a** 新用户
|
||||
**I want to** 快速了解平台核心价值
|
||||
**So that** 我可以决定是否使用结伴客平台
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户访问官网首页
|
||||
- **When** 页面加载完成
|
||||
- **Then** 显示平台品牌Logo和slogan
|
||||
- **And** 展示核心功能区块（旅行结伴、动物认领、送花服务）
|
||||
- **And** 显示小程序跳转入口
|
||||
- **And** 提供商家合作入口
|
||||
|
||||
#### 用户故事2：查看平台介绍
|
||||
**As a** 潜在用户
|
||||
**I want to** 详细了解平台功能特色
|
||||
**So that** 我可以全面了解平台价值
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户在首页
|
||||
- **When** 滚动浏览功能介绍区块
|
||||
- **Then** 展示动态交互效果
|
||||
- **And** 每个功能区块包含图标、标题和详细描述
|
||||
- **And** 提供数据统计展示（用户数、成功案例数等）
|
||||
|
||||
### 3.2 成功案例模块
|
||||
|
||||
#### 用户故事3：浏览成功案例
|
||||
**As a** 犹豫用户
|
||||
**I want to** 查看其他用户的真实体验
|
||||
**So that** 我可以增强对平台的信任
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户访问成功案例页面
|
||||
- **When** 页面加载完成
|
||||
- **Then** 显示分类筛选（旅行结伴、动物认领、送花服务）
|
||||
- **And** 展示案例卡片，包含用户头像、故事摘要、成果数据
|
||||
- **And** 支持分页加载，每页显示12个案例
|
||||
- **And** 提供案例详情查看功能
|
||||
|
||||
#### 用户故事4：分享成功案例
|
||||
**As a** 满意用户
|
||||
**I want to** 分享我的成功故事
|
||||
**So that** 我可以帮助平台吸引更多用户
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户在案例详情页
|
||||
- **When** 点击分享按钮
|
||||
- **Then** 弹出分享选项（微信、朋友圈、QQ、微博）
|
||||
- **And** 生成带参数的分享链接
|
||||
- **And** 记录分享行为用于数据统计
|
||||
|
||||
### 3.3 商家合作模块
|
||||
|
||||
#### 用户故事5：了解合作政策
|
||||
**As a** 潜在商家
|
||||
**I want to** 详细了解合作政策和收益模式
|
||||
**So that** 我可以评估入驻价值
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户访问商家合作页面
|
||||
- **When** 页面加载完成
|
||||
- **Then** 显示合作流程图表
|
||||
- **And** 展示收益计算器和案例数据
|
||||
- **And** 提供不同商家类型（花店、农场、活动组织者）的专属政策
|
||||
- **And** 显示入驻要求和资质说明
|
||||
|
||||
#### 用户故事6：提交入驻申请
|
||||
**As a** 商家用户
|
||||
**I want to** 在线提交入驻申请
|
||||
**So that** 我可以快速启动合作流程
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户在商家合作页面
|
||||
- **When** 点击"立即申请"按钮
|
||||
- **Then** 弹出入驻申请表单
|
||||
- **And** 表单包含必填字段：商家类型、联系人、电话、营业执照等
|
||||
- **And** 支持图片上传功能
|
||||
- **And** 提交后显示成功提示
|
||||
- **And** 系统自动发送确认邮件
|
||||
|
||||
### 3.4 关于我们模块
|
||||
|
||||
#### 用户故事7：了解公司信息
|
||||
**As a** 关注用户
|
||||
**I want to** 了解公司背景和团队信息
|
||||
**So that** 我可以建立对品牌的信任
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户访问关于我们页面
|
||||
- **When** 页面加载完成
|
||||
- **Then** 显示公司发展历程时间轴
|
||||
- **And** 展示核心团队介绍（CEO、CTO、COO、CMO）
|
||||
- **And** 提供联系方式和企业地址
|
||||
- **And** 显示合作伙伴logo墙
|
||||
|
||||
### 3.5 小程序导流模块
|
||||
|
||||
#### 用户故事8：跳转小程序
|
||||
**As a** 官网访客
|
||||
**I want to** 快速跳转到小程序
|
||||
**So that** 我可以立即体验平台功能
|
||||
|
||||
**验收标准：**
|
||||
- **Given** 用户在官网任意页面
|
||||
- **When** 点击小程序跳转按钮
|
||||
- **Then** 显示小程序二维码
|
||||
- **And** 提供"打开小程序"深度链接
|
||||
- **And** 引导用户保存二维码
|
||||
- **And** 记录跳转转化数据
|
||||
|
||||
## 4. 非功能需求
|
||||
|
||||
### 4.1 性能需求
|
||||
- **页面加载**：首屏加载时间 ≤ 1秒，完全加载时间 ≤ 2秒
|
||||
- **响应时间**：API接口响应时间 ≤ 200ms
|
||||
- **并发支持**：支持1000并发用户访问
|
||||
- **资源优化**：图片懒加载，资源压缩，CDN加速
|
||||
|
||||
### 4.2 安全需求
|
||||
- **数据安全**：敏感信息加密传输，防止XSS和CSRF攻击
|
||||
- **表单安全**：入驻申请表单防垃圾提交，验证码保护
|
||||
- **权限控制**：后台管理接口权限验证
|
||||
- **日志审计**：关键操作日志记录
|
||||
|
||||
### 4.3 兼容性需求
|
||||
- **浏览器兼容**：Chrome 80+、Firefox 75+、Safari 13+、Edge 80+
|
||||
- **设备兼容**：支持桌面端、平板、手机响应式布局
|
||||
- **分辨率适配**：支持1920px、1366px、768px、375px等常见分辨率
|
||||
|
||||
### 4.4 SEO优化需求
|
||||
- **元标签优化**：每个页面独立的title、description、keywords
|
||||
- **结构化数据**：使用Schema.org标记关键内容
|
||||
- **站点地图**：自动生成XML sitemap
|
||||
- **页面速度**：Google PageSpeed Insights评分 ≥ 90
|
||||
- **移动友好**：通过Google移动友好测试
|
||||
|
||||
### 4.5 可维护性需求
|
||||
- **代码规范**：遵循HTML5语义化标签和Bootstrap最佳实践
|
||||
- **模块化开发**：基于文件目录结构的模块分离
|
||||
- **文档完整**：页面结构和组件说明文档齐全
|
||||
- **浏览器兼容**：确保主流浏览器兼容性测试
|
||||
|
||||
## 5. 原型与交互设计
|
||||
|
||||
### 5.1 页面结构
|
||||
|
||||
#### 首页布局
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Header │
|
||||
│ - Logo + Brand Name │
|
||||
│ - Navigation Menu │
|
||||
│ - CTA Buttons (小程序/商家入驻) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Hero Section │
|
||||
│ - 主标题和副标题 │
|
||||
│ - 数据统计展示 │
|
||||
│ - 主要行动按钮 │
|
||||
├─────────────────────────────────────┤
|
||||
│ Features Section │
|
||||
│ - 三大核心功能展示 │
|
||||
│ - 图标+标题+描述 │
|
||||
│ - 交互式动画效果 │
|
||||
├─────────────────────────────────────┤
|
||||
│ Success Stories │
|
||||
│ - 精选案例展示 │
|
||||
│ - 用户头像和评价 │
|
||||
│ - 查看全部案例链接 │
|
||||
├─────────────────────────────────────┤
|
||||
│ Call to Action │
|
||||
│ - 强化转化提示 │
|
||||
│ - 多渠道入口 │
|
||||
├─────────────────────────────────────┤
|
||||
│ Footer │
|
||||
│ - 网站地图链接 │
|
||||
│ - 社交媒体链接 │
|
||||
│ - 联系信息和备案号 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 商家合作页面关键元素
|
||||
- **价值主张**：清晰展示合作收益和优势
|
||||
- **流程可视化**：使用时间轴或流程图展示合作步骤
|
||||
- **数据证明**：展示成功商家案例和收益数据
|
||||
- **表单设计**：分步表单，减少用户填写压力
|
||||
- **信任要素**：资质认证、安全保障说明
|
||||
|
||||
### 5.2 交互设计原则
|
||||
- **简洁明了**：信息层级清晰，重点突出
|
||||
- **引导性强**：明确的行动号召和转化路径
|
||||
- **反馈及时**：操作反馈和状态提示明确
|
||||
- **移动优先**：优先保证移动端体验
|
||||
- **无障碍设计**：支持键盘导航和屏幕阅读器
|
||||
|
||||
## 6. 技术架构
|
||||
|
||||
### 6.1 前端技术栈
|
||||
- **核心技术**：HTML5 + CSS3 + JavaScript (ES6+)
|
||||
- **UI框架**：Bootstrap 5.3.0
|
||||
- **图标库**：Font Awesome 6.7.2
|
||||
- **动画效果**：AOS (Animate On Scroll) 2.3.4
|
||||
- **交互增强**：jQuery 3.6.0
|
||||
- **表单验证**：原生JavaScript验证 + Bootstrap表单组件
|
||||
- **响应式设计**：Bootstrap网格系统 + 媒体查询
|
||||
|
||||
### 6.2 后端集成
|
||||
- **API接口**：RESTful API规范
|
||||
- **认证方式**：JWT Token认证
|
||||
- **数据格式**：JSON格式数据交换
|
||||
- **错误处理**：统一错误码和消息格式
|
||||
|
||||
### 6.3 部署架构
|
||||
- **静态资源**：Nginx静态文件服务 + CDN加速分发
|
||||
- **构建部署**：直接文件部署，无需构建过程
|
||||
- **环境配置**：多环境配置文件管理
|
||||
- **缓存策略**：浏览器缓存 + CDN缓存优化
|
||||
- **监控告警**：基础性能监控 + 错误日志监控
|
||||
|
||||
## 7. 项目计划
|
||||
|
||||
### 7.1 开发阶段
|
||||
| 阶段 | 时间 | 主要任务 | 交付物 |
|
||||
|------|------|---------|--------|
|
||||
| 需求确认 | 第1周 | 需求评审，原型确认 | PRD文档，原型设计 |
|
||||
| 技术设计 | 第2周 | 技术方案设计，环境搭建 | 技术设计文档 |
|
||||
| 开发实现 | 第3-6周 | 前端开发，后端接口联调 | 可运行版本 |
|
||||
| 测试验收 | 第7周 | 功能测试，性能测试 | 测试报告 |
|
||||
| 上线部署 | 第8周 | 生产部署，监控配置 | 线上环境 |
|
||||
|
||||
### 7.2 资源分配
|
||||
- **前端开发**：1-2人（3周）
|
||||
- **后端支持**：1人（1周，主要处理表单提交接口）
|
||||
- **测试验证**：1人（1周）
|
||||
- **项目管理**：1人（全程）
|
||||
|
||||
## 8. 风险控制
|
||||
|
||||
### 8.1 技术风险
|
||||
- **浏览器兼容性**：制定兼容性矩阵，优先支持现代浏览器
|
||||
- **性能瓶颈**：提前进行性能预估和优化方案设计
|
||||
- **第三方依赖**：选择稳定版本，制定降级方案
|
||||
|
||||
### 8.2 项目风险
|
||||
- **需求变更**：建立变更控制流程
|
||||
- **进度延迟**：设置缓冲时间，定期进度检查
|
||||
- **质量风险**：代码审查，自动化测试覆盖
|
||||
|
||||
### 8.3 运营风险
|
||||
- **SEO效果**：持续优化和内容更新
|
||||
- **转化率**：A/B测试优化转化路径
|
||||
- **安全漏洞**：定期安全扫描和漏洞修复
|
||||
|
||||
## 9. 附录
|
||||
|
||||
### 9.1 名词解释
|
||||
- **PV（Page View）**：页面浏览量
|
||||
- **UV（Unique Visitor）**：独立访客数
|
||||
- **转化率**：完成目标动作的用户比例
|
||||
- **CDN**：内容分发网络
|
||||
- **JWT**：JSON Web Token认证方式
|
||||
|
||||
### 9.2 相关文档
|
||||
- [系统架构文档](./architecture.md)
|
||||
- [API接口文档](./API_DOCS.md)
|
||||
- [数据库设计文档](./database-design.md)
|
||||
- [开发指南](./DEVELOPMENT_GUIDE.md)
|
||||
|
||||
### 9.3 修订记录
|
||||
| 日期 | 版本 | 修订内容 | 修订人 |
|
||||
|------|------|---------|--------|
|
||||
| 2024-01-15 | v1.0 | 创建初始版本 | 产品经理 |
|
||||
| 2024-01-16 | v1.1 | 补充SEO和性能指标 | 产品经理 |
|
||||
@@ -60,161 +60,166 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 公司介绍 -->
|
||||
<!-- 公司简介 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title text-center">我们的故事</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">公司简介</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="about-image-wrapper">
|
||||
<img src="images/team-photo.svg" alt="结伴客团队" class="img-fluid rounded shadow">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="mb-4">让旅行不再孤单</h3>
|
||||
<p class="lead">结伴客平台成立于2015年，源于一群热爱旅行的朋友的共同梦想。我们相信，旅行不仅是看风景，更是与人分享、与自然互动的过程。</p>
|
||||
<p>在快节奏的现代生活中，很多人渴望逃离城市的喧嚣，走进大自然的怀抱，但又不想独自一人。于是我们创建了这个平台，让志同道合的人能够轻松找到旅伴，一起探索世界的美好。</p>
|
||||
<p>通过我们的平台，用户可以找到志同道合的旅行伙伴，一起探索自然的奥秘；也可以认领可爱的动物，体验农场生活，感受生命的温暖。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心价值观 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title text-center">我们的理念</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="value-box">
|
||||
<div class="value-icon">
|
||||
<i class="fa fa-tree"></i>
|
||||
</div>
|
||||
<h3>回归自然</h3>
|
||||
<p class="mb-0">我们倡导回归自然的生活方式，鼓励人们走出城市，亲近大自然，感受生命的本真。</p>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-4">
|
||||
<h3 class="h4 mb-4">我们的使命</h3>
|
||||
<p>结伴客致力于为用户提供独特的旅行结伴体验，通过创新的平台服务连接志同道合的旅行者，让人与人、人与自然建立更深层的情感联系。</p>
|
||||
|
||||
<h3 class="h4 mb-4 mt-5">我们的愿景</h3>
|
||||
<p>成为国内领先的结伴旅行服务平台，打造一个充满温暖、信任和乐趣的旅行社区，让每一次旅行都成为珍贵的回忆。</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="value-box">
|
||||
<div class="value-icon">
|
||||
<i class="fa fa-users"></i>
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card border-0 shadow">
|
||||
<div class="card-body p-5">
|
||||
<h3 class="h4 mb-4">核心价值观</h3>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="feature-icon-sm bg-primary text-white rounded-circle me-3">
|
||||
<i class="fa fa-heart"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="h5 mb-2">真诚</h4>
|
||||
<p class="mb-0">以诚待人，建立信任的伙伴关系</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex mb-3">
|
||||
<div class="feature-icon-sm bg-success text-white rounded-circle me-3">
|
||||
<i class="fa fa-shield-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="h5 mb-2">安全</h4>
|
||||
<p class="mb-0">保障用户信息安全和旅行安全</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<div class="feature-icon-sm bg-info text-white rounded-circle me-3">
|
||||
<i class="fa fa-leaf"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="h5 mb-2">自然</h4>
|
||||
<p class="mb-0">倡导与自然和谐相处的旅行方式</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>真诚交友</h3>
|
||||
<p class="mb-0">我们坚持以真诚的态度对待每一位用户，帮助大家在旅途中结识真正的朋友。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="value-box">
|
||||
<div class="value-icon">
|
||||
<i class="fa fa-heart"></i>
|
||||
</div>
|
||||
<h3>共享快乐</h3>
|
||||
<p class="mb-0">我们相信分享能让快乐加倍，鼓励用户在平台上共享旅行经历和美好回忆。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title text-center">成长足迹</h2>
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold text-center section-title">发展历程</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="milestone">
|
||||
<div class="milestone-icon">
|
||||
<i class="fa fa-1"></i>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-10 mx-auto">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2015年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">公司成立</h3>
|
||||
<p>武汉高灏科技有限责任公司正式成立，开始构思结伴客平台的商业模式</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2017年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">平台上线</h3>
|
||||
<p>结伴客1.0版本正式上线，提供基础的旅行结伴功能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2019年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">功能拓展</h3>
|
||||
<p>推出动物认领特色功能，平台用户突破10万</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2021年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">服务升级</h3>
|
||||
<p>新增送花服务和推广奖励机制，平台生态更加完善</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2023年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">技术革新</h3>
|
||||
<p>平台全面升级，采用微服务架构，用户体验大幅提升</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2025年</div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="h5">未来展望</h3>
|
||||
<p>计划拓展国际市场，打造全球结伴旅行平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5>2015年 - 梦想起航</h5>
|
||||
<p>结伴客平台正式成立，专注于旅行结伴服务，帮助第一批用户找到了志同道合的旅伴。</p>
|
||||
</div>
|
||||
|
||||
<div class="milestone">
|
||||
<div class="milestone-icon">
|
||||
<i class="fa fa-2"></i>
|
||||
</div>
|
||||
<h5>2017年 - 服务升级</h5>
|
||||
<p>推出动物认领服务，为用户提供更多元化的自然体验，让用户在旅行中与动物建立情感纽带。</p>
|
||||
</div>
|
||||
|
||||
<div class="milestone">
|
||||
<div class="milestone-icon">
|
||||
<i class="fa fa-3"></i>
|
||||
</div>
|
||||
<h5>2019年 - 用户突破</h5>
|
||||
<p>注册用户突破10万，合作商家达到500家，平台影响力不断扩大。</p>
|
||||
</div>
|
||||
|
||||
<div class="milestone">
|
||||
<div class="milestone-icon">
|
||||
<i class="fa fa-4"></i>
|
||||
</div>
|
||||
<h5>2021年 - 服务拓展</h5>
|
||||
<p>新增送花服务，丰富用户体验，让用户能够通过鲜花传递旅途中的温暖与浪漫。</p>
|
||||
</div>
|
||||
|
||||
<div class="milestone">
|
||||
<div class="milestone-icon">
|
||||
<i class="fa fa-5"></i>
|
||||
</div>
|
||||
<h5>2023年 - 全新出发</h5>
|
||||
<p>平台全面升级，优化用户体验，致力于成为国内领先的自然旅行社交平台。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 我们的团队 -->
|
||||
<!-- 团队介绍 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title text-center">核心团队</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">核心团队</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="team-member text-center">
|
||||
<img src="images/ceo-avatar.svg" class="rounded-circle mb-3 team-photo" alt="CEO张明">
|
||||
<h5>张明</h5>
|
||||
<p class="text-muted mb-0">首席执行官</p>
|
||||
<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">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">张总</h3>
|
||||
<p class="card-text text-muted">创始人兼CEO</p>
|
||||
<p>拥有10年互联网产品经验，热爱旅行和户外运动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="team-member text-center">
|
||||
<img src="images/cto-avatar.svg" class="rounded-circle mb-3 team-photo" alt="CTO李华">
|
||||
<h5>李华</h5>
|
||||
<p class="text-muted mb-0">首席技术官</p>
|
||||
<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">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">李博士</h3>
|
||||
<p class="card-text text-muted">首席技术官</p>
|
||||
<p>计算机博士，专注于分布式系统和大数据分析</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="team-member text-center">
|
||||
<img src="images/cmo-avatar.svg" class="rounded-circle mb-3 team-photo" alt="CMO王芳">
|
||||
<h5>王芳</h5>
|
||||
<p class="text-muted mb-0">首席市场官</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="team-member text-center">
|
||||
<img src="images/coo-avatar.svg" class="rounded-circle mb-3 team-photo" alt="COO赵强">
|
||||
<h5>赵强</h5>
|
||||
<p class="text-muted mb-0">首席运营官</p>
|
||||
<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">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">王女士</h3>
|
||||
<p class="card-text text-muted">首席运营官</p>
|
||||
<p>资深运营专家，擅长用户增长和生态建设</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,10 +249,10 @@
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -287,8 +292,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
@@ -303,7 +308,7 @@
|
||||
</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/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/main.js"></script>
|
||||
</body>
|
||||
|
||||
538
website/animal.html
Normal file
538
website/animal.html
Normal file
@@ -0,0 +1,538 @@
|
||||
<!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/animal.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 active" 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>
|
||||
<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="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>
|
||||
</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-heart"></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-leaf"></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-sync-alt"></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-paw"></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-feather"></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-fish"></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-tree"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">特殊项目</h3>
|
||||
<p class="text-muted small">蜜蜂、蚕等特殊养殖项目，体验不同乐趣</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 可认领动物列表 -->
|
||||
<section id="animals" 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="animal-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>幼年 (0-6个月)</option>
|
||||
<option>青年 (6个月-2岁)</option>
|
||||
<option>成年 (2岁以上)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<select class="form-select">
|
||||
<option selected>农场</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="animals-container">
|
||||
<!-- 动物卡片将通过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="小羊">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h5 class="card-title">小羊咩咩</h5>
|
||||
<span class="badge bg-success">可认领</span>
|
||||
</div>
|
||||
<p class="card-text">品种：绵羊<br>年龄：6个月<br>性格：温顺可爱，喜欢与人亲近</p>
|
||||
<div class="animal-stats">
|
||||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 98%满意度</span>
|
||||
<span class="stat-item"><i class="fa fa-user-friends"></i> 12位认领者</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 animal-card h-100">
|
||||
<img src="images/animal2.svg" class="card-img-top" alt="小兔">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h5 class="card-title">小白兔</h5>
|
||||
<span class="badge bg-warning text-dark">已被认领</span>
|
||||
</div>
|
||||
<p class="card-text">品种：荷兰兔<br>年龄：4个月<br>性格：活泼好动，好奇心强</p>
|
||||
<div class="animal-stats">
|
||||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 95%满意度</span>
|
||||
<span class="stat-item"><i class="fa fa-user-friends"></i> 8位认领者</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 animal-card h-100">
|
||||
<img src="images/animal3.svg" class="card-img-top" alt="小鸡">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h5 class="card-title">小花鸡</h5>
|
||||
<span class="badge bg-success">可认领</span>
|
||||
</div>
|
||||
<p class="card-text">品种：芦花鸡<br>年龄：3个月<br>性格：聪明机警，产蛋量高</p>
|
||||
<div class="animal-stats">
|
||||
<span class="stat-item"><i class="fa fa-heart text-danger"></i> 92%满意度</span>
|
||||
<span class="stat-item"><i class="fa fa-user-friends"></i> 5位认领者</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="process" 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="text-center">
|
||||
<div class="step-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">1. 选择动物</h3>
|
||||
<p class="text-muted">浏览可认领动物，选择您喜欢的动物伙伴</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-file-contract"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">2. 签订协议</h3>
|
||||
<p class="text-muted">在线签订认领协议，明确双方权利义务</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">3. 支付认领费</h3>
|
||||
<p class="text-muted">支付一次性认领费和年度养护费用</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-sync-alt"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">4. 持续互动</h3>
|
||||
<p class="text-muted">定期获取动物近况，可实地探访互动</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="card h-100">
|
||||
<img src="images/animal-success1.jpg" class="card-img-top" alt="小羊认领">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">小羊咩咩的成长故事</h5>
|
||||
<p class="card-text">来自北京的李女士认领了这只小羊，每月都会收到小羊的成长照片和视频，还专程到农场探访。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">认领者: 李女士</small>
|
||||
<span class="badge bg-success">已认领8个月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="images/animal-success2.jpg" class="card-img-top" alt="兔子认领">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">小白兔的温馨时光</h5>
|
||||
<p class="card-text">上海的王先生为孩子认领了这只兔子，让孩子学会关爱动物，体验生命教育。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">认领者: 王先生</small>
|
||||
<span class="badge bg-success">已认领1年</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="images/animal-success3.jpg" class="card-img-top" alt="鸡认领">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">田园生活的开始</h5>
|
||||
<p class="card-text">广州的张女士认领了一群鸡，不仅收获新鲜鸡蛋，还体验了乡村田园生活。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">认领者: 张女士</small>
|
||||
<span class="badge bg-success">已认领6个月</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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">
|
||||
我们会定期通过APP或微信推送动物的照片、视频和健康状况报告。认领者还可以预约实地探访，与动物亲密互动。
|
||||
</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 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/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -23,7 +23,7 @@
|
||||
<!-- 添加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="bi bi-map-fill me-2"></i>结伴客
|
||||
<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>
|
||||
@@ -62,49 +62,87 @@
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">用户案例</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">用户案例</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card case-card">
|
||||
<img src="images/travel-case.svg" class="card-img-top case-image" alt="旅行结伴案例">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">从陌生人到旅行伙伴</h5>
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">通过结伴客找到了同样喜欢徒步的小王，两人一起完成了川藏线的徒步旅行，成为了很好的朋友。</p>
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="川藏线骑行">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">川藏线骑行挑战</h3>
|
||||
<p class="card-text">来自北京、上海、广州的三位骑行爱好者通过结伴客平台成功组队，完成了318川藏线的骑行挑战。他们在平台上相识，经过充分沟通后决定一起踏上这段难忘的旅程。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 3人</small>
|
||||
<span class="badge bg-success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card case-card">
|
||||
<img src="images/farm-case.svg" class="card-img-top case-image" alt="农场体验案例">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">难忘的农场体验</h5>
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">认领了一只小羊，定期到农场看望它，体验了真正的农场生活，这成为最难忘的旅行回忆。</p>
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="云南背包客">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">云南背包客之旅</h3>
|
||||
<p class="card-text">两位独自旅行的女孩通过平台相识，结伴游览了大理、丽江和香格里拉。她们在平台上分享旅行经验，最终决定一起探索云南的美景，建立了深厚的友谊。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 2人</small>
|
||||
<span class="badge bg-success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card case-card">
|
||||
<img src="images/flower-case.svg" class="card-img-top case-image" alt="送花服务案例">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">浪漫的送花惊喜</h5>
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">通过结伴客为结伴伙伴订购了鲜花，给了她一个浪漫的惊喜，两人的关系更进一步。</p>
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="东北滑雪">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">东北滑雪之旅</h3>
|
||||
<p class="card-text">滑雪爱好者组成的四人小队，一起探索了东北各大滑雪场。通过平台的精准匹配功能，他们找到了滑雪水平相当的伙伴，共同度过了一个充满激情的冬季假期。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 4人</small>
|
||||
<span class="badge bg-success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="农场体验">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">农场动物认领体验</h3>
|
||||
<p class="card-text">一家三口通过动物认领功能，认领了一只小羊和一群鸡。他们定期到农场探访，让孩子体验了与动物互动的乐趣，也了解了食物的来源，增进了亲子关系。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">认领动物: 小羊、鸡</small>
|
||||
<span class="badge bg-success">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,135 +150,194 @@
|
||||
</section>
|
||||
|
||||
<!-- 商家案例 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">商家案例</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card case-card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">绿野农场 - 动物认领业务增长</h5>
|
||||
<div class="testimonial-content flex-grow-1">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">通过结伴客平台，绿野农场的动物认领业务增长了300%，吸引了大量城市用户前来体验农场生活。</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
月均认领动物数量增长
|
||||
<span class="badge bg-primary rounded-pill">300%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
农场参观人数增长
|
||||
<span class="badge bg-primary rounded-pill">200%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
用户满意度
|
||||
<span class="badge bg-success rounded-pill">4.9</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold text-center section-title">商家案例</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card case-card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">花好月圆花店 - 送花服务拓展</h5>
|
||||
<div class="testimonial-content flex-grow-1">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">加入结伴客平台后，花店的送花服务订单增长了150%，特别是在节假日期间订单量暴增。</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="绿野农场">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">绿野农场</h3>
|
||||
<p class="card-text">通过结伴客平台，绿野农场的动物认领业务增长了300%，吸引了大量城市家庭前来体验农场生活。平台为农场带来了稳定的客源和额外收入。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">业务增长: 300%</small>
|
||||
<span class="badge bg-primary">合作伙伴</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="花之语花店">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">花之语花店</h3>
|
||||
<p class="card-text">花店通过结伴客的送花服务功能，月订单量增长了150%。特别是在情人节、母亲节等节日期间，订单量更是激增，成为平台的重要合作伙伴。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">订单增长: 150%</small>
|
||||
<span class="badge bg-primary">合作伙伴</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="探险旅行社">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">探险旅行社</h3>
|
||||
<p class="card-text">旅行社通过平台发布特色探险线路，成功吸引了大量年轻用户。平台的精准匹配功能帮助他们找到了目标客户群体，提高了成团率和客户满意度。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">成团率提升: 80%</small>
|
||||
<span class="badge bg-primary">合作伙伴</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<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="民宿联盟">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h3 class="h5 card-title">民宿联盟</h3>
|
||||
<p class="card-text">多家民宿通过平台的旅行结伴功能，为结伴旅客提供住宿服务。平台为他们带来了稳定的客源，同时旅客也能享受到更具性价比的住宿体验。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">入住率提升: 65%</small>
|
||||
<span class="badge bg-primary">合作伙伴</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
月均订单增长
|
||||
<span class="badge bg-primary rounded-pill">150%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
复购率提升
|
||||
<span class="badge bg-primary rounded-pill">80%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
用户好评率
|
||||
<span class="badge bg-success rounded-pill">4.8</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<!-- 推广案例 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">平台成就</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">推广案例</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">10000+</div>
|
||||
<div class="stats-label">成功结伴</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-user-graduate"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">大学生创业故事</h3>
|
||||
<p class="card-text">小李是一名大学生，通过推广结伴客平台，每月获得3000+元额外收入，不仅解决了生活费问题，还积累了创业经验。</p>
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<small class="text-muted">月收入: ¥3,500</small>
|
||||
<span class="badge bg-success">持续增长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">5000+</div>
|
||||
<div class="stats-label">动物认领</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-home"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">全职宝妈的副业</h3>
|
||||
<p class="card-text">王女士是一位全职宝妈，利用闲暇时间推广结伴客服务，每月稳定收入2000元左右，实现了经济独立。</p>
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<small class="text-muted">月收入: ¥2,200</small>
|
||||
<span class="badge bg-success">稳定收益</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">500+</div>
|
||||
<div class="stats-label">合作商家</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">4.8</div>
|
||||
<div class="stats-label">用户评分</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-briefcase"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">企业员工的兼职</h3>
|
||||
<p class="card-text">陈先生是一名企业员工，利用业余时间推广服务，每月额外收入5000+元，大大提高了生活质量。</p>
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<small class="text-muted">月收入: ¥5,800</small>
|
||||
<span class="badge bg-success">高收入</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 行动号召 -->
|
||||
<section class="cta-section">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-4">分享你的结伴故事</h2>
|
||||
<p class="lead mb-5 fs-4">无论你是用户、商家还是推广员，都可以与我们分享你的成功故事</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg btn-rounded">联系我们</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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="bi bi-wechat"></i>
|
||||
<i class="fab fa-weixin"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon me-2">
|
||||
<i class="bi bi-weibo"></i>
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon">
|
||||
<i class="bi bi-tencent-qq"></i>
|
||||
<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="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -280,8 +377,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<!-- 添加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 me-2"></i>结伴客
|
||||
<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>
|
||||
@@ -59,119 +59,192 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<!-- 联系方式 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">联系信息</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">联系方式</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="contact-info">
|
||||
<div class="contact-icon">
|
||||
<i class="fa fa-map-marker-alt"></i>
|
||||
<div class="card contact-card h-100 text-center">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">电子邮箱</h3>
|
||||
<p class="card-text">如有任何问题或建议，欢迎发送邮件至我们的官方邮箱</p>
|
||||
<a href="mailto:master@gaohaotech.com" class="btn btn-outline-primary">发送邮件</a>
|
||||
</div>
|
||||
<h3>公司地址</h3>
|
||||
<p class="mb-0">武汉市东湖高新技术开发区关山大道保利国际中心8楼</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="contact-info">
|
||||
<div class="contact-icon">
|
||||
<i class="fa fa-phone"></i>
|
||||
<div class="card contact-card h-100 text-center">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-phone"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">联系电话</h3>
|
||||
<p class="card-text">工作日 9:00-18:00，您可以通过以下电话联系我们</p>
|
||||
<p class="mb-0">郑经理: 15927219038</p>
|
||||
<p class="mb-0">杜经理: 13871378634</p>
|
||||
</div>
|
||||
<h3>联系电话</h3>
|
||||
<p class="mb-0">郑经理 15927219038</p>
|
||||
<p class="mb-0">杜经理 13871378634</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="contact-info">
|
||||
<div class="contact-icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<div class="card contact-card h-100 text-center">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">公司地址</h3>
|
||||
<p class="card-text">欢迎前来参观交流，我们期待与您面对面沟通</p>
|
||||
<p class="mb-0">武汉市东湖高新技术开发区</p>
|
||||
<p class="mb-0">关山大道保利国际中心8楼</p>
|
||||
</div>
|
||||
<h3>电子邮箱</h3>
|
||||
<p class="mb-0">master@gaohaotech.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系表单 -->
|
||||
<section class="form-section">
|
||||
<!-- 在线留言 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold text-center section-title">在线留言</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="contact-form">
|
||||
<h2 class="mb-4">留言给我们</h2>
|
||||
<p class="lead text-muted mb-4">有任何问题或建议，请填写以下表单，我们会尽快回复您。</p>
|
||||
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" required placeholder="请输入您的姓名">
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">姓名</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">邮箱</label>
|
||||
<input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" required placeholder="请输入您的邮箱">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone" placeholder="请输入您的电话">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone" placeholder="请输入您的电话">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="subject" class="form-label">主题</label>
|
||||
<select class="form-select" id="subject">
|
||||
<option selected>请选择留言主题</option>
|
||||
<option value="business">商务合作</option>
|
||||
<option value="support">技术支持</option>
|
||||
<option value="feedback">意见反馈</option>
|
||||
<option value="other">其他问题</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="subject" required>
|
||||
<option value="">请选择主题</option>
|
||||
<option value="business">商务合作</option>
|
||||
<option value="support">技术支持</option>
|
||||
<option value="complaint">投诉建议</option>
|
||||
<option value="other">其他问题</option>
|
||||
</select>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">留言内容</label>
|
||||
<textarea class="form-control" id="message" rows="5" placeholder="请详细描述您的问题或建议"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<label for="message" class="form-label">留言内容 <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="message" rows="5" required placeholder="请输入您的留言内容"></textarea>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="agree">
|
||||
<label class="form-check-label" for="agree">我已阅读并同意 <a href="terms.html">用户协议</a> 和 <a href="privacy.html">隐私政策</a></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary">发送留言</button>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary btn-lg">提交留言</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 地图 -->
|
||||
<!-- 常见问题 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">我们在哪</h2>
|
||||
<h2 class="display-5 fw-bold text-center section-title">常见问题</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="map-container">
|
||||
<iframe src="https://map.baidu.com/" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
|
||||
<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">
|
||||
您可以通过结伴客官网、微信小程序或下载APP进行注册。只需提供手机号码并完成验证，即可成为结伴客用户。
|
||||
</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">
|
||||
我们会定期通过APP或微信推送动物的照片、视频和健康状况报告。认领者还可以预约实地探访，与动物亲密互动。
|
||||
</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">
|
||||
佣金按月结算，每月10日结算上月佣金。您可以在个人中心查看收益明细并申请提现，支持微信、支付宝等多种提现方式。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="faq5">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
|
||||
遇到问题如何寻求帮助？
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
您可以通过在线客服、客服电话或留言表单与我们联系。我们的客服团队工作时间为工作日9:00-18:00，将尽快为您解决问题。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,28 +256,28 @@
|
||||
<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 fa-wechat"></i>
|
||||
<i class="fab fa-weixin"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon me-2">
|
||||
<i class="fa fa-weibo"></i>
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon">
|
||||
<i class="fa fa-qq"></i>
|
||||
<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="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -244,8 +317,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
@@ -260,7 +333,7 @@
|
||||
</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/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/main.js"></script>
|
||||
</body>
|
||||
|
||||
310
website/css/animal.css
Normal file
310
website/css/animal.css
Normal file
@@ -0,0 +1,310 @@
|
||||
/* 动物认领页面样式 */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 2rem;
|
||||
margin: 0 auto 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.feature-box:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.feature-box:hover .feature-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.animal-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.animal-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.animal-stats {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.animal-filter {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 筛选器样式 */
|
||||
.animal-filter {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.animal-filter .filter-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.animal-filter .form-select {
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.animal-filter .form-select:focus {
|
||||
border-color: #4ecdc4;
|
||||
box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
|
||||
}
|
||||
|
||||
/* 流程步骤样式 */
|
||||
.process-step {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.process-step .step-number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
.process-step .step-icon {
|
||||
font-size: 2.5rem;
|
||||
color: #4ecdc4;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.process-step h5 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.process-step p {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 常见问题样式 */
|
||||
.accordion-button {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.accordion-button:not(.collapsed) {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.animal-modal .modal-content {
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.animal-modal .modal-header {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
.animal-modal .modal-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.animal-modal .animal-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.animal-modal .animal-details {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.animal-modal .detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.animal-modal .detail-label {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.animal-modal .detail-value {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.animal-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.animal-filter {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.animal-modal .modal-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animal-card {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.animal-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.animal-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.animal-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.animal-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
.animal-card:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* 加载状态 */
|
||||
.animal-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.animal-loading .spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #4ecdc4;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.claim-form .form-control,
|
||||
.claim-form .form-select {
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.claim-form .form-control:focus,
|
||||
.claim-form .form-select:focus {
|
||||
border-color: #4ecdc4;
|
||||
box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
|
||||
}
|
||||
|
||||
.claim-form .form-label {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
367
website/css/flower.css
Normal file
367
website/css/flower.css
Normal file
@@ -0,0 +1,367 @@
|
||||
/* 送花服务页面样式 */
|
||||
|
||||
/* 页面头部样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 鲜花卡片样式 */
|
||||
.flower-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.flower-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.flower-card .card-img-top {
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.flower-card:hover .card-img-top {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.flower-card .card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.flower-card .flower-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.flower-card .flower-original-price {
|
||||
text-decoration: line-through;
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.flower-card .flower-tags {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flower-card .flower-tag {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 15px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flower-card .flower-tag.love {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.flower-card .flower-tag.birthday {
|
||||
background-color: rgba(255, 193, 7, 0.1);
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.flower-card .flower-tag.celebration {
|
||||
background-color: rgba(32, 201, 151, 0.1);
|
||||
color: #20c997;
|
||||
}
|
||||
|
||||
.flower-card .flower-tag.sympathy {
|
||||
background-color: rgba(108, 117, 125, 0.1);
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 筛选器样式 */
|
||||
.flower-filter {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.flower-filter .filter-title {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 分类卡片样式 */
|
||||
.category-card {
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.category-card .category-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #e55a5a 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.category-card h5 {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.category-card p {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 流程步骤样式 */
|
||||
.process-step {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.process-step:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.process-step .step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ff6b6b, #e55a5a);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.process-step .step-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #e55a5a 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 2rem;
|
||||
margin: 0 auto 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.process-step:hover .step-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.process-step h5 {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.process-step p {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-flower {
|
||||
background: linear-gradient(135deg, #ff6b6b, #e55a5a);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-flower:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-flower-outline {
|
||||
border: 2px solid #ff6b6b;
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
font-weight: 600;
|
||||
color: #ff6b6b;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-flower-outline:hover {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.flower-card .card-img-top {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
padding: 1.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.category-card .category-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
padding: 1.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 章节标题样式 */
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #e55a5a 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes flowerBloom {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flower-card {
|
||||
animation: flowerBloom 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.flower-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.flower-loading .spinner-border {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.flower-empty {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.flower-empty i {
|
||||
font-size: 4rem;
|
||||
color: #dee2e6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flower-empty h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 价格标签样式 */
|
||||
.price-badge {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 折扣标签样式 */
|
||||
.discount-badge {
|
||||
background: #20c997;
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 卡片悬停效果增强 */
|
||||
.flower-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flower-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 142, 0.1));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.flower-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
225
website/css/privacy.css
Normal file
225
website/css/privacy.css
Normal file
@@ -0,0 +1,225 @@
|
||||
/* 隐私政策页面样式 */
|
||||
|
||||
/* 页面头部 */
|
||||
.privacy-header {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.privacy-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('../images/pattern-bg.png') center/cover;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.min-vh-50 {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
/* 隐私政策内容区域 */
|
||||
.privacy-content {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
padding: 3rem;
|
||||
margin-top: -60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 隐私政策章节 */
|
||||
.privacy-section {
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.privacy-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.privacy-section h2 {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
border-left: 4px solid #4facfe;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.privacy-section h3 {
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
border-left: 3px solid #00f2fe;
|
||||
}
|
||||
|
||||
.privacy-section p {
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.privacy-section ul {
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.privacy-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.privacy-section li::before {
|
||||
content: '•';
|
||||
color: #4facfe;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
}
|
||||
|
||||
/* 强调文本 */
|
||||
.privacy-section strong {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 定义列表 */
|
||||
.privacy-section .list-unstyled li {
|
||||
margin-bottom: 0.8rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.privacy-section .list-unstyled li::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.privacy-section .list-unstyled strong {
|
||||
color: #4facfe;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.privacy-header {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
padding: 2rem 1.5rem;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.privacy-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.privacy-section h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.privacy-section h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.privacy-content {
|
||||
padding: 1.5rem 1rem;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.privacy-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.privacy-section ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.privacy-section h2 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.privacy-section h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.privacy-header {
|
||||
background: none !important;
|
||||
color: #000 !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.privacy-header::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
box-shadow: none;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.privacy-section h2,
|
||||
.privacy-section h3 {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.privacy-section p,
|
||||
.privacy-section ul {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.privacy-section strong {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 特殊样式 */
|
||||
.privacy-section ul ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.privacy-section ul ul li::before {
|
||||
content: '◦';
|
||||
color: #00f2fe;
|
||||
}
|
||||
|
||||
/* 强调框 */
|
||||
.privacy-section > p:first-child {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 附录特殊样式 */
|
||||
.privacy-section:last-child h2 {
|
||||
border-left-color: #ff6b6b;
|
||||
}
|
||||
|
||||
.privacy-section:last-child ul li::before {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
289
website/css/reward.css
Normal file
289
website/css/reward.css
Normal file
@@ -0,0 +1,289 @@
|
||||
/* 推广奖励页面样式 */
|
||||
|
||||
/* 页面头部样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.benefit-box {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.benefit-box:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 2rem;
|
||||
margin: 0 auto 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.benefit-box:hover .benefit-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.commission-card {
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.commission-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.commission-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.commission-rate {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #f39c12;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.promotion-method {
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.promotion-method:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.method-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.result-area {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#resultAmount {
|
||||
color: #f39c12;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.benefit-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.commission-card {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.commission-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.commission-rate {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.promotion-method {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.promotion-method .method-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#promotionForm {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes rewardPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 10px 30px rgba(108, 92, 231, 0.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 15px 35px rgba(108, 92, 231, 0.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 10px 30px rgba(108, 92, 231, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-box,
|
||||
.commission-card,
|
||||
.promotion-method {
|
||||
animation: rewardPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.reward-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.reward-loading .spinner-border {
|
||||
color: #6c5ce7;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.reward-empty {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.reward-empty i {
|
||||
font-size: 4rem;
|
||||
color: #dee2e6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reward-empty h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-bar-reward {
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.reward-tag {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 15px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: rgba(108, 92, 231, 0.1);
|
||||
color: #6c5ce7;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 统计数字样式 */
|
||||
.reward-stat {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.reward-stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #6c5ce7;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.reward-stat-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 渐变背景效果 */
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #6c5ce7 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gradient-bg h1, .gradient-bg h2, .gradient-bg h3, .gradient-bg h4, .gradient-bg h5, .gradient-bg h6 {
|
||||
color: white;
|
||||
}
|
||||
188
website/css/terms.css
Normal file
188
website/css/terms.css
Normal file
@@ -0,0 +1,188 @@
|
||||
/* 用户协议页面样式 */
|
||||
|
||||
/* 页面头部 */
|
||||
.terms-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terms-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('../images/pattern-bg.png') center/cover;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.min-vh-50 {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
/* 协议内容区域 */
|
||||
.terms-content {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
padding: 3rem;
|
||||
margin-top: -60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 协议章节 */
|
||||
.terms-section {
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.terms-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.terms-section h2 {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
border-left: 4px solid #667eea;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.terms-section p {
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.terms-section ul {
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.terms-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terms-section li::before {
|
||||
content: '•';
|
||||
color: #667eea;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
}
|
||||
|
||||
/* 联系信息 */
|
||||
.terms-contact {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.terms-contact h3 {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.terms-contact ul li {
|
||||
margin-bottom: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.terms-contact strong {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.terms-header {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.terms-content {
|
||||
padding: 2rem 1.5rem;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.terms-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.terms-section h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.terms-contact {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.terms-content {
|
||||
padding: 1.5rem 1rem;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.terms-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.terms-section ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.terms-contact {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.terms-header {
|
||||
background: none !important;
|
||||
color: #000 !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.terms-header::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terms-content {
|
||||
box-shadow: none;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.terms-section h2 {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.terms-section p,
|
||||
.terms-section ul {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.terms-contact {
|
||||
background: none !important;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
236
website/css/travel.css
Normal file
236
website/css/travel.css
Normal file
@@ -0,0 +1,236 @@
|
||||
/* 旅行结伴页面样式 */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.travel-plan-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.travel-plan-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.travel-plan-card .card-img-top {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.travel-plan-card .card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.travel-plan-card .destination {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.travel-plan-card .travel-date {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.travel-plan-card .budget-badge {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.travel-plan-card .participants {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.travel-plan-card .action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 筛选器样式 */
|
||||
.travel-filter {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.travel-filter .filter-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
#travel-plan-form .form-control,
|
||||
#travel-plan-form .form-select {
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
#travel-plan-form .form-control:focus,
|
||||
#travel-plan-form .form-select:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.travel-plan-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.travel-filter {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* 特色功能样式 */
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 2rem;
|
||||
margin: 0 auto 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.feature-box:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.feature-box:hover .feature-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 增强的卡片样式 */
|
||||
.card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 圆角按钮 */
|
||||
.btn-rounded {
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
/* 章节标题样式 */
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.travel-plan-card {
|
||||
animation: slideInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.travel-plan-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.travel-plan-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.travel-plan-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.travel-plan-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
.travel-plan-card:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* 加载状态 */
|
||||
.travel-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.travel-loading .spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
567
website/flower.html
Normal file
567
website/flower.html
Normal file
@@ -0,0 +1,567 @@
|
||||
<!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="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>
|
||||
</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/flower1.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/flower2.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/flower3.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/customize-flower.jpg" 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">© 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/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
44
website/images/animal-case1.svg
Normal file
44
website/images/animal-case1.svg
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#E0F7FA;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="grass" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#81C784;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 天空背景 -->
|
||||
<rect width="400" height="200" fill="url(#sky)" />
|
||||
|
||||
<!-- 草地 -->
|
||||
<rect width="400" height="100" y="200" fill="url(#grass)" />
|
||||
|
||||
<!-- 太阳 -->
|
||||
<circle cx="50" cy="50" r="20" fill="#FFEB3B" />
|
||||
|
||||
<!-- 云朵 -->
|
||||
<circle cx="120" cy="40" r="15" fill="white" />
|
||||
<circle cx="135" cy="35" r="12" fill="white" />
|
||||
<circle cx="150" cy="40" r="15" fill="white" />
|
||||
|
||||
<!-- 小羊 -->
|
||||
<circle cx="200" cy="180" r="25" fill="white" stroke="#E0E0E0" stroke-width="2" />
|
||||
<circle cx="190" cy="170" r="8" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
<circle cx="210" cy="170" r="8" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
<circle cx="195" cy="175" r="3" fill="black" />
|
||||
<circle cx="205" cy="175" r="3" fill="black" />
|
||||
|
||||
<!-- 羊角 -->
|
||||
<path d="M185 165 Q180 155, 175 160" stroke="#8D6E63" stroke-width="3" fill="none" />
|
||||
<path d="M215 165 Q220 155, 225 160" stroke="#8D6E63" stroke-width="3" fill="none" />
|
||||
|
||||
<!-- 羊腿 -->
|
||||
<rect x="195" y="200" width="5" height="20" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
<rect x="210" y="200" width="5" height="20" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
|
||||
<!-- 文字标签 -->
|
||||
<text x="200" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#333">小羊认领案例</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
58
website/images/animal-case2.svg
Normal file
58
website/images/animal-case2.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="garden" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E8F5E8;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#F1F8E9;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="carrot" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FF8A65;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FF5722;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 花园背景 -->
|
||||
<rect width="400" height="300" fill="url(#garden)" />
|
||||
|
||||
<!-- 草地纹理 -->
|
||||
<circle cx="50" cy="280" r="8" fill="#4CAF50" opacity="0.3" />
|
||||
<circle cx="120" cy="290" r="6" fill="#4CAF50" opacity="0.3" />
|
||||
<circle cx="200" cy="285" r="7" fill="#4CAF50" opacity="0.3" />
|
||||
<circle cx="280" cy="290" r="5" fill="#4CAF50" opacity="0.3" />
|
||||
<circle cx="350" cy="280" r="6" fill="#4CAF50" opacity="0.3" />
|
||||
|
||||
<!-- 小白兔 -->
|
||||
<ellipse cx="200" cy="180" rx="35" ry="25" fill="white" stroke="#E0E0E0" stroke-width="2" />
|
||||
|
||||
<!-- 兔耳朵 -->
|
||||
<ellipse cx="185" cy="150" rx="8" ry="25" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
<ellipse cx="215" cy="150" rx="8" ry="25" fill="white" stroke="#E0E0E0" stroke-width="1" />
|
||||
|
||||
<!-- 兔脸 -->
|
||||
<circle cx="190" cy="175" r="3" fill="pink" />
|
||||
<circle cx="210" cy="175" r="3" fill="pink" />
|
||||
|
||||
<!-- 兔眼睛 -->
|
||||
<circle cx="190" cy="170" r="2" fill="black" />
|
||||
<circle cx="210" cy="170" r="2" fill="black" />
|
||||
|
||||
<!-- 兔嘴巴 -->
|
||||
<path d="M195 185 Q200 188, 205 185" stroke="pink" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 胡萝卜 -->
|
||||
<path d="M230 200 L250 190 L250 210 Z" fill="url(#carrot)" />
|
||||
<path d="M250 195 L260 192" stroke="#4CAF50" stroke-width="2" />
|
||||
<path d="M250 200 L262 200" stroke="#4CAF50" stroke-width="2" />
|
||||
<path d="M250 205 L260 208" stroke="#4CAF50" stroke-width="2" />
|
||||
|
||||
<!-- 小朋友轮廓 -->
|
||||
<circle cx="150" cy="160" r="20" fill="#FFCCBC" />
|
||||
<ellipse cx="150" cy="200" rx="15" ry="25" fill="#64B5F6" />
|
||||
|
||||
<!-- 小朋友笑脸 -->
|
||||
<circle cx="145" cy="155" r="2" fill="black" />
|
||||
<circle cx="155" cy="155" r="2" fill="black" />
|
||||
<path d="M145 165 Q150 170, 155 165" stroke="black" stroke-width="1" fill="none" />
|
||||
|
||||
<!-- 文字标签 -->
|
||||
<text x="200" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#333">小白兔认领案例</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
72
website/images/animal-case3.svg
Normal file
72
website/images/animal-case3.svg
Normal file
@@ -0,0 +1,72 @@
|
||||
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="barn" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFE0B2;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FFCC80;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="corporate" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E3F2FD;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#BBDEFB;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 农场背景 -->
|
||||
<rect width="400" height="300" fill="#F5F5F5" />
|
||||
|
||||
<!-- 谷仓 -->
|
||||
<rect x="100" y="150" width="200" height="100" fill="url(#barn)" stroke="#8D6E63" stroke-width="2" />
|
||||
<polygon points="100,150 200,100 300,150" fill="#D32F2F" stroke="#B71C1C" stroke-width="2" />
|
||||
<rect x="180" y="180" width="40" height="70" fill="#8D6E63" />
|
||||
|
||||
<!-- 企业标志 -->
|
||||
<rect x="250" y="80" width="100" height="60" fill="url(#corporate)" rx="5" stroke="#1976D2" stroke-width="2" />
|
||||
<text x="300" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#1976D2" font-weight="bold">企业CSR</text>
|
||||
|
||||
<!-- 鸡群 -->
|
||||
<!-- 鸡1 -->
|
||||
<ellipse cx="130" cy="220" rx="12" ry="8" fill="white" />
|
||||
<circle cx="125" cy="215" r="5" fill="white" />
|
||||
<circle cx="123" cy="213" r="1.5" fill="black" />
|
||||
<path d="M120 215 Q118 210, 115 212" stroke="#FF9800" stroke-width="2" fill="none" />
|
||||
<path d="M135 225 Q138 228, 140 225" stroke="#FF9800" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 鸡2 -->
|
||||
<ellipse cx="160" cy="230" rx="12" ry="8" fill="#FFEB3B" />
|
||||
<circle cx="155" cy="225" r="5" fill="#FFEB3B" />
|
||||
<circle cx="153" cy="223" r="1.5" fill="black" />
|
||||
<path d="M150 225 Q148 220, 145 222" stroke="#FF9800" stroke-width="2" fill="none" />
|
||||
<path d="M165 235 Q168 238, 170 235" stroke="#FF9800" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 鸡3 -->
|
||||
<ellipse cx="190" cy="215" rx="12" ry="8" fill="#E91E63" />
|
||||
<circle cx="185" cy="210" r="5" fill="#E91E63" />
|
||||
<circle cx="183" cy="208" r="1.5" fill="black" />
|
||||
<path d="M180 210 Q178 205, 175 207" stroke="#FF9800" stroke-width="2" fill="none" />
|
||||
<path d="M195 220 Q198 223, 200 220" stroke="#FF9800" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 鸡4 -->
|
||||
<ellipse cx="220" cy="225" rx="12" ry="8" fill="#9C27B0" />
|
||||
<circle cx="215" cy="220" r="5" fill="#9C27B0" />
|
||||
<circle cx="213" cy="218" r="1.5" fill="black" />
|
||||
<path d="M210 220 Q208 215, 205 217" stroke="#FF9800" stroke-width="2" fill="none" />
|
||||
<path d="M225 230 Q228 233, 230 230" stroke="#FF9800" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 鸡5 -->
|
||||
<ellipse cx="250" cy="210" rx="12" ry="8" fill="#4CAF50" />
|
||||
<circle cx="245" cy="205" r="5" fill="#4CAF50" />
|
||||
<circle cx="243" cy="203" r="1.5" fill="black" />
|
||||
<path d="M240 205 Q238 200, 235 202" stroke="#FF9800" stroke-width="2" fill="none" />
|
||||
<path d="M255 215 Q258 218, 260 215" stroke="#FF9800" stroke-width="1.5" fill="none" />
|
||||
|
||||
<!-- 饲料 -->
|
||||
<circle cx="280" cy="230" r="8" fill="#8D6E63" opacity="0.7" />
|
||||
<circle cx="275" cy="225" r="5" fill="#8D6E63" opacity="0.7" />
|
||||
<circle cx="285" cy="225" r="6" fill="#8D6E63" opacity="0.7" />
|
||||
|
||||
<!-- 爱心符号 -->
|
||||
<path d="M300 180 Q320 160, 340 180 Q350 190, 340 200 Q320 220, 300 200 Q290 190, 300 180"
|
||||
fill="#F44336" opacity="0.8" />
|
||||
|
||||
<!-- 文字标签 -->
|
||||
<text x="200" y="280" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#333">企业鸡群认领案例</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
54
website/images/chicken1.svg
Normal file
54
website/images/chicken1.svg
Normal file
@@ -0,0 +1,54 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 鸡身体 -->
|
||||
<ellipse cx="100" cy="120" rx="40" ry="35" fill="#FFD700" stroke="#DAA520" stroke-width="2"/>
|
||||
|
||||
<!-- 鸡头部 -->
|
||||
<circle cx="100" cy="80" r="20" fill="#FFD700" stroke="#DAA520" stroke-width="2"/>
|
||||
|
||||
<!-- 鸡冠 -->
|
||||
<path d="M85 65 Q80 50 85 40 Q90 35 95 45 Q100 40 105 45 Q110 35 115 40 Q120 50 115 65" fill="#FF4500" stroke="#DC143C" stroke-width="1.5"/>
|
||||
|
||||
<!-- 肉垂 -->
|
||||
<ellipse cx="100" cy="95" rx="5" ry="3" fill="#FF4500"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="92" cy="75" r="3" fill="#333333"/>
|
||||
<circle cx="108" cy="75" r="3" fill="#333333"/>
|
||||
|
||||
<!-- 瞳孔 -->
|
||||
<circle cx="92" cy="75" r="1" fill="#FFFFFF"/>
|
||||
<circle cx="108" cy="75" r="1" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M95 85 Q100 90 105 85" stroke="#FF8C00" stroke-width="2" fill="none"/>
|
||||
<path d="M95 85 L90 80" stroke="#FF8C00" stroke-width="2"/>
|
||||
<path d="M105 85 L110 80" stroke="#FF8C00" stroke-width="2"/>
|
||||
|
||||
<!-- 翅膀 -->
|
||||
<ellipse cx="75" cy="115" rx="15" ry="10" fill="#FFD700" stroke="#DAA520" stroke-width="1.5" transform="rotate(-20 75 115)"/>
|
||||
<ellipse cx="125" cy="115" rx="15" ry="10" fill="#FFD700" stroke="#DAA520" stroke-width="1.5" transform="rotate(20 125 115)"/>
|
||||
|
||||
<!-- 尾巴羽毛 -->
|
||||
<path d="M140 110 Q155 100 150 85 Q145 80 140 90 Q135 85 130 95" fill="#FF8C00" stroke="#DAA520" stroke-width="1.5"/>
|
||||
<path d="M135 105 Q145 95 140 80 Q135 75 130 85 Q125 80 120 90" fill="#FFA500" stroke="#DAA520" stroke-width="1.5"/>
|
||||
|
||||
<!-- 腿 -->
|
||||
<path d="M90 150 L90 170 L85 170" stroke="#FF8C00" stroke-width="3" fill="none"/>
|
||||
<path d="M110 150 L110 170 L115 170" stroke="#FF8C00" stroke-width="3" fill="none"/>
|
||||
|
||||
<!-- 爪子 -->
|
||||
<path d="M85 170 L80 175 L82 172 L80 170" stroke="#FF8C00" stroke-width="1.5" fill="none"/>
|
||||
<path d="M115 170 L120 175 L118 172 L120 170" stroke="#FF8C00" stroke-width="1.5" fill="none"/>
|
||||
|
||||
<!-- 鸡蛋 -->
|
||||
<ellipse cx="60" cy="140" rx="8" ry="10" fill="#FFFFFF" stroke="#D3D3D3" stroke-width="1"/>
|
||||
|
||||
<!-- 草地背景 -->
|
||||
<rect x="0" y="170" width="200" height="30" fill="#7CFC00"/>
|
||||
<path d="M0 170 Q20 165 40 170 Q60 160 80 170 Q100 162 120 170 Q140 158 160 170 Q180 164 200 170 L200 200 L0 200 Z" fill="#32CD32"/>
|
||||
|
||||
<!-- 谷物装饰 -->
|
||||
<circle cx="30" cy="150" r="3" fill="#DAA520"/>
|
||||
<circle cx="35" cy="145" r="2" fill="#DAA520"/>
|
||||
<circle cx="25" cy="145" r="2" fill="#DAA520"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
48
website/images/duck1.svg
Normal file
48
website/images/duck1.svg
Normal file
@@ -0,0 +1,48 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 鸭子身体 -->
|
||||
<ellipse cx="100" cy="130" rx="45" ry="35" fill="#FFD700" stroke="#DAA520" stroke-width="2"/>
|
||||
|
||||
<!-- 鸭子头部 -->
|
||||
<circle cx="100" cy="90" r="25" fill="#FFA500" stroke="#D2691E" stroke-width="2"/>
|
||||
|
||||
<!-- 鸭嘴 -->
|
||||
<path d="M85 85 Q75 80 80 70 Q85 65 90 75 Q95 70 100 75 Q105 70 110 75 Q115 65 120 70 Q125 80 115 85" fill="#FF8C00" stroke="#D2691E" stroke-width="1.5"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="95" cy="85" r="3" fill="#333333"/>
|
||||
<circle cx="105" cy="85" r="3" fill="#333333"/>
|
||||
|
||||
<!-- 瞳孔 -->
|
||||
<circle cx="95" cy="85" r="1" fill="#FFFFFF"/>
|
||||
<circle cx="105" cy="85" r="1" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 翅膀 -->
|
||||
<ellipse cx="75" cy="120" rx="20" ry="15" fill="#FFD700" stroke="#DAA520" stroke-width="1.5" transform="rotate(-30 75 120)"/>
|
||||
<ellipse cx="125" cy="120" rx="20" ry="15" fill="#FFD700" stroke="#DAA520" stroke-width="1.5" transform="rotate(30 125 120)"/>
|
||||
|
||||
<!-- 尾巴羽毛 -->
|
||||
<path d="M140 125 Q155 115 150 100 Q145 95 140 105 Q135 100 130 110" fill="#FFA500" stroke="#DAA520" stroke-width="1.5"/>
|
||||
|
||||
<!-- 腿 -->
|
||||
<path d="M90 160 L90 180 L85 180" stroke="#FF8C00" stroke-width="3" fill="none"/>
|
||||
<path d="M110 160 L110 180 L115 180" stroke="#FF8C00" stroke-width="3" fill="none"/>
|
||||
|
||||
<!-- 蹼 -->
|
||||
<path d="M85 180 Q82 185 80 183 Q78 181 80 178 Q82 175 85 180" fill="#FF8C00"/>
|
||||
<path d="M115 180 Q118 185 120 183 Q122 181 120 178 Q118 175 115 180" fill="#FF8C00"/>
|
||||
|
||||
<!-- 水波纹 -->
|
||||
<path d="M30 170 Q50 165 70 170 Q90 168 110 170 Q130 167 150 170 Q170 165 190 170 L200 170 L200 200 L0 200 L0 170 Z" fill="#87CEEB" opacity="0.6"/>
|
||||
|
||||
<!-- 水花 -->
|
||||
<circle cx="50" cy="165" r="2" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="70" cy="168" r="3" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="100" cy="166" r="2" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="130" cy="169" r="3" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="150" cy="167" r="2" fill="#FFFFFF" opacity="0.8"/>
|
||||
|
||||
<!-- 小鸭子装饰 -->
|
||||
<circle cx="160" cy="110" r="8" fill="#FFD700" stroke="#DAA520" stroke-width="1"/>
|
||||
<circle cx="163" cy="107" r="2" fill="#333333"/>
|
||||
<path d="M155 115 Q150 110 152 105" stroke="#FF8C00" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
90
website/images/flower-case1.svg
Normal file
90
website/images/flower-case1.svg
Normal file
@@ -0,0 +1,90 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 浪漫求婚场景 -->
|
||||
<defs>
|
||||
<linearGradient id="romanticGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFB6C1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FF69B4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="nightSky" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1E1E2E;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#2D2D44;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 夜晚背景 -->
|
||||
<rect width="300" height="200" fill="url(#nightSky)"/>
|
||||
|
||||
<!-- 星星 -->
|
||||
<circle cx="50" cy="30" r="1" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="80" cy="20" r="0.8" fill="#FFFFFF" opacity="0.6"/>
|
||||
<circle cx="120" cy="40" r="1.2" fill="#FFFFFF" opacity="0.9"/>
|
||||
<circle cx="180" cy="25" r="0.7" fill="#FFFFFF" opacity="0.5"/>
|
||||
<circle cx="220" cy="35" r="1" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="260" cy="15" r="0.9" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="280" cy="45" r="1.1" fill="#FFFFFF" opacity="0.9"/>
|
||||
|
||||
<!-- 月亮 -->
|
||||
<circle cx="250" cy="50" r="15" fill="#FFD700" opacity="0.9"/>
|
||||
<circle cx="245" cy="45" r="12" fill="#1E1E2E"/>
|
||||
|
||||
<!-- 城市剪影 -->
|
||||
<rect x="0" y="120" width="300" height="80" fill="#000000" opacity="0.8"/>
|
||||
|
||||
<!-- 建筑物 -->
|
||||
<rect x="20" y="100" width="15" height="20" fill="#333333"/>
|
||||
<rect x="40" y="90" width="20" height="30" fill="#444444"/>
|
||||
<rect x="65" y="95" width="18" height="25" fill="#555555"/>
|
||||
<rect x="90" y="85" width="25" height="35" fill="#333333"/>
|
||||
<rect x="120" y="100" width="15" height="20" fill="#444444"/>
|
||||
<rect x="140" y="92" width="22" height="28" fill="#555555"/>
|
||||
<rect x="170" y="88" width="30" height="32" fill="#333333"/>
|
||||
<rect x="205" y="95" width="16" height="25" fill="#444444"/>
|
||||
<rect x="230" y="90" width="20" height="30" fill="#555555"/>
|
||||
<rect x="255" y="85" width="25" height="35" fill="#333333"/>
|
||||
<rect x="285" y="100" width="12" height="20" fill="#444444"/>
|
||||
|
||||
<!-- 窗户灯光 -->
|
||||
<rect x="25" y="105" width="5" height="8" fill="#FFD700" opacity="0.6"/>
|
||||
<rect x="45" y="95" width="6" height="10" fill="#FFD700" opacity="0.7"/>
|
||||
<rect x="95" y="90" width="8" height="12" fill="#FFD700" opacity="0.8"/>
|
||||
<rect x="145" y="97" width="5" height="8" fill="#FFD700" opacity="0.6"/>
|
||||
<rect x="175" y="93" width="7" height="11" fill="#FFD700" opacity="0.7"/>
|
||||
<rect x="235" y="95" width="6" height="10" fill="#FFD700" opacity="0.6"/>
|
||||
<rect x="260" y="90" width="8" height="12" fill="#FFD700" opacity="0.8"/>
|
||||
|
||||
<!-- 求婚场景 -->
|
||||
<!-- 男性 -->
|
||||
<circle cx="150" cy="140" r="5" fill="#1E90FF"/>
|
||||
<rect x="145" y="145" width="10" height="15" fill="#4169E1"/>
|
||||
|
||||
<!-- 女性 -->
|
||||
<circle cx="150" cy="130" r="5" fill="#FFB6C1"/>
|
||||
<path d="M145 135 L155 135 L155 150 L145 150 Z" fill="#FF69B4"/>
|
||||
|
||||
<!-- 单膝跪地姿势 -->
|
||||
<rect x="147" y="160" width="6" height="8" fill="#4169E1"/>
|
||||
<rect x="145" y="168" width="3" height="5" fill="#1E90FF"/>
|
||||
<rect x="152" y="168" width="3" height="5" fill="#1E90FF"/>
|
||||
|
||||
<!-- 玫瑰花束 -->
|
||||
<circle cx="140" cy="125" r="8" fill="#FF0000"/>
|
||||
<path d="M132 125 Q136 120 140 125 Q144 120 148 125" fill="#FF0000" opacity="0.8"/>
|
||||
<path d="M130 127 Q134 122 138 127 Q142 122 146 127" fill="#FF0000" opacity="0.6"/>
|
||||
<rect x="138" y="133" width="4" height="8" fill="#32CD32"/>
|
||||
|
||||
<!-- 爱心特效 -->
|
||||
<path d="M160 120 Q165 115 170 120 Q175 125 170 130 Q165 135 160 130 Q155 125 160 120" fill="#FF6B6B" opacity="0.7"/>
|
||||
<path d="M155 115 Q160 110 165 115 Q170 120 165 125 Q160 130 155 125 Q150 120 155 115" fill="#FF6B6B" opacity="0.5"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#FFFFFF">浪漫求婚惊喜</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#FFB6C1">99朵玫瑰·感动时刻</text>
|
||||
|
||||
<!-- 闪光效果 -->
|
||||
<circle cx="140" cy="125" r="2" fill="#FFFFFF" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="160" cy="120" r="1.5" fill="#FFFFFF" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
111
website/images/flower-case2.svg
Normal file
111
website/images/flower-case2.svg
Normal file
@@ -0,0 +1,111 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 生日祝福场景 -->
|
||||
<defs>
|
||||
<linearGradient id="birthdayGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="partyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:0.3" />
|
||||
<stop offset="50%" style="stop-color:#FFD700;stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:#1E90FF;stop-opacity:0.3" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 背景 -->
|
||||
<rect width="300" height="200" fill="url(#partyGradient)"/>
|
||||
|
||||
<!-- 生日蛋糕 -->
|
||||
<!-- 蛋糕底层 -->
|
||||
<rect x="120" y="130" width="60" height="20" rx="10" fill="#8B4513"/>
|
||||
<!-- 蛋糕中层 -->
|
||||
<rect x="110" y="110" width="80" height="20" rx="10" fill="#FFD700"/>
|
||||
<!-- 蛋糕顶层 -->
|
||||
<rect x="100" y="90" width="100" height="20" rx="10" fill="#FF6B6B"/>
|
||||
|
||||
<!-- 奶油装饰 -->
|
||||
<circle cx="100" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="110" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="120" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="130" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="140" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="150" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="160" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="170" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="180" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="190" cy="90" r="5" fill="#FFFFFF"/>
|
||||
<circle cx="200" cy="90" r="5" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 蜡烛 -->
|
||||
<rect x="125" y="70" width="3" height="15" fill="#FF0000"/>
|
||||
<rect x="135" y="70" width="3" height="15" fill="#00FF00"/>
|
||||
<rect x="145" y="70" width="3" height="15" fill="#0000FF"/>
|
||||
<rect x="155" y="70" width="3" height="15" fill="#FFFF00"/>
|
||||
<rect x="165" y="70" width="3" height="15" fill="#FF00FF"/>
|
||||
<rect x="175" y="70" width="3" height="15" fill="#00FFFF"/>
|
||||
|
||||
<!-- 蜡烛火焰 -->
|
||||
<path d="M126.5 65 Q128 60 129.5 65" fill="#FFD700"/>
|
||||
<path d="M136.5 65 Q138 60 139.5 65" fill="#FFD700"/>
|
||||
<path d="M146.5 65 Q148 60 149.5 65" fill="#FFD700"/>
|
||||
<path d="M156.5 65 Q158 60 159.5 65" fill="#FFD700"/>
|
||||
<path d="M166.5 65 Q168 60 169.5 65" fill="#FFD700"/>
|
||||
<path d="M176.5 65 Q178 60 179.5 65" fill="#FFD700"/>
|
||||
|
||||
<!-- 生日礼物 -->
|
||||
<rect x="50" y="120" width="30" height="20" fill="#FF69B4" rx="5"/>
|
||||
<rect x="55" y="125" width="20" height="10" fill="#FFFFFF" rx="2"/>
|
||||
|
||||
<rect x="220" y="120" width="30" height="20" fill="#1E90FF" rx="5"/>
|
||||
<circle cx="235" cy="130" r="8" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 生日花束 -->
|
||||
<!-- 花束主体 -->
|
||||
<circle cx="150" cy="160" r="15" fill="#FF0000"/>
|
||||
<circle cx="140" cy="155" r="12" fill="#FFD700"/>
|
||||
<circle cx="160" cy="155" r="12" fill="#1E90FF"/>
|
||||
<circle cx="145" cy="165" r="10" fill="#FF69B4"/>
|
||||
<circle cx="155" cy="165" r="10" fill="#32CD32"/>
|
||||
|
||||
<!-- 花束包装 -->
|
||||
<rect x="135" y="170" width="30" height="15" fill="#FFFFFF" rx="3"/>
|
||||
<rect x="140" y="175" width="20" height="5" fill="#FFD700" rx="2"/>
|
||||
|
||||
<!-- 生日帽 -->
|
||||
<path d="M180 100 L200 90 L180 110 Z" fill="#FF0000"/>
|
||||
<circle cx="190" cy="85" r="3" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 气球 -->
|
||||
<circle cx="60" cy="70" r="8" fill="#FF0000"/>
|
||||
<path d="M60 78 L60 90" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<circle cx="80" cy="60" r="7" fill="#1E90FF"/>
|
||||
<path d="M80 67 L80 80" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<circle cx="240" cy="65" r="9" fill="#FFD700"/>
|
||||
<path d="M240 74 L240 88" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<circle cx="260" cy="75" r="6" fill="#32CD32"/>
|
||||
<path d="M260 81 L260 92" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<!-- 彩带 -->
|
||||
<path d="M20 40 Q40 30 60 50" stroke="#FF6B6B" stroke-width="2" fill="none"/>
|
||||
<path d="M280 30 Q260 20 240 40" stroke="#1E90FF" stroke-width="2" fill="none"/>
|
||||
<path d="M10 80 Q30 60 50 70" stroke="#FFD700" stroke-width="2" fill="none"/>
|
||||
<path d="M290 90 Q270 70 250 80" stroke="#32CD32" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">特别的生日礼物</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666666">温暖祝福·远方关怀</text>
|
||||
|
||||
<!-- 庆祝特效 -->
|
||||
<circle cx="100" cy="50" r="2" fill="#FF0000" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="200" cy="40" r="1.5" fill="#1E90FF" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="250" cy="60" r="2" fill="#FFD700" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="1.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
131
website/images/flower-case3.svg
Normal file
131
website/images/flower-case3.svg
Normal file
@@ -0,0 +1,131 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 商务庆典场景 -->
|
||||
<defs>
|
||||
<linearGradient id="businessGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4169E1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#1E90FF;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="elegantGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.9" />
|
||||
<stop offset="100%" style="stop-color:#F8F9FA;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 商务风格背景 -->
|
||||
<rect width="300" height="200" fill="url(#elegantGradient)"/>
|
||||
|
||||
<!-- 商务建筑轮廓 -->
|
||||
<rect x="0" y="120" width="300" height="80" fill="#E8E8E8"/>
|
||||
|
||||
<!-- 现代办公楼 -->
|
||||
<rect x="50" y="80" width="40" height="40" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="55" y="85" width="30" height="30" fill="#1E90FF" opacity="0.3"/>
|
||||
|
||||
<rect x="100" y="70" width="50" height="50" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="105" y="75" width="40" height="40" fill="#4169E1" opacity="0.3"/>
|
||||
|
||||
<rect x="160" y="90" width="35" height="30" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="165" y="95" width="25" height="20" fill="#1E90FF" opacity="0.3"/>
|
||||
|
||||
<rect x="205" y="75" width="45" height="45" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="210" y="80" width="35" height="35" fill="#4169E1" opacity="0.3"/>
|
||||
|
||||
<!-- 窗户网格 -->
|
||||
<rect x="58" y="88" width="5" height="8" fill="#FFFFFF" opacity="0.8"/>
|
||||
<rect x="68" y="88" width="5" height="8" fill="#FFFFFF" opacity="0.8"/>
|
||||
<rect x="78" y="88" width="5" height="8" fill="#FFFFFF" opacity="0.8"/>
|
||||
|
||||
<rect x="108" y="78" width="6" height="10" fill="#FFFFFF" opacity="0.8"/>
|
||||
<rect x="120" y="78" width="6" height="10" fill="#FFFFFF" opacity="0.8"/>
|
||||
<rect x="132" y="78" width="6" height="10" fill="#FFFFFF" opacity="0.8"/>
|
||||
|
||||
<!-- 开业庆典花篮 -->
|
||||
<!-- 花篮底座 -->
|
||||
<rect x="120" y="140" width="60" height="10" fill="#8B4513" rx="2"/>
|
||||
|
||||
<!-- 花篮主体 -->
|
||||
<path d="M110 140 Q120 100 130 140" fill="#FFD700" opacity="0.8"/>
|
||||
<path d="M130 140 Q140 100 150 140" fill="#FF6B6B" opacity="0.8"/>
|
||||
<path d="M150 140 Q160 100 170 140" fill="#1E90FF" opacity="0.8"/>
|
||||
|
||||
<!-- 花篮装饰 -->
|
||||
<rect x="125" y="130" width="10" height="15" fill="#FFFFFF" rx="2"/>
|
||||
<rect x="135" y="125" width="10" height="20" fill="#FFFFFF" rx="2"/>
|
||||
<rect x="145" y="130" width="10" height="15" fill="#FFFFFF" rx="2"/>
|
||||
|
||||
<!-- 花朵装饰 -->
|
||||
<circle cx="128" cy="120" r="5" fill="#FF0000"/>
|
||||
<circle cx="135" cy="115" r="4" fill="#FFD700"/>
|
||||
<circle cx="142" cy="118" r="6" fill="#1E90FF"/>
|
||||
<circle cx="150" cy="113" r="5" fill="#32CD32"/>
|
||||
<circle cx="158" cy="116" r="4" fill="#FF69B4"/>
|
||||
<circle cx="165" cy="119" r="5" fill="#800080"/>
|
||||
|
||||
<!-- 彩带 -->
|
||||
<path d="M110 140 L100 120" stroke="#FF0000" stroke-width="2" fill="none"/>
|
||||
<path d="M170 140 L180 120" stroke="#1E90FF" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- 开业横幅 -->
|
||||
<rect x="80" y="60" width="140" height="20" fill="#FF0000" rx="3"/>
|
||||
<text x="150" y="73" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#FFFFFF">开业大吉</text>
|
||||
|
||||
<!-- 商务人士 -->
|
||||
<!-- 人物1 -->
|
||||
<circle cx="90" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="86" y="154" width="8" height="12" fill="#4169E1"/>
|
||||
|
||||
<!-- 人物2 -->
|
||||
<circle cx="110" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="106" y="154" width="8" height="12" fill="#1E90FF"/>
|
||||
|
||||
<!-- 人物3 -->
|
||||
<circle cx="130" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="126" y="154" width="8" height="12" fill="#FF6B6B"/>
|
||||
|
||||
<!-- 人物4 -->
|
||||
<circle cx="150" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="146" y="154" width="8" height="12" fill="#32CD32"/>
|
||||
|
||||
<!-- 人物5 -->
|
||||
<circle cx="170" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="166" y="154" width="8" height="12" fill="#FFD700"/>
|
||||
|
||||
<!-- 人物6 -->
|
||||
<circle cx="190" cy="150" r="4" fill="#333333"/>
|
||||
<rect x="186" y="154" width="8" height="12" fill="#FF69B4"/>
|
||||
|
||||
<!-- 剪彩仪式 -->
|
||||
<rect x="100" y="140" width="100" height="2" fill="#FF0000"/>
|
||||
<circle cx="100" cy="141" r="3" fill="#FFFFFF" stroke="#FF0000" stroke-width="1"/>
|
||||
<circle cx="200" cy="141" r="3" fill="#FFFFFF" stroke="#FF0000" stroke-width="1"/>
|
||||
|
||||
<!-- 气球装饰 -->
|
||||
<circle cx="60" cy="100" r="6" fill="#FF0000"/>
|
||||
<path d="M60 106 L60 120" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<circle cx="240" cy="100" r="5" fill="#1E90FF"/>
|
||||
<path d="M240 105 L240 118" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<circle cx="270" cy="110" r="4" fill="#FFD700"/>
|
||||
<path d="M270 114 L270 125" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">商务庆典花篮</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666666">专业定制·喜庆氛围</text>
|
||||
|
||||
<!-- 商务元素 -->
|
||||
<rect x="40" y="40" width="15" height="10" fill="#4169E1" rx="2"/>
|
||||
<rect x="42" y="42" width="11" height="6" fill="#FFFFFF" rx="1"/>
|
||||
|
||||
<rect x="245" y="40" width="15" height="10" fill="#1E90FF" rx="2"/>
|
||||
<path d="M248 42 L252 45 L248 48 Z" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 光影效果 -->
|
||||
<rect x="0" y="0" width="300" height="200" fill="url(#businessGradient)" opacity="0.1"/>
|
||||
|
||||
<!-- 装饰线条 -->
|
||||
<path d="M20 50 L40 45" stroke="#4169E1" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M280 55 L260 50" stroke="#1E90FF" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M30 180 L50 175" stroke="#FF6B6B" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M270 175 L250 170" stroke="#FFD700" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
64
website/images/flower-pattern.svg
Normal file
64
website/images/flower-pattern.svg
Normal file
@@ -0,0 +1,64 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 花朵图案背景 -->
|
||||
<defs>
|
||||
<g id="flower">
|
||||
<!-- 花朵中心 -->
|
||||
<circle cx="0" cy="0" r="4" fill="#ff6b6b" opacity="0.6"/>
|
||||
<!-- 花瓣 -->
|
||||
<path d="M0,-8 Q3,-12 0,-16 Q-3,-12 0,-8" fill="#ff8e8e" opacity="0.4"/>
|
||||
<path d="M8,0 Q12,3 16,0 Q12,-3 8,0" fill="#ff8e8e" opacity="0.4"/>
|
||||
<path d="M0,8 Q-3,12 0,16 Q3,12 0,8" fill="#ff8e8e" opacity="0.4"/>
|
||||
<path d="M-8,0 Q-12,-3 -16,0 Q-12,3 -8,0" fill="#ff8e8e" opacity="0.4"/>
|
||||
<!-- 对角线花瓣 -->
|
||||
<path d="M5.66,-5.66 Q8,-8 11.31,-11.31 Q8,-14.14 5.66,-11.31 Q2.83,-8 5.66,-5.66" fill="#ff8e8e" opacity="0.3"/>
|
||||
<path d="M5.66,5.66 Q8,8 11.31,11.31 Q8,14.14 5.66,11.31 Q2.83,8 5.66,5.66" fill="#ff8e8e" opacity="0.3"/>
|
||||
<path d="M-5.66,5.66 Q-8,8 -11.31,11.31 Q-8,14.14 -5.66,11.31 Q-2.83,8 -5.66,5.66" fill="#ff8e8e" opacity="0.3"/>
|
||||
<path d="M-5.66,-5.66 Q-8,-8 -11.31,-11.31 Q-8,-14.14 -5.66,-11.31 Q-2.83,-8 -5.66,-5.66" fill="#ff8e8e" opacity="0.3"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- 重复花朵图案 -->
|
||||
<use href="#flower" x="25" y="25"/>
|
||||
<use href="#flower" x="75" y="25"/>
|
||||
<use href="#flower" x="125" y="25"/>
|
||||
<use href="#flower" x="175" y="25"/>
|
||||
|
||||
<use href="#flower" x="25" y="75"/>
|
||||
<use href="#flower" x="75" y="75"/>
|
||||
<use href="#flower" x="125" y="75"/>
|
||||
<use href="#flower" x="175" y="75"/>
|
||||
|
||||
<use href="#flower" x="25" y="125"/>
|
||||
<use href="#flower" x="75" y="125"/>
|
||||
<use href="#flower" x="125" y="125"/>
|
||||
<use href="#flower" x="175" y="125"/>
|
||||
|
||||
<use href="#flower" x="25" y="175"/>
|
||||
<use href="#flower" x="75" y="175"/>
|
||||
<use href="#flower" x="125" y="175"/>
|
||||
<use href="#flower" x="175" y="175"/>
|
||||
|
||||
<!-- 额外的花朵装饰 -->
|
||||
<use href="#flower" x="50" y="50" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="100" y="50" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="150" y="50" transform="scale(0.8)"/>
|
||||
|
||||
<use href="#flower" x="50" y="100" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="100" y="100" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="150" y="100" transform="scale(0.8)"/>
|
||||
|
||||
<use href="#flower" x="50" y="150" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="100" y="150" transform="scale(0.8)"/>
|
||||
<use href="#flower" x="150" y="150" transform="scale(0.8)"/>
|
||||
|
||||
<!-- 小圆点装饰 -->
|
||||
<circle cx="10" cy="10" r="1" fill="#ff6b6b" opacity="0.3"/>
|
||||
<circle cx="190" cy="10" r="1" fill="#ff6b6b" opacity="0.3"/>
|
||||
<circle cx="10" cy="190" r="1" fill="#ff6b6b" opacity="0.3"/>
|
||||
<circle cx="190" cy="190" r="1" fill="#ff6b6b" opacity="0.3"/>
|
||||
|
||||
<circle cx="30" cy="30" r="0.8" fill="#ff8e8e" opacity="0.2"/>
|
||||
<circle cx="170" cy="30" r="0.8" fill="#ff8e8e" opacity="0.2"/>
|
||||
<circle cx="30" cy="170" r="0.8" fill="#ff8e8e" opacity="0.2"/>
|
||||
<circle cx="170" cy="170" r="0.8" fill="#ff8e8e" opacity="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
43
website/images/goat1.svg
Normal file
43
website/images/goat1.svg
Normal file
@@ -0,0 +1,43 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 山羊身体 -->
|
||||
<ellipse cx="100" cy="120" rx="45" ry="35" fill="#D2B48C" stroke="#A0522D" stroke-width="2"/>
|
||||
|
||||
<!-- 山羊头部 -->
|
||||
<ellipse cx="100" cy="85" rx="30" ry="25" fill="#D2B48C" stroke="#A0522D" stroke-width="2"/>
|
||||
|
||||
<!-- 角 -->
|
||||
<path d="M75 65 Q70 40 80 30 Q85 25 90 35 Q85 30 95 25 Q100 20 105 25 Q115 30 110 35 Q115 25 120 30 Q130 40 125 65" fill="#A0522D" stroke="#8B4513" stroke-width="1.5"/>
|
||||
|
||||
<!-- 耳朵 -->
|
||||
<ellipse cx="80" cy="75" rx="8" ry="12" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
<ellipse cx="120" cy="75" rx="8" ry="12" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="90" cy="80" r="3" fill="#333333"/>
|
||||
<circle cx="110" cy="80" r="3" fill="#333333"/>
|
||||
|
||||
<!-- 鼻子 -->
|
||||
<ellipse cx="100" cy="95" rx="5" ry="3" fill="#FFB6C1"/>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M95 100 Q100 103 105 100" stroke="#333333" stroke-width="1.5" fill="none"/>
|
||||
|
||||
<!-- 胡子 -->
|
||||
<line x1="95" y1="102" x2="85" y2="100" stroke="#333333" stroke-width="1"/>
|
||||
<line x1="95" y1="104" x2="85" y2="104" stroke="#333333" stroke-width="1"/>
|
||||
<line x1="105" y1="102" x2="115" y2="100" stroke="#333333" stroke-width="1"/>
|
||||
<line x1="105" y1="104" x2="115" y2="104" stroke="#333333" stroke-width="1"/>
|
||||
|
||||
<!-- 腿 -->
|
||||
<rect x="80" y="145" width="8" height="25" rx="4" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
<rect x="95" y="145" width="8" height="25" rx="4" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
<rect x="105" y="145" width="8" height="25" rx="4" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
<rect x="120" y="145" width="8" height="25" rx="4" fill="#D2B48C" stroke="#A0522D" stroke-width="1"/>
|
||||
|
||||
<!-- 尾巴 -->
|
||||
<path d="M145 110 Q155 100 150 90 Q145 85 140 95 Q135 90 130 100" fill="#D2B48C" stroke="#A0522D" stroke-width="1.5"/>
|
||||
|
||||
<!-- 草地背景 -->
|
||||
<rect x="0" y="170" width="200" height="30" fill="#7CFC00"/>
|
||||
<path d="M0 170 Q20 165 40 170 Q60 160 80 170 Q100 162 120 170 Q140 158 160 170 Q180 164 200 170 L200 200 L0 200 Z" fill="#32CD32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
67
website/images/goat2.svg
Normal file
67
website/images/goat2.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 山羊身体 -->
|
||||
<ellipse cx="100" cy="130" rx="50" ry="40" fill="#A9A9A9" stroke="#696969" stroke-width="2"/>
|
||||
|
||||
<!-- 山羊头部 -->
|
||||
<ellipse cx="100" cy="85" rx="35" ry="30" fill="#A9A9A9" stroke="#696969" stroke-width="2"/>
|
||||
|
||||
<!-- 大角 -->
|
||||
<path d="M70 60 Q60 30 75 15 Q85 5 90 20 Q85 10 100 5 Q115 10 110 20 Q115 5 125 15 Q140 30 130 60" fill="#8B4513" stroke="#654321" stroke-width="2"/>
|
||||
|
||||
<!-- 耳朵 -->
|
||||
<ellipse cx="80" cy="75" rx="10" ry="15" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
<ellipse cx="120" cy="75" rx="10" ry="15" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="88" cy="80" r="4" fill="#333333"/>
|
||||
<circle cx="112" cy="80" r="4" fill="#333333"/>
|
||||
|
||||
<!-- 瞳孔 -->
|
||||
<circle cx="88" cy="80" r="1.5" fill="#FFFFFF"/>
|
||||
<circle cx="112" cy="80" r="1.5" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 鼻子 -->
|
||||
<ellipse cx="100" cy="95" rx="6" ry="4" fill="#8B4513"/>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M94 102 Q100 106 106 102" stroke="#333333" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- 胡子 -->
|
||||
<line x1="92" y1="104" x2="80" y2="102" stroke="#333333" stroke-width="1.5"/>
|
||||
<line x1="92" y1="107" x2="80" y2="107" stroke="#333333" stroke-width="1.5"/>
|
||||
<line x1="92" y1="110" x2="80" y2="112" stroke="#333333" stroke-width="1.5"/>
|
||||
<line x1="108" y1="104" x2="120" y2="102" stroke="#333333" stroke-width="1.5"/>
|
||||
<line x1="108" y1="107" x2="120" y2="107" stroke="#333333" stroke-width="1.5"/>
|
||||
<line x1="108" y1="110" x2="120" y2="112" stroke="#333333" stroke-width="1.5"/>
|
||||
|
||||
<!-- 腿 -->
|
||||
<rect x="75" y="160" width="12" height="30" rx="6" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
<rect x="95" y="160" width="12" height="30" rx="6" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
<rect x="105" y="160" width="12" height="30" rx="6" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
<rect x="125" y="160" width="12" height="30" rx="6" fill="#A9A9A9" stroke="#696969" stroke-width="1.5"/>
|
||||
|
||||
<!-- 蹄子 -->
|
||||
<rect x="73" y="188" width="16" height="4" rx="2" fill="#696969"/>
|
||||
<rect x="93" y="188" width="16" height="4" rx="2" fill="#696969"/>
|
||||
<rect x="103" y="188" width="16" height="4" rx="2" fill="#696969"/>
|
||||
<rect x="123" y="188" width="16" height="4" rx="2" fill="#696969"/>
|
||||
|
||||
<!-- 尾巴 -->
|
||||
<path d="M145 120 Q160 110 155 90 Q150 80 145 95 Q140 85 135 100" fill="#A9A9A9" stroke="#696969" stroke-width="2"/>
|
||||
|
||||
<!-- 肌肉线条 -->
|
||||
<path d="M90 110 Q95 115 100 110 Q105 115 110 110" stroke="#808080" stroke-width="1" fill="none" opacity="0.6"/>
|
||||
<path d="M85 125 Q90 130 95 125 Q100 130 105 125" stroke="#808080" stroke-width="1" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- 岩石背景 -->
|
||||
<path d="M0 170 Q20 160 40 170 Q60 155 80 170 Q100 150 120 170 Q140 160 160 170 Q180 155 200 170 L200 200 L0 200 Z" fill="#708090"/>
|
||||
|
||||
<!-- 岩石纹理 -->
|
||||
<path d="M20 175 Q30 170 40 175" stroke="#5F6A6A" stroke-width="1" fill="none"/>
|
||||
<path d="M60 175 Q70 172 80 175" stroke="#5F6A6A" stroke-width="1" fill="none"/>
|
||||
<path d="M100 175 Q110 168 120 175" stroke="#5F6A6A" stroke-width="1" fill="none"/>
|
||||
<path d="M140 175 Q150 170 160 175" stroke="#5F6A6A" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- 强壮的山羊文字标识 -->
|
||||
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333" opacity="0.7">强壮山羊</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
56
website/images/rabbit1.svg
Normal file
56
website/images/rabbit1.svg
Normal file
@@ -0,0 +1,56 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 兔子身体 -->
|
||||
<ellipse cx="100" cy="120" rx="40" ry="30" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2"/>
|
||||
|
||||
<!-- 兔子头部 -->
|
||||
<circle cx="100" cy="85" r="25" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2"/>
|
||||
|
||||
<!-- 长耳朵 -->
|
||||
<ellipse cx="85" cy="60" rx="8" ry="25" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1.5"/>
|
||||
<ellipse cx="115" cy="60" rx="8" ry="25" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1.5"/>
|
||||
|
||||
<!-- 耳朵内部 -->
|
||||
<ellipse cx="85" cy="65" rx="5" ry="15" fill="#FFB6C1"/>
|
||||
<ellipse cx="115" cy="65" rx="5" ry="15" fill="#FFB6C1"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="90" cy="80" r="3" fill="#FF69B4"/>
|
||||
<circle cx="110" cy="80" r="3" fill="#FF69B4"/>
|
||||
|
||||
<!-- 瞳孔 -->
|
||||
<circle cx="90" cy="80" r="1" fill="#000000"/>
|
||||
<circle cx="110" cy="80" r="1" fill="#000000"/>
|
||||
|
||||
<!-- 鼻子 -->
|
||||
<circle cx="100" cy="90" r="4" fill="#FF69B4"/>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M98 95 Q100 98 102 95" stroke="#FF69B4" stroke-width="1.5" fill="none"/>
|
||||
|
||||
<!-- 胡须 -->
|
||||
<line x1="95" y1="92" x2="85" y2="90" stroke="#333333" stroke-width="0.8"/>
|
||||
<line x1="95" y1="94" x2="85" y2="94" stroke="#333333" stroke-width="0.8"/>
|
||||
<line x1="95" y1="96" x2="85" y2="98" stroke="#333333" stroke-width="0.8"/>
|
||||
<line x1="105" y1="92" x2="115" y2="90" stroke="#333333" stroke-width="0.8"/>
|
||||
<line x1="105" y1="94" x2="115" y2="94" stroke="#333333" stroke-width="0.8"/>
|
||||
<line x1="105" y1="96" x2="115" y2="98" stroke="#333333" stroke-width="0.8"/>
|
||||
|
||||
<!-- 前腿 -->
|
||||
<ellipse cx="85" cy="130" rx="6" ry="10" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<ellipse cx="115" cy="130" rx="6" ry="10" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 后腿 -->
|
||||
<ellipse cx="75" cy="140" rx="8" ry="12" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<ellipse cx="125" cy="140" rx="8" ry="12" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 短尾巴 -->
|
||||
<circle cx="135" cy="115" r="6" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 草地背景 -->
|
||||
<rect x="0" y="170" width="200" height="30" fill="#7CFC00"/>
|
||||
<path d="M0 170 Q20 165 40 170 Q60 160 80 170 Q100 162 120 170 Q140 158 160 170 Q180 164 200 170 L200 200 L0 200 Z" fill="#32CD32"/>
|
||||
|
||||
<!-- 胡萝卜（可选装饰） -->
|
||||
<ellipse cx="40" cy="140" rx="15" ry="5" fill="#FF8C00" transform="rotate(-30 40 140)"/>
|
||||
<path d="M30 135 Q25 125 20 130 Q15 135 25 140 Z" fill="#32CD32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
111
website/images/reward-pattern.svg
Normal file
111
website/images/reward-pattern.svg
Normal file
@@ -0,0 +1,111 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 推广奖励图案背景 -->
|
||||
<defs>
|
||||
<g id="reward-pattern">
|
||||
<!-- 中心元素 - 货币符号 -->
|
||||
<circle cx="0" cy="0" r="5" fill="#6c5ce7" opacity="0.6"/>
|
||||
<path d="M-3,-3 L3,3 M-3,3 L3,-3" stroke="#ffffff" stroke-width="1" opacity="0.8"/>
|
||||
|
||||
<!-- 外圈元素 - 奖励图标 -->
|
||||
<!-- 星星 -->
|
||||
<path d="M0,-10 L2,-2 L10,0 L2,2 L0,10 L-2,2 L-10,0 L-2,-2 Z" fill="#a29bfe" opacity="0.4" transform="rotate(0)"/>
|
||||
|
||||
<!-- 礼物盒 -->
|
||||
<rect x="-4" y="8" width="8" height="8" fill="#6c5ce7" opacity="0.3" rx="1"/>
|
||||
<rect x="-2" y="10" width="4" height="4" fill="#ffffff" opacity="0.5" rx="0.5"/>
|
||||
|
||||
<!-- 箭头 -->
|
||||
<path d="M8,-8 L12,-4 L8,0" fill="none" stroke="#6c5ce7" stroke-width="1" opacity="0.4"/>
|
||||
<path d="M-8,8 L-12,4 L-8,0" fill="none" stroke="#6c5ce7" stroke-width="1" opacity="0.4"/>
|
||||
|
||||
<!-- 增长图表 -->
|
||||
<path d="M-8,-4 L-4,-2 L0,-6 L4,0 L8,2" fill="none" stroke="#a29bfe" stroke-width="1" opacity="0.3"/>
|
||||
|
||||
<!-- 圆形装饰 -->
|
||||
<circle cx="12" cy="-12" r="2" fill="#6c5ce7" opacity="0.2"/>
|
||||
<circle cx="-12" cy="12" r="2" fill="#a29bfe" opacity="0.2"/>
|
||||
<circle cx="12" cy="12" r="1.5" fill="#6c5ce7" opacity="0.2"/>
|
||||
<circle cx="-12" cy="-12" r="1.5" fill="#a29bfe" opacity="0.2"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- 主网格图案 -->
|
||||
<use href="#reward-pattern" x="25" y="25"/>
|
||||
<use href="#reward-pattern" x="75" y="25"/>
|
||||
<use href="#reward-pattern" x="125" y="25"/>
|
||||
<use href="#reward-pattern" x="175" y="25"/>
|
||||
|
||||
<use href="#reward-pattern" x="25" y="75"/>
|
||||
<use href="#reward-pattern" x="75" y="75"/>
|
||||
<use href="#reward-pattern" x="125" y="75"/>
|
||||
<use href="#reward-pattern" x="175" y="75"/>
|
||||
|
||||
<use href="#reward-pattern" x="25" y="125"/>
|
||||
<use href="#reward-pattern" x="75" y="125"/>
|
||||
<use href="#reward-pattern" x="125" y="125"/>
|
||||
<use href="#reward-pattern" x="175" y="125"/>
|
||||
|
||||
<use href="#reward-pattern" x="25" y="175"/>
|
||||
<use href="#reward-pattern" x="75" y="175"/>
|
||||
<use href="#reward-pattern" x="125" y="175"/>
|
||||
<use href="#reward-pattern" x="175" y="175"/>
|
||||
|
||||
<!-- 次级装饰元素 -->
|
||||
<!-- 对角线装饰 -->
|
||||
<circle cx="50" cy="50" r="3" fill="#6c5ce7" opacity="0.1"/>
|
||||
<circle cx="100" cy="50" r="2" fill="#a29bfe" opacity="0.1"/>
|
||||
<circle cx="150" cy="50" r="3" fill="#6c5ce7" opacity="0.1"/>
|
||||
|
||||
<circle cx="50" cy="100" r="2" fill="#a29bfe" opacity="0.1"/>
|
||||
<circle cx="100" cy="100" r="3" fill="#6c5ce7" opacity="0.1"/>
|
||||
<circle cx="150" cy="100" r="2" fill="#a29bfe" opacity="0.1"/>
|
||||
|
||||
<circle cx="50" cy="150" r="3" fill="#6c5ce7" opacity="0.1"/>
|
||||
<circle cx="100" cy="150" r="2" fill="#a29bfe" opacity="0.1"/>
|
||||
<circle cx="150" cy="150" r="3" fill="#6c5ce7" opacity="0.1"/>
|
||||
|
||||
<!-- 边角装饰 -->
|
||||
<circle cx="10" cy="10" r="1.5" fill="#6c5ce7" opacity="0.15"/>
|
||||
<circle cx="190" cy="10" r="1.5" fill="#a29bfe" opacity="0.15"/>
|
||||
<circle cx="10" cy="190" r="1.5" fill="#6c5ce7" opacity="0.15"/>
|
||||
<circle cx="190" cy="190" r="1.5" fill="#a29bfe" opacity="0.15"/>
|
||||
|
||||
<!-- 中心聚焦元素 -->
|
||||
<circle cx="100" cy="100" r="8" fill="#6c5ce7" opacity="0.05"/>
|
||||
<circle cx="100" cy="100" r="12" fill="#a29bfe" opacity="0.03"/>
|
||||
|
||||
<!-- 动态效果元素 -->
|
||||
<circle cx="30" cy="30" r="1" fill="#ffffff" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="170" cy="30" r="1" fill="#ffffff" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="30" cy="170" r="1" fill="#ffffff" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="170" cy="170" r="1" fill="#ffffff" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="2.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- 连接线 -->
|
||||
<path d="M25,25 L50,50" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M75,25 L100,50" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M125,25 L150,50" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M175,25 L150,50" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
|
||||
<path d="M25,75 L50,100" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M75,75 L100,100" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M125,75 L150,100" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M175,75 L150,100" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
|
||||
<path d="M25,125 L50,150" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M75,125 L100,150" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M125,125 L150,150" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M175,125 L150,150" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
|
||||
<path d="M25,175 L50,150" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M75,175 L100,150" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M125,175 L150,150" stroke="#6c5ce7" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
<path d="M175,175 L150,150" stroke="#a29bfe" stroke-width="0.5" opacity="0.1" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
41
website/images/sheep1.svg
Normal file
41
website/images/sheep1.svg
Normal file
@@ -0,0 +1,41 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 绵羊身体 -->
|
||||
<ellipse cx="100" cy="120" rx="50" ry="40" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="2"/>
|
||||
|
||||
<!-- 绵羊毛绒 -->
|
||||
<circle cx="85" cy="110" r="8" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="95" cy="105" r="7" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="105" cy="110" r="9" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="115" cy="115" r="7" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="85" cy="125" r="6" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="95" cy="130" r="8" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="105" cy="125" r="7" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<circle cx="115" cy="130" r="6" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 绵羊头部 -->
|
||||
<circle cx="100" cy="90" r="25" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="2"/>
|
||||
|
||||
<!-- 耳朵 -->
|
||||
<ellipse cx="85" cy="80" rx="8" ry="12" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<ellipse cx="115" cy="80" rx="8" ry="12" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="92" cy="88" r="3" fill="#333333"/>
|
||||
<circle cx="108" cy="88" r="3" fill="#333333"/>
|
||||
|
||||
<!-- 鼻子 -->
|
||||
<circle cx="100" cy="95" r="4" fill="#FFB6C1"/>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M96 102 Q100 105 104 102" stroke="#333333" stroke-width="1.5" fill="none"/>
|
||||
|
||||
<!-- 腿 -->
|
||||
<rect x="75" y="150" width="10" height="20" rx="5" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="90" y="150" width="10" height="20" rx="5" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="105" y="150" width="10" height="20" rx="5" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
<rect x="120" y="150" width="10" height="20" rx="5" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1"/>
|
||||
|
||||
<!-- 草地背景 -->
|
||||
<rect x="0" y="170" width="200" height="30" fill="#7CFC00"/>
|
||||
<path d="M0 170 Q20 165 40 170 Q60 160 80 170 Q100 162 120 170 Q140 158 160 170 Q180 164 200 170 L200 200 L0 200 Z" fill="#32CD32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
54
website/images/travel-case1.svg
Normal file
54
website/images/travel-case1.svg
Normal file
@@ -0,0 +1,54 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 西藏背景山脉 -->
|
||||
<defs>
|
||||
<linearGradient id="mountainGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4B6CB7;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#182848;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="snowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#F0F8FF;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 天空背景 -->
|
||||
<rect width="300" height="200" fill="#87CEEB"/>
|
||||
|
||||
<!-- 远山 -->
|
||||
<path d="M0 120 Q50 80 100 100 Q150 60 200 90 Q250 70 300 120 L300 200 L0 200 Z" fill="url(#mountainGradient)"/>
|
||||
|
||||
<!-- 雪山 -->
|
||||
<path d="M50 100 Q80 40 120 70 Q160 30 200 60 Q240 20 280 70 L300 70 L300 200 L0 200 Z" fill="url(#snowGradient)"/>
|
||||
|
||||
<!-- 经幡 -->
|
||||
<line x1="150" y1="50" x2="150" y2="120" stroke="#8B4513" stroke-width="2"/>
|
||||
<rect x="145" y="60" width="10" height="10" fill="#FF0000"/>
|
||||
<rect x="145" y="70" width="10" height="10" fill="#0000FF"/>
|
||||
<rect x="145" y="80" width="10" height="10" fill="#FFFF00"/>
|
||||
<rect x="145" y="90" width="10" height="10" fill="#008000"/>
|
||||
<rect x="145" y="100" width="10" height="10" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 旅行者 -->
|
||||
<circle cx="180" cy="130" r="5" fill="#FFD700"/>
|
||||
<path d="M175 135 L185 135 L180 145 Z" fill="#8B4513"/>
|
||||
|
||||
<!-- 牦牛 -->
|
||||
<ellipse cx="220" cy="150" rx="8" ry="5" fill="#000000"/>
|
||||
<ellipse cx="210" cy="145" rx="12" ry="8" fill="#000000"/>
|
||||
<path d="M205 140 Q200 135 195 140" stroke="#000000" stroke-width="2" fill="none"/>
|
||||
<path d="M215 140 Q220 135 225 140" stroke="#000000" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- 寺庙建筑 -->
|
||||
<rect x="80" y="130" width="20" height="30" fill="#8B4513"/>
|
||||
<path d="M75 130 Q90 120 105 130" fill="#B22222"/>
|
||||
<rect x="85" y="140" width="10" height="10" fill="#FFFF00"/>
|
||||
|
||||
<!-- 云朵 -->
|
||||
<circle cx="40" cy="40" r="8" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="50" cy="35" r="10" fill="#FFFFFF" opacity="0.8"/>
|
||||
<circle cx="60" cy="40" r="7" fill="#FFFFFF" opacity="0.8"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">西藏朝圣之旅</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666666">5人结伴·15天深度游</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
84
website/images/travel-case2.svg
Normal file
84
website/images/travel-case2.svg
Normal file
@@ -0,0 +1,84 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 海滩背景 -->
|
||||
<defs>
|
||||
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#4682B4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#00BFFF;stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:#0000CD;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#DAA520;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 天空 -->
|
||||
<rect width="300" height="100" fill="url(#skyGradient)"/>
|
||||
|
||||
<!-- 海洋 -->
|
||||
<rect y="100" width="300" height="50" fill="url(#seaGradient)"/>
|
||||
|
||||
<!-- 沙滩 -->
|
||||
<rect y="150" width="300" height="50" fill="url(#sandGradient)"/>
|
||||
|
||||
<!-- 海浪 -->
|
||||
<path d="M0 120 Q50 110 100 120 Q150 105 200 120 Q250 108 300 120 L300 150 L0 150 Z" fill="#FFFFFF" opacity="0.3"/>
|
||||
|
||||
<!-- 太阳 -->
|
||||
<circle cx="250" cy="30" r="15" fill="#FFD700"/>
|
||||
<g fill="#FFD700" opacity="0.6">
|
||||
<rect x="245" y="10" width="10" height="5" transform="rotate(0 250 12.5)"/>
|
||||
<rect x="245" y="50" width="10" height="5" transform="rotate(0 250 52.5)"/>
|
||||
<rect x="225" y="25" width="5" height="10" transform="rotate(0 227.5 30)"/>
|
||||
<rect x="265" y="25" width="5" height="10" transform="rotate(0 267.5 30)"/>
|
||||
<rect x="235" y="15" width="5" height="10" transform="rotate(45 237.5 20)"/>
|
||||
<rect x="255" y="45" width="5" height="10" transform="rotate(45 257.5 50)"/>
|
||||
<rect x="235" y="45" width="10" height="5" transform="rotate(-45 240 47.5)"/>
|
||||
<rect x="255" y="15" width="10" height="5" transform="rotate(-45 260 17.5)"/>
|
||||
</g>
|
||||
|
||||
<!-- 棕榈树 -->
|
||||
<rect x="50" y="130" width="5" height="20" fill="#8B4513"/>
|
||||
<path d="M40 130 Q52.5 110 65 130" fill="#228B22"/>
|
||||
<path d="M35 125 Q52.5 100 70 125" fill="#228B22"/>
|
||||
<path d="M45 120 Q52.5 90 60 120" fill="#228B22"/>
|
||||
|
||||
<!-- 遮阳伞 -->
|
||||
<path d="M180 140 Q200 110 220 140" fill="#FF0000"/>
|
||||
<rect x="199" y="140" width="2" height="15" fill="#8B4513"/>
|
||||
|
||||
<!-- 沙滩椅 -->
|
||||
<path d="M120 160 Q140 155 160 160 L160 170 L120 170 Z" fill="#FFA500"/>
|
||||
<rect x="120" y="160" width="40" height="5" fill="#8B4513"/>
|
||||
|
||||
<!-- 家庭组 -->
|
||||
<!-- 大人1 -->
|
||||
<circle cx="100" cy="140" r="4" fill="#FFB6C1"/>
|
||||
<rect x="98" y="144" width="4" height="8" fill="#1E90FF"/>
|
||||
<!-- 大人2 -->
|
||||
<circle cx="110" cy="140" r="4" fill="#87CEEB"/>
|
||||
<rect x="108" y="144" width="4" height="8" fill="#32CD32"/>
|
||||
<!-- 小孩 -->
|
||||
<circle cx="105" cy="130" r="3" fill="#FFD700"/>
|
||||
<rect x="103" y="133" width="4" height="6" fill="#FF69B4"/>
|
||||
|
||||
<!-- 沙滩球 -->
|
||||
<circle cx="220" cy="160" r="6" fill="#FF0000"/>
|
||||
<path d="M216 158 L224 162" stroke="#FFFFFF" stroke-width="1"/>
|
||||
<path d="M218 164 L222 156" stroke="#FFFFFF" stroke-width="1"/>
|
||||
|
||||
<!-- 海浪泡沫 -->
|
||||
<circle cx="30" cy="120" r="2" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="80" cy="118" r="3" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="130" cy="122" r="2" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="180" cy="119" r="3" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="230" cy="121" r="2" fill="#FFFFFF" opacity="0.7"/>
|
||||
<circle cx="280" cy="118" r="3" fill="#FFFFFF" opacity="0.7"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">三亚阳光假期</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666666">3个家庭·海边度假</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
95
website/images/travel-case3.svg
Normal file
95
website/images/travel-case3.svg
Normal file
@@ -0,0 +1,95 @@
|
||||
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 江南水乡背景 -->
|
||||
<defs>
|
||||
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:0.7" />
|
||||
<stop offset="100%" style="stop-color:#4682B4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="skyGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E6F3FF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#B0E0E6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 天空 -->
|
||||
<rect width="300" height="80" fill="url(#skyGradient2)"/>
|
||||
|
||||
<!-- 水道 -->
|
||||
<rect y="80" width="300" height="70" fill="url(#waterGradient)"/>
|
||||
|
||||
<!-- 河岸 -->
|
||||
<rect y="150" width="300" height="50" fill="#8B4513"/>
|
||||
|
||||
<!-- 古镇建筑 -->
|
||||
<!-- 白墙黑瓦房屋1 -->
|
||||
<rect x="40" y="100" width="30" height="40" fill="#FFFFFF" stroke="#333333" stroke-width="1"/>
|
||||
<path d="M35 100 L75 100 L55 90 Z" fill="#333333"/>
|
||||
<rect x="45" y="110" width="5" height="10" fill="#8B4513"/>
|
||||
<rect x="60" y="110" width="5" height="10" fill="#8B4513"/>
|
||||
|
||||
<!-- 白墙黑瓦房屋2 -->
|
||||
<rect x="80" y="95" width="25" height="45" fill="#FFFFFF" stroke="#333333" stroke-width="1"/>
|
||||
<path d="M75 95 L105 95 L90 85 Z" fill="#333333"/>
|
||||
<rect x="85" y="105" width="4" height="8" fill="#8B4513"/>
|
||||
<rect x="95" y="105" width="4" height="8" fill="#8B4513"/>
|
||||
|
||||
<!-- 拱桥 -->
|
||||
<path d="M150 150 Q170 130 190 150" stroke="#8B4513" stroke-width="8" fill="none"/>
|
||||
<path d="M150 150 Q170 130 190 150" stroke="#A52A2A" stroke-width="6" fill="none"/>
|
||||
|
||||
<!-- 柳树 -->
|
||||
<rect x="220" y="120" width="3" height="20" fill="#8B4513"/>
|
||||
<path d="M215 120 Q220 100 225 120" fill="#32CD32" opacity="0.7"/>
|
||||
<path d="M218 115 Q223 90 228 115" fill="#32CD32" opacity="0.7"/>
|
||||
<path d="M221 110 Q226 80 231 110" fill="#32CD32" opacity="0.7"/>
|
||||
|
||||
<!-- 乌篷船 -->
|
||||
<path d="M120 130 Q140 125 160 130" fill="#8B4513"/>
|
||||
<path d="M125 125 Q140 120 155 125" fill="#A52A2A"/>
|
||||
<rect x="135" y="115" width="10" height="5" fill="#333333"/>
|
||||
|
||||
<!-- 船夫 -->
|
||||
<circle cx="145" cy="120" r="3" fill="#FFD700"/>
|
||||
<rect x="143" y="123" width="4" height="5" fill="#008080"/>
|
||||
|
||||
<!-- 文化爱好者们 -->
|
||||
<!-- 爱好者1 -->
|
||||
<circle cx="180" cy="140" r="3" fill="#FFB6C1"/>
|
||||
<rect x="178" y="143" width="4" height="6" fill="#FF69B4"/>
|
||||
<!-- 爱好者2 -->
|
||||
<circle cx="190" cy="140" r="3" fill="#87CEEB"/>
|
||||
<rect x="188" y="143" width="4" height="6" fill="#1E90FF"/>
|
||||
<!-- 爱好者3 -->
|
||||
<circle cx="200" cy="140" r="3" fill="#98FB98"/>
|
||||
<rect x="198" y="143" width="4" height="6" fill="#32CD32"/>
|
||||
|
||||
<!-- 相机 -->
|
||||
<rect x="195" cy="135" width="6" height="4" fill="#000000" transform="translate(0,0)"/>
|
||||
<circle cx="198" cy="133" r="2" fill="#333333"/>
|
||||
|
||||
<!-- 石板路 -->
|
||||
<rect x="250" y="155" width="10" height="5" fill="#696969"/>
|
||||
<rect x="265" y="155" width="8" height="5" fill="#696969"/>
|
||||
<rect x="240" y="160" width="12" height="5" fill="#696969"/>
|
||||
<rect x="255" y="160" width="9" height="5" fill="#696969"/>
|
||||
|
||||
<!-- 灯笼 -->
|
||||
<rect x="50" cy="85" width="3" height="10" fill="#8B4513" transform="translate(0,0)"/>
|
||||
<circle cx="51.5" cy="80" r="4" fill="#FF0000"/>
|
||||
<path d="M49 78 L54 78" stroke="#FFFF00" stroke-width="1"/>
|
||||
|
||||
<!-- 水波纹 -->
|
||||
<path d="M30 120 Q50 118 70 120" stroke="#FFFFFF" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M100 125 Q120 123 140 125" stroke="#FFFFFF" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M170 122 Q190 120 210 122" stroke="#FFFFFF" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
<path d="M240 124 Q260 122 280 124" stroke="#FFFFFF" stroke-width="1" opacity="0.5" fill="none"/>
|
||||
|
||||
<!-- 文字标识 -->
|
||||
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">江南古镇文化游</text>
|
||||
<text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666666">文化爱好者·古镇探访</text>
|
||||
|
||||
<!-- 传统文化元素 -->
|
||||
<path d="M280 100 Q285 95 290 100 Q295 105 290 110 Q285 115 280 110 Q275 105 280 100" fill="#FFD700" opacity="0.7"/>
|
||||
<path d="M275 105 L285 105" stroke="#FF0000" stroke-width="1"/>
|
||||
<path d="M280 100 L280 110" stroke="#FF0000" stroke-width="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -31,7 +31,7 @@
|
||||
<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>
|
||||
<a class="nav-link active" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">关于我们</a>
|
||||
@@ -76,6 +76,7 @@
|
||||
</div>
|
||||
<h3>旅行结伴</h3>
|
||||
<p>发布你的旅行计划，寻找志同道合的旅行伙伴，一起探索世界的美好。</p>
|
||||
<a href="travel.html" class="btn btn-outline-primary btn-sm mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,16 +87,18 @@
|
||||
</div>
|
||||
<h3>动物认领</h3>
|
||||
<p>认领可爱的动物，体验农场生活，与动物建立深厚的情感纽带。</p>
|
||||
<a href="animal.html" class="btn btn-outline-primary btn-sm mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-icon">
|
||||
<i class="fa fa-flower"></i>
|
||||
<i class="fa fa-seedling"></i>
|
||||
</div>
|
||||
<h3>送花服务</h3>
|
||||
<p>为你的结伴伙伴或重要的人订购鲜花，传递温暖和浪漫。</p>
|
||||
<a href="flower.html" class="btn btn-outline-primary btn-sm mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,7 +121,7 @@
|
||||
<p class="card-text">通过结伴客，我找到了一起去西藏的伙伴，还认领了一只小羊，这是一次非常难忘的经历！</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<img src="images/user-avatar1.svg" class="rounded-circle me-3" alt="用户小李">
|
||||
<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>
|
||||
@@ -136,7 +139,7 @@
|
||||
<p class="card-text">作为农场主，结伴客为我们带来了大量游客，动物认领业务增长了300%！</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<img src="images/merchant-avatar1.svg" class="rounded-circle me-3" alt="商家王老板">
|
||||
<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>
|
||||
@@ -154,7 +157,7 @@
|
||||
<p class="card-text">通过结伴客的送花服务，我给了她一个浪漫的惊喜，我们的关系更进一步了！</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<img src="images/user-avatar2.svg" class="rounded-circle me-3" alt="用户小张">
|
||||
<img src="images/user-avatar2.svg" class="rounded-circle me-3" alt="用户小张" width="50" height="50">
|
||||
<div>
|
||||
<h6 class="mb-0">小张</h6>
|
||||
<small class="text-muted">浪漫主义者</small>
|
||||
@@ -166,6 +169,48 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 推广奖励 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold text-center section-title">推广奖励</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">分享即赚钱</h3>
|
||||
<p class="card-text">将结伴客推荐给朋友，他们通过您的链接注册或下单，您即可获得丰厚佣金。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>旅行结伴订单15%佣金</li>
|
||||
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>动物认领订单20%佣金</li>
|
||||
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>送花服务订单12%佣金</li>
|
||||
<li class="mb-2"><i class="fa fa-check-circle text-success me-2"></i>新用户注册奖励¥10</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">如何参与</h3>
|
||||
<ol class="mt-3">
|
||||
<li class="mb-2">注册成为结伴客用户</li>
|
||||
<li class="mb-2">进入推广奖励页面获取专属链接</li>
|
||||
<li class="mb-2">分享链接给朋友</li>
|
||||
<li class="mb-2">朋友通过链接注册或下单</li>
|
||||
<li class="mb-2">获得相应佣金奖励</li>
|
||||
</ol>
|
||||
<a href="reward.html" class="btn btn-primary mt-3">立即参与</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 行动号召 -->
|
||||
<section class="cta-section">
|
||||
<div class="container text-center">
|
||||
@@ -199,10 +244,10 @@
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -242,8 +287,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
|
||||
435
website/js/animal.js
Normal file
435
website/js/animal.js
Normal file
@@ -0,0 +1,435 @@
|
||||
// 动物认领功能JavaScript
|
||||
|
||||
class AnimalManager {
|
||||
constructor() {
|
||||
this.apiBaseUrl = 'https://api.jiebanke.com/api/animals';
|
||||
this.animalsContainer = document.getElementById('animals-container');
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.loadAnimals();
|
||||
this.bindFilterEvents();
|
||||
}
|
||||
|
||||
async loadAnimals() {
|
||||
try {
|
||||
// 模拟API调用，实际项目中替换为真实API
|
||||
const mockAnimals = [
|
||||
{
|
||||
id: 1,
|
||||
name: "小白",
|
||||
type: "sheep",
|
||||
typeName: "绵羊",
|
||||
age: "baby",
|
||||
ageText: "3个月",
|
||||
gender: "female",
|
||||
description: "温顺可爱的小绵羊，喜欢和人亲近，非常适合初次认领者。",
|
||||
status: "available",
|
||||
image: "images/sheep1.svg",
|
||||
price: 800,
|
||||
location: "绿野农场",
|
||||
health: "健康",
|
||||
personality: "温顺、亲人"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "小黑",
|
||||
type: "goat",
|
||||
typeName: "山羊",
|
||||
age: "young",
|
||||
ageText: "1岁",
|
||||
gender: "male",
|
||||
description: "活泼好动的小山羊，喜欢探索新环境，精力充沛。",
|
||||
status: "available",
|
||||
image: "images/goat1.svg",
|
||||
price: 600,
|
||||
location: "阳光牧场",
|
||||
health: "健康",
|
||||
personality: "活泼、好奇"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "雪球",
|
||||
type: "rabbit",
|
||||
typeName: "兔子",
|
||||
age: "baby",
|
||||
ageText: "2个月",
|
||||
gender: "female",
|
||||
description: "洁白如雪的小兔子，性格温和，非常适合家庭认领。",
|
||||
status: "reserved",
|
||||
image: "images/rabbit1.svg",
|
||||
price: 300,
|
||||
location: "爱心农场",
|
||||
health: "健康",
|
||||
personality: "温和、安静"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "金蛋",
|
||||
type: "chicken",
|
||||
typeName: "鸡",
|
||||
age: "adult",
|
||||
ageText: "2岁",
|
||||
gender: "female",
|
||||
description: "产蛋能力强的母鸡，每天都能提供新鲜鸡蛋。",
|
||||
status: "available",
|
||||
image: "images/chicken1.svg",
|
||||
price: 200,
|
||||
location: "丰收农场",
|
||||
health: "健康",
|
||||
personality: "勤劳、温顺"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "花花",
|
||||
type: "duck",
|
||||
typeName: "鸭子",
|
||||
age: "young",
|
||||
ageText: "8个月",
|
||||
gender: "female",
|
||||
description: "可爱的鸭子，喜欢在水中嬉戏，性格活泼开朗。",
|
||||
status: "available",
|
||||
image: "images/duck1.svg",
|
||||
price: 250,
|
||||
location: "水乡农场",
|
||||
health: "健康",
|
||||
personality: "活泼、友善"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "大角",
|
||||
type: "goat",
|
||||
typeName: "山羊",
|
||||
age: "adult",
|
||||
ageText: "3岁",
|
||||
gender: "male",
|
||||
description: "强壮的公山羊，有着漂亮的角，性格独立但温顺。",
|
||||
status: "available",
|
||||
image: "images/goat2.svg",
|
||||
price: 900,
|
||||
location: "山野牧场",
|
||||
health: "健康",
|
||||
personality: "独立、温顺"
|
||||
}
|
||||
];
|
||||
|
||||
this.displayAnimals(mockAnimals);
|
||||
} catch (error) {
|
||||
console.error('加载动物列表失败:', error);
|
||||
this.showError('加载动物列表失败，请刷新页面重试');
|
||||
}
|
||||
}
|
||||
|
||||
displayAnimals(animals) {
|
||||
if (animals.length === 0) {
|
||||
this.animalsContainer.innerHTML = `
|
||||
<div class="col-12 text-center">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-info-circle me-2"></i>
|
||||
暂无可用动物，请稍后再来查看
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const animalsHTML = animals.map(animal => `
|
||||
<div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up">
|
||||
<div class="card animal-card h-100">
|
||||
<img src="${animal.image}" class="card-img-top" alt="${animal.name}">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="animal-name">${animal.name}</h5>
|
||||
<span class="status-badge status-${animal.status}">
|
||||
${animal.status === 'available' ? '可认领' : '已被认领'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="animal-type">
|
||||
<i class="fa fa-paw me-2"></i>
|
||||
${animal.typeName}
|
||||
</div>
|
||||
|
||||
<div class="animal-age">
|
||||
<i class="fa fa-birthday-cake me-2"></i>
|
||||
${animal.ageText}
|
||||
</div>
|
||||
|
||||
<p class="animal-description">
|
||||
${animal.description}
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-primary fw-bold">¥${animal.price}</span>
|
||||
<small class="text-muted">${animal.location}</small>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary btn-sm"
|
||||
onclick="animalManager.viewAnimalDetail(${animal.id})"
|
||||
${animal.status !== 'available' ? 'disabled' : ''}>
|
||||
${animal.status === 'available' ? '立即认领' : '已被认领'}
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm"
|
||||
onclick="animalManager.showAnimalInfo(${animal.id})">
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
this.animalsContainer.innerHTML = animalsHTML;
|
||||
}
|
||||
|
||||
bindFilterEvents() {
|
||||
const filterType = document.getElementById('filter-type');
|
||||
const filterAge = document.getElementById('filter-age');
|
||||
const filterStatus = document.getElementById('filter-status');
|
||||
|
||||
if (filterType) filterType.addEventListener('change', () => this.filterAnimals());
|
||||
if (filterAge) filterAge.addEventListener('change', () => this.filterAnimals());
|
||||
if (filterStatus) filterStatus.addEventListener('change', () => this.filterAnimals());
|
||||
}
|
||||
|
||||
async filterAnimals() {
|
||||
const type = document.getElementById('filter-type').value;
|
||||
const age = document.getElementById('filter-age').value;
|
||||
const status = document.getElementById('filter-status').value;
|
||||
|
||||
try {
|
||||
// 模拟筛选功能
|
||||
const mockAnimals = await this.loadAnimals(); // 重新加载数据
|
||||
let filteredAnimals = mockAnimals;
|
||||
|
||||
if (type) {
|
||||
filteredAnimals = filteredAnimals.filter(animal => animal.type === type);
|
||||
}
|
||||
|
||||
if (age) {
|
||||
filteredAnimals = filteredAnimals.filter(animal => animal.age === age);
|
||||
}
|
||||
|
||||
if (status) {
|
||||
filteredAnimals = filteredAnimals.filter(animal => animal.status === status);
|
||||
}
|
||||
|
||||
this.displayAnimals(filteredAnimals);
|
||||
} catch (error) {
|
||||
console.error('筛选动物失败:', error);
|
||||
this.showError('筛选失败，请刷新页面重试');
|
||||
}
|
||||
}
|
||||
|
||||
viewAnimalDetail(animalId) {
|
||||
// 在实际项目中，这里可以跳转到详情页或显示认领表单
|
||||
console.log('查看动物详情:', animalId);
|
||||
|
||||
// 显示认领表单模态框
|
||||
this.showClaimForm(animalId);
|
||||
}
|
||||
|
||||
showAnimalInfo(animalId) {
|
||||
// 显示动物详细信息模态框
|
||||
console.log('显示动物信息:', animalId);
|
||||
|
||||
// 这里可以显示一个包含动物详细信息的模态框
|
||||
alert('动物详细信息功能开发中，即将上线');
|
||||
}
|
||||
|
||||
showClaimForm(animalId) {
|
||||
// 创建认领表单模态框
|
||||
const modalHTML = `
|
||||
<div class="modal fade" id="claimModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content animal-modal">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">认领申请</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="claimForm" class="claim-form">
|
||||
<input type="hidden" id="animalId" value="${animalId}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="fullName" class="form-label">姓名</label>
|
||||
<input type="text" class="form-control" id="fullName" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="phone" class="form-label">手机号</label>
|
||||
<input type="tel" class="form-control" id="phone" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">邮箱</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="purpose" class="form-label">认领目的</label>
|
||||
<textarea class="form-control" id="purpose" rows="3" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="experience" class="form-label">饲养经验</label>
|
||||
<select class="form-select" id="experience" required>
|
||||
<option value="">请选择饲养经验</option>
|
||||
<option value="none">无经验</option>
|
||||
<option value="little">少量经验</option>
|
||||
<option value="rich">丰富经验</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
|
||||
<label class="form-check-label" for="agreeTerms">
|
||||
我已阅读并同意<a href="#" onclick="animalManager.showTerms()">认领协议</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100">
|
||||
提交认领申请
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加模态框到页面
|
||||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
||||
|
||||
// 显示模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('claimModal'));
|
||||
modal.show();
|
||||
|
||||
// 绑定表单提交事件
|
||||
document.getElementById('claimForm').addEventListener('submit', this.handleClaimSubmit.bind(this));
|
||||
|
||||
// 模态框关闭时清理
|
||||
document.getElementById('claimModal').addEventListener('hidden.bs.modal', function () {
|
||||
this.remove();
|
||||
});
|
||||
}
|
||||
|
||||
async handleClaimSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
animalId: document.getElementById('animalId').value,
|
||||
fullName: document.getElementById('fullName').value,
|
||||
phone: document.getElementById('phone').value,
|
||||
email: document.getElementById('email').value,
|
||||
purpose: document.getElementById('purpose').value,
|
||||
experience: document.getElementById('experience').value
|
||||
};
|
||||
|
||||
// 表单验证
|
||||
if (!this.validateClaimForm(formData)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 模拟API调用
|
||||
console.log('提交认领申请:', formData);
|
||||
|
||||
// 显示成功消息
|
||||
this.showSuccess('认领申请提交成功！我们会尽快联系您');
|
||||
|
||||
// 关闭模态框
|
||||
bootstrap.Modal.getInstance(document.getElementById('claimModal')).hide();
|
||||
|
||||
// 重新加载动物列表
|
||||
await this.loadAnimals();
|
||||
|
||||
} catch (error) {
|
||||
console.error('提交认领申请失败:', error);
|
||||
this.showError('提交失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
validateClaimForm(data) {
|
||||
if (!data.fullName.trim()) {
|
||||
this.showError('请输入姓名');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.phone.trim() || !/^1[3-9]\d{9}$/.test(data.phone)) {
|
||||
this.showError('请输入正确的手机号');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
|
||||
this.showError('请输入正确的邮箱地址');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.purpose.trim()) {
|
||||
this.showError('请输入认领目的');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.experience) {
|
||||
this.showError('请选择饲养经验');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!document.getElementById('agreeTerms').checked) {
|
||||
this.showError('请同意认领协议');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
showTerms() {
|
||||
alert('认领协议功能开发中，即将上线');
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
this.showAlert(message, 'success');
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
this.showAlert(message, 'danger');
|
||||
}
|
||||
|
||||
showAlert(message, type) {
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// 插入到页面顶部
|
||||
const container = document.querySelector('.container');
|
||||
container.insertBefore(alertDiv, container.firstChild);
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化动物管理器
|
||||
const animalManager = new AnimalManager();
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// AOS动画初始化
|
||||
if (typeof AOS !== 'undefined') {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
}
|
||||
});
|
||||
447
website/js/flower.js
Normal file
447
website/js/flower.js
Normal file
@@ -0,0 +1,447 @@
|
||||
// 送花服务功能管理类
|
||||
class FlowerManager {
|
||||
constructor() {
|
||||
this.flowers = [];
|
||||
this.filteredFlowers = [];
|
||||
this.currentFilters = {
|
||||
category: '',
|
||||
price: '',
|
||||
occasion: ''
|
||||
};
|
||||
this.init();
|
||||
}
|
||||
|
||||
// 初始化方法
|
||||
init() {
|
||||
this.loadFlowers();
|
||||
this.bindEvents();
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvents() {
|
||||
// 筛选器变化事件
|
||||
document.getElementById('filter-category').addEventListener('change', (e) => {
|
||||
this.currentFilters.category = e.target.value;
|
||||
});
|
||||
|
||||
document.getElementById('filter-price').addEventListener('change', (e) => {
|
||||
this.currentFilters.price = e.target.value;
|
||||
});
|
||||
|
||||
document.getElementById('filter-occasion').addEventListener('change', (e) => {
|
||||
this.currentFilters.occasion = e.target.value;
|
||||
});
|
||||
|
||||
// 筛选按钮点击事件
|
||||
document.querySelector('.flower-filter button').addEventListener('click', () => {
|
||||
this.filterFlowers();
|
||||
});
|
||||
|
||||
// 页面加载完成后显示鲜花
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.displayFlowers();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载鲜花数据（模拟数据）
|
||||
loadFlowers() {
|
||||
this.flowers = [
|
||||
{
|
||||
id: 1,
|
||||
name: '浪漫红玫瑰',
|
||||
description: '99朵红玫瑰，象征永恒的爱情和浪漫',
|
||||
price: 299,
|
||||
originalPrice: 399,
|
||||
image: 'images/flower-rose.svg',
|
||||
category: 'love',
|
||||
occasion: 'valentine',
|
||||
tags: ['love', 'romantic'],
|
||||
inStock: true,
|
||||
rating: 4.8
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '生日祝福花束',
|
||||
description: '多彩花束，包含康乃馨、百合和满天星',
|
||||
price: 199,
|
||||
originalPrice: 259,
|
||||
image: 'images/flower-birthday.svg',
|
||||
category: 'birthday',
|
||||
occasion: 'birthday',
|
||||
tags: ['birthday', 'celebration'],
|
||||
inStock: true,
|
||||
rating: 4.6
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '商务庆典花篮',
|
||||
description: '大型花篮，适合开业、庆典等商务场合',
|
||||
price: 599,
|
||||
originalPrice: 699,
|
||||
image: 'images/flower-business.svg',
|
||||
category: 'celebration',
|
||||
occasion: 'anniversary',
|
||||
tags: ['business', 'celebration'],
|
||||
inStock: true,
|
||||
rating: 4.7
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '温馨慰问花束',
|
||||
description: '淡雅花束，表达关怀和慰问之情',
|
||||
price: 159,
|
||||
originalPrice: 199,
|
||||
image: 'images/flower-sympathy.svg',
|
||||
category: 'sympathy',
|
||||
occasion: 'thanks',
|
||||
tags: ['sympathy', 'care'],
|
||||
inStock: true,
|
||||
rating: 4.5
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '永恒爱意花盒',
|
||||
description: '精美礼盒装，包含玫瑰和配花，永久保存',
|
||||
price: 459,
|
||||
originalPrice: 599,
|
||||
image: 'images/flower-box.svg',
|
||||
category: 'love',
|
||||
occasion: 'anniversary',
|
||||
tags: ['love', 'premium'],
|
||||
inStock: true,
|
||||
rating: 4.9
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '感恩花束',
|
||||
description: '向日葵为主的花束，表达感谢和敬意',
|
||||
price: 229,
|
||||
originalPrice: 279,
|
||||
image: 'images/flower-thanks.svg',
|
||||
category: 'celebration',
|
||||
occasion: 'thanks',
|
||||
tags: ['thanks', 'gratitude'],
|
||||
inStock: true,
|
||||
rating: 4.4
|
||||
}
|
||||
];
|
||||
this.filteredFlowers = [...this.flowers];
|
||||
}
|
||||
|
||||
// 筛选鲜花
|
||||
filterFlowers() {
|
||||
this.filteredFlowers = this.flowers.filter(flower => {
|
||||
let match = true;
|
||||
|
||||
// 分类筛选
|
||||
if (this.currentFilters.category && flower.category !== this.currentFilters.category) {
|
||||
match = false;
|
||||
}
|
||||
|
||||
// 价格筛选
|
||||
if (this.currentFilters.price) {
|
||||
const [min, max] = this.currentFilters.price.split('-');
|
||||
if (max === '+') {
|
||||
if (flower.price < parseInt(min)) {
|
||||
match = false;
|
||||
}
|
||||
} else {
|
||||
if (flower.price < parseInt(min) || flower.price > parseInt(max)) {
|
||||
match = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 场合筛选
|
||||
if (this.currentFilters.occasion && flower.occasion !== this.currentFilters.occasion) {
|
||||
match = false;
|
||||
}
|
||||
|
||||
return match;
|
||||
});
|
||||
|
||||
this.displayFlowers();
|
||||
}
|
||||
|
||||
// 显示鲜花列表
|
||||
displayFlowers() {
|
||||
const container = document.getElementById('flowers-container');
|
||||
|
||||
if (this.filteredFlowers.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="col-12">
|
||||
<div class="flower-empty">
|
||||
<i class="fa fa-search"></i>
|
||||
<h4>没有找到符合条件的鲜花</h4>
|
||||
<p>请尝试调整筛选条件</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = this.filteredFlowers.map(flower => `
|
||||
<div class="col-md-4 mb-4" data-aos="fade-up">
|
||||
<div class="card flower-card h-100">
|
||||
${flower.originalPrice > flower.price ?
|
||||
`<span class="discount-badge">-${Math.round((1 - flower.price / flower.originalPrice) * 100)}%</span>` :
|
||||
''
|
||||
}
|
||||
<img src="${flower.image}" class="card-img-top" alt="${flower.name}"
|
||||
onerror="this.src='images/flower-placeholder.svg'">
|
||||
<div class="card-body">
|
||||
<div class="flower-tags">
|
||||
${flower.tags.map(tag => `<span class="flower-tag ${tag}">${this.getTagName(tag)}</span>`).join('')}
|
||||
</div>
|
||||
<h5 class="card-title">${flower.name}</h5>
|
||||
<p class="card-text text-muted">${flower.description}</p>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<span class="flower-price">¥${flower.price}</span>
|
||||
${flower.originalPrice > flower.price ?
|
||||
`<span class="flower-original-price ms-2">¥${flower.originalPrice}</span>` :
|
||||
''
|
||||
}
|
||||
</div>
|
||||
<div class="text-warning">
|
||||
<i class="fa fa-star"></i>
|
||||
<span>${flower.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-flower" onclick="flowerManager.showOrderForm(${flower.id})">
|
||||
立即订购
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 获取标签名称
|
||||
getTagName(tag) {
|
||||
const tagNames = {
|
||||
'love': '爱情',
|
||||
'romantic': '浪漫',
|
||||
'birthday': '生日',
|
||||
'celebration': '庆典',
|
||||
'business': '商务',
|
||||
'sympathy': '慰问',
|
||||
'care': '关怀',
|
||||
'premium': '精品',
|
||||
'thanks': '感谢',
|
||||
'gratitude': '感恩'
|
||||
};
|
||||
return tagNames[tag] || tag;
|
||||
}
|
||||
|
||||
// 显示订购表单
|
||||
showOrderForm(flowerId) {
|
||||
const flower = this.flowers.find(f => f.id === flowerId);
|
||||
if (!flower) return;
|
||||
|
||||
// 创建模态框
|
||||
const modalHtml = `
|
||||
<div class="modal fade" id="orderModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">订购 ${flower.name}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<img src="${flower.image}" class="img-fluid rounded" alt="${flower.name}"
|
||||
onerror="this.src='images/flower-placeholder.svg'">
|
||||
<div class="mt-3">
|
||||
<h4>${flower.name}</h4>
|
||||
<p class="text-muted">${flower.description}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="flower-price">¥${flower.price}</span>
|
||||
<span class="badge bg-success">有货</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<form id="orderForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">收花人姓名</label>
|
||||
<input type="text" class="form-control" name="recipientName" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">收花人电话</label>
|
||||
<input type="tel" class="form-control" name="recipientPhone" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">配送地址</label>
|
||||
<textarea class="form-control" name="deliveryAddress" rows="3" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">配送时间</label>
|
||||
<input type="datetime-local" class="form-control" name="deliveryTime" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">祝福语</label>
|
||||
<textarea class="form-control" name="greeting" rows="2"
|
||||
placeholder="写下你的祝福..."></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">支付方式</label>
|
||||
<select class="form-select" name="paymentMethod" required>
|
||||
<option value="">请选择支付方式</option>
|
||||
<option value="wechat">微信支付</option>
|
||||
<option value="alipay">支付宝</option>
|
||||
<option value="bank">银行转账</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-flower" onclick="flowerManager.submitOrder(${flower.id})">
|
||||
确认订购 (¥${flower.price})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加模态框到页面
|
||||
if (!document.getElementById('orderModal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
}
|
||||
|
||||
// 显示模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('orderModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
// 提交订单
|
||||
submitOrder(flowerId) {
|
||||
const form = document.getElementById('orderForm');
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const orderData = {
|
||||
flowerId,
|
||||
recipientName: formData.get('recipientName'),
|
||||
recipientPhone: formData.get('recipientPhone'),
|
||||
deliveryAddress: formData.get('deliveryAddress'),
|
||||
deliveryTime: formData.get('deliveryTime'),
|
||||
greeting: formData.get('greeting'),
|
||||
paymentMethod: formData.get('paymentMethod'),
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 模拟提交订单
|
||||
this.showOrderSuccess(orderData);
|
||||
}
|
||||
|
||||
// 显示订单成功
|
||||
showOrderSuccess(orderData) {
|
||||
// 关闭订购模态框
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('orderModal'));
|
||||
modal.hide();
|
||||
|
||||
// 显示成功提示
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: '订购成功！',
|
||||
html: `
|
||||
<div class="text-start">
|
||||
<p><strong>订单详情：</strong></p>
|
||||
<p>收花人：${orderData.recipientName}</p>
|
||||
<p>电话：${orderData.recipientPhone}</p>
|
||||
<p>配送地址：${orderData.deliveryAddress}</p>
|
||||
<p>配送时间：${new Date(orderData.deliveryTime).toLocaleString()}</p>
|
||||
<p class="mt-3">我们会在配送前与您确认，感谢您的订购！</p>
|
||||
</div>
|
||||
`,
|
||||
confirmButtonText: '确定',
|
||||
confirmButtonColor: '#ff6b6b'
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索鲜花
|
||||
searchFlowers(query) {
|
||||
if (!query.trim()) {
|
||||
this.filteredFlowers = [...this.flowers];
|
||||
} else {
|
||||
this.filteredFlowers = this.flowers.filter(flower =>
|
||||
flower.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||
flower.description.toLowerCase().includes(query.toLowerCase()) ||
|
||||
flower.tags.some(tag => tag.toLowerCase().includes(query.toLowerCase()))
|
||||
);
|
||||
}
|
||||
this.displayFlowers();
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
let flowerManager;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
flowerManager = new FlowerManager();
|
||||
|
||||
// 添加搜索功能（如果需要）
|
||||
const searchInput = document.createElement('input');
|
||||
searchInput.type = 'text';
|
||||
searchInput.placeholder = '搜索鲜花...';
|
||||
searchInput.className = 'form-control mb-3';
|
||||
searchInput.style.maxWidth = '300px';
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
flowerManager.searchFlowers(e.target.value);
|
||||
});
|
||||
|
||||
const searchContainer = document.createElement('div');
|
||||
searchContainer.className = 'd-flex justify-content-center';
|
||||
searchContainer.appendChild(searchInput);
|
||||
|
||||
const flowersSection = document.getElementById('flowers');
|
||||
if (flowersSection) {
|
||||
flowersSection.querySelector('.container').insertBefore(searchContainer, flowersSection.querySelector('.row'));
|
||||
}
|
||||
});
|
||||
|
||||
// 工具函数：格式化价格
|
||||
function formatPrice(price) {
|
||||
return '¥' + price.toFixed(2);
|
||||
}
|
||||
|
||||
// 工具函数：显示加载状态
|
||||
function showLoading() {
|
||||
const container = document.getElementById('flowers-container');
|
||||
container.innerHTML = `
|
||||
<div class="col-12">
|
||||
<div class="flower-loading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 工具函数：显示错误信息
|
||||
function showError(message) {
|
||||
const container = document.getElementById('flowers-container');
|
||||
container.innerHTML = `
|
||||
<div class="col-12">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i class="fa fa-exclamation-triangle me-2"></i>
|
||||
${message}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -32,6 +32,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 初始化页面交互
|
||||
initPageInteractions();
|
||||
|
||||
// 初始化表单处理
|
||||
initForms();
|
||||
});
|
||||
|
||||
// 创建滚动进度条
|
||||
@@ -195,6 +198,50 @@ function initCallToAction() {
|
||||
});
|
||||
}
|
||||
|
||||
// 表单处理功能
|
||||
function initForms() {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 表单验证
|
||||
if (this.checkValidity()) {
|
||||
// 显示提交成功消息
|
||||
showFormSuccess(this);
|
||||
// 重置表单
|
||||
this.reset();
|
||||
} else {
|
||||
// 显示验证错误
|
||||
this.reportValidity();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示表单提交成功消息
|
||||
function showFormSuccess(form) {
|
||||
// 创建成功消息
|
||||
const successMessage = document.createElement('div');
|
||||
successMessage.className = 'alert alert-success alert-dismissible fade show';
|
||||
successMessage.innerHTML = `
|
||||
<i class="fa fa-check-circle me-2"></i>
|
||||
提交成功！我们会尽快与您联系。
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// 插入到表单前面
|
||||
form.parentNode.insertBefore(successMessage, form);
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
if (successMessage.parentNode) {
|
||||
successMessage.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// 页面性能优化：图片懒加载
|
||||
function initLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
|
||||
455
website/js/reward.js
Normal file
455
website/js/reward.js
Normal file
@@ -0,0 +1,455 @@
|
||||
// 推广奖励功能管理类
|
||||
class RewardManager {
|
||||
constructor() {
|
||||
this.promotionData = [];
|
||||
this.userStats = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
// 初始化方法
|
||||
init() {
|
||||
this.loadPromotionData();
|
||||
this.loadUserStats();
|
||||
this.bindEvents();
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvents() {
|
||||
// 表单提交事件
|
||||
const promotionForm = document.getElementById('promotionForm');
|
||||
if (promotionForm) {
|
||||
promotionForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.handlePromotionApplication(e.target);
|
||||
});
|
||||
}
|
||||
|
||||
// 协议链接点击事件
|
||||
const agreeTerms = document.getElementById('agreeTerms');
|
||||
if (agreeTerms) {
|
||||
agreeTerms.addEventListener('change', (e) => {
|
||||
this.toggleAgreement(e.target.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载完成后显示数据
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.displayPromotionStats();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载推广数据（模拟数据）
|
||||
loadPromotionData() {
|
||||
this.promotionData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '旅行结伴推广',
|
||||
commissionRate: 15,
|
||||
totalEarnings: 12500,
|
||||
successfulReferrals: 84,
|
||||
conversionRate: 12.5
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '动物认领推广',
|
||||
commissionRate: 20,
|
||||
totalEarnings: 8900,
|
||||
successfulReferrals: 45,
|
||||
conversionRate: 18.2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '送花服务推广',
|
||||
commissionRate: 12,
|
||||
totalEarnings: 6700,
|
||||
successfulReferrals: 56,
|
||||
conversionRate: 9.8
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '新用户注册',
|
||||
commissionRate: 10,
|
||||
totalEarnings: 3200,
|
||||
successfulReferrals: 320,
|
||||
conversionRate: 25.4
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// 加载用户统计数据（模拟数据）
|
||||
loadUserStats() {
|
||||
this.userStats = {
|
||||
totalEarnings: 31300,
|
||||
availableBalance: 5200,
|
||||
totalReferrals: 505,
|
||||
monthlyEarnings: 4200,
|
||||
joinDate: '2024-01-15',
|
||||
nextPayoutDate: '2024-03-15',
|
||||
performanceLevel: 'Gold',
|
||||
topPromotion: '旅行结伴推广'
|
||||
};
|
||||
}
|
||||
|
||||
// 显示推广统计数据
|
||||
displayPromotionStats() {
|
||||
// 这里可以添加实时统计数据显示逻辑
|
||||
console.log('推广数据加载完成:', this.promotionData);
|
||||
console.log('用户统计数据:', this.userStats);
|
||||
}
|
||||
|
||||
// 处理推广申请
|
||||
handlePromotionApplication(form) {
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const applicationData = {
|
||||
name: formData.get('name'),
|
||||
phone: formData.get('phone'),
|
||||
email: formData.get('email'),
|
||||
channel: formData.get('channel'),
|
||||
volume: formData.get('volume'),
|
||||
message: formData.get('message'),
|
||||
applicationDate: new Date().toISOString(),
|
||||
status: 'pending'
|
||||
};
|
||||
|
||||
// 模拟提交申请
|
||||
this.submitPromotionApplication(applicationData);
|
||||
}
|
||||
|
||||
// 提交推广申请
|
||||
submitPromotionApplication(data) {
|
||||
// 模拟API调用
|
||||
console.log('提交推广申请:', data);
|
||||
|
||||
// 显示成功提示
|
||||
this.showApplicationSuccess(data);
|
||||
|
||||
// 重置表单
|
||||
document.getElementById('promotionForm').reset();
|
||||
}
|
||||
|
||||
// 显示申请成功
|
||||
showApplicationSuccess(data) {
|
||||
// 使用SweetAlert或自定义模态框显示成功信息
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: '申请提交成功！',
|
||||
html: `
|
||||
<div class="text-start">
|
||||
<p><strong>申请详情：</strong></p>
|
||||
<p>姓名：${data.name}</p>
|
||||
<p>电话：${data.phone}</p>
|
||||
<p>邮箱：${data.email}</p>
|
||||
<p>推广渠道：${this.getChannelName(data.channel)}</p>
|
||||
<p class="mt-3">我们会在1-3个工作日内审核您的申请，并通过邮件和短信通知您结果。</p>
|
||||
</div>
|
||||
`,
|
||||
confirmButtonText: '确定',
|
||||
confirmButtonColor: '#6c5ce7'
|
||||
});
|
||||
} else {
|
||||
alert('推广申请提交成功！我们会在1-3个工作日内联系您。');
|
||||
}
|
||||
}
|
||||
|
||||
// 获取渠道名称
|
||||
getChannelName(channel) {
|
||||
const channelNames = {
|
||||
'wechat': '微信/朋友圈',
|
||||
'weibo': '微博',
|
||||
'douyin': '抖音',
|
||||
'website': '个人网站/博客',
|
||||
'other': '其他渠道'
|
||||
};
|
||||
return channelNames[channel] || channel;
|
||||
}
|
||||
|
||||
// 切换协议同意状态
|
||||
toggleAgreement(checked) {
|
||||
const submitButton = document.querySelector('#promotionForm button[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = !checked;
|
||||
}
|
||||
}
|
||||
|
||||
// 生成推广链接
|
||||
generatePromotionLink(userId, campaignType = 'general') {
|
||||
const baseUrl = window.location.origin;
|
||||
const affiliateId = this.generateAffiliateId(userId);
|
||||
|
||||
const campaignParams = {
|
||||
'travel': 'ref=travel_affiliate',
|
||||
'animal': 'ref=animal_affiliate',
|
||||
'flower': 'ref=flower_affiliate',
|
||||
'general': 'ref=general_affiliate'
|
||||
};
|
||||
|
||||
return `${baseUrl}/?${campaignParams[campaignType]}&affiliate=${affiliateId}`;
|
||||
}
|
||||
|
||||
// 生成推广ID
|
||||
generateAffiliateId(userId) {
|
||||
// 简单的ID生成逻辑，实际应用中应该更复杂
|
||||
return `aff_${userId}_${Date.now().toString(36)}`;
|
||||
}
|
||||
|
||||
// 生成推广二维码
|
||||
generatePromotionQRCode(link, elementId) {
|
||||
// 这里可以集成QRCode生成库
|
||||
console.log('生成二维码:', link);
|
||||
// 实际实现需要使用QRCode库
|
||||
}
|
||||
|
||||
// 复制推广链接
|
||||
copyPromotionLink(link) {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
this.showCopySuccess();
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
this.showCopyError();
|
||||
});
|
||||
}
|
||||
|
||||
// 显示复制成功
|
||||
showCopySuccess() {
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: '复制成功！',
|
||||
text: '推广链接已复制到剪贴板',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
alert('推广链接已复制！');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示复制错误
|
||||
showCopyError() {
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: '复制失败',
|
||||
text: '请手动复制链接',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 分享到社交媒体
|
||||
shareToSocialMedia(platform, link, title = '结伴客推广') {
|
||||
const shareUrls = {
|
||||
'wechat': `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(link)}`,
|
||||
'weibo': `http://service.weibo.com/share/share.php?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`,
|
||||
'qq': `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`
|
||||
};
|
||||
|
||||
if (shareUrls[platform]) {
|
||||
window.open(shareUrls[platform], '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// 计算预计收益
|
||||
calculateEstimatedEarnings(referrals, averageOrderValue, commissionRate) {
|
||||
return referrals * averageOrderValue * (commissionRate / 100);
|
||||
}
|
||||
|
||||
// 格式化金额
|
||||
formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY'
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
// 获取性能等级
|
||||
getPerformanceLevel(conversionRate) {
|
||||
if (conversionRate >= 20) return 'Platinum';
|
||||
if (conversionRate >= 15) return 'Gold';
|
||||
if (conversionRate >= 10) return 'Silver';
|
||||
return 'Bronze';
|
||||
}
|
||||
|
||||
// 获取等级颜色
|
||||
getLevelColor(level) {
|
||||
const colors = {
|
||||
'Platinum': '#e5e4e2',
|
||||
'Gold': '#ffd700',
|
||||
'Silver': '#c0c0c0',
|
||||
'Bronze': '#cd7f32'
|
||||
};
|
||||
return colors[level] || '#6c757d';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
let rewardManager;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
rewardManager = new RewardManager();
|
||||
|
||||
// 添加实时统计显示（如果需要）
|
||||
addRealTimeStats();
|
||||
});
|
||||
|
||||
// 添加实时统计显示
|
||||
function addRealTimeStats() {
|
||||
const statsContainer = document.createElement('div');
|
||||
statsContainer.className = 'container mt-4';
|
||||
statsContainer.innerHTML = `
|
||||
<div class="row text-center">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="reward-stat">
|
||||
<div class="reward-stat-number">¥31,300</div>
|
||||
<div class="reward-stat-label">总收益</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="reward-stat">
|
||||
<div class="reward-stat-number">505</div>
|
||||
<div class="reward-stat-label">总推荐数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="reward-stat">
|
||||
<div class="reward-stat-number">¥5,200</div>
|
||||
<div class="reward-stat-label">可提现余额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="reward-stat">
|
||||
<div class="reward-stat-number">Gold</div>
|
||||
<div class="reward-stat-label">性能等级</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const joinSection = document.getElementById('join');
|
||||
if (joinSection) {
|
||||
joinSection.parentNode.insertBefore(statsContainer, joinSection);
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数：显示加载状态
|
||||
function showRewardLoading() {
|
||||
const container = document.getElementById('promotion-stats');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="reward-loading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数：显示错误信息
|
||||
function showRewardError(message) {
|
||||
const container = document.getElementById('promotion-stats');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i class="fa fa-exclamation-triangle me-2"></i>
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数：格式化日期
|
||||
function formatDate(dateString) {
|
||||
return new Date(dateString).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
// 工具函数：生成进度条HTML
|
||||
function createProgressBar(value, max = 100, type = 'primary') {
|
||||
const percentage = (value / max) * 100;
|
||||
return `
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar progress-bar-${type}"
|
||||
role="progressbar"
|
||||
style="width: ${percentage}%"
|
||||
aria-valuenow="${value}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="${max}">
|
||||
${percentage.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 推广链接生成器（示例）
|
||||
function setupPromotionLinkGenerator() {
|
||||
const generatorHtml = `
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">推广链接生成器</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">推广类型</label>
|
||||
<select class="form-select" id="promotionType">
|
||||
<option value="general">通用推广</option>
|
||||
<option value="travel">旅行结伴</option>
|
||||
<option value="animal">动物认领</option>
|
||||
<option value="flower">送花服务</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">用户ID</label>
|
||||
<input type="text" class="form-control" id="userId" placeholder="输入用户ID">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">推广链接</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="generatedLink" readonly>
|
||||
<button class="btn btn-outline-secondary" type="button" onclick="copyGeneratedLink()">
|
||||
<i class="fa fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="generatePromotionLink()">
|
||||
生成链接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const joinSection = document.getElementById('join');
|
||||
if (joinSection) {
|
||||
joinSection.insertAdjacentHTML('beforebegin', generatorHtml);
|
||||
}
|
||||
}
|
||||
|
||||
// 全局函数供HTML调用
|
||||
function generatePromotionLink() {
|
||||
const type = document.getElementById('promotionType').value;
|
||||
const userId = document.getElementById('userId').value || 'demo_user';
|
||||
const link = rewardManager.generatePromotionLink(userId, type);
|
||||
document.getElementById('generatedLink').value = link;
|
||||
}
|
||||
|
||||
function copyGeneratedLink() {
|
||||
const linkInput = document.getElementById('generatedLink');
|
||||
if (linkInput.value) {
|
||||
rewardManager.copyPromotionLink(linkInput.value);
|
||||
}
|
||||
}
|
||||
266
website/js/travel.js
Normal file
266
website/js/travel.js
Normal file
@@ -0,0 +1,266 @@
|
||||
// 旅行结伴功能JavaScript
|
||||
|
||||
class TravelPlanManager {
|
||||
constructor() {
|
||||
this.apiBaseUrl = 'https://api.jiebanke.com/api/travel';
|
||||
this.plansContainer = document.getElementById('travel-plans-container');
|
||||
this.travelForm = document.getElementById('travel-plan-form');
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.loadTravelPlans();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
async loadTravelPlans() {
|
||||
try {
|
||||
// 模拟API调用，实际项目中替换为真实API
|
||||
const mockPlans = [
|
||||
{
|
||||
id: 1,
|
||||
destination: "西藏拉萨",
|
||||
travelDate: "2025-03-15",
|
||||
duration: 10,
|
||||
budget: "5000-10000",
|
||||
description: "寻找志同道合的伙伴一起探索西藏的神秘与美丽，计划游览布达拉宫、大昭寺、纳木错等景点。",
|
||||
requirements: "年龄25-35岁，有高原旅行经验者优先",
|
||||
participants: 3,
|
||||
maxParticipants: 6,
|
||||
creator: "旅行达人小李",
|
||||
createdAt: "2025-01-15"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
destination: "云南大理",
|
||||
travelDate: "2025-02-20",
|
||||
duration: 7,
|
||||
budget: "2000-5000",
|
||||
description: "大理古城、洱海、苍山七日游，体验白族文化和自然风光。",
|
||||
requirements: "喜欢摄影、热爱自然",
|
||||
participants: 2,
|
||||
maxParticipants: 4,
|
||||
creator: "摄影师小王",
|
||||
createdAt: "2025-01-10"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
destination: "海南三亚",
|
||||
travelDate: "2025-04-01",
|
||||
duration: 5,
|
||||
budget: "3000-6000",
|
||||
description: "阳光沙滩度假之旅，潜水、冲浪、海鲜美食一网打尽。",
|
||||
requirements: "性格开朗，喜欢水上运动",
|
||||
participants: 4,
|
||||
maxParticipants: 8,
|
||||
creator: "阳光少年小张",
|
||||
createdAt: "2025-01-08"
|
||||
}
|
||||
];
|
||||
|
||||
this.displayPlans(mockPlans);
|
||||
} catch (error) {
|
||||
console.error('加载旅行计划失败:', error);
|
||||
this.showError('加载旅行计划失败，请刷新页面重试');
|
||||
}
|
||||
}
|
||||
|
||||
displayPlans(plans) {
|
||||
if (plans.length === 0) {
|
||||
this.plansContainer.innerHTML = `
|
||||
<div class="col-12 text-center">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-info-circle me-2"></i>
|
||||
暂无旅行计划，快来发布第一个吧！
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const plansHTML = plans.map(plan => `
|
||||
<div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up">
|
||||
<div class="card travel-plan-card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="destination">${plan.destination}</h5>
|
||||
<span class="budget-badge">${plan.budget}元</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="travel-date mb-2">
|
||||
<i class="fa fa-calendar-alt me-2"></i>
|
||||
出发日期: ${new Date(plan.travelDate).toLocaleDateString('zh-CN')}
|
||||
</div>
|
||||
<div class="travel-date">
|
||||
<i class="fa fa-clock me-2"></i>
|
||||
行程天数: ${plan.duration}天
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="card-text text-muted mb-3" style="font-size: 0.9rem;">
|
||||
${plan.description}
|
||||
</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="fa fa-user me-1"></i>
|
||||
伙伴要求: ${plan.requirements || '无特殊要求'}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="participants">
|
||||
<i class="fa fa-users"></i>
|
||||
<span>${plan.participants}/${plan.maxParticipants}人</span>
|
||||
</div>
|
||||
<small class="text-muted">发布者: ${plan.creator}</small>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons mt-3">
|
||||
<button class="btn btn-primary btn-sm" onclick="travelManager.joinPlan(${plan.id})">
|
||||
加入计划
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="travelManager.viewPlanDetail(${plan.id})">
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
this.plansContainer.innerHTML = plansHTML;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (this.travelForm) {
|
||||
this.travelForm.addEventListener('submit', this.handleFormSubmit.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
async handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(this.travelForm);
|
||||
const planData = {
|
||||
destination: document.getElementById('destination').value,
|
||||
travelDate: document.getElementById('travel-date').value,
|
||||
duration: parseInt(document.getElementById('duration').value),
|
||||
budget: document.getElementById('budget').value,
|
||||
description: document.getElementById('description').value,
|
||||
requirements: document.getElementById('requirements').value
|
||||
};
|
||||
|
||||
// 表单验证
|
||||
if (!this.validateForm(planData)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 模拟API调用
|
||||
console.log('发布旅行计划:', planData);
|
||||
|
||||
// 显示成功消息
|
||||
this.showSuccess('旅行计划发布成功！');
|
||||
|
||||
// 清空表单
|
||||
this.travelForm.reset();
|
||||
|
||||
// 重新加载计划列表
|
||||
await this.loadTravelPlans();
|
||||
|
||||
} catch (error) {
|
||||
console.error('发布旅行计划失败:', error);
|
||||
this.showError('发布失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
validateForm(data) {
|
||||
if (!data.destination.trim()) {
|
||||
this.showError('请输入目的地');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.travelDate) {
|
||||
this.showError('请选择出发日期');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (data.duration < 1) {
|
||||
this.showError('行程天数必须大于0');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.budget) {
|
||||
this.showError('请选择预算范围');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!data.description.trim()) {
|
||||
this.showError('请输入行程描述');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async joinPlan(planId) {
|
||||
try {
|
||||
// 模拟加入计划
|
||||
console.log('加入旅行计划:', planId);
|
||||
this.showSuccess('已申请加入旅行计划，等待创建者确认');
|
||||
} catch (error) {
|
||||
console.error('加入计划失败:', error);
|
||||
this.showError('加入失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
viewPlanDetail(planId) {
|
||||
// 在实际项目中，这里可以跳转到详情页或显示模态框
|
||||
console.log('查看旅行计划详情:', planId);
|
||||
alert('功能开发中，即将上线');
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
this.showAlert(message, 'success');
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
this.showAlert(message, 'danger');
|
||||
}
|
||||
|
||||
showAlert(message, type) {
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// 插入到页面顶部
|
||||
const container = document.querySelector('.container');
|
||||
container.insertBefore(alertDiv, container.firstChild);
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化旅行计划管理器
|
||||
const travelManager = new TravelPlanManager();
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// AOS动画初始化
|
||||
if (typeof AOS !== 'undefined') {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -29,7 +29,7 @@
|
||||
<!-- 添加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-solid fa-map me-2"></i>结伴客
|
||||
<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>
|
||||
@@ -270,10 +270,10 @@
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -313,8 +313,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<!-- 添加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="fas fa-map me-2"></i>结伴客
|
||||
<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>
|
||||
@@ -56,100 +56,102 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面滚动进度条 -->
|
||||
<div class="scroll-progress"></div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button class="back-to-top">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- 商家合作横幅 -->
|
||||
<section class="hero-section">
|
||||
<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>
|
||||
<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="apply.html" class="btn btn-light btn-lg btn-rounded me-3">立即入驻</a>
|
||||
<a href="policy.html" class="btn btn-outline-light btn-lg btn-rounded">合作政策</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">合作优势</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="benefit-box">
|
||||
<div class="benefit-icon">
|
||||
<i class="bi bi-people-fill"></i>
|
||||
</div>
|
||||
<h3>庞大用户群体</h3>
|
||||
<p class="mb-0">接入超过10万注册用户，为您的业务带来稳定客源。</p>
|
||||
<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="col-md-4 mb-4">
|
||||
<div class="benefit-box">
|
||||
<div class="benefit-icon">
|
||||
<i class="bi bi-phone-fill"></i>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-icon">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
<h3 class="h4 mb-3">庞大用户群体</h3>
|
||||
<p class="text-muted">平台拥有数十万活跃用户，为合作商家带来稳定客源。</p>
|
||||
</div>
|
||||
<h3>技术支持</h3>
|
||||
<p class="mb-0">提供完善的技术支持和培训，帮助您快速上手。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="benefit-box">
|
||||
<div class="benefit-icon">
|
||||
<i class="bi bi-currency-dollar"></i>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-icon">
|
||||
<i class="fa fa-chart-line"></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-shield-alt"></i>
|
||||
</div>
|
||||
<h3 class="h4 mb-3">安全保障</h3>
|
||||
<p class="text-muted">完善的资金保障和信用体系，确保商家权益。</p>
|
||||
</div>
|
||||
<h3>收益保障</h3>
|
||||
<p class="mb-0">透明的收益分配机制，确保您的利益最大化。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作类型 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">合作类型</h2>
|
||||
</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">提供动物认领服务，让用户定期探望认领的动物，体验农场生活。</p>
|
||||
<a href="apply.html" class="btn btn-primary">申请入驻</a>
|
||||
</div>
|
||||
<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="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">花店合作</h5>
|
||||
<p class="card-text">为用户提供送花服务，满足用户在旅行中的情感表达需求。</p>
|
||||
<a href="apply.html" class="btn btn-primary">申请入驻</a>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-tractor"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">农场合作</h3>
|
||||
<p class="card-text">提供动物认领、农场体验等服务，吸引城市家庭前来体验田园生活。</p>
|
||||
</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">组织各类旅行活动，为用户提供丰富的旅行体验选择。</p>
|
||||
<a href="apply.html" class="btn btn-primary">申请入驻</a>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-seedling"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">花店合作</h3>
|
||||
<p class="card-text">通过送花服务功能，扩大销售渠道，提升品牌知名度和销售额。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fa fa-hiking"></i>
|
||||
</div>
|
||||
<h3 class="h5 card-title">活动组织</h3>
|
||||
<p class="card-text">提供特色旅行线路和活动，吸引结伴旅客，提高成团率。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,41 +159,49 @@
|
||||
</section>
|
||||
|
||||
<!-- 入驻流程 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">入驻流程</h2>
|
||||
<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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="process-step">
|
||||
<div class="process-number">1</div>
|
||||
<h5>提交申请</h5>
|
||||
<p class="mb-0">填写入驻申请表</p>
|
||||
<div class="process-line"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-edit"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">1. 提交申请</h3>
|
||||
<p class="text-muted">填写商家入驻申请表，提交相关资质材料</p>
|
||||
</div>
|
||||
|
||||
<div class="process-step">
|
||||
<div class="process-number">2</div>
|
||||
<h5>资质审核</h5>
|
||||
<p class="mb-0">平台审核商家资质</p>
|
||||
<div class="process-line"></div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">2. 资质审核</h3>
|
||||
<p class="text-muted">平台对商家资质进行审核，确保合规经营</p>
|
||||
</div>
|
||||
|
||||
<div class="process-step">
|
||||
<div class="process-number">3</div>
|
||||
<h5>签约入驻</h5>
|
||||
<p class="mb-0">签署合作协议</p>
|
||||
<div class="process-line"></div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">3. 系统培训</h3>
|
||||
<p class="text-muted">为商家提供系统操作培训和技术支持</p>
|
||||
</div>
|
||||
|
||||
<div class="process-step">
|
||||
<div class="process-number">4</div>
|
||||
<h5>上线运营</h5>
|
||||
<p class="mb-0">正式开展业务</p>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-store"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">4. 正式上线</h3>
|
||||
<p class="text-muted">完成所有准备工作，正式上线为用户提供服务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,59 +209,144 @@
|
||||
</section>
|
||||
|
||||
<!-- 商家数据 -->
|
||||
<section class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<h2 class="display-5 fw-bold section-title">商家数据</h2>
|
||||
<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 text-center">
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="counter-box">
|
||||
<div class="counter-icon mb-3">
|
||||
<i class="fa fa-store"></i>
|
||||
</div>
|
||||
<h3 class="display-4 fw-bold text-primary mb-2">500+</h3>
|
||||
<p class="text-muted">合作商家</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="counter-box">
|
||||
<div class="counter-icon mb-3">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
<h3 class="display-4 fw-bold text-success mb-2">10000+</h3>
|
||||
<p class="text-muted">月活跃用户</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="counter-box">
|
||||
<div class="counter-icon mb-3">
|
||||
<i class="fa fa-yen-sign"></i>
|
||||
</div>
|
||||
<h3 class="display-4 fw-bold text-info mb-2">500万+</h3>
|
||||
<p class="text-muted">月交易额</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="counter-box">
|
||||
<div class="counter-icon mb-3">
|
||||
<i class="fa fa-star"></i>
|
||||
</div>
|
||||
<h3 class="display-4 fw-bold text-warning mb-2">4.8</h3>
|
||||
<p class="text-muted">平均评分</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">500+</div>
|
||||
<div class="stats-label">合作商家</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="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">50000+</div>
|
||||
<div class="stats-label">月均订单</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">1000万+</div>
|
||||
<div class="stats-label">年交易额</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="stats-card">
|
||||
<div class="stats-number">4.8</div>
|
||||
<div class="stats-label">用户评分</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card testimonial-card">
|
||||
<div class="card-body">
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<p class="card-text">通过结伴客平台，我们的农场认领业务增长了300%，吸引了大量城市家庭前来体验农场生活。</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card testimonial-card">
|
||||
<div class="card-body">
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<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">
|
||||
<div>
|
||||
<h6 class="mb-0">李女士</h6>
|
||||
<small class="text-muted">花之语花店</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card testimonial-card">
|
||||
<div class="card-body">
|
||||
<div class="testimonial-content">
|
||||
<div class="quote-mark">“</div>
|
||||
<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">
|
||||
<div>
|
||||
<h6 class="mb-0">张经理</h6>
|
||||
<small class="text-muted">探险旅行社</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 行动号召 -->
|
||||
<section class="cta-section">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-4">加入我们，共创未来</h2>
|
||||
<p class="lead mb-5 fs-4">成为结伴客合作伙伴，共享平台红利</p>
|
||||
<a href="apply.html" class="btn btn-light btn-lg btn-rounded">立即入驻</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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="fas fa-wechat"></i>
|
||||
<i class="fab fa-weixin"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon me-2">
|
||||
<i class="fas fa-weibo"></i>
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
<a href="#" class="social-icon">
|
||||
<i class="fab fa-qq"></i>
|
||||
@@ -261,10 +356,10 @@
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -304,8 +399,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
@@ -313,7 +408,7 @@
|
||||
</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/font-awesome/7.0.0/js/all.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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -29,7 +29,7 @@
|
||||
<!-- 添加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-solid fa-map-location me-2"></i>结伴客
|
||||
<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>
|
||||
@@ -200,10 +200,10 @@
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
||||
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
||||
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
||||
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
||||
<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">
|
||||
@@ -243,8 +243,8 @@
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
||||
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
||||
<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>
|
||||
|
||||
399
website/privacy.html
Normal file
399
website/privacy.html
Normal file
@@ -0,0 +1,399 @@
|
||||
<!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="css/style.css" rel="stylesheet">
|
||||
<link href="css/privacy.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="images/logo.png" alt="结伴客" height="40">
|
||||
</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" 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="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<header class="page-header privacy-header">
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-50">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-3 fw-bold text-white mb-4">隐私政策</h1>
|
||||
<p class="lead text-white">最后更新日期：2024年12月20日</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 隐私政策内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="privacy-content">
|
||||
<!-- 引言 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">引言</h2>
|
||||
<p>武汉高灏科技有限责任公司（以下简称"我们"）非常重视用户的隐私和个人信息保护。您在使用我们的产品与/或服务时，我们可能会收集和使用您的相关信息。我们希望通过本《隐私政策》向您说明，在您使用我们的产品与/或服务时，我们如何收集、使用、保存、共享和转让这些信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式。</p>
|
||||
<p>本政策将帮助您了解以下内容：</p>
|
||||
<ul>
|
||||
<li>我们如何收集和使用您的个人信息</li>
|
||||
<li>我们如何使用 Cookie 和同类技术</li>
|
||||
<li>我们如何共享、转让、公开披露您的个人信息</li>
|
||||
<li>我们如何保护您的个人信息</li>
|
||||
<li>您的权利</li>
|
||||
<li>我们如何处理儿童的个人信息</li>
|
||||
<li>您的个人信息如何在全球范围转移</li>
|
||||
<li>本政策如何更新</li>
|
||||
<li>如何联系我们</li>
|
||||
</ul>
|
||||
<p><strong>请您在使用我们的产品与/或服务前，仔细阅读并充分理解本政策。如您对本政策有任何疑问，请联系我们。</strong></p>
|
||||
</div>
|
||||
|
||||
<!-- 一、我们如何收集和使用您的个人信息 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">一、我们如何收集和使用您的个人信息</h2>
|
||||
<p>个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（一）我们收集的个人信息</h3>
|
||||
<p>在您使用我们的服务过程中，我们会收集以下种类的个人信息：</p>
|
||||
<ul>
|
||||
<li><strong>账户信息：</strong>当您注册账户时，我们会收集您的手机号码、电子邮箱地址、用户名、密码等。</li>
|
||||
<li><strong>身份信息：</strong>在您使用特定服务时，我们可能会收集您的真实姓名、身份证号码、护照号码等。</li>
|
||||
<li><strong>联系信息：</strong>包括您的收货地址、联系电话等。</li>
|
||||
<li><strong>交易信息：</strong>当您使用我们的支付服务时，我们会收集您的交易记录、支付信息等。</li>
|
||||
<li><strong>设备信息：</strong>包括设备型号、操作系统版本、唯一设备标识符、浏览器类型等。</li>
|
||||
<li><strong>位置信息：</strong>当您使用基于位置的服务时，我们会收集您的位置信息。</li>
|
||||
<li><strong>日志信息：</strong>当您使用我们的服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存。</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（二）我们如何使用您的个人信息</h3>
|
||||
<p>我们会在以下情况下使用您的个人信息：</p>
|
||||
<ul>
|
||||
<li>为您提供您所选择的产品和服务</li>
|
||||
<li>处理您的订单和交易</li>
|
||||
<li>管理您的账户</li>
|
||||
<li>向您发送重要的通知，如关于服务条款的变更</li>
|
||||
<li>进行数据分析，以改进我们的产品和服务</li>
|
||||
<li>防止欺诈和确保安全</li>
|
||||
<li>遵守法律法规的要求</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 二、我们如何使用 Cookie 和同类技术 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">二、我们如何使用 Cookie 和同类技术</h2>
|
||||
<p>为使您获得更轻松的访问体验，您访问我们的平台或使用我们提供的服务时，我们可能会通过小型数据文件识别您的身份，这么做可帮您省去重复输入注册信息的步骤，或者帮助判断您的账户安全。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（一）Cookie</h3>
|
||||
<p>为确保网站正常运转，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。借助于 Cookie，网站能够存储您的偏好等数据。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（二）网站信标和像素标签</h3>
|
||||
<p>除 Cookie 外，我们还会在网站上使用网站信标和像素标签等其他同类技术。例如，我们向您发送的电子邮件可能含有链接至我们网站内容的地址链接，如果您点击该链接，我们则会跟踪此次点击，帮助我们了解您的产品和服务偏好并改善客户服务。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（三）如何管理 Cookie</h3>
|
||||
<p>大多数浏览器均为用户提供了管理 Cookie 的功能。当您进行相应的设置时，您可以接受或拒绝 Cookie。如果您选择拒绝 Cookie，那么您可能无法完全体验我们提供的服务。</p>
|
||||
</div>
|
||||
|
||||
<!-- 三、我们如何共享、转让、公开披露您的个人信息 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">三、我们如何共享、转让、公开披露您的个人信息</h2>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（一）共享</h3>
|
||||
<p>我们不会与任何公司、组织和个人分享您的个人信息，但以下情况除外：</p>
|
||||
<ul>
|
||||
<li>在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。</li>
|
||||
<li>在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。</li>
|
||||
<li>与授权合作伙伴共享：仅为实现本政策中声明的目的，我们的某些服务将由授权合作伙伴提供。我们可能会与合作伙伴共享您的某些个人信息，以提供更好的客户服务和用户体验。</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（二）转让</h3>
|
||||
<p>我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：</p>
|
||||
<ul>
|
||||
<li>在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息。</li>
|
||||
<li>在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会在要求新的持有您个人信息的公司、组织继续受此隐私政策的约束，否则我们将要求该公司、组织重新向您征求授权同意。</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（三）公开披露</h3>
|
||||
<p>我们仅会在以下情况下，公开披露您的个人信息：</p>
|
||||
<ul>
|
||||
<li>获得您明确同意后；</li>
|
||||
<li>基于法律的披露：在法律、法律程序、诉讼或政府主管部门强制性要求的情况下，我们可能会公开披露您的个人信息。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 四、我们如何保护您的个人信息 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">四、我们如何保护您的个人信息</h2>
|
||||
<p>我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（一）数据安全技术措施</h3>
|
||||
<p>我们会采用包括但不限于SSL、加密存储、数据访问权限控制等技术手段来保护您的个人信息。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（二）数据安全管理制度</h3>
|
||||
<p>我们建立了专门的管理制度、流程和组织确保信息安全。例如，我们严格限制访问信息的人员范围，要求他们遵守保密义务，并进行审计。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（三）安全事件处置</h3>
|
||||
<p>在不幸发生个人信息安全事件后，我们将按照法律法规的要求，及时向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。</p>
|
||||
</div>
|
||||
|
||||
<!-- 五、您的权利 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">五、您的权利</h2>
|
||||
<p>按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（一）访问您的个人信息</h3>
|
||||
<p>您有权访问您的个人信息，法律法规规定的例外情况除外。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（二）更正您的个人信息</h3>
|
||||
<p>当您发现我们处理的关于您的个人信息有错误时，您有权要求我们做出更正。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（三）删除您的个人信息</h3>
|
||||
<p>在以下情形中，您可以向我们提出删除个人信息的请求：</p>
|
||||
<ul>
|
||||
<li>如果我们处理个人信息的行为违反法律法规；</li>
|
||||
<li>如果我们收集、使用您的个人信息，却未征得您的同意；</li>
|
||||
<li>如果我们处理个人信息的行为违反了与您的约定；</li>
|
||||
<li>如果您不再使用我们的产品或服务，或您注销了账号；</li>
|
||||
<li>如果我们不再为您提供产品或服务。</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（四）改变您授权同意的范围</h3>
|
||||
<p>每个业务功能需要一些基本的个人信息才能得以完成。对于额外收集的个人信息的收集和使用，您可以随时给予或收回您的授权同意。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（五）个人信息主体注销账户</h3>
|
||||
<p>您随时可注销此前注册的账户。在注销账户之后，我们将停止为您提供产品或服务，并依据您的要求，删除您的个人信息，法律法规另有规定的除外。</p>
|
||||
|
||||
<h3 class="h5 mt-4 mb-3">（六）响应您的上述请求</h3>
|
||||
<p>为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求。</p>
|
||||
<p>对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情收取一定成本费用。对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者非常不切实际（例如，涉及备份磁带上存放的信息）的请求，我们可能会予以拒绝。</p>
|
||||
</div>
|
||||
|
||||
<!-- 六、我们如何处理儿童的个人信息 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">六、我们如何处理儿童的个人信息</h2>
|
||||
<p>我们的产品、网站和服务主要面向成人。如果没有父母或监护人的同意，儿童不应创建自己的个人信息主体账户。</p>
|
||||
<p>对于经父母同意而收集儿童个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护儿童所必要的情况下使用或公开披露此信息。</p>
|
||||
<p>尽管当地法律和习俗对儿童的定义不同，但我们将不满 14 周岁的任何人均视为儿童。</p>
|
||||
<p>如果我们发现自己在未事先获得可证实的父母同意的情况下收集了儿童的个人信息，则会设法尽快删除相关数据。</p>
|
||||
</div>
|
||||
|
||||
<!-- 七、您的个人信息如何在全球范围转移 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">七、您的个人信息如何在全球范围转移</h2>
|
||||
<p>原则上，我们在中华人民共和国境内收集和产生的个人信息，将存储在中华人民共和国境内。</p>
|
||||
<p>由于我们通过遍布全球的资源和服务器提供产品或服务，这意味着，在获得您的授权同意后，您的个人信息可能会被转移到您使用产品或服务所在国家/地区的境外管辖区，或者受到来自这些管辖区的访问。</p>
|
||||
<p>此类管辖区可能设有不同的数据保护法，甚至未设立相关法律。在此类情况下，我们会确保您的个人信息得到在中华人民共和国境内足够同等的保护。</p>
|
||||
</div>
|
||||
|
||||
<!-- 八、本政策如何更新 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">八、本政策如何更新</h2>
|
||||
<p>我们的隐私政策可能变更。</p>
|
||||
<p>未经您明确同意，我们不会削减您按照本隐私政策所应享有的权利。我们会在本页面上发布对本政策所做的任何变更。</p>
|
||||
<p>对于重大变更，我们还会提供更为显著的通知（包括对于某些服务，我们会通过电子邮件发送通知，说明隐私政策的具体变更内容）。</p>
|
||||
<p>本政策所指的重大变更包括但不限于：</p>
|
||||
<ul>
|
||||
<li>我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；</li>
|
||||
<li>我们在所有权结构、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更等；</li>
|
||||
<li>个人信息共享、转让或公开披露的主要对象发生变化；</li>
|
||||
<li>您参与个人信息处理方面的权利及其行使方式发生重大变化；</li>
|
||||
<li>我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</li>
|
||||
<li>个人信息安全影响评估报告表明存在高风险时。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 九、如何联系我们 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">九、如何联系我们</h2>
|
||||
<p>如果您对本隐私政策有任何疑问、意见或建议，请通过以下方式与我们联系：</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><strong>邮箱：</strong>master@gaohaotech.com</li>
|
||||
<li><strong>电话：</strong>15927219038（郑经理）</li>
|
||||
<li><strong>地址：</strong>武汉市东湖高新技术开发区关山大道保利国际中心8楼</li>
|
||||
</ul>
|
||||
<p>一般情况下，我们将在15天内回复您的请求。</p>
|
||||
<p>如果您对我们的回复不满意，特别是我们的个人信息处理行为损害了您的合法权益，您还可以向网信、电信、公安及工商等监管部门进行投诉或举报。</p>
|
||||
</div>
|
||||
|
||||
<!-- 附录：定义 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">附录：定义</h2>
|
||||
<p>本隐私政策中使用的特定词语，具有如下含义：</p>
|
||||
<ul>
|
||||
<li><strong>我们或结伴客：</strong>指武汉高灏科技有限责任公司。</li>
|
||||
<li><strong>关联公司：</strong>指与我们存在直接或间接控制关系或重大影响关系的公司。</li>
|
||||
<li><strong>个人信息：</strong>指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</li>
|
||||
<li><strong>个人敏感信息：</strong>指一旦泄露、非法提供或滥用可能危害人身和财产安全，极易导致个人名誉、身心健康受到损害或歧视性待遇等的个人信息。</li>
|
||||
<li><strong>去标识化：</strong>指通过对个人信息的技术处理，使其在不借助额外信息的情况下，无法识别个人信息主体的过程。</li>
|
||||
<li><strong>匿名化：</strong>指通过对个人信息的技术处理，使得个人信息主体无法被识别，且处理后的信息不能被复原的过程。</li>
|
||||
<li><strong>中国或中国境内：</strong>指中华人民共和国大陆地区，不含香港特别行政区、澳门特别行政区和台湾地区。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 十、数据保留期限 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">十、数据保留期限</h2>
|
||||
<p>我们仅在为提供服务所必需的期间内保留您的个人信息，包括：</p>
|
||||
<ul>
|
||||
<li>为您提供服务期间；</li>
|
||||
<li>为了遵守法律义务所需的期限；</li>
|
||||
<li>为了保护我们的合法权益所需的期限。</li>
|
||||
</ul>
|
||||
<p>当您的个人信息超出上述保留期限后，我们会对您的个人信息进行删除或匿名化处理。</p>
|
||||
</div>
|
||||
|
||||
<!-- 十一、第三方服务 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">十一、第三方服务</h2>
|
||||
<p>为了给您提供更好的服务，我们可能会接入第三方服务提供商。当您使用这些第三方服务时，您的信息可能会被收集和使用，我们建议您查看这些第三方服务的隐私政策。</p>
|
||||
<p>我们对第三方服务提供商的隐私实践不承担责任，我们建议您在使用这些服务前仔细阅读他们的隐私政策。</p>
|
||||
</div>
|
||||
|
||||
<!-- 十二、隐私政策的适用范围 -->
|
||||
<div class="privacy-section">
|
||||
<h2 class="h4 mb-3">十二、隐私政策的适用范围</h2>
|
||||
<p>我们的隐私政策不适用于以下情况：</p>
|
||||
<ul>
|
||||
<li>由您提供并由第三方运营的服务；</li>
|
||||
<li>通过我们的服务链接到的第三方网站；</li>
|
||||
<li>您在使用我们的服务时可能选择与之通信或参与的第三方。</li>
|
||||
</ul>
|
||||
<p>我们不对这些第三方的隐私政策或实践负责，建议您在提交个人信息之前查看这些第三方的隐私政策。</p>
|
||||
</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="sitemap.xml">网站地图</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>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<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="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
544
website/reward.html
Normal file
544
website/reward.html
Normal file
@@ -0,0 +1,544 @@
|
||||
<!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="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>
|
||||
</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/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
website/robots.txt
Normal file
18
website/robots.txt
Normal file
@@ -0,0 +1,18 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://jiebanke.com/sitemap.xml
|
||||
|
||||
# 禁止爬虫访问以下路径
|
||||
Disallow: /merchant/apply.html
|
||||
Disallow: /contact.html
|
||||
|
||||
# 允许的爬虫
|
||||
User-agent: Googlebot
|
||||
Allow: /
|
||||
|
||||
User-agent: Bingbot
|
||||
Allow: /
|
||||
|
||||
User-agent: Baiduspider
|
||||
Allow: /
|
||||
39
website/sitemap.xml
Normal file
39
website/sitemap.xml
Normal file
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://jiebanke.com/</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jiebanke.com/about.html</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jiebanke.com/case.html</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jiebanke.com/merchant/</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jiebanke.com/merchant/apply.html</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jiebanke.com/contact.html</loc>
|
||||
<lastmod>2025-01-20</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
307
website/terms.html
Normal file
307
website/terms.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!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="css/style.css" rel="stylesheet">
|
||||
<link href="css/terms.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="images/logo.png" alt="结伴客" height="40">
|
||||
</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" 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="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<header class="page-header terms-header">
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-50">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-3 fw-bold text-white mb-4">用户协议</h1>
|
||||
<p class="lead text-white">最后更新日期：2024年12月20日</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 协议内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="terms-content">
|
||||
<!-- 引言 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">欢迎使用结伴客</h2>
|
||||
<p>感谢您选择结伴客（以下简称"本平台"）。在注册和使用本平台服务之前，请您仔细阅读本《用户协议》（以下简称"本协议"）。</p>
|
||||
<p>本协议是您与武汉高灏科技有限责任公司（以下简称"我们"）之间关于使用结伴客平台服务的法律协议。当您点击"同意"或类似按钮，或者实际使用我们的服务时，即表示您已充分阅读、理解并同意接受本协议的全部内容。</p>
|
||||
</div>
|
||||
|
||||
<!-- 一、协议范围 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">一、协议范围</h2>
|
||||
<p>1.1 本协议内容包括协议正文及所有本平台已经发布的或将来可能发布的各类规则、声明、通知、说明等（以下统称"规则"）。</p>
|
||||
<p>1.2 所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。</p>
|
||||
<p>1.3 我们有权根据需要不时地制定、修改本协议及相关规则，变更后的协议和规则将在本平台上公布。如您继续使用我们的服务，即表示您接受经修订的协议和规则。</p>
|
||||
</div>
|
||||
|
||||
<!-- 二、服务内容 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">二、服务内容</h2>
|
||||
<p>2.1 本平台为您提供以下服务：</p>
|
||||
<ul>
|
||||
<li>旅行结伴匹配服务</li>
|
||||
<li>动物认领信息服务</li>
|
||||
<li>送花订购配送服务</li>
|
||||
<li>推广奖励计划服务</li>
|
||||
<li>其他相关增值服务</li>
|
||||
</ul>
|
||||
<p>2.2 我们保留随时变更、中断或终止部分或全部服务的权利。</p>
|
||||
<p>2.3 您理解并同意，我们仅提供相关的网络服务，除此之外与相关网络服务有关的设备（如电脑、调制解调器及其他与接入互联网有关的装置）及所需的费用（如为接入互联网而支付的电话费及上网费）均应由您自行负担。</p>
|
||||
</div>
|
||||
|
||||
<!-- 三、用户注册 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">三、用户注册</h2>
|
||||
<p>3.1 您确认，在您完成注册程序或以其他我们允许的方式实际使用我们的服务时，您应当是具备完全民事权利能力和完全民事行为能力的自然人、法人或其他组织。</p>
|
||||
<p>3.2 若您不具备前述主体资格，则您及您的监护人应承担因此而导致的一切后果，且我们有权注销您的账户。</p>
|
||||
<p>3.3 您应提供真实、准确、完整、合法的注册信息，并及时更新您的资料。</p>
|
||||
<p>3.4 您注册成功后，我们将为您提供一个用户账号及相应的密码，该用户账号和密码由您负责保管。</p>
|
||||
</div>
|
||||
|
||||
<!-- 四、用户行为规范 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">四、用户行为规范</h2>
|
||||
<p>4.1 您在使用我们的服务时，必须遵守中华人民共和国相关法律法规的规定，您应同意将不会利用我们的服务进行任何违法或不正当的活动。</p>
|
||||
<p>4.2 您不得利用我们的服务从事以下活动：</p>
|
||||
<ul>
|
||||
<li>违反宪法或法律法规规定的；</li>
|
||||
<li>危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
|
||||
<li>损害国家荣誉和利益的；</li>
|
||||
<li>煽动民族仇恨、民族歧视，破坏民族团结的；</li>
|
||||
<li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
|
||||
<li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
|
||||
<li>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
|
||||
<li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
|
||||
<li>含有法律、行政法规禁止的其他内容的。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 五、知识产权 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">五、知识产权</h2>
|
||||
<p>5.1 本平台的所有知识产权，包括但不限于商标权、专利权、著作权、商业秘密等，均归我们或相关权利人所有。</p>
|
||||
<p>5.2 未经我们或相关权利人书面同意，您不得为任何商业或非商业目的自行或许可任何第三方实施、利用、转让上述知识产权。</p>
|
||||
<p>5.3 您在使用我们的服务时发布的内容，您同意授予我们免费的、永久的、不可撤销的、非独家的许可使用权利。</p>
|
||||
</div>
|
||||
|
||||
<!-- 六、隐私保护 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">六、隐私保护</h2>
|
||||
<p>6.1 保护用户隐私是我们的一项基本政策，我们保证不对外公开或向第三方提供您的注册资料及您在使用我们的服务时存储在我们的非公开内容。</p>
|
||||
<p>6.2 您同意我们可在下列情况下披露您的个人信息：</p>
|
||||
<ul>
|
||||
<li>获得您明确授权；</li>
|
||||
<li>根据法律、法规的要求；</li>
|
||||
<li>按照相关政府主管部门的要求；</li>
|
||||
<li>为维护社会公众的利益；</li>
|
||||
<li>为维护我们的合法权益。</li>
|
||||
</ul>
|
||||
<p>6.3 详细隐私政策请参阅我们的《隐私政策》。</p>
|
||||
</div>
|
||||
|
||||
<!-- 七、免责声明 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">七、免责声明</h2>
|
||||
<p>7.1 您明确同意使用我们的服务所存在的风险将完全由您自己承担。</p>
|
||||
<p>7.2 我们不保证服务一定能满足您的要求，也不保证服务不会中断，对服务的及时性、安全性、准确性也都不作保证。</p>
|
||||
<p>7.3 对于因不可抗力或我们不能控制的原因造成的服务中断或其他缺陷，我们不承担任何责任。</p>
|
||||
</div>
|
||||
|
||||
<!-- 八、协议变更 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">八、协议变更</h2>
|
||||
<p>8.1 我们有权随时修改本协议的任何条款，一旦本协议的内容发生变动，我们将会直接在网站上公布修改之后的协议内容。</p>
|
||||
<p>8.2 如果您不同意我们对本协议所做的修改，您有权停止使用我们的服务。如果您继续使用我们的服务，则视为您接受我们对本协议所做的修改。</p>
|
||||
</div>
|
||||
|
||||
<!-- 九、法律适用 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">九、法律适用</h2>
|
||||
<p>9.1 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>
|
||||
<p>9.2 如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向我们所在地的人民法院提起诉讼。</p>
|
||||
</div>
|
||||
|
||||
<!-- 十、其他 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">十、其他</h2>
|
||||
<p>10.1 本协议构成您与我们之间就使用我们的服务达成的完整协议，取代您和我们先前就相同 subject matter 达成的任何口头或书面协议。</p>
|
||||
<p>10.2 如果我们未执行本协议的任何条款，不应被视为放弃该条款。</p>
|
||||
<p>10.3 本协议中的标题仅为方便而设，不影响对本协议的解释。</p>
|
||||
<p>10.4 本协议适用中华人民共和国法律。如出现任何争议，双方应首先通过友好协商解决；协商不成的，任何一方可向武汉仲裁委员会申请仲裁。</p>
|
||||
<p>10.5 本协议以中文为准，其他语言版本仅供参考。</p>
|
||||
</div>
|
||||
|
||||
<!-- 十一、服务变更和中断 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">十一、服务变更和中断</h2>
|
||||
<p>11.1 我们始终在不断更新和改进我们的服务。我们可以随时添加或删除服务功能，也可以暂停或完全停止某项服务。</p>
|
||||
<p>11.2 如果我们决定停止某项服务，会在合理的时间内提前通知您，除非紧急情况或法律要求。</p>
|
||||
<p>11.3 您可以随时停止使用我们的服务。如果我们停止某项服务，我们会尽可能提前通知您，并给您时间将您的内容导出。</p>
|
||||
</div>
|
||||
|
||||
<!-- 十二、责任限制 -->
|
||||
<div class="terms-section">
|
||||
<h2 class="h4 mb-3">十二、责任限制</h2>
|
||||
<p>12.1 在法律允许的最大范围内，我们对间接的、偶然的、特殊的、后果性的或惩罚性的损害不承担责任，即使我们已被告知可能发生此类损害。</p>
|
||||
<p>12.2 在法律允许的最大范围内，我们对任何情况下因使用我们的服务而造成的损害或损失总额不超过您在过去12个月内为使用相关服务而支付给我们的费用（如有）。</p>
|
||||
<p>12.3 某些司法管辖区不允许排除或限制附带或间接损害赔偿责任，因此上述限制或排除可能不适用于您。</p>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="terms-contact mt-5">
|
||||
<h3 class="h5 mb-3">联系我们</h3>
|
||||
<p>如果您对本协议有任何疑问，请通过以下方式联系我们：</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><strong>邮箱：</strong>master@gaohaotech.com</li>
|
||||
<li><strong>电话：</strong>15927219038（郑经理）</li>
|
||||
<li><strong>地址：</strong>武汉市东湖高新技术开发区关山大道保利国际中心8楼</li>
|
||||
</ul>
|
||||
</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="sitemap.xml">网站地图</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>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<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="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
441
website/travel.html
Normal file
441
website/travel.html
Normal file
@@ -0,0 +1,441 @@
|
||||
<!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/travel.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 active" 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>
|
||||
<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="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>
|
||||
</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-shield-alt"></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-users"></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-comments"></i>
|
||||
</div>
|
||||
<h3 class="h4 mb-3">便捷沟通</h3>
|
||||
<p class="text-muted">内置聊天系统，方便您与潜在伙伴快速建立联系。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 旅行计划列表 -->
|
||||
<section id="plans" 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" id="travel-plans-container">
|
||||
<!-- 旅行计划将通过JS动态加载 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<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>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">出发日期: 2025-06-15</small>
|
||||
<span class="badge bg-primary">3人同行</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 h-100">
|
||||
<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>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">出发日期: 2025-05-20</small>
|
||||
<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 h-100">
|
||||
<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>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">出发日期: 2025-07-10</small>
|
||||
<span class="badge bg-warning text-dark">还差2人</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="process" 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-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-edit"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">1. 发布计划</h3>
|
||||
<p class="text-muted">填写旅行目的地、时间、预算和偏好等信息</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">2. 寻找伙伴</h3>
|
||||
<p class="text-muted">浏览匹配的旅行计划或等待系统推荐</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-comments"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">3. 沟通确认</h3>
|
||||
<p class="text-muted">通过平台聊天系统与伙伴交流确认细节</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="step-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fa fa-plane"></i>
|
||||
</div>
|
||||
<h3 class="h5 mb-3">4. 开始旅行</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">
|
||||
<img src="images/travel-success1.jpg" class="card-img-top" alt="川藏线骑行">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">川藏线骑行</h5>
|
||||
<p class="card-text">通过结伴客平台，来自不同城市的三位骑行爱好者成功组队，完成了川藏线的挑战。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 3人</small>
|
||||
<span class="badge bg-success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="images/travel-success2.jpg" class="card-img-top" alt="云南背包客">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">云南背包客之旅</h5>
|
||||
<p class="card-text">两位独自旅行的女孩通过平台相识，结伴游览了大理、丽江和香格里拉。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 2人</small>
|
||||
<span class="badge bg-success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<img src="images/travel-success3.jpg" class="card-img-top" alt="东北滑雪">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">东北滑雪之旅</h5>
|
||||
<p class="card-text">滑雪爱好者组成的四人小队，一起探索了东北各大滑雪场。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">参与人数: 4人</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">
|
||||
平台提供全程客服支持，遇到问题可随时联系客服协助解决。同时建议在出发前签订结伴协议，明确各自责任和义务，保障双方权益。
|
||||
</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 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/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user