模拟手机项目介绍

简介

该项目使用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