122 lines
2.9 KiB
HTML
122 lines
2.9 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>个人中心 - 郑州智慧工地</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<style>
|
||
.profile-header {
|
||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||
padding: 40px 20px 32px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.profile-avatar {
|
||
font-size: 72px;
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.profile-role {
|
||
font-size: 14px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.profile-menu {
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
background-color: var(--color-card);
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.menu-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.menu-label {
|
||
font-size: 15px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.logout-btn {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 14px 20px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-danger);
|
||
background-color: var(--color-card);
|
||
border: none;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.logout-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="top-bar">
|
||
<a href="javascript:history.back()" class="top-bar-back">‹</a>
|
||
<span class="top-bar-title">个人中心</span>
|
||
<span class="top-bar-right"></span>
|
||
</header>
|
||
|
||
<div class="profile-header">
|
||
<div class="profile-avatar">👷</div>
|
||
<div class="profile-name" id="userName"></div>
|
||
<div class="profile-role" id="userRole"></div>
|
||
</div>
|
||
|
||
<div class="profile-menu">
|
||
<div class="menu-item">
|
||
<span class="menu-icon">📱</span>
|
||
<span class="menu-label" id="userPhone"></span>
|
||
</div>
|
||
<button class="logout-btn btn-secondary" onclick="logout()">退出登录</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
if (!requireAuth()) {}
|
||
|
||
document.getElementById('userName').textContent = MOCK_USER.realName;
|
||
document.getElementById('userRole').textContent = MOCK_USER.role;
|
||
document.getElementById('userPhone').textContent = MOCK_USER.phone;
|
||
|
||
function logout() {
|
||
if (!confirm('确定退出登录？')) return;
|
||
clearToken();
|
||
location.href = 'login.html';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|