当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 模拟手机项目介绍

模拟手机项目介绍

2020年07月23日  | 移动技术网IT编程  | 我要评论

项目介绍

简介

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网