<template>
|
<div class="box">
|
<div class="login">
|
<div class="logintitle">
|
吉水化工园区“一园一策一图”VR平台
|
</div>
|
<div class="getingo">
|
<p class="title">用户登录</p>
|
<el-input type="text" class="input username" v-model="loginForm.username" />
|
<el-input type="password" class="input password" v-model="loginForm.password" />
|
<el-button class="loginto" type="primary" @click="login">登录</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRouter, useRoute } from 'vue-router'
|
let router = useRouter()
|
import { ElLoading } from 'element-plus'
|
import { useLogin } from 'store/login'
|
const store = useLogin()
|
|
const loginForm = reactive({
|
//租户ID
|
tenantId: '000000',
|
//部门ID
|
deptId: '',
|
//角色ID
|
roleId: '',
|
//用户名
|
username: '',
|
//密码
|
password: '',
|
//账号类型
|
type: 'account',
|
//验证码的值
|
code: '',
|
//验证码的索引
|
key: '',
|
//预加载白色背景
|
image:
|
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
|
flag: 1,
|
})
|
|
const login = () => {
|
const loading = ElLoading.service({
|
lock: true,
|
text: '登录中,请稍后。。。',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
|
store.LoginByUsername(loginForm).then(res => {
|
console.log(res, 66666)
|
router.push('/layout')
|
loading.close()
|
}).catch(() => {
|
loading.close()
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100vw;
|
height: 100vh;
|
box-sizing: border-box;
|
|
.login {
|
width: 100%;
|
height: 100%;
|
background: url('../assets/images/login-bg.png');
|
background-size: 100% 100%;
|
position: relative;
|
|
.logintitle {
|
position: absolute;
|
top: 18%;
|
right: 25%;
|
transform: translateX(50%);
|
font-size: 40px;
|
color: #00afe9;
|
}
|
|
.getingo {
|
width: 500px;
|
position: absolute;
|
text-align: center;
|
top: 45%;
|
right: 25%;
|
transform: translateY(-40%) translateX(50%);
|
color: #ffffff;
|
padding: 30px;
|
background: url('../assets/images/login-content-bg.png'),
|
url('../assets/images/left-top.png') no-repeat left top,
|
url('../assets/images/left-bottom.png') no-repeat left bottom,
|
url('../assets/images/right-top.png') no-repeat right top,
|
url('../assets/images/right-bottom.png') no-repeat right bottom;
|
background-repeat: no-repeat;
|
background-size: 100% 100%, 25px, 25px, 25px, 25px;
|
|
.title {
|
font-size: 20px;
|
}
|
|
:deep().el-input__inner {
|
padding: 0px;
|
}
|
|
.input {
|
margin: 30px 0;
|
width: 300px;
|
padding: 10px 10px 10px 40px;
|
background-color: rgba(0, 0, 0, 0);
|
color: #ffffff;
|
border-width: 0px;
|
font-size: 18px;
|
}
|
|
.username {
|
background: url('../assets/images/login-input.png') no-repeat,
|
url('../assets/images/user-icon.png') no-repeat 10px center;
|
background-size: 100% 100%, 20px;
|
}
|
|
.password {
|
background: url('../assets/images/login-input.png') no-repeat,
|
url('../assets/images/password-icon.png') no-repeat 10px center;
|
background-size: 100% 100%, 20px;
|
}
|
|
.loginto {
|
width: 300px;
|
margin: 30px 0;
|
}
|
}
|
}
|
}
|
</style>
|
