设置固定的本地访问端口和网站名称
如果想要设置开发环境的接口,直接在.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) // 校验手机号
}