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