1
This commit is contained in:
193
src/login_pages/terms/README.md
Normal file
193
src/login_pages/terms/README.md
Normal file
@@ -0,0 +1,193 @@
|
||||
# 条款页面 - 开场的条款和条件
|
||||
|
||||
## 功能概述
|
||||
|
||||
条款页面展示完整的《开场的条款和条件》内容,用户需要仔细阅读并同意后才能继续使用平台服务。
|
||||
|
||||
## 🎨 设计特点
|
||||
|
||||
### 视觉设计
|
||||
- **背景图片**:使用与登录页面相同的运动主题背景图片
|
||||
- **状态栏**:完全还原 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: '#ffffff',
|
||||
navigationBarTextStyle: 'black',
|
||||
backgroundColor: '#f5f5f5',
|
||||
enablePullDownRefresh: false,
|
||||
disableScroll: false
|
||||
})
|
||||
```
|
||||
|
||||
## 🔄 页面跳转
|
||||
|
||||
### 进入方式
|
||||
- 从登录页面点击协议链接进入
|
||||
- 从验证码页面点击协议链接进入
|
||||
|
||||
### 退出方式
|
||||
- 点击返回按钮返回上一页
|
||||
- 点击"我已阅读并同意"按钮返回上一页
|
||||
|
||||
## 📱 测试说明
|
||||
|
||||
### 功能测试
|
||||
1. **内容显示测试**
|
||||
- 条款标题正确显示
|
||||
- 条款内容完整展示
|
||||
- 格式保持正确
|
||||
|
||||
2. **交互测试**
|
||||
- 返回按钮功能正常
|
||||
- 同意按钮功能正常
|
||||
- 内容滚动流畅
|
||||
|
||||
3. **样式测试**
|
||||
- 不同屏幕尺寸适配
|
||||
- 背景图片显示正确
|
||||
- 文字可读性良好
|
||||
|
||||
## 🎯 后续优化
|
||||
|
||||
### 功能扩展
|
||||
1. **条款版本管理**
|
||||
- 条款更新历史
|
||||
- 版本对比功能
|
||||
- 更新通知机制
|
||||
|
||||
2. **用户协议管理**
|
||||
- 协议同意记录
|
||||
- 协议更新提醒
|
||||
- 个性化协议内容
|
||||
|
||||
3. **多语言支持**
|
||||
- 英文版本
|
||||
- 其他语言版本
|
||||
- 语言切换功能
|
||||
|
||||
### 用户体验优化
|
||||
1. **阅读体验**
|
||||
- 字体大小调节
|
||||
- 夜间模式
|
||||
- 书签功能
|
||||
|
||||
2. **内容导航**
|
||||
- 目录导航
|
||||
- 快速跳转
|
||||
- 搜索功能
|
||||
Reference in New Issue
Block a user