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>
|