2025-12-11 18:08:46 +08:00
..
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 15:21:16 +08:00
2025-12-11 18:08:46 +08:00
2025-12-11 15:21:16 +08:00

移动端原型说明

技术框架

  • 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

  • 📋 待办
  • 🔔 消息
  • 📁 项目
  • 📝 成果
  • 👤 我的

使用方法

  1. 在浏览器中打开任意HTML文件即可查看
  2. 建议使用浏览器开发者工具切换到移动设备视图
  3. 所有页面都是静态HTML可以直接在浏览器中查看
  4. 部分交互功能如登录、提交等会显示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的灰色背景区分