92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="login-container">
|
|||
|
|
<div class="img"></div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="content-title">欢迎来到，智能手铐管理系统</div>
|
|||
|
|
<el-form :model="form" label-position="top" label-width="auto" style="max-width: 600px">
|
|||
|
|
<el-form-item label="账号">
|
|||
|
|
<el-input v-model="form.acc" class="input" placeholder="请输入账号" size="large" clearable />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="密码">
|
|||
|
|
<el-input v-model="form.pwd" type="password" class="input" placeholder="请输入密码" size="large" clearable />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="onSubmit" class="btn" size="large">登 录</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
<div class="hint">
|
|||
|
|
如遇到账号问题，请联系管理员<br />
|
|||
|
|
管理员联系方式：13812345678 邮箱：123456@qq.com
|
|||
|
|
</div>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { reactive } from "vue";
|
|||
|
|
import { useRouter } from "vue-router";
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
// do not use same name with ref
|
|||
|
|
const form = reactive({
|
|||
|
|
acc: "",
|
|||
|
|
pwd: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
// console.log("submit!");
|
|||
|
|
router.push("statisticalCenter");
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
@media screen and (max-width: 1350px) {
|
|||
|
|
.img {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-container {
|
|||
|
|
height: 100vh;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 844px;
|
|||
|
|
height: 100%;
|
|||
|
|
background: url("../assets/img/loginimg.png") no-repeat center center;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 570px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.content-title {
|
|||
|
|
color: #061451;
|
|||
|
|
font-size: 40px;
|
|||
|
|
margin-bottom: 80px;
|
|||
|
|
}
|
|||
|
|
.input {
|
|||
|
|
width: 476px;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
width: 476px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.hint {
|
|||
|
|
color: #787878;
|
|||
|
|
font-size: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.el-input__suffix-inner {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|