devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue常用静态模板_vue模板

作者：运维做开发 | 2024-07-15 00:14:56

赞

踩

vue模板

多种登录方式模板

代码

  1. <template>
  2.     <div>
  3.  <div class="login_warp">
  4.  <div class="loginbox fl">
  5.   <!-- 三个选项卡按钮 -->
  6.  <div class="login_header">
  7.  <span @click="cur=0" :class="{active:cur==0}">账号登录</span>
  8.  <span @click="cur=1" :class="{active:cur==1}">快捷登录</span>
  9.  <span @click="cur=2" :class="{active:cur==2}">扫码登录</span>
  10.  </div>
  11.  <div class="login_content">
  12.   <!-- 在cur==0时此板块显示 其他时候此板块不显示 -->
  13.  <div v-show="cur==0" class="Cbody_item">
  14.  <div class="form_item"><input type="text" name="fname" placeholder="用户名"></div>
  15.  <div class="form_item"><input type="password" name="fpassword" placeholder="密码"></div>
  16.  <div class="form_item">
  17.  <div class="fl"><input type="checkbox">记住密码</div>
  18.  <div class="fr"><a href="javascript:;" >找回密码</a></div>
  19.  </div>
  20.  <div class="clear"></div>
  21.  <div class="form_item">
  22.  <input type="submit" name="" value="登录">
  23.  </div>
  24.  </div>
  25.   <!-- 在cur==1时此板块显示 其他时候此板块不显示 -->
  26.  <div v-show="cur==1" class="Cbody_item">
  27.  <div class="form_item"><input type="text" name="fname" placeholder="手机号"></div>
  28.  <div class="form_item"><input type="password" name="fpassword" placeholder="验证码"></div>
  29.  <div class="form_item">
  30.  <!-- <div class="fl"><input type="checkbox">记住密码</div>
  31.  <div class="fr"><a href="javascript:;" >找回密码</a></div> -->
  32.  </div>
  33.  <div class="clear"></div>
  34.  <div class="form_item">
  35.  <input type="submit" name="" value="登录">
  36.  </div>
  37.  
  38.  </div>
  39.   <!-- 在cur==2时此板块显示 其他时候此板块不显示 -->
  40.  <div v-show="cur==2" class="Cbody_item">
  41.  <div class="qcode"><img src="../../public/img/1709633675060.jpg" width="160" height="160" alt="二维码" /></div>
  42.  <div class="beizhu">打开手机客户端扫码注册</div>
  43.  </div>
  44.  </div>
  45.  </div>
  46.  <!-- 右边蓝色板块 -->
  47.  <div class="loginrslider fl"></div>
  48.  </div>
  49.  </div>
  50. </template>
  51.       
  52. <script>
  53.  
  54.     export default {
  55.         name: 'MyLogin',
  56.         data(){
  57.             return {
  58.                 cur:0 //默认选中第一个tab
  59.             };
  60.         },
  61.         methods:{
  62.           
  63.         }
  64.     }
  65. </script>
  66.  
  67. <!-- Add "scoped" attribute to limit CSS to this component only -->
  68. <style scoped>
  69.    .fl{
  70.  float: left;
  71. }
  72. .fr{
  73.  float: right;
  74. }
  75. .clear{
  76.  clear: both;
  77. }
  78. a{
  79.  text-decoration: none;
  80.  color: #333;
  81.  transition: ease all 0.5s;
  82. }
  83. a{
  84.  color: #1c65ff
  85. }
  86. .login_header{
  87.  margin-bottom: 40px;
  88. }
  89. .login_header span{
  90.  margin-right: 20px;
  91.  cursor: pointer;
  92. }
  93. .loginbox{
  94.  width: 300px;
  95.  overflow: hidden;
  96.  padding: 20px;
  97.  padding-top: 15px;
  98. }
  99. .Cbody_item{
  100.  border: 0px solid #999;
  101.  overflow: hidden;
  102. }
  103. .form_item{
  104.  font-size: 13px;
  105. }
  106. .form_item input[type="text"],.form_item input[type="password"]{
  107.  display: block;
  108.  width: calc(100% - 18px);
  109.  height: 36px;
  110.  margin:0 auto; 
  111.  padding-left: 16px;
  112.  outline: none;
  113.  border: 1px solid #999;
  114.  transition: ease all 0.5s;
  115.  margin-bottom: 20px;
  116. }
  117. .form_item input[type="text"]:focus,.form_item input[type="password"]:focus{
  118.  border: 1px solid #1c65ff
  119. }
  120. .form_item input[type="submit"]{
  121.  display: block;
  122.  width: calc(100% - 0px);
  123.  height: 40px;
  124.  margin:0 auto; 
  125.  padding-left: 16px;
  126.  outline: none;
  127.  border: 1px solid #1c65ff;
  128.  transition: ease all 0.5s;
  129.  margin-top: 20px;
  130.  margin-bottom: 20px;
  131.  background-color: #1c65ff;
  132.  color: #fff;
  133.  cursor: pointer;
  134. }
  135. .form_item input[type="submit"]:hover{
  136.  background-color: #3f7dff;
  137.  border: 1px solid #3f7dff;
  138. }
  139. .active{
  140.  color: #3f7dff;
  141.  padding-bottom: 10px;
  142.  border-bottom: 3px solid #3f7dff;
  143. }
  144. .loginrslider{
  145.  width: 160px;
  146.  height: 322px;
  147.  background-color: #1c65ff;
  148. }
  149. .login_warp{
  150.  width: 500px;
  151.  margin: 50px auto;
  152.  border-radius: 10px;
  153.  box-shadow: 0 0px 0px #ccc;
  154.  overflow: hidden;
  155.  border:1px solid #3f7dff;
  156.  margin-top: 10%;
  157.  transition: ease all 0.5s;
  158.  position: relative;
  159.  top: 0px;
  160.  cursor: pointer;
  161. }
  162. .login_warp:hover{
  163.  top: -30px;
  164.  box-shadow: 0 15px 21px #ccc;
  165. }
  166. .loginrslider{
  167.  color: #fff;
  168.  
  169. }
  170. .qcode{
  171.  width: 160px;
  172.  height: 160px;
  173.  background-color: #ccc;
  174.  margin: 0 auto;
  175.  margin-top: 2px;
  176. }
  177. .beizhu{
  178.  text-align: center;
  179.  font-size: 13px;
  180.  margin-top: 10px;
  181.  color: #999
  182. }
  183. </style>

简便注册模板

界面

代码

  1. <template>
  2.     <div class="register-page">
  3.         <form class="register-form" >
  4.             <dic class="tip">请输入你的信息创建账号</dic>
  5.             <div class="number">学号</div>
  6.             <input class="form-number" placeholder="输入学号" type="text" v-model="userNumber" >
  7.             <div class="name">你的姓名</div>
  8.             <input class="form-name" placeholder="输入姓名" type="text" v-model="userName" >
  9.             <div class="phone">手机号码</div>
  10.             <input class="form-phone" placeholder="输入手机号码" type="text" v-model="userPhone" > 
  11.             <div class="code-tip">
  12.                 <input class="code" placeholder="输入验证码" type="text" v-model="code" >
  13.                 <div @click="sendSMS" :class="tip">{{tipContent}}</div>
  14.             </div>
  15.             <div class="campus">所属校区</div>
  16.             <select class="form-campus" v-model="userCampus">
  17.                 <option value="0">白云校区</option>
  18.                 <option value="1">东校区</option>
  19.                 <option value="2">河源校区</option>
  20.             </select>
  21.             <div class="address">用户地址</div>
  22.             <textarea  placeholder="输入地址" class="form-address" v-model="userAddress"></textarea>
  23.             <div  class="pwd">密码</div>
  24.             <input placeholder="输入密码" class="form-pwd" type="password" v-model="userPassword" > 
  25.             <div class="pwd">再次输入密码：</div>
  26.             <input placeholder="再次输入密码" class="form-pwd" type="password" v-model="rePassword" > 
  27.             <div class="form-but" @click="sumbit">提交</div>
  28.         </form>
  29.     </div>
  30.    
  31.  
  32. </template>
  33.       
  34. <script>
  35. import { ElNotification } from 'element-plus'
  36. import axios from 'axios';
  37.     export default {
  38.         name: 'MyRegister',
  39.         data(){
  40.             return {
  41.             userNumber:'',
  42.             userName:'',
  43.             userPhone:'',
  44.             userAddress:'',
  45.             code:'',
  46.             userCampus:0,
  47.             userPassword:'',
  48.             rePassword:'',
  49.             tip:'tip',
  50.             tipContent:'发送验证码',
  51.             secondsRemaining: 60 // 设置倒计时初始值为60秒
  52.             };
  53.         },
  54.         methods:{
  55.             sumbit(){
  56.                 if (this.userPassword !== this.rePassword) {
  57.                     ElNotification({
  58.                         title: 'Error',
  59.                         message: '密码不一致',
  60.                         type: 'error',
  61.                     })   
  62.                     return; 
  63.                 }
  64.                 this.$axios.post('/login/userRegister', {
  65.                     data: {
  66.                         userNumber: this.userNumber,
  67.                         userPassword: this.userPassword,
  68.                         userName: this.userName,
  69.                         userAddress: this.userAddress,
  70.                         userCampus:this.userCampus,
  71.                         userPhone: this.userPhone,
  72.                         code: this.code,
  73.                         key: ''
  74.                     }
  75.                     })
  76.                     .then(response => {
  77.                     console.log(response.data);
  78.                     })
  79.                     .catch(error => {
  80.                     console.error(error);
  81.                 }); 
  82.                 
  83.             },
  84.             async sendSMS(){
  85.                 if(this.tip == 'clicked-tip'){
  86.                     return;
  87.                 }
  88.                 if (this.userPhone === '') {
  89.                     ElNotification({
  90.                         title: 'Error',
  91.                         message: '手机号码不能为空',
  92.                         type: 'error',
  93.                     })   
  94.                     return; 
  95.                 }
  96.                 try {
  97.                     const response = await axios.get('/login/SMSCode/'+this.userPhone);
  98.                     console.log(response.data);
  99.                 } catch (error) {
  100.                     console.error('发生错误:', error);
  101.                 }
  102.                 this.tip='clicked-tip'
  103.                 // 每秒钟更新计数器
  104.                 this.timer = setInterval(() => {
  105.                     if (this.secondsRemaining > 0) {
  106.                         this.secondsRemaining--; // 每秒减一
  107.                         this.tipContent=this.secondsRemaining+'s';
  108.                     } else {
  109.                         clearInterval(this.timer); // 当倒计时结束时清除计时器
  110.                         // 执行倒计时结束后的操作
  111.                         this.tip='tip'
  112.                         this.tipContent='发送验证码'
  113.                         this.secondsRemaining=60
  114.                     }
  115.                 }, 1000);
  116.             }
  117.  
  118.         }
  119.     }
  120. </script>
  121.  
  122. <!-- Add "scoped" attribute to limit CSS to this component only -->
  123. <style scoped>
  124.     .register-page{
  125.         display: flex;
  126.         width: 100%;
  127.         flex-direction: column;
  128.         justify-content: center;
  129.         align-items: center;
  130.         
  131.         .register-form{
  132.             margin-top: 30px;
  133.             width: 80%;
  134.             text-align: left;
  135.             border: 2px solid rgb(186, 208, 255);
  136.             .tip{
  137.                 width: 100%;
  138.                 text-align: center;
  139.                 display: flex;
  140.                 justify-content: center;
  141.                 
  142.                 
  143.             }
  144.             .number{
  145.                 margin-left: 15px;
  146.                 margin-top: 20px;
  147.             }
  148.             .form-number{
  149.                 display: flex;
  150.                 margin-top: 10px;
  151.                 margin-left: 15px;
  152.                 width: 70%;
  153.             }
  154.             .name{
  155.                 margin-left: 15px;
  156.                 margin-top: 10px;
  157.             }
  158.             .form-name{
  159.                 display: flex;
  160.                 margin-top: 10px;
  161.                 margin-left: 15px;
  162.                 width: 70%;
  163.             }
  164.             .phone{
  165.                 margin-left: 10px;
  166.                 margin-top: 15px;
  167.             }
  168.             .form-phone{
  169.                 display: flex;
  170.                 margin-top: 10px;
  171.                 margin-left: 15px;
  172.                 width: 70%;
  173.             }
  174.             .code-tip{
  175.                 margin-top: 10px;
  176.                 margin-left: 15px;
  177.                 width: 80%;
  178.                 display: flex;
  179.                 flex-direction: row;
  180.                 .code{
  181.                     display: flex;
  182.                     width: 40%;
  183.                 }
  184.                 .tip{
  185.                     display: flex;
  186.                     align-items: center;
  187.                     justify-content: center;
  188.                     margin-left: 20px;
  189.                     border-radius: 1.5rem;
  190.                     background-color: blue;
  191.                     color: white;
  192.                     padding: 5px;
  193.                     width: 35%;
  194.                     cursor: pointer;
  195.                 }
  196.                 .clicked-tip{
  197.                     display: flex;
  198.                     align-items: center;
  199.                     justify-content: center;
  200.                     margin-left: 20px;
  201.                     border-radius: 1.5rem;
  202.                     background-color: rgb(229, 232, 236);
  203.                     color: white;
  204.                     padding: 5px;
  205.                     width: 35%;
  206.                 }
  207.             }
  208.             .campus{
  209.                 margin-left: 15px;
  210.                 margin-top: 15px;
  211.             }
  212.             .form-campus{
  213.                 display: flex;
  214.                 margin-top: 15px;
  215.                 margin-left: 15px;
  216.                 width: 70%;
  217.             }
  218.             .address{
  219.                 margin-left: 15px;
  220.                 margin-top: 15px;
  221.             }
  222.             .form-address{
  223.                 display: flex;
  224.                 margin-top: 15px;
  225.                 margin-left: 15px;
  226.                 width: 70%;
  227.                 height: 40PX;
  228.             }
  229.             .pwd{
  230.                 margin-left: 15px;
  231.                 margin-top: 10px;
  232.             }
  233.             .form-pwd{
  234.                 display: flex;
  235.                 margin-top: 15px;
  236.                 margin-left: 15px;
  237.                 width: 70%;
  238.             }
  239.             .form-but{
  240.                 width: 50%;
  241.                 display: flex;
  242.                 align-items: center;
  243.                 justify-content: center;
  244.                 background-color: blue;
  245.                 color: white;
  246.                 margin: 20px 0 30px 70px;
  247.                 border-radius: 1.5rem;
  248.                 padding: 10px;
  249.             }
  250.         }
  251.     }
  252. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/827012
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号