快捷搜索:  汽车  科技

vue后台管理扫码登录怎么实现?Vue跨平台页面模板之登录

vue后台管理扫码登录怎么实现?Vue跨平台页面模板之登录需要源码的加关注,私信【vue跨平台】登录系列,还有最后一篇,即将发布,发布后完整源码即将上线。****最后****这个案例是一个长期的积累,希望你能够 关注,点赞!!你的支持就是我的动力!!

vue后台管理扫码登录怎么实现?Vue跨平台页面模板之登录(1)

写在前面

Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。

今天加了个班,晚上7点开始撸代码,有点小辛苦哦!!

今日主题

APP最常用界面之一:登录之找回密码

平台支持
  • 小程序:mpvue、cmljs(卡梅龙)
  • APP:uniapp、apicloud以及任何基于h5的混合应用框架
  • weex
效果展示

vue后台管理扫码登录怎么实现?Vue跨平台页面模板之登录(2)

实现分析
  • 界面分析
  1. 整体水平居中
  2. 图标较少,大部分样式代码可实现
  3. psd标注切片上传蓝湖
  • 代码实现
  1. 开发工具:HBuilderX
  2. 界面

vue后台管理扫码登录怎么实现?Vue跨平台页面模板之登录(3)

界面解析
  • 头部沿用昨天的
  • 表单部分:flex布局,row colume都用上了
使用的技术及注意点
  • 注意点1:vue文件style可以多组,建议最多两组,一组为全局,一组为私有(scoped)
  • 注意点2:最外层样式一定要设置width:100%,否则view的布局仅仅是布局的内容宽度
总结

为了平台的兼容性,全部采用flex布局。登录界面相对简单,你也可以练习下,看看会遇到什么问题。

登录系列,还有最后一篇,即将发布,发布后完整源码即将上线。

****最后****

这个案例是一个长期的积累,希望你能够 关注,点赞!!你的支持就是我的动力!!

需要源码的加关注,私信【vue跨平台】

猜您喜欢: