138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="login-container">
|
|||
|
|
<el-card class="login-card" shadow="always">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<h2>欢迎登录</h2>
|
|||
|
|
<p class="subtitle">请输入您的账号信息</p>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form
|
|||
|
|
ref="loginFormRef"
|
|||
|
|
:model="loginForm"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-position="top"
|
|||
|
|
@keyup.enter="handleLogin"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="用户名" prop="username">
|
|||
|
|
<el-input
|
|||
|
|
v-model="loginForm.username"
|
|||
|
|
:prefix-icon="User"
|
|||
|
|
clearable
|
|||
|
|
placeholder="请输入用户名"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="密码" prop="password">
|
|||
|
|
<el-input
|
|||
|
|
v-model="loginForm.password"
|
|||
|
|
:prefix-icon="Lock"
|
|||
|
|
clearable
|
|||
|
|
placeholder="请输入密码"
|
|||
|
|
show-password
|
|||
|
|
type="password"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item class="login-form-button">
|
|||
|
|
<el-button
|
|||
|
|
:loading="loading"
|
|||
|
|
class="login-btn"
|
|||
|
|
type="primary"
|
|||
|
|
@click="handleLogin"
|
|||
|
|
>
|
|||
|
|
登 录
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {reactive, ref} from 'vue'
|
|||
|
|
import {ElMessage} from 'element-plus'
|
|||
|
|
import {Lock, User} from '@element-plus/icons-vue'
|
|||
|
|
import {useRouter} from 'vue-router'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
|
|||
|
|
const loginFormRef = ref(null)
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
const loginForm = reactive({
|
|||
|
|
username: '',
|
|||
|
|
password: '',
|
|||
|
|
remember: false,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
username: [
|
|||
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
password: [
|
|||
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleLogin = async () => {
|
|||
|
|
if (!loginFormRef.value) return
|
|||
|
|
try {
|
|||
|
|
await loginFormRef.value.validate()
|
|||
|
|
loading.value = true
|
|||
|
|
await new Promise((r) => setTimeout(r, 800))
|
|||
|
|
ElMessage.success('登录成功（模拟）')
|
|||
|
|
router.push('/panel')
|
|||
|
|
} catch {
|
|||
|
|
// 校验失败，element-plus 会自动显示红色提示
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.login-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-card {
|
|||
|
|
width: 420px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header h2 {
|
|||
|
|
margin: 0 0 8px;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-btn {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 75%;
|
|||
|
|
}
|
|||
|
|
</style>
|