193 lines
4.5 KiB
Markdown
193 lines
4.5 KiB
Markdown
# 条款页面 - 有场的条款和条件
|
||
|
||
## 功能概述
|
||
|
||
条款页面展示完整的《有场的条款和条件》内容，用户需要仔细阅读并同意后才能继续使用平台服务。
|
||
|
||
## 🎨 设计特点
|
||
|
||
### 视觉设计
|
||
- **背景图片**：使用与登录页面相同的运动主题背景图片
|
||
- **状态栏**：完全还原 iPhone 状态栏样式
|
||
- **导航栏**：白色圆角导航栏，包含返回按钮和页面标题
|
||
- **内容布局**：清晰的标题、简介和详细内容层次
|
||
|
||
### 交互设计
|
||
- **内容滚动**：支持长内容滚动浏览
|
||
- **返回导航**：点击返回按钮回到上一页
|
||
- **同意按钮**：底部确认按钮，表示已阅读并同意
|
||
|
||
## 📱 页面结构
|
||
|
||
```
|
||
TermsPage
|
||
├── 背景图片层
|
||
│ ├── 运动背景图片
|
||
│ └── 渐变遮罩层
|
||
├── 状态栏
|
||
│ ├── 时间显示 (9:41)
|
||
│ └── 状态图标 (信号/WiFi/电池)
|
||
├── 导航栏
|
||
│ ├── 返回按钮
|
||
│ ├── 页面标题
|
||
│ └── 占位符
|
||
├── 主要内容
|
||
│ ├── 条款标题
|
||
│ ├── 条款简介
|
||
│ ├── 条款详细内容
|
||
│ └── 底部按钮
|
||
└── 底部指示器
|
||
```
|
||
|
||
## 🚀 功能特性
|
||
|
||
### 内容展示
|
||
- **条款标题**：醒目的标题显示
|
||
- **条款简介**：简洁的条款概述
|
||
- **详细内容**：完整的条款条款内容
|
||
- **格式保持**：保持原有的段落和编号格式
|
||
|
||
### 用户交互
|
||
- **内容滚动**：支持长内容滚动
|
||
- **返回功能**：返回上一页面
|
||
- **同意确认**：确认已阅读并同意条款
|
||
|
||
## 📋 条款内容
|
||
|
||
本页面包含完整的《有场的条款和条件》，涵盖以下十个主要部分：
|
||
|
||
### 1. 服务内容
|
||
- 活动发布、报名、聊天室沟通、活动提醒等服务
|
||
- 不提供教练或场地销售服务，仅作为信息发布和社交媒介
|
||
|
||
### 2. 用户注册与权限
|
||
- 真实信息要求，不得冒用他人身份
|
||
- 违规信息处理权利
|
||
|
||
### 3. 活动发布与报名
|
||
- 信息真实性要求
|
||
- 沟通和变更建议
|
||
|
||
### 4. 权责声明
|
||
- 免责条款说明
|
||
- 保险建议
|
||
- 第三方交易责任
|
||
|
||
### 5. 费用与退款
|
||
- 服务费说明
|
||
- 退款规则
|
||
|
||
### 6. 用户行为规范
|
||
- 准时参加承诺
|
||
- 禁止违规内容
|
||
|
||
### 7. 隐私与信息保护
|
||
- 信息收集用途
|
||
- 个人信息管理
|
||
|
||
### 8. 协议修改与终止
|
||
- 修改通知机制
|
||
- 违规处理措施
|
||
|
||
### 9. 争议解决
|
||
- 法律适用
|
||
- 争议解决方式
|
||
|
||
### 10. 其他条款
|
||
- 协议完整性
|
||
- 条款有效性
|
||
|
||
## 🛠 技术实现
|
||
|
||
### 组件结构
|
||
- **状态栏组件**：显示时间和系统状态
|
||
- **导航栏组件**：返回按钮和页面标题
|
||
- **内容组件**：条款内容的展示
|
||
- **按钮组件**：同意确认按钮
|
||
|
||
### 样式特色
|
||
- **毛玻璃效果**：`backdrop-filter: blur(32px)`
|
||
- **渐变背景**：与登录页面保持一致
|
||
- **响应式设计**：适配不同屏幕尺寸
|
||
- **滚动优化**：流畅的内容滚动体验
|
||
|
||
## 📂 文件结构
|
||
|
||
```
|
||
src/pages/login/terms/
|
||
├── index.tsx # 条款页面组件
|
||
├── index.scss # 页面样式
|
||
├── index.config.ts # 页面配置
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 页面配置
|
||
```typescript
|
||
export default definePageConfig({
|
||
navigationBarTitleText: '条款和条件',
|
||
navigationBarBackgroundColor:'#FAFAFA',
|
||
navigationBarTextStyle: 'black',
|
||
backgroundColor: '#f5f5f5',
|
||
enablePullDownRefresh: false,
|
||
disableScroll: false
|
||
})
|
||
```
|
||
|
||
## 🔄 页面跳转
|
||
|
||
### 进入方式
|
||
- 从登录页面点击协议链接进入
|
||
- 从验证码页面点击协议链接进入
|
||
|
||
### 退出方式
|
||
- 点击返回按钮返回上一页
|
||
- 点击"我已阅读并同意"按钮返回上一页
|
||
|
||
## 📱 测试说明
|
||
|
||
### 功能测试
|
||
1. **内容显示测试**
|
||
- 条款标题正确显示
|
||
- 条款内容完整展示
|
||
- 格式保持正确
|
||
|
||
2. **交互测试**
|
||
- 返回按钮功能正常
|
||
- 同意按钮功能正常
|
||
- 内容滚动流畅
|
||
|
||
3. **样式测试**
|
||
- 不同屏幕尺寸适配
|
||
- 背景图片显示正确
|
||
- 文字可读性良好
|
||
|
||
## 🎯 后续优化
|
||
|
||
### 功能扩展
|
||
1. **条款版本管理**
|
||
- 条款更新历史
|
||
- 版本对比功能
|
||
- 更新通知机制
|
||
|
||
2. **用户协议管理**
|
||
- 协议同意记录
|
||
- 协议更新提醒
|
||
- 个性化协议内容
|
||
|
||
3. **多语言支持**
|
||
- 英文版本
|
||
- 其他语言版本
|
||
- 语言切换功能
|
||
|
||
### 用户体验优化
|
||
1. **阅读体验**
|
||
- 字体大小调节
|
||
- 夜间模式
|
||
- 书签功能
|
||
|
||
2. **内容导航**
|
||
- 目录导航
|
||
- 快速跳转
|
||
- 搜索功能 |