155 lines
3.8 KiB
HTML
155 lines
3.8 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="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
|
|
<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 {
|
|
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-avatar i {
|
|
font-size: 64px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.profile-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.profile-role {
|
|
font-size: 14px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.page-hd {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.page-hd__back {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-hd__title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.weui-cells {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.weui-cell__icon {
|
|
font-size: 20px;
|
|
color: var(--color-primary);
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.logout-wrap {
|
|
padding: 16px;
|
|
}
|
|
|
|
.logout-btn {
|
|
color: var(--color-danger) !important;
|
|
border-color: var(--color-danger) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<!-- 顶栏 page-hd -->
|
|
<header class="page-hd">
|
|
<a href="index.html" class="page-hd__back">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<span class="page-hd__title">个人中心</span>
|
|
</header>
|
|
|
|
<div class="page-bd">
|
|
<!-- profile-header -->
|
|
<div class="profile-header">
|
|
<div class="profile-avatar">
|
|
<i class="ri-hammer-line"></i>
|
|
</div>
|
|
<div class="profile-name" id="userName"></div>
|
|
<div class="profile-role" id="userRole"></div>
|
|
</div>
|
|
|
|
<!-- weui-cells 菜单 -->
|
|
<div class="weui-cells">
|
|
<div class="weui-cell">
|
|
<div class="weui-cell__icon">
|
|
<i class="ri-phone-line"></i>
|
|
</div>
|
|
<div class="weui-cell__bd">
|
|
<p class="weui-cell__desc">手机号</p>
|
|
<p class="weui-cell__value" id="userPhone"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退出登录按钮 -->
|
|
<div class="logout-wrap">
|
|
<a href="javascript:;" class="weui-btn weui-btn_plain-primary logout-btn" onclick="logout()">
|
|
<i class="ri-logout-box-r-line"></i>
|
|
退出登录
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/mock.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>
|