编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果
1.CSS样式 编写自己想要的大小，颜色等
#content{ width: 400px;; margin: 60px auto; } .title{ height: 50px; border-bottom: 1px solid #e1e7ec; text-align: center; } #content a{ text-decoration: none; color: black; font-size: 16px; background: #f1f1f1; padding: 5px 10px; margin: 0 10px; border-radius: 5px; } .form-input{ height: 46px; line-height: 46px; margin-top: 10px;; } input{ box-sizing: border-box; padding: 0 25px; background: #eef3f5; border-radius: 8px; width: 100%; height: 100%; border: 0; outline: 0; font-size: 14px; } #content .active{ background-color: #09f; color: #fff; } .primary-button{ background: linear-gradient(325deg,#4aa4ff,#1058fa); width: 100%; height: 42px; border-radius: 23px; border: 0; outline: none; color: #fff; letter-spacing: 10px; font-weight: 500; font-size: 16px; cursor: pointer; margin-top: 30px; } .pic{ width: 200px; height: 200px; margin: 0 auto; } .pic img{ width: 100%; height: 100%; }2.页面结构
<!-- 定义登录组件 --> <template id="example1"> <div> <!-- 唯一的根容器 --> <div class="form-input"> <input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input"> </div> <div class="form-input"> <input type="password" name="psd" placeholder="请输入密码" class="form-input"> </div> <button type="button" class="primary-button"><span>登录</span></button> </div> </template> <!-- 二维码登录 --> <template id="example2"> <div class="pic"> <img src="./erweima.png"> </div> </template> <div id="content"> <div class="title"> <a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a> <a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a> </div> <transition enter-active-class="animated bounceInDown"> <component :is="compontentName"></component> </transition> </div>3.Javascript
Vue.component('example1',{template:'#example1'}) Vue.component('example2',{template:'#example2'}) var vm = new Vue({ el: '#content', data: { compontentName :'example1', cur:0 } });全代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <style> #content{ width: 400px;; margin: 60px auto; } .title{ height: 50px; border-bottom: 1px solid #e1e7ec; text-align: center; } #content a{ text-decoration: none; color: black; font-size: 16px; background: #f1f1f1; padding: 5px 10px; margin: 0 10px; border-radius: 5px; } .form-input{ height: 46px; line-height: 46px; margin-top: 10px;; } input{ box-sizing: border-box; padding: 0 25px; background: #eef3f5; border-radius: 8px; width: 100%; height: 100%; border: 0; outline: 0; font-size: 14px; } #content .active{ background-color: #09f; color: #fff; } .primary-button{ background: linear-gradient(325deg,#4aa4ff,#1058fa); width: 100%; height: 42px; border-radius: 23px; border: 0; outline: none; color: #fff; letter-spacing: 10px; font-weight: 500; font-size: 16px; cursor: pointer; margin-top: 30px; } .pic{ width: 200px; height: 200px; margin: 0 auto; } .pic img{ width: 100%; height: 100%; } </style> </head> <body> <!-- 定义登录组件 --> <template id="example1"> <div> <!-- 唯一的根容器 --> <div class="form-input"> <input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input"> </div> <div class="form-input"> <input type="password" name="psd" placeholder="请输入密码" class="form-input"> </div> <button type="button" class="primary-button"><span>登录</span></button> </div> </template> <!-- 二维码登录 --> <template id="example2"> <div class="pic"> <img src="./erweima.png"> </div> </template> <div id="content"> <div class="title"> <a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a> <a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a> </div> <transition enter-active-class="animated bounceInDown"> <component :is="compontentName"></component> </transition> </div> <script> Vue.component('example1',{template:'#example1'}) Vue.component('example2',{template:'#example2'}) var vm = new Vue({ el: '#content', data: { compontentName :'example1', cur:0 } }); </script> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #vue编写一个登录页面 #width #400px
