vue实现账号密码手机号二维码扫码登录切换表单效果代码
代码语言:html
所属分类:表单美化
代码描述:vue实现账号密码手机号二维码扫码登录切换表单效果代码
代码标签: vue 账号 密码 手机号 二维码 扫码 登录 切换 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .fl{ float: left; } .fr{ float: right; } .clear{ clear: both; } a{ text-decoration: none; color: #333; transition: ease all 0.5s; } a{ color: #1c65ff } .login_header{ margin-bottom: 40px; } .login_header span{ margin-right: 20px; cursor: pointer; } .loginbox{ width: 300px; overflow: hidden; padding: 20px; padding-top: 15px; } .Cbody_item{ border: 0px solid #999; overflow: hidden; } .form_item{ font-size: 13px; } .form_item input[type="text"],.form_item input[type="password"]{ display: block; width: calc(100% - 18px); height: 36px; margin:0 auto; padding-left: 16px; outline: none; border: 1px solid #999; transition: ease all 0.5s; margin-bottom: 20px; } .form_item input[type="text"]:focus,.form_item input[type="password"]:focus{ border: 1px solid #1c65ff } .form_item input[type="submit"]{ display: block; width: calc(100% - 0px); height: 40px; margin:0 auto; padding-left: 16px; outline: none; border: 1px solid #1c65ff; transition: ease all 0.5s; margin-top: 20px; margin-bottom: 20px; background-color: #1c65ff; color: #fff; cursor: pointer; } .form_item input[type="submit"]:hover{ background-color: #3f7dff; border: 1px solid #3f7dff; } .active{ color: #3f7dff; padding-bottom: 10px; border-bottom: 3px solid #3f7dff; } .loginrslider{ width: 160px; height: 322px; background-color: #1c65ff; } .login_warp{ width: 500px; margin: 50px auto; border-radius: 10px; box-shadow: 0 0px 0px #ccc; overflow: hidden; border:1px solid #3f7dff; margin-top: 10%; transition: ease all 0.5s; position: relative; top: 0px; cursor: pointer; } .login_warp:hover{ top: -30px; box-shadow: 0 15px 21px #ccc; } .loginrslider{ color: #fff; } .qcode{ width: 160px; height: 160px; background-color: #ccc; margin: 0 auto; margin-top: 2px; } .beizhu{ text-align: center; font-size: 13px; margin-top: 10px; color: #999 } </style> </head> <body> <div id="app"> <div class="login_warp"> <div class="loginbox fl"> <div class="login_header"> <span @click="cur=0" class="{active:cur==0}">账号登录</span> <span @click="cur=1" class="{active:cur==1}">快捷登录</span> <span @click="cur=2" class="{active:cur==2}">扫码登录</span> </div> <div class="login_content"> <div v-show="cur==0" class="Cbody_item"> <div class="form_item"><input type="text" name="fname" placeholder="用户名" /></div> <div class="form_it.........完整代码请登录后点击上方下载按钮下载查看
网友评论0