<template>
|
<div class="login-container">
|
<div class="main-box">
|
<div class="main-title">
|
<img src="../assets/logo.png" style="width: 80px; height: 80px; margin-right: 30px" alt="" />
|
数据录入系统
|
</div>
|
|
<div class="right-box">
|
<div class="login-box">
|
<h2 class="login-title">数据录入系统</h2>
|
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
|
<el-form-item prop="username">
|
<el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" size="large" />
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock" size="large" show-password @keyup.enter="handleLogin" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="large" class="login-btn" :loading="loading" @click="handleLogin"> 登 录 </el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { login } from '@/api/auth'
|
import { useUserStore } from '@/stores/user'
|
|
const router = useRouter()
|
const userStore = useUserStore()
|
|
const loginFormRef = ref(null)
|
const loading = ref(false)
|
|
const loginForm = reactive({
|
username: '',
|
password: ''
|
})
|
|
const loginRules = {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
}
|
|
const handleLogin = async () => {
|
if (!loginFormRef.value) return
|
|
await loginFormRef.value.validate(async valid => {
|
if (valid) {
|
loading.value = true
|
try {
|
const res = await login(loginForm)
|
userStore.setToken(res.data.token)
|
userStore.setUserInfo(res.data)
|
ElMessage.success('登录成功')
|
router.push('/')
|
} catch (error) {
|
console.error('登录失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
})
|
}
|
</script>
|
|
<style scoped>
|
.main-box {
|
margin: 0 auto;
|
width: 100%;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
min-height: 500px;
|
align-items: center;
|
}
|
|
.main-title {
|
font-size: 48px;
|
color: #fff;
|
font-weight: 500;
|
text-shadow: 0 0 10px black;
|
flex: 2;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.right-box {
|
flex: 1;
|
}
|
|
.login-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 100vh;
|
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
background: url('../assets/login-bj.jpg') no-repeat center;
|
background-size: 100% 100%;
|
image-rendering: -webkit-optimize-contrast;
|
}
|
|
.login-box {
|
width: 400px;
|
padding: 40px;
|
background: white;
|
border-radius: 10px;
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
}
|
|
.login-title {
|
text-align: center;
|
margin-bottom: 30px;
|
color: #333;
|
font-size: 24px;
|
}
|
|
.login-form {
|
width: 100%;
|
}
|
|
.login-btn {
|
width: 100%;
|
margin-top: 10px;
|
}
|
</style>
|
