<template>
|
<div class="login-container min-h-screen flex items-center justify-center">
|
<div class="login-background"></div>
|
<div class="login-content max-w-md w-full relative z-10">
|
<!-- 登录表单 -->
|
<div class="bg-white py-8 px-10 shadow-2xl rounded-lg">
|
<!-- Logo -->
|
<div class="flex items-center mb-3 justify-center">
|
<img src="@/assets/logo/header_logo.png" alt="Logo" class="w-[66%]" />
|
<!-- <span class="ml-2 text-xl">工业APP汇聚平台</span> -->
|
</div>
|
|
<el-form ref="formRef" :model="loginForm" :rules="rules" class="space-y-4">
|
<el-form-item prop="username">
|
<el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" size="large" class="custom-input" />
|
</el-form-item>
|
|
<el-form-item prop="password">
|
<el-input
|
v-model="loginForm.password"
|
type="password"
|
placeholder="请输入密码"
|
:prefix-icon="Lock"
|
size="large"
|
class="custom-input"
|
/>
|
</el-form-item>
|
|
<el-form-item prop="captcha" class="flex space-x-4 mb-2">
|
<el-input
|
v-model="loginForm.captcha"
|
placeholder="请输入图片验证码"
|
:prefix-icon="Key"
|
size="large"
|
class="custom-input flex-1 mr-2"
|
/>
|
<img src="@/assets/login/captcha.png" alt="验证码" class="h-[40px] w-[100px] cursor-pointer" @click="refreshCaptcha" />
|
</el-form-item>
|
|
<div class="flex items-center justify-between mb-4">
|
<el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
|
<span class="text-primary cursor-pointer">忘记密码</span>
|
</div>
|
|
<el-button type="primary" class="w-full" size="large" @click="handleLogin">登 录</el-button>
|
|
<div class="mt-4 text-center space-x-2">
|
<router-link to="/register" class="text-[#40a9ff]">立即注册</router-link>
|
<span class="text-gray-300">·</span>
|
<router-link to="/" class="text-[#40a9ff]">返回首页</router-link>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Key, Lock, User } from '@element-plus/icons-vue';
|
import { ElMessage } from 'element-plus';
|
import { reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
const formRef = ref();
|
|
const loginForm = reactive({
|
username: '',
|
password: '',
|
captcha: '',
|
remember: false,
|
});
|
|
const rules = {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
};
|
|
const handleLogin = () => {
|
formRef.value.validate((valid: boolean) => {
|
if (valid) {
|
// 保存用户信息到localStorage
|
const userInfo = {
|
username: loginForm.username,
|
isLogin: true,
|
};
|
localStorage.setItem('userInfo', JSON.stringify(userInfo));
|
ElMessage.success('登录成功');
|
router.push('/');
|
} else {
|
return false;
|
}
|
});
|
};
|
|
const refreshCaptcha = () => {
|
// 刷新验证码的逻辑
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
position: relative;
|
overflow: hidden;
|
background: linear-gradient(135deg, #a6d5e9, #96d3c3);
|
}
|
|
.login-background {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
/* background-image: url('@/assets/images/login-bg.png'); */
|
background-size: cover;
|
background-position: center;
|
opacity: 0.1;
|
}
|
|
.login-content {
|
width: 400px;
|
}
|
|
:deep(.custom-input .el-input__wrapper) {
|
background-color: #fff;
|
border: 1px solid #dcdfe6;
|
box-shadow: none;
|
}
|
|
:deep(.custom-input .el-input__wrapper:hover) {
|
border-color: #40a9ff;
|
}
|
|
:deep(.custom-input .el-input__wrapper.is-focus) {
|
border-color: #40a9ff;
|
box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2);
|
}
|
|
:deep(.el-button--primary) {
|
background-color: #40a9ff;
|
border-color: #40a9ff;
|
}
|
|
:deep(.el-button--primary:hover) {
|
background-color: #69b9ff;
|
border-color: #69b9ff;
|
}
|
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
background-color: #40a9ff;
|
border-color: #40a9ff;
|
}
|
|
:deep(.el-form-item) {
|
margin-bottom: 20px;
|
}
|
</style>
|
