<template>
<div class="login
-container">
<div class="login
-box">
<div class="logo">云盘系统</div>
<h2>欢迎回来</h2>
<p class="sub
-title">请登录您的账户</p>
<el
-form
:model="loginForm"
:rules="loginRules"
label
-width="0"
ref="loginFormRef"
>
<!
-- 邮箱
-->
<el
-form
-item prop="email">
<el
-input
v
-model="loginForm.email"
placeholder="邮箱"
prefix
-icon="el
-icon
-message"
/>
</el
-form
-item>
<!
-- 密码
-->
<el
-form
-item prop="password">
<el
-input
v
-model="loginForm.password"
type="password"
placeholder="密码"
prefix
-icon="el
-icon
-lock"
@keyup.enter.native="handleLogin"
/>
</el
-form
-item>
<!
-- 记住密码
-->
<el
-form
-item>
<el
-checkbox v
-model="loginForm.remember">记住密码</el
-checkbox>
</el
-form
-item>
<!
-- 登录按钮
-->
<el
-form
-item>
<el
-button
type="primary"
class="login
-btn"
@click="handleLogin"
:loading="loginLoading"
>
登录
</el
-button>
</el
-form
-item>
</el
-form>
<!
-- 快捷登录
-->
<div class="social
-login">
<div class="divider">
<span>其他登录方式</span>
</div>
<div class="social
-buttons">
<el
-button type="link" icon="el
-icon
-qq" class="social
-btn" @click="handleQQLogin">
QQ登录
</el
-button>
<el
-button type="link" icon="el
-icon
-wechat" class="social
-btn" @click="handleWechatLogin">
微信登录
</el
-button>
</div>
</div>
<!
-- 注册链接
-->
<div class="extra
-links">
<router
-link to="/register">还没有账号? 立即注册</router
-link>
<span class="forgot
-password" @click="handleForgotPassword">忘记密码?</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue
-router';
import { ElMessage } from 'element
-plus';
const router = useRouter();
const loginFormRef = ref();
const loginLoading = ref(false);
const loginForm = reactive({
email: '',
password: '',
remember: false
});
const loginRules = reactive({
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ pattern: /^[a
-zA
-Z0
-9._%+
-]+@[a
-zA
-Z0
-9.
-]+\.[a
-zA
-Z]{2,}$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '密码长度应为6
-15位', trigger: 'blur' }
]
});
// 处理登录
const handleLogin = async () => {
(loginFormRef.value as any).validate(async valid => {
if (!valid) return;
loginLoading.value = true;
// 模拟登录请求
await new Promise(resolve => setTimeout(resolve, 1500));
// 实际项目中应调用API验证用户
ElMessage.success('登录成功，即将进入系统');
setTimeout(() => {
router.push('/dashboard');
}, 1500);
loginLoading.value = false;
});
};
// 处理第三方登录
const handleQQLogin = () => {
ElMessage.info('QQ登录功能开发中...');
};
const handleWechatLogin = () => {
ElMessage.info('微信登录功能开发中...');
};
// 处理忘记密码
const handleForgotPassword = () => {
ElMessage.info('密码找回功能开发中...');
};
// 页面加载时检查是否有记住的密码
onMounted(() => {
const savedEmail = localStorage.getItem('savedEmail');
const savedPassword = localStorage.getItem('savedPassword');
if (savedEmail && savedPassword) {
loginForm.email = savedEmail;
loginForm.password = savedPassword;
loginForm.remember = true;
}
});
</script>
<style scoped>
/* 确保根元素占满屏幕 */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.login
-container {
min
-width: 100vw;
min
-height: 100
vh;
background: linear
-gradient(135deg, #e6f0ff, #f0f2ff);
display: flex;
justify
-content: center;
align
-items: center;
box
-sizing: border
-box;
padding: 20px;
}
.login
-box {
width: 100%;
max
-width: 400px;
background: #fff;
border
-radius: 12px;
padding: 40px 30px;
box
-shadow: 0 8px 24px rgba(0, 0, 255, 0.1);
text
-align: center;
}
.logo {
width: 60px;
height: 60px;
background: #6b6
df4;
border
-radius: 50%;
color: #fff;
line
-height: 60px;
font
-size: 24px;
margin: 0 auto 20px;
}
h2 {
font
-size: 24px;
color: #333;
margin
-bottom: 8px;
}
.sub
-title {
font
-size: 14px;
color: #999;
margin
-bottom: 30px;
}
.el
-input {
--el
-input
-bg
-color: #f8f9fe;
--el
-input
-border
-color: transparent;
--el
-input
-hover
-border
-color: transparent;
--el
-input
-focus
-border
-color: transparent;
margin
-bottom: 20px;
}
.login
-btn {
width: 100%;
background: linear
-gradient(90deg, #6b6
df4, #8490ff);
border: none;
color: #fff;
padding: 12px 0;
border
-radius: 8px;
cursor: pointer;
}
.login
-btn:hover {
opacity: 0.9;
}
.social
-login {
margin
-top: 30px;
}
.divider {
display: flex;
align
-items: center;
margin
-bottom: 20px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: #eee;
}
.divider span {
color: #999;
font
-size: 14px;
padding: 0 15px;
}
.social
-buttons {
display: flex;
justify
-content: center;
}
.social
-btn {
color: #6b6
df4;
font
-size: 20px;
margin: 0 10px;
}
.extra
-links {
display: flex;
justify
-content: space
-between;
margin
-top: 20px;
font
-size: 14px;
}
.extra
-links a {
color: #6b6
df4;
text
-decoration: none;
}
.extra
-links a:hover,
.forgot
-password:hover {
text
-decoration: underline;
cursor: pointer;
}
.forgot
-password {
color: #6b6
df4;
}
</style> 这个登录的vue组件为什么不能占满整个页面
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
593
