人资项目登录模块

设置固定的本地访问端口和网站名称
如果想要设置开发环境的接口,直接在.env.development中写入对于port变量的赋值

# 设置端口号
port = 8888

网站名称

登录页面的基础布局
设置头部背景

(标题图片)

<div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="">
        </h3>
 </div>
设置背景图片

设置背景图片
  background-position: center; // 设置图片位置设置为充满整个屏幕

设置手机号和密码的字体颜色

$light_gray: #68b0fe;

设置输入表单整体背景色

.el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.7); // 输入登录表单的背景色
    border-radius: 5px;
    color: #454545;
  }

设置错误信息的颜色

.el-form-item__error {
    color: #fff
  } 

设置登录按钮的样式

.loginBtn {
 background: #407ffe;
  height: 64px;
  line-height: 32px;
  font-size: 24px;
}

效果

登录表单的校验
el-form表单校验的先决条件

新规则：手机号必填，并且进行格式校验，密码必填，长度6-16位之间  

 data() {
    // 自定义校验函数
    const validateMobile = function(rule, value, callback) {
      // 校验value
      // if (validMobile(value)) {
      //   // 如果通过 直接执行callback
      //   callback()
      // } else {
      //   callback(new Error('手机号格式不正确'))
      // }
      validMobile(value) ? callback() : callback(new Error('手机号格式不正确'))
    }
 
    return {
      loginForm: {
        mobile: '13800000002',
        password: '123456'
      },
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, {
          validator: validateMobile, trigger: 'blur'
        }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }, {
          min: 6, max: 16, message: '密码的长度在6-16位之间 ', trigger: 'blur'
        }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },

utils/validate.js方法中增加了一个校验手机号的方法（utils/validate.js是一个专门存放校验工具方法的文件 ）

校验手机号 正则
 
export function validMobile(str) {
  return /^1[3-9]\d{9}$/.test(str) // 校验手机号

}