|
|
|
@ -1,26 +1,47 @@ |
|
|
|
<template> |
|
|
|
<div class='background'> |
|
|
|
<div class="background"> |
|
|
|
<div class="login_box"> |
|
|
|
<div class="box_Central" > |
|
|
|
<div><img></div> |
|
|
|
<div class="box_Central"> |
|
|
|
<div><img /></div> |
|
|
|
|
|
|
|
<el-form :rules="rules" :model="loginForm" ref="loginFormRef" label-width="80px"> |
|
|
|
<el-form-item label="用户名"prop="username"> |
|
|
|
<el-input v-model="loginForm.username" style="width: 200px" ></el-input> |
|
|
|
<el-form |
|
|
|
:rules="rules" |
|
|
|
:model="loginForm" |
|
|
|
ref="loginFormRef" |
|
|
|
label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item label="用户名" prop="username"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.username" |
|
|
|
style="width: 200px" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="密码" prop="password"> |
|
|
|
<el-input v-model="loginForm.password" style="width: 200px" show-password ></el-input> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.password" |
|
|
|
style="width: 200px" |
|
|
|
show-password |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<div class="cl"> |
|
|
|
<div class="box_cn"> <el-row > |
|
|
|
<div class="box_cn"> |
|
|
|
<el-row> |
|
|
|
<el-button type="primary" @click="login">登录</el-button> |
|
|
|
</el-row></div> |
|
|
|
<div class="box_cv"> <el-row > |
|
|
|
<el-button type="info" style="background-color: orange;border-color: orange;" @click="resetBtn">重置</el-button> |
|
|
|
</el-row></div></div> |
|
|
|
|
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="box_cv"> |
|
|
|
<el-row> |
|
|
|
<el-button |
|
|
|
type="info" |
|
|
|
style="background-color: orange; border-color: orange" |
|
|
|
@click="resetBtn" |
|
|
|
>重置</el-button |
|
|
|
> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div > |
|
|
|
</div> |
|
|
|
<!-- 外层 --> |
|
|
|
<div class="face face2">欢迎使用</div> |
|
|
|
</div> |
|
|
|
@ -29,85 +50,97 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
loginForm: { |
|
|
|
username: '', |
|
|
|
password: '' |
|
|
|
username: "", |
|
|
|
password: "", |
|
|
|
}, |
|
|
|
rules: { // key:value |
|
|
|
rules: { |
|
|
|
// key:value |
|
|
|
username: [ |
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|
|
|
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
|
|
|
{ required: true, message: "请输入用户名", trigger: "blur" }, |
|
|
|
{ |
|
|
|
min: 3, |
|
|
|
max: 30, |
|
|
|
message: "长度在 3 到 30 个字符", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
password: [ |
|
|
|
{ required: true, message: '请输入密码', trigger: 'blur' }, |
|
|
|
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
|
|
|
{ |
|
|
|
min: 3, |
|
|
|
max: 30, |
|
|
|
message: "长度在 3 到 30 个字符", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
resetBtn () { |
|
|
|
resetBtn() { |
|
|
|
// 获取当前表单对象 之后重置数据 |
|
|
|
this.$refs.loginFormRef.resetFields() |
|
|
|
this.$refs.loginFormRef.resetFields(); |
|
|
|
}, |
|
|
|
login () { |
|
|
|
this.$refs.loginFormRef.validate(async valid => { |
|
|
|
if (!valid) return |
|
|
|
login() { |
|
|
|
this.$refs.loginFormRef.validate(async (valid) => { |
|
|
|
if (!valid) return; |
|
|
|
|
|
|
|
const { data: result } = |
|
|
|
await this.$http.post('/user/login', this.loginForm) |
|
|
|
if (result.status !== 200) return this.$message.error('用户名或密码错误!') |
|
|
|
this.$message.success('用户登录成功!') |
|
|
|
const token = result.data |
|
|
|
console.log(token) |
|
|
|
window.sessionStorage.setItem('token', token) |
|
|
|
this.$router.push('/home') |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
const { data: result } = await this.$http.post( |
|
|
|
"/user/login", |
|
|
|
this.loginForm |
|
|
|
); |
|
|
|
if (result.status !== 200) |
|
|
|
return this.$message.error("用户名或密码错误!"); |
|
|
|
this.$message.success("用户登录成功!"); |
|
|
|
const token = result.data; |
|
|
|
console.log(token); |
|
|
|
window.sessionStorage.setItem("token", token); |
|
|
|
this.$router.push("/home"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.background{ |
|
|
|
.background { |
|
|
|
/* 渐变背景 */ |
|
|
|
background: linear-gradient(90deg,#00aaff,#ffffff,#4eecec); |
|
|
|
background: linear-gradient(90deg, #00aaff, #ffffff, #4eecec); |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.box_Central{ |
|
|
|
.box_Central { |
|
|
|
margin-top: 60px; |
|
|
|
margin-left: 60px; |
|
|
|
} |
|
|
|
.box_cn{ |
|
|
|
float:left; |
|
|
|
.box_cn { |
|
|
|
float: left; |
|
|
|
margin-left: 80px; |
|
|
|
} |
|
|
|
.box_cv{ |
|
|
|
.box_cv { |
|
|
|
float: left; |
|
|
|
|
|
|
|
margin-left: 50px; |
|
|
|
} |
|
|
|
.cl{ |
|
|
|
.cl { |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
.login_box{ |
|
|
|
.login_box { |
|
|
|
width: 450px; |
|
|
|
height: 330px; |
|
|
|
background-color: #FFFFFF; |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 10px; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
right: 50%; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
} |
|
|
|
.face{ |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
.face { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
@ -118,40 +151,39 @@ float:left; |
|
|
|
align-items: center; |
|
|
|
color: white; |
|
|
|
font-size: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.login_box .face2{ |
|
|
|
.login_box .face2 { |
|
|
|
background: #111; |
|
|
|
transition: .5s; |
|
|
|
transition: 0.5s; |
|
|
|
} |
|
|
|
/* 经过外层高度变小 */ |
|
|
|
.login_box:hover .face2{ |
|
|
|
.login_box:hover .face2 { |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
/* 经过字体变小 */ |
|
|
|
.login_box:hover .face2 h2{ |
|
|
|
.login_box:hover .face2 h2 { |
|
|
|
font-size: 2em; |
|
|
|
} |
|
|
|
/* 三个卡片外层渐变色 */ |
|
|
|
.login_box:nth-child(1) .face2{ |
|
|
|
background: linear-gradient(45deg,#00aaff,#4eeaea); |
|
|
|
.login_box:nth-child(1) .face2 { |
|
|
|
background: linear-gradient(45deg, #00aaff, #4eeaea); |
|
|
|
} |
|
|
|
|
|
|
|
.login_box .face2::before{ |
|
|
|
content: ''; |
|
|
|
.login_box .face2::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width:50% ; |
|
|
|
width: 50%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(255, 255,255, .1); |
|
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
} |
|
|
|
.login_box .face2 h2{ |
|
|
|
margin:0; |
|
|
|
.login_box .face2 h2 { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
font-size: 10em; |
|
|
|
color: #fff; |
|
|
|
transition: 0.5s; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
fengdong777
2 years ago