126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<template>
|
|
<div class="login-container">
|
|
<div class="logo">
|
|
<div class="second_bg"></div>
|
|
</div>
|
|
<div class="form">
|
|
<img src="@/assets/images/logo.jpg" alt="" style="vertical-align: middle; background-color: transparent">
|
|
<el-card shadow="never" class="login-card">
|
|
<el-form ref="formRef" :model="loginForm" :rules="loginRules" v-loading="loading" element-loading-text="登录中...">
|
|
<el-form-item prop="username">
|
|
<el-input :prefix-icon="User" v-model="loginForm.username" placeholder="请输入学号" @keyup.enter="login" />
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input :prefix-icon="Lock" v-model="loginForm.password" show-password placeholder="请输入密码"
|
|
@keyup.enter="login" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="large" round style="width:350px" type="primary" @click="login">登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { loginAPI } from '@/apis/user'
|
|
import { User, Lock } from '@element-plus/icons-vue'
|
|
|
|
const router = useRouter();
|
|
|
|
const loginForm = ref({
|
|
username: '',
|
|
password: '',
|
|
clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
|
|
grantType: 'password'
|
|
})
|
|
|
|
const loading = ref(false)
|
|
|
|
const loginRules = ref({
|
|
username: [
|
|
{ required: true, message: '请输入学号', trigger: 'blur' },
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
]
|
|
})
|
|
|
|
const formRef = ref(null)
|
|
async function login() {
|
|
formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true
|
|
const res = await loginAPI(loginForm.value)
|
|
if (res.code == 200) {
|
|
localStorage.setItem('token', res.data.access_token)
|
|
router.push('/')
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login-container {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: 100vh;
|
|
|
|
.logo {
|
|
flex: 3;
|
|
background: rgba(38, 72, 176) url(../../assets/images/bg1.jpg) no-repeat center / cover;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
|
|
//.second_bg {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// background: url(../../assets/images/bg2.png) 50% no-repeat;
|
|
// background-size: cover;
|
|
//}
|
|
}
|
|
|
|
.form {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 40px;
|
|
background-color: #fff;
|
|
|
|
img {
|
|
width: 380px;
|
|
height: 250px;
|
|
}
|
|
|
|
.el-card {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
padding-left: 20px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.el-input {
|
|
width: 350px;
|
|
height: 44px;
|
|
|
|
.el-input__inner {
|
|
background: #f4f5fb;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|