<template>
|
<div class="container">
|
<div class="header">
|
<h1 class="header-top">生态环境线上监管大数据管理平台</h1>
|
</div>
|
<div class="main">
|
<div class="main-login">
|
<div class="width100 main-top-p"><span>用户登录</span></div>
|
<el-form :model="formObj" :rules="rules" ref="formRef">
|
<el-form-item prop="username">
|
<el-input v-model="formObj.username" placeholder="请输入用户名" class="user-input"></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input v-model="formObj.password" placeholder="请输入密码" type='password'
|
class="user-input"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="width100 media-footer">
|
<label class="pwd-label">
|
<input type="checkbox" class="check-pwd" />记住密码
|
</label>
|
<span class="change-pwd">忘记密码？</span>
|
</div>
|
<div class="footer width100">
|
<el-button class="login-btn u-loginBtn" @click="onSubmit(false)">登录</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import { reactive } from 'vue';
|
import { useRouter } from 'vue-router';
|
import pinia from '@/stores/index';
|
import { useUserStore } from '@/stores/userToken'
|
import { ElNotification } from 'element-plus';
|
|
const router = useRouter();
|
const rules = reactive({
|
username: [
|
{
|
required: true,
|
message: '用户名不能为空',
|
trigger: 'change'
|
}
|
],
|
password: [
|
{
|
required: true,
|
message: '密码不能为空',
|
trigger: 'change'
|
}
|
],
|
})
|
const userStore = useUserStore(pinia);
|
function login() {
|
userStore.login({ username: formObj.value.username, password: formObj.value.password }, () => {
|
router.push('/fysp/procheck')
|
ElNotification({
|
title: `登录成功`,
|
message: `登录成功`,
|
type: 'success',
|
// offset: 170,
|
position: 'bottom-left',
|
});
|
}, () => {
|
router.push('/common/loginView')
|
ElNotification({
|
title: `登录失败`,
|
message: `用户名或密码错误`,
|
type: 'error',
|
// offset: 170,
|
position: 'bottom-left',
|
});
|
})
|
}
|
|
//表单操作函数
|
const { formObj, formRef, onSubmit } =
|
useFormConfirm({
|
submit: {
|
do: login
|
}
|
});
|
</script>
|
<style scoped>
|
html {
|
font-size: 62.5%;
|
}
|
|
body {
|
margin: 0 !important;
|
}
|
|
.container {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
background-image: url(@/assets/image/background_img.jpg);
|
}
|
|
.header {
|
margin-top: 5rem;
|
}
|
|
.header-top {
|
color: #fefffd;
|
font-size: 5rem;
|
letter-spacing: 0.5rem;
|
}
|
|
.main {
|
width: 30rem;
|
height: 29rem;
|
opacity: 0.8;
|
background-color: #092367;
|
background-image: url(@/assets/image/background_main.png);
|
background-size: 100%;
|
}
|
|
.main-top-p {
|
text-align: center;
|
font-size: 2rem;
|
color: white;
|
letter-spacing: 0.5rem;
|
}
|
|
.background-img {
|
width: 100%;
|
height: 100%;
|
|
}
|
|
.main-login {
|
padding: 5rem;
|
padding-bottom: 0.5rem;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.width100 {
|
width: 100%;
|
margin: 1rem 0;
|
}
|
|
.media-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 1rem;
|
margin-top: 3rem;
|
}
|
|
.pwd-label {
|
color: white;
|
}
|
|
.user-input::-webkit-input-placeholder {
|
color: white;
|
font-size: 2rem;
|
line-height: 2rem;
|
}
|
|
.user-input {
|
/* margin-top: 2rem; */
|
border: 2px solid #046eb0;
|
border-radius: 8px;
|
width: 100%;
|
font-size: 1rem;
|
color: white;
|
/* padding: 0.8rem 0 0 4rem; */
|
background-color: #03286a;
|
|
}
|
|
.check-pwd::before {
|
border: 1px solid #0270ae;
|
background-color: #042866;
|
|
}
|
|
.change-pwd {
|
color: #00aded;
|
|
}
|
|
.login-btn {
|
width: 100%;
|
padding: 0.8rem;
|
font-size: 1rem;
|
border-radius: 9px;
|
color: white;
|
background-image: url(@/assets/image/login_btn.jpg);
|
background-size: 100%;
|
opacity: 1;
|
border: none;
|
/* margin-top: 3rem; */
|
}
|
|
.icon-user {
|
background-image: url(@/assets/image/user_icon.png);
|
|
|
|
background-repeat: no-repeat;
|
/*设置图片不重复*/
|
|
height: 100%;
|
|
}
|
|
.icon-pwd {
|
background-image: url(@/assets/image/pwd_icon.png);
|
|
background-repeat: no-repeat;
|
/*设置图片不重复*/
|
|
height: 80%;
|
}
|
|
::v-deep .el-input__inner {
|
width: 300px;
|
}
|
</style>
|
