vue组件————登录页

最新推荐文章于 2024-04-01 09:17:43 发布

祁码能跑吧

最新推荐文章于 2024-04-01 09:17:43 发布

阅读量301

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_61474921/article/details/126182370

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<template>
  <div class="login">
        <div class="loginbox">
          <table>
            <tr>
              <td>用户名：</td>
              <td><input type="text" placeholder="账号 | 手机号 | 邮箱" v-model="formLogin.username"></td>
            </tr>
            <tr>
              <td>密  码：</td>
              <td><input type="password"  v-model="formLogin.password"></td>
            </tr>
            <tr style="height:10px;text-align:right;">
              <td></td>
              <td><a href="#" style="color:#fff;">忘记密码</a></td>
            </tr>
            <tr style="text-align:right;">
              <td>
                <input type="button" value="注册">
              </td>
              <td>
                <input type="button" @click="loginclick" value="登录">
              </td>
            </tr>
          </table>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            formLogin:{
                'username':'',
                'password':'',
            }
        }
    },
    methods:{
        async loginclick(){
          console.log('登录')
        }
    }
}
</script>

<style lang='less'>
.login{
    position:absolute;
    right:100px;
    top:150px;
    height:350px;
    width:400px;
    .loginbox{
      width:400px;
      height:400px;
      background-color: rgb(30,30,30);
      opacity: 0.8;
      table{
        height:50px;
        line-height: 50px;
        margin:auto;
        padding-top:15%;
        text-align: center;
        tr{
          height:60px;
          input{
            height:30px;
            outline: none;
          }
          input[type=button]{
            height:40px;
            padding:10px 20px;
            margin: 10px;
            border-radius: 10px;
          }
        }
      }
    }
  }

</style>