<template>
<div
class="login
-container">
<div
class="login
-bg"></div>
<el
-card
class="login
-card">
<div
class="logo
-container">
<div
class="logo"></div>
<h2
class="login
-title">系统登录</h2>
</div>
<el
-form
:model
="loginForm"
:rules
="loginRules"
ref
="formRef"
@submit.prevent
="handleLogin"
class="login
-form"
>
<el
-form
-item prop
="username">
<el
-input
v
-model
="loginForm.username"
placeholder
="请输入用户名"
prefix
-icon
="User"
size
="large"
class="input
-item"
/>
</el
-form
-item>
<el
-form
-item prop
="password">
<el
-input
v
-model
="loginForm.password"
type
="password"
placeholder
="请输入密码"
prefix
-icon
="Lock"
show
-password
size
="large"
class="input
-item"
/>
</el
-form
-item>
<div
class="button
-group">
<el
-button type
="primary"
class="login
-btn" native
-type
="submit"
:loading
="loading">
登 录
</el
-button>
<el
-button
class="reset
-btn" @click
="handleReset"> 重 置 </el
-button>
</div>
</el
-form>
</el
-card>
</div>
</template>
<script setup lang
="ts">
import { ref, reactive } from '
vue'
import { useRouter } from '
vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element
-plus'
import { loginApi } from '@/api/login' // 根据你的实际路径调整
const router
= useRouter()
const formRef
= ref<FormInstance>()
const loading
= ref(false)
// 登录表单数据
const loginForm
= reactive({
username
: '',
password
: '',
})
// 表单验证规则
const loginRules
= reactive<FormRules>({
username
: [
{ required
: true, message
: '请输入用户名', trigger
: 'blur' },
{ min
: 3, max
: 20, message
: '长度在 3 到 20 个字符', trigger
: 'blur' },
],
password
: [
{ required
: true, message
: '请输入密码', trigger
: 'blur' },
{ min
: 6, max
: 20, message
: '长度在 6 到 20 个字符', trigger
: 'blur' },
],
})
// 处理登录提交
const handleLogin
= async ()
=> {
// 表单验证
const valid
= await formRef.value?.validate()
if (!valid) return
loading.value
= true
try {
// 调用登录API
const { code, data, msg }
= await loginApi(loginForm)
if (code
=== 1) {
// 登录成功处理
ElMessage.success('登录成功')
// 存储token到localStorage
localStorage.setItem('token', data.token)
// 跳转到首页
router.push('/index')
} else {
// 其他错误处理
ElMessage.error(msg || '登录失败，请重试')
}
} catch (error
: any) {
// 401错误处理
if (error.response?.status
=== 401) {
ElMessage.error('用户名或密码错误')
} else {
ElMessage.error('登录请求失败：' + (error.message || '未知错误'))
}
} finally {
loading.value
= false
}
}
// 新增：处理重置表单
const handleReset
= ()
=> {
formRef.value?.resetFields()
}
</script>
<style scoped lang
="scss">
.login
-container {
display
: flex;
justify-content: center;
align
-items
: center;
height
: 100vh;
position
: relative;
overflow
: hidden;
.login
-bg {
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background
: linear
-gradient(135deg, #6a11cb 0%, #2575fc 100%);
z
-index
: 1;
}
&
::before {
content: '';
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background
: url('https
://images.unsplash.com/photo
-1497366754035
-f200968a6e72?ixlib
=rb
-4.0.3&auto
=format&fit
=crop&w
=1950&q
=80')
no
-repeat center center;
background
-size
: cover;
opacity
: 0.1;
z
-index
: 2;
}
}
.login
-card {
width
: 420px;
padding
: 40px 30px;
border
-radius
: 16px;
box
-shadow
: 0 12px 30px rgba(0, 0, 0, 0.25);
z
-index
: 3;
background
: rgba(255, 255, 255, 0.95);
backdrop
-filter
: blur(10px);
border
: none;
.logo
-container {
text
-align
: center;
margin
-bottom
: 30px;
.logo {
width
: 80px;
height
: 80px;
margin
: 0 auto 15px;
border
-radius
: 50%;
background
: linear
-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display
: flex;
align
-items
: center;
justify-content: center;
box
-shadow
: 0 4px 10px rgba(37, 117, 252, 0.3);
&
::after {
content: 'EM';
font
-size
: 28px;
font
-weight
: bold;
color
: white;
}
}
.login
-title {
text
-align
: center;
margin
-bottom
: 5px;
color
: #2c3e50;
font
-size
: 24px;
font
-weight
: 600;
letter
-spacing
: 1px;
}
}
.login
-form {
.input
-item {
margin
-bottom
: 20px;
:deep(.el
-input__wrapper) {
border
-radius
: 12px;
box
-shadow
: 0 2px 6px rgba(0, 0, 0, 0.08);
padding
: 0 15px;
height
: 48px;
&
:hover {
box
-shadow
: 0 2px 8px rgba(37, 117, 252, 0.2);
}
}
}
}
.button
-group {
display
: flex;
gap
: 15px;
margin
-top
: 10px;
.login
-btn {
flex: 1;
height
: 48px;
font
-size
: 16px;
font
-weight
: 500;
letter
-spacing
: 2px;
background
: linear
-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border
: none;
border
-radius
: 12px;
box
-shadow
: 0 4px 10px rgba(37, 117, 252, 0.3);
transition
: all 0.3s ease;
&
:hover {
transform
: translateY(
-2px);
box
-shadow
: 0 6px 15px rgba(37, 117, 252, 0.4);
}
}
.reset
-btn {
flex: 1;
height
: 48px;
font
-size
: 16px;
font
-weight
: 500;
letter
-spacing
: 2px;
background
: #f5f7fa;
color
: #606266;
border
: none;
border
-radius
: 12px;
transition
: all 0.3s ease;
&
:hover {
background
: #e4e7ed;
color
: #2c3e50;
}
}
}
}
</style>
优化下样式美化下页面，可以保持原有的功能上，重构样式
本文介绍如何使用CSS Flex布局的justify-content属性实现元素的均匀分布，并提供了解决末尾中间留白，使元素靠左分布的技巧，通过给父容器使用伪元素占位。
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
