2022-07-03 vue项目-通用后台管理系统(二) Login页面的样式和校验,使用element-ui表单方法实现表单的提交和重置

一.登录页面Login.vue的样式

1.实现登录页面天蓝色背景色和中间白色登录框

<template>
  <div  class="login">
     <div class="loginBox"></div>
  </div>
</template>
<style scoped>
.login {
   
    background-color: darkcyan;
    height: 100vh;
}
.loginBox {
   
    width: 450px;
    height: 350px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     border-radius: 5px;
}
</style>

2.实现登录框中logo引入并放置在登录框左上角

<template>
  <div  class="login">
     <div class="loginBox">
      <div class="avtor">
        <img src = 'https://s3.bmp.ovh/imgs/2023/01/27/d44acfed1a1f8b1b.jpg' />
      </div> 
     </div>
  </div>
</template>
<style scoped>
.login {
   
    background-color: darkcyan;
    height: 100vh;
}
.loginBox {
   
    width: 450px;
    height: 350px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     border-radius: 5px;
}
.avtor{
   
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  border:1px solid #eee;
  padding:5px;
  box-shadow:0 0 10px #dddddd;
  position: absolute;
  transform: translate(-15%,-15%);
}
.avtor img{
   
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eee;
}
</style>

3.使用Element-UI表单功能实现用户密码的输入框样式

template:

<el-form class="loginForm" label-width="60px">
	  <el-form-item label="用户名">
	     	 <el-input prefix-icon="iconfont icon-username" placeholder="请输入用户名"></el-input>
	  </el-form-item>
	  <el-form-item label="密码">
	  	    <el-input prefix-icon="iconfont icon-password" placeholder="请输入密码"></el-input>
	  </el-form-item>
	  <el-form-item class=