-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsettings.html
127 lines (121 loc) · 5.1 KB
/
settings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置 - 校园水电管家</title>
<!-- 优先加载关键 CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/settings.css">
</head>
<body>
<div class="layout">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="logo">
<img src="assets/images/logo.png" alt="校园水电管家LOGO" width="160" height="70" loading="lazy">
<h2>校园水电管家</h2>
</div>
<nav class="menu">
<ul>
<li><a href="main.html">首页</a></li>
<li class="submenu">
<a href="#">水电管理</a>
<ul>
<li><a href="bill-history.html">历史水电费账单</a></li>
<li><a href="bill-payment.html">水电费缴纳</a></li>
<li><a href="bill-analysis.html">水电费分析</a></li>
<li><a href="bill-preset.html">水电费预设置</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">校园水电论坛</a>
<ul>
<li><a href="forum-posts.html">帖子</a></li>
<li><a href="forum-post.html">发帖</a></li>
</ul>
</li>
<li><a href="feedback.html">反馈</a></li>
<li><a href="announcement.html">公告</a></li>
<li><a href="ranking.html">排行榜</a></li>
<li class="active"><a href="settings.html">设置</a></li>
</ul>
</nav>
</aside>
<!-- 主要内容区 -->
<main class="main-content">
<!-- 顶部栏 -->
<header class="top-bar">
<h1>校园水电管家</h1>
<div class="user-info">
<img src="assets/images/avatar.png" alt="用户头像" class="avatar" loading="lazy">
<span class="username">张三</span>
<button class="logout-btn">退出登录</button>
</div>
</header>
<!-- 设置内容区 -->
<div class="settings-container">
<h1>个人设置</h1>
<div class="panel">
<h3>个人信息</h3>
<div class="form-group">
<label>头像</label>
<div class="avatar-upload">
<img src="assets/images/avatar.png" alt="当前头像" class="current-avatar">
<div class="upload-actions">
<input type="file" id="avatarInput" accept="image/jpeg,image/png" hidden>
<button type="button" onclick="document.getElementById('avatarInput').click()">更换头像</button>
</div>
</div>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" readonly>
</div>
<div class="form-group">
<label for="building">楼号</label>
<input type="number" id="building" readonly>
</div>
<div class="form-group">
<label for="dormitory">宿舍号</label>
<input type="number" id="dormitory" readonly>
</div>
<div class="form-buttons">
<button type="button" class="submit-btn" onclick="showPasswordModal()">修改密码</button>
</div>
</div>
</div>
</main>
</div>
<!-- 密码修改模态框 -->
<div id="passwordModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>修改登录密码</h3>
<button class="close-btn" onclick="hidePasswordModal()">×</button>
</div>
<form id="passwordForm" class="modal-form">
<div class="form-group">
<label for="oldPassword">当前密码</label>
<input type="password" id="oldPassword" required>
</div>
<div class="form-group">
<label for="newPassword">新密码</label>
<input type="password" id="newPassword" required minlength="6" maxlength="20">
<p class="tip">密码长度6-20位，包含字母和数字</p>
</div>
<div class="form-group">
<label for="confirmPassword">确认新密码</label>
<input type="password" id="confirmPassword" required>
</div>
<div class="form-buttons">
<button type="submit" class="submit-btn">确认修改</button>
<button type="button" class="cancel-btn" onclick="hidePasswordModal()">取消</button>
</div>
</form>
</div>
</div>
<!-- 延迟加载 JS -->
<script src="js/settings.js" defer></script>
</body>
</html>