Login.vue
2.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock, View, Hide } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const router = useRouter()
const loginFormRef = ref()
const loading = ref(false)
const loginForm = reactive({
username: '',
password: ''
})
const rules = {
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const handleLogin = async (formEl: any) => {
if (!formEl) return
await formEl.validate((valid: boolean) => {
if (valid) {
loading.value = true
setTimeout(() => {
loading.value = false
ElMessage.success('登录成功')
router.push('/order-list')
}, 1000)
}
})
}
const handleReset = (formEl: any) => {
if (!formEl) return
formEl.resetFields()
}
</script>
<template>
<div class="login-container flex justify-center items-center h-screen bg-gray-100">
<el-card class="w-full max-w-md" shadow="hover">
<template #header>
<div class="text-center font-bold text-xl text-gray-800">质检管理平台</div>
</template>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="rules"
label-width="0"
size="large"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入账号"
:prefix-icon="User"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
:prefix-icon="Lock"
show-password
@keyup.enter="handleLogin(loginFormRef)"
/>
</el-form-item>
<el-form-item>
<div class="flex w-full gap-4">
<el-button
type="primary"
class="flex-1"
:loading="loading"
@click="handleLogin(loginFormRef)"
>
登录
</el-button>
<el-button
class="flex-1"
@click="handleReset(loginFormRef)"
>
重置
</el-button>
</div>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<style scoped>
.login-container {
/* Fallback gradient */
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
/* Dark Tech Background Image */
background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
:deep(.el-card) {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
border: none;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
</style>