332 lines
8.6 KiB
HTML
332 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>后台管理系统 - 登录</title>
|
|
<!-- 引入Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
<!-- 引入Element UI CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
|
<!-- 引入Element UI JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.login-container {
|
|
width: 90%;
|
|
max-width: 400px;
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
.login-header {
|
|
background-color: #1989fa;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
.logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
margin: 0 auto 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.logo-icon {
|
|
font-size: 32px;
|
|
color: #1989fa;
|
|
}
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
.subtitle {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
.login-body {
|
|
padding: 30px 25px;
|
|
}
|
|
.form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 8px;
|
|
}
|
|
.input-wrapper {
|
|
position: relative;
|
|
}
|
|
.input-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #909399;
|
|
font-size: 16px;
|
|
}
|
|
.form-input {
|
|
padding-left: 38px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
}
|
|
.form-input::-webkit-input-placeholder {
|
|
color: #c0c4cc;
|
|
}
|
|
.form-input::-moz-placeholder {
|
|
color: #c0c4cc;
|
|
}
|
|
.form-input:-ms-input-placeholder {
|
|
color: #c0c4cc;
|
|
}
|
|
.options {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
.remember-me {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #606266;
|
|
}
|
|
.el-checkbox__label {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
}
|
|
.forgot-password {
|
|
font-size: 13px;
|
|
color: #1989fa;
|
|
cursor: pointer;
|
|
}
|
|
.login-button {
|
|
width: 100%;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
}
|
|
.system-info {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.version {
|
|
margin-top: 5px;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
.loading-content {
|
|
background-color: white;
|
|
padding: 20px 30px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="login-container">
|
|
<!-- 登录头部 -->
|
|
<div class="login-header">
|
|
<div class="logo">
|
|
<i class="fa fa-tachometer logo-icon"></i>
|
|
</div>
|
|
<div class="title">图片收集系统</div>
|
|
<div class="subtitle">后台管理平台</div>
|
|
</div>
|
|
|
|
<!-- 登录表单 -->
|
|
<div class="login-body">
|
|
<form @submit.prevent="handleLogin">
|
|
<div class="form-item">
|
|
<div class="form-label">用户名</div>
|
|
<div class="input-wrapper">
|
|
<i class="fa fa-user input-icon"></i>
|
|
<el-input
|
|
v-model="loginForm.username"
|
|
class="form-input"
|
|
placeholder="请输入用户名"
|
|
autofocus
|
|
@keyup.enter.native="handleLogin"
|
|
></el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<div class="form-label">密码</div>
|
|
<div class="input-wrapper">
|
|
<i class="fa fa-lock input-icon"></i>
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
class="form-input"
|
|
placeholder="请输入密码"
|
|
show-password
|
|
@keyup.enter.native="handleLogin"
|
|
></el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="remember-me">
|
|
<el-checkbox v-model="loginForm.rememberMe">记住登录</el-checkbox>
|
|
</div>
|
|
<div class="forgot-password" @click="forgotPassword">忘记密码？</div>
|
|
</div>
|
|
|
|
<el-button
|
|
type="primary"
|
|
class="login-button"
|
|
@click="handleLogin"
|
|
:loading="loading"
|
|
>
|
|
登录
|
|
</el-button>
|
|
|
|
<div class="system-info">
|
|
<div>图片收集系统管理平台</div>
|
|
<div class="version">版本 1.0.0</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载遮罩层 -->
|
|
<transition name="fade">
|
|
<div v-if="loading" class="loading-overlay">
|
|
<div class="loading-content">
|
|
<el-loading-spinner></el-loading-spinner>
|
|
<div style="margin-top: 10px;">登录中...</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
loginForm: {
|
|
username: '',
|
|
password: '',
|
|
rememberMe: false
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理登录
|
|
handleLogin() {
|
|
// 表单验证
|
|
if (!this.loginForm.username.trim()) {
|
|
this.$message.error('请输入用户名');
|
|
return;
|
|
}
|
|
|
|
if (!this.loginForm.password.trim()) {
|
|
this.$message.error('请输入密码');
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
// 模拟登录请求
|
|
setTimeout(() => {
|
|
// 模拟成功登录
|
|
if (this.loginForm.username && this.loginForm.password) {
|
|
this.$message.success('登录成功');
|
|
|
|
// 保存登录状态（如果选择记住登录）
|
|
if (this.loginForm.rememberMe) {
|
|
localStorage.setItem('rememberedUser', this.loginForm.username);
|
|
} else {
|
|
localStorage.removeItem('rememberedUser');
|
|
}
|
|
|
|
// 跳转到部门管理页面
|
|
setTimeout(() => {
|
|
window.location.href = 'department-management.html';
|
|
}, 1000);
|
|
} else {
|
|
this.$message.error('用户名或密码错误');
|
|
this.loading = false;
|
|
}
|
|
}, 1500);
|
|
},
|
|
|
|
// 忘记密码
|
|
forgotPassword() {
|
|
this.$alert('请联系系统管理员重置密码', '忘记密码', {
|
|
confirmButtonText: '确定',
|
|
dangerouslyUseHTMLString: true
|
|
});
|
|
},
|
|
|
|
// 自动填充保存的用户名
|
|
fillRememberedUser() {
|
|
const rememberedUser = localStorage.getItem('rememberedUser');
|
|
if (rememberedUser) {
|
|
this.loginForm.username = rememberedUser;
|
|
this.loginForm.rememberMe = true;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 尝试填充记住的用户名
|
|
this.fillRememberedUser();
|
|
|
|
// 添加键盘事件监听
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
this.handleLogin();
|
|
}
|
|
});
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |