vue+elementui简约登录

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<div class="store-login" id="app">
<!-- 背景  -->
<div class="bg-login">
<li>
<img src="./img/bg1.jpg">
</li>
<li>
<img src="./img/bg2.jpg">
</li>
<li>
<img src="./img/bg4.jpg">
</li>
<li>
<img src="./img/bg3.jpg">
</li>
</div>
<div class="login-s">
<!-- 登录表单 -->
<el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>

<script>
new Vue({
el: '#app',
data: function() {
return {
//数据绑定
index: 3,
show: {
diplay: 'blok',
},
loginForm: {
username: 'admin',
password: '123456'
},
//表单验证规则
                    loginFormRules: {
username: [{
required: true,
message: '请输入登录名',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '登录名长度在 3 到 10 个字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 15,
message: '密码长度在 6 到 15 个字符',
trigger: 'blur'
}
]
}
}
},
methods: {
//添加表单重置方法
                resetLoginForm() {
//this=>当前组件对象，其中的属性$refs包含了设置的表单ref
//   console.log(this)
this.$refs.LoginFormRef.resetFields()
},
login() {
//点击登录的时候先调用validate方法验证表单内容是否有误
this.$refs.LoginFormRef.validate(async valid => {
console.log(this.loginFormRules)
//如果valid参数为true则验证通过
if (!valid) {
return
}
//发送请求进行登录
                        const {
data: res
} = await this.$http.post('login', this.loginForm)
//   console.log(res);
if (res.meta.status !== 200) {
returnthis.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
                        }
this.$message.success('登录成功')
console.log(res)
//保存token
window.sessionStorage.setItem('token', res.data.token)
// 导航至/home
this.$router.push('/home')
})
},
changBg() {
// alert(11);
// const bglogin = document.getElementsByClassName("bg-login");
// console.log(bglogin);
if (this.index === 0) {
this.index = 3;
} else {
this.index = this.index - 1;
}
$(".bg-login>li:eq(" + this.index + ")").fadeIn("3000").siblings().fadeOut("3000");
console.log(this.index);
}
},
created() {
setInterval(this.changBg, 7000);
}
})
</script>

<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html
{
width: 100%;
height: 100%;
}
.store-login {
background-color: white;
height: 100%;
position: relative;
}
.bg-login {
/*background: url("../../public/img/3Dbg01.jpg") no-repeat;*/
/*background-size: 100% 100%;*/
position: relative;
height: 100%;
opacity: 0.8;
z-index: 1;
}
.bg-login > li {
list-style: none;
/*display: none;*/
position: relative;
width: 100%;
height: 100%;
position: absolute;
}
.bg-login > li > img {
width: 100%;
height: 100%;
opacity: 0.9;
transition: ease .5s;
}
.login-s {
position: absolute;
width: 350px;
height: 400px;
background-color: rgba(0, 0, 0, 0.3);
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
z-index: 2;
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
text-align: center;
}
.login_form {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 30px;
}
</style>