Vue移动端登录页面（H5）

话不多说上代码额不先上图

使用的是vant组件，引用和使用组件请去官网学习，链接↓
vant组件官网

<div class="center"><!-- 背景图片 --><div class="background"><imgsrc="@/assets/background.jpg"width="100%"height="100%"alt=""/></div><!-- 前景 --><div class="front"><div class="card"><!-- 标题 --><divslot="header"class="title"><span>XXXXXX系统</span></div><!-- 表单 --><div><van-form @submit="onSubmit"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="请输入用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="请输入密码":rules="[{ required: true, message: '请填写密码' }]"/><van-row><van-col span="16"><van-fieldstyle="width:15rem"v-model="authcode"name="验证码"label="验证码"placeholder="请输入验证码":rules="[{ required: true, message: '请填写验证码' }]"/></van-col><!-- 获取验证码 --><van-col span="7"><img:src="codeUrl"@click="getAutoCodeImg"style="height:2rem;width:5rem;margin-right:3rem;margin-top:0.4rem"/></van-col><van-col span="1"></van-col></van-row><div style="margin: 16px;"><van-buttonroundblocktype="info"native-type="submit">提交</van-button></div></van-form></div></div></div>

首先设置一个背景图片，并将其设为绝对定位，z-index 为-1。
然后把表单也设置成绝对定位，z-index为1。
这样就有图中的效果了

接下来是css的讲解

.background {width: 100%;height: 100%; /**宽高100%是为了图片铺满屏幕 */z-index: -1;position: absolute;
}.front {z-index: 1;position: absolute;
}.title {text-align: center;font-size: 1.3rem;color: rgba(50, 50, 50, 0.8);
}.card {width: 320px;margin-top: 35%;margin-left: calc(calc(100vw - 400px) / 2); /* 动态剧中 */background-color: rgba(200, 200, 200, 0.5); /* 半透明 */border-color: rgba(200, 200, 200, 0.5); /* 半透明 */border-radius: 10px;
}.van-cell {background-color: rgba(200, 200, 200, 0) !important; /* 改变了组件的css为半透明 */color: white;
}.center {  /* 元素居中 */display: flex;justify-content: center;
}

顺带把自动登录的方法说一下吧，采用的是cookie的方式。给出两个方法。

 //读取cookiegetCookie: function () {if (document.cookie.length > 0) {var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下for (var i = 0; i < arr.length; i++) {var arr2 = arr[i].split("="); //再次切割//判断查找相对应的值if (arr2[0] == "token") {this.token = arr2[1]; //保存到保存数据的地方this.query();}}}},//设置cookiesetCookie(c_token, exdays) {var exdate = new Date(); //获取时间exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数//字符串拼接cookiewindow.document.cookie ="token" +"=" +c_token +";path=/;expires=" +exdate.toGMTString();},

在登录的时候判断有无cookie，如果密码账号都对，或者token对了即可直接登录。从而实现手机端的自动登录

Vue移动端登录页面（H5）相关推荐

vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
使用opencv破解滑块验证码：以今日头条PC端登录页面滑块验证码为例
本文目标人群:python爬虫工程师一.首先看看破解的效果图二.滑块验证码的破解滑块验证码的破解的难点主要有两个:计算出滑块到缺口的距离和模拟人拖动滑块的轨迹. 如何计算出滑块到缺口的距离?从网 ...
Vue移动端搜索页面的历史记录写法
Vue移动端搜索页面的历史记录写法前言本文用于记录对于搜索页的历史记录的学习. 预览先上两张图,分别为展示隐藏搜索列表和历史记录. html部分 <template><hips ...
使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...
通用vue组件化登录页面
一.首页设置大体的样式布局 1.首先建立一个login文件夹,在里面建立对应的login.vue文件 2.设置登录页面的背景图,在App.vue文件中使用router-view进行展示登录组件 3.先 ...
vue 写的登录页面
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.登录页面? 二.使用步骤 1.引入库前言提示:以下是本篇文章正文内容,下面案例可供参考一.登录页面 1.用e ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
vue移动端双击页面放大问题
问题描述在Vue移动端项目开发过程中,通常会遇到双击放大.双指拉大的问题. 原因分析: 在Vue移动端项目中,双击放大.双指拉伸这些设置默认是打开的.这些配置默认存在于public/index,ht ...
vue中未登录页面跳转到登录页
主要的实现方式是通过vue-router的路由守卫,可参考代码: router.beforeEach((to, from, next) => {/*** 未登录则跳转到登录页* 未登录跳转到登录 ...

Vue移动端登录页面（H5）

话不多说上代码额不先上图

接下来是css的讲解

顺带把自动登录的方法说一下吧，采用的是cookie的方式。给出两个方法。

Vue移动端登录页面（H5）相关推荐

最新文章

热门文章

Vue移动端登录页面（H5）

话不多说 上代码 额不 先上图

接下来是css的讲解

顺带把自动登录的方法说一下吧，采用的是cookie的方式。给出两个方法。

Vue移动端登录页面（H5）相关推荐

最新文章

热门文章

话不多说上代码额不先上图