134 lines
2.8 KiB
Vue
134 lines
2.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="loginBox">
|
|
<div class="ms-login">管理系统平台</div>
|
|
<el-form
|
|
label-width="100px"
|
|
:model="param"
|
|
style="max-width: 460px"
|
|
class="loginForm"
|
|
:rules="rules" ref="loginRef"
|
|
>
|
|
<el-form-item label="用户名" prop="username">
|
|
<el-input v-model="param.username" placeholder="请输入用户名"/>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input v-model="param.password" placeholder="请输入密码" />
|
|
</el-form-item>
|
|
<el-form-item class="loginBtn">
|
|
<el-button type="primary" style="margin: 10px" @click="submitForm(loginRef)">登录</el-button>
|
|
<el-button type="info" style="margin: 10px">取消</el-button>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, ref } from 'vue'
|
|
import {Login} from "../../api/user";
|
|
import { useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
const router = useRouter();
|
|
export default {
|
|
name: "Login",
|
|
setup(){
|
|
const param = reactive({
|
|
username: "李星云2",
|
|
password: "123456",
|
|
});
|
|
|
|
const rules = {
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: "请输入用户名",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
password: [
|
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
|
],
|
|
};
|
|
const loginRef = ref(null);
|
|
const submitForm = (loginRef) => {
|
|
if (!loginRef) return
|
|
loginRef.validate((valid) => {
|
|
if (valid) {
|
|
Login(param).then((rep)=>{
|
|
console.log(rep)
|
|
if (rep.code===200){
|
|
router.push("/")
|
|
}else{
|
|
ElMessage.error(rep.message);
|
|
}
|
|
})
|
|
} else {
|
|
ElMessage.error("登录成功");
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
|
|
return {
|
|
rules,
|
|
loginRef,
|
|
submitForm,
|
|
param
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.container{
|
|
height: 100%;
|
|
background-color: #282C34;
|
|
background-image: url(../../assets/img/login=JPG.webp);
|
|
background-size: 100%;
|
|
|
|
}
|
|
.ms-login {
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 350px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
margin-left: 35px;
|
|
overflow: hidden;
|
|
}
|
|
.loginBox{
|
|
|
|
width: 450px;
|
|
height: 300px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 70%;
|
|
transform: translate(-50%,-50%);
|
|
border-radius: 9px;
|
|
|
|
}
|
|
.loginForm{
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 10%;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.loginBtn{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
</style> |