150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
|
<div class="login-body" :style="{
|
|
backgroundImage: `url(${loginImg})`,
|
|
}">
|
|
<div class="login-container">
|
|
<div class="head">
|
|
<!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
|
|
<div class="name">
|
|
<div class="title">{{ projectName }}</div>
|
|
<!-- <div class="tips">Vue3.0 后台管理系统</div> -->
|
|
</div>
|
|
</div>
|
|
<el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
|
|
<el-form-item label="账号" prop="username">
|
|
<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off"
|
|
@keyup.enter="submitForm"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
|
|
<el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm">立即登录</el-button>
|
|
<!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import md5 from "js-md5";
|
|
import { reactive, ref, toRefs, onMounted } from "vue";
|
|
import myApi from "@/api/myApi.js";
|
|
import { localSet, localGet } from "@/utils";
|
|
import bgImg from '@/assets/bg2.png'
|
|
export default {
|
|
name: "Login",
|
|
setup() {
|
|
const loginForm = ref(null);
|
|
const state = reactive({
|
|
projectName: "",
|
|
loginImg: bgImg,
|
|
ruleForm: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
checked: true,
|
|
rules: {
|
|
username: [
|
|
{ required: "true", message: "账户不能为空", trigger: "blur" },
|
|
],
|
|
password: [
|
|
{ required: "true", message: "密码不能为空", trigger: "blur" },
|
|
],
|
|
},
|
|
});
|
|
|
|
onMounted(async () => {
|
|
const res = await myApi.getInfo();
|
|
state.projectName = res.data && res.data.title || '世博浦西区活水公园';
|
|
state.loginImg = res.data && res.data.loginImg || bgImg;
|
|
|
|
});
|
|
const submitForm = async () => {
|
|
loginForm.value.validate(async (valid) => {
|
|
if (valid) {
|
|
const param = {
|
|
account: state.ruleForm.username || "",
|
|
pwd: state.ruleForm.password,
|
|
};
|
|
const res = await myApi.login(param);
|
|
localSet("token", "token");
|
|
window.location.href = "/";
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
const resetForm = () => {
|
|
loginForm.value.resetFields();
|
|
};
|
|
return {
|
|
...toRefs(state),
|
|
loginForm,
|
|
submitForm,
|
|
resetForm,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
/* background-color: #fff; */
|
|
/* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
|
|
background: url("../assets/bg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.login-container {
|
|
width: 420px;
|
|
height: 400px;
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 0 20px 0;
|
|
}
|
|
|
|
.head img {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.head .title {
|
|
font-size: 28px;
|
|
color: #1baeae;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.head .tips {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.login-form {
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-form--label-top .el-form-item__label {
|
|
padding: 0;
|
|
}
|
|
|
|
.login-form .el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |