移动端原型说明
技术框架
- UniApp
- Ant Design Mobile Vue(使用在线CDN)
页面列表(共17个页面)
核心功能页面
1. login.html - 登录页面
- 用户名密码登录
- 记住密码功能
- 忘记密码链接
- 登录验证
2. todo.html - 待办事项页面
- 待审核事项列表
- 快速审核操作(通过/驳回)
- 分类筛选(全部/待审核/我的)
- 审核详情查看
3. approval-detail.html - 审核详情页面
- 项目信息展示
- 附件查看和下载
- 审核历史记录
- 审核意见填写
- 审核操作(通过/驳回)
4. message.html - 消息通知页面
- 消息列表(全部/未读/系统)
- 消息类型标识(审核提醒、系统通知、警告提醒等)
- 消息已读/未读状态
- 全部标记已读功能
5. project.html - 项目查询页面
- 项目搜索功能
- 项目状态筛选(已立项/投标中/已签合同/已启动)
- 项目列表展示
- 项目详情查看
6. project-detail.html - 项目详情页面
- 项目基本信息展示
- 项目描述
- 项目进度时间线
- 项目附件下载
- 编辑和查看进度操作
7. output.html - 成果提交页面
- 我的项目列表
- 成果提交表单
- 成果类型选择(初稿/对账/最终成果)
- 成果金额录入
- 附件上传(限制10MB)
- 完成情况说明
8. report.html - 报表查询页面
- 产值汇总查询
- 时间段选择
- 产值统计展示
- 项目明细列表
- 回款情况统计
个人中心相关页面
9. profile.html - 个人中心页面
- 用户信息展示
- 我的项目/成果/审核入口
- 个人信息设置入口
- 修改密码入口
- 系统设置入口
- 帮助中心入口
- 退出登录
10. my-projects.html - 我的项目列表
- 项目列表展示
- 状态筛选
- 项目详情查看
11. my-outputs.html - 我的成果列表
- 成果列表展示
- 状态筛选(全部/待审核/已通过/已驳回)
- 成果详情查看
12. my-approvals.html - 我的审核列表
- 审核记录列表
- 状态筛选(全部/已通过/已驳回)
- 审核详情查看
13. user-info.html - 个人信息编辑
- 头像更换
- 姓名、手机号、邮箱编辑
- 信息保存
14. change-password.html - 修改密码
- 原密码验证
- 新密码设置(含复杂度验证)
- 确认密码
- 密码修改
15. settings.html - 系统设置
- 消息推送开关
- 声音提醒开关
- 震动提醒开关
- 清除缓存
- 检查更新
- 隐私政策
- 用户协议
16. about.html - 关于系统
- 系统简介
- 版本信息
- 主要功能说明
- 更新日期
- 版权信息
17. help.html - 帮助中心
- 常见问题解答
- 操作指南
- 问题搜索功能
- 联系方式
页面导航
所有页面底部都有统一的导航栏,包含5个Tab:
- 📋 待办
- 🔔 消息
- 📁 项目
- 📝 成果
- 👤 我的
使用方法
- 在浏览器中打开任意HTML文件即可查看
- 建议使用浏览器开发者工具切换到移动设备视图
- 所有页面都是静态HTML,可以直接在浏览器中查看
- 部分交互功能(如登录、提交等)会显示alert提示
设计特点
- 移动端适配(最大宽度414px)
- 内容区域独立白色背景(与body的#f5f5f5区分)
- 卡片式布局
- 统一的底部导航栏(5个Tab)
- 简洁的操作流程
- 清晰的视觉层次
- 完整的页面跳转链接(非alert提示)
页面导航结构
所有功能页面底部都有统一的导航栏,包含5个Tab:
- 📋 待办 - 跳转到 todo.html
- 🔔 消息 - 跳转到 message.html
- 📁 项目 - 跳转到 project.html
- 📝 成果 - 跳转到 output.html
- 👤 我的 - 跳转到 profile.html
页面跳转关系
- 登录页 → 待办事项页
- 个人中心 → 我的项目/成果/审核/个人信息/修改密码/系统设置/关于系统/帮助中心
- 项目查询 → 项目详情
- 待办事项 → 审核详情
- 消息通知 → 待办事项或项目查询
- 成果提交 → 成果列表
注意事项
- 本原型使用在线CDN引入样式框架
- 实际开发时需使用UniApp框架和Ant Design Mobile Vue组件
- 所有交互功能为演示效果,实际开发需对接后端API
- 文件上传功能需要在实际开发中实现
- 所有页面内容区域都有独立的白色背景,与body的灰色背景区分