vue+axios+layui实现手机号验证码登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:vue+axios+layui实现手机号验证码登录表单效果代码
代码标签: layui vue axios 手机号 验证码 登录
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <style> html, body { height: 100%; } body { background-color: #f5f5f5; } .login-form { background-color: #fff; width: 320px; padding: 50px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } .login-form .login-title { margin-bottom: 20px; text-align: center; } .login-form input { padding-left: 38px; } .login-form .layui-form-item .layui-icon { display: inline-block; height: 38px; width: 38px; line-height: 38px; text-align: center; position: absolute; } .login-form input[name="captcha"] { width: 155px; display: inline-block; margin-right: 1px; } #particles-js { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } #captcha { width: 120px; height: 40px; } </style> </head> <body> <!-- 登录表单 --> <form class="layui-form login-form layui-panel" autocomplete="off" id="app"> <h1 class="login-title"> <img style="height: 30px" src="//repo.bfw.wiki/bfwrepo/icon/5f7d03118a427.png" alt="logo" /> <span>用户登录</span> </h1> <!-- 手机 --> <div class="layui-form-item"> <i class="layui-icon layui-icon-username"></i> <input type="text" name="mobile" v-model="formdata.mobile" placeholder="请输入手机号" class="layui-input" /> </div> <!-- 验证码 --> <div class="layui-form-item"> <i class="layui-icon layui-icon-vercode"></i> <input type="text" name="captcha" v-model="formdata.captch.........完整代码请登录后点击上方下载按钮下载查看
网友评论0