欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

模拟手机项目介绍

程序员文章站 2022-03-27 21:40:33
项目介绍简介界面展示功能介绍按键详细界面及功能简介该项目使用vue+vuex+vue-router+axios,模拟手机的部分功能。项目地址: https://github.com/patrickli147/phone在线预览项目持续开发中……界面展示功能介绍按键按键说明锁屏键开机状态下,按下按键可以进行解锁/锁定操作长按按钮2s以上,会进行开/关机操作home键解锁后点击home会返回桌面唤起解锁时,点击home会弹出解锁密码界面详细界面及功能...

简介

该项目使用vue+vuex+vue-router+axios,模拟手机的部分功能。
项目地址: https://github.com/patrickli147/phone
在线预览
项目持续开发中……

界面展示

模拟手机项目介绍

功能介绍

按键

  • 按键说明
    • 锁屏键

      • 开机状态下,按下按键可以进行解锁/锁定操作
      • 长按按钮2s以上,会进行开/关机操作模拟手机项目介绍
    • home键

      • 解锁后点击home会返回桌面
      • 唤起解锁时,点击home会弹出解锁密码界面
        模拟手机项目介绍

详细界面及功能

  • 桌面
    桌面包含各个实际的应用,点击各个应用的图标跳转到具体应用。
    模拟手机项目介绍

  • 锁屏

    • 锁屏黑屏
      仅供展示锁屏状态。
      模拟手机项目介绍

    • 解锁
      输入正确密码可解锁。
      模拟手机项目介绍
      模拟手机项目介绍

  • 开机
    长按开关机按键2s,可进行开关机。

    • 关机提示
      模拟手机项目介绍

    • 开机动画
      模拟手机项目介绍

  • 各个应用(更新中……)

    • 相机
      需要您同意浏览器使用摄像头。
      模拟手机项目介绍

    • 照片
      相簿里第一个相册(相机胶卷)与相机应用拍摄的照片互通。其余相簿数据均使用mock.js随机产生。
      模拟手机项目介绍
      按下鼠标可以左右拖动中部相簿区域。点击任意一个相簿可以查看相簿内的照片。
      模拟手机项目介绍
      点击单张照片可查看照片。
      模拟手机项目介绍
      按下鼠标左右拖动可以切换图片。点击下方小图可跳转到对应图片。

    长按图片后可拖动图片,背景opacity随移动距离变化。
    模拟手机项目介绍

    左下分享与右上编辑暂时无法使用。其余(删除,批量选择,添加相簿等)可正常使用。

    • 日历
      可上下滚动查看不同月份。点击今天跳转到使用时所在日期。点击上方年份弹出选择框选择年份。
      模拟手机项目介绍

    • 计算器
      输入数据进行计算。
      模拟手机项目介绍

    • 游戏
      点击开始游戏进入游戏。
      模拟手机项目介绍
      模拟手机项目介绍
      点击下方规则查看游戏规则。

    • uns

      • 搜索
        模拟手机项目介绍

      • 首页
        模拟手机项目介绍
        点击首页的照片可跳转到单张照片详情。

      • 专辑
        模拟手机项目介绍
        点击其中的某个专辑可跳转到专辑详情。

      • 单张专辑
        模拟手机项目介绍
        点击用户名可跳转到用户详情(by 后面的名字)。

      • 单个用户
        模拟手机项目介绍

      • 单张照片
        模拟手机项目介绍
        点击用户名可跳转到用户详情(by 后面的名字)。
        点击左/右图标可进行图片切换。

本文地址:https://blog.csdn.net/patrick_lii/article/details/107477362