home1020
This commit is contained in:
bwstudio
@@ -0,0 +1,332 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user