251 lines
7.6 KiB
HTML
251 lines
7.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, maximum-scale=1.0, user-scalable=no">
|
||
<title>修改密码 - OA系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
max-width: 414px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 60px;
|
||
}
|
||
.header {
|
||
background: #1890ff;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.back-btn {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
.header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
.content {
|
||
padding: 16px;
|
||
background: #ffffff;
|
||
min-height: calc(100vh - 44px - 60px);
|
||
}
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.password-wrapper {
|
||
position: relative;
|
||
}
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #1890ff;
|
||
}
|
||
.password-toggle {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: #999;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
.password-tips {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.btn-save {
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin-top: 24px;
|
||
}
|
||
.bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 414px;
|
||
background: white;
|
||
border-top: 1px solid #e5e5e5;
|
||
display: flex;
|
||
padding: 8px 0;
|
||
z-index: 100;
|
||
}
|
||
.nav-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 8px;
|
||
color: #666;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item.active {
|
||
color: #1890ff;
|
||
}
|
||
.nav-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<button class="back-btn" onclick="history.back()">←</button>
|
||
<div class="header-title">修改密码</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="form-item">
|
||
<label class="form-label">原密码 <span style="color: #ff4d4f;">*</span></label>
|
||
<div class="password-wrapper">
|
||
<input type="password" class="form-input" placeholder="请输入原密码" id="oldPassword">
|
||
<button type="button" class="password-toggle" onclick="togglePassword('oldPassword', this)">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label class="form-label">新密码 <span style="color: #ff4d4f;">*</span></label>
|
||
<div class="password-wrapper">
|
||
<input type="password" class="form-input" placeholder="请输入新密码" id="newPassword">
|
||
<button type="button" class="password-toggle" onclick="togglePassword('newPassword', this)">👁️</button>
|
||
</div>
|
||
<div class="password-tips">
|
||
密码长度8-20位，包含字母和数字
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label class="form-label">确认新密码 <span style="color: #ff4d4f;">*</span></label>
|
||
<div class="password-wrapper">
|
||
<input type="password" class="form-input" placeholder="请再次输入新密码" id="confirmPassword">
|
||
<button type="button" class="password-toggle" onclick="togglePassword('confirmPassword', this)">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-save" onclick="changePassword()">确认修改</button>
|
||
</div>
|
||
|
||
<div class="bottom-nav">
|
||
<a href="todo.html" class="nav-item">
|
||
<div class="nav-icon">📋</div>
|
||
<div>待办</div>
|
||
</a>
|
||
<a href="message.html" class="nav-item">
|
||
<div class="nav-icon">🔔</div>
|
||
<div>消息</div>
|
||
</a>
|
||
<a href="project.html" class="nav-item">
|
||
<div class="nav-icon">📁</div>
|
||
<div>项目</div>
|
||
</a>
|
||
<a href="output.html" class="nav-item">
|
||
<div class="nav-icon">📝</div>
|
||
<div>成果</div>
|
||
</a>
|
||
<a href="profile.html" class="nav-item">
|
||
<div class="nav-icon">👤</div>
|
||
<div>我的</div>
|
||
</a>
|
||
</div>
|
||
|
||
<script>
|
||
function togglePassword(inputId, btn) {
|
||
const input = document.getElementById(inputId);
|
||
if (input.type === 'password') {
|
||
input.type = 'text';
|
||
btn.textContent = '🙈';
|
||
} else {
|
||
input.type = 'password';
|
||
btn.textContent = '👁️';
|
||
}
|
||
}
|
||
|
||
function changePassword() {
|
||
const oldPassword = document.getElementById('oldPassword').value;
|
||
const newPassword = document.getElementById('newPassword').value;
|
||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||
|
||
if (!oldPassword.trim()) {
|
||
alert('请输入原密码');
|
||
return;
|
||
}
|
||
|
||
if (!newPassword.trim()) {
|
||
alert('请输入新密码');
|
||
return;
|
||
}
|
||
|
||
if (newPassword.length < 8 || newPassword.length > 20) {
|
||
alert('密码长度必须在8-20位之间');
|
||
return;
|
||
}
|
||
|
||
if (!/^(?=.*[A-Za-z])(?=.*\d)/.test(newPassword)) {
|
||
alert('密码必须包含字母和数字');
|
||
return;
|
||
}
|
||
|
||
if (newPassword !== confirmPassword) {
|
||
alert('两次输入的新密码不一致');
|
||
return;
|
||
}
|
||
|
||
if (confirm('确认修改密码？')) {
|
||
alert('密码修改成功！请重新登录');
|
||
setTimeout(() => {
|
||
window.location.href = 'login.html';
|
||
}, 1500);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|