feat: 新增员工端应用主页与个人中心，优化应急三端页面
- 新增 employee-app/home/index.html 应用主页（功能按钮收起展开、体重管理、健康数据、智能监测24h曲线、膳食摄入） - 新增 employee-app/profile/ 个人中心模块（16页：个人资料、头像、密码、手机号、紧急联系人、设置等） - 修复 health-consult/index.html 返回导航逻辑 - 优化应急三端（驻场/操作/专业人员端）页面交互与截图 - 新增操作人员端、专业人员端 PRD 文档 - 更新 SITE_MAP 导航页 - 新增截图工具脚本（gen_screenshots.py、screenshot.js） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 修改头像 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #000; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: transparent; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #fff; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #fff; }
|
||||
.avatar-area { flex: 1; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-area__img { width: 280px; height: 280px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 120px; overflow: hidden; }
|
||||
/* 底部操作面板 */
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 34px; z-index: 100; }
|
||||
.action-sheet__item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet__item:active { background: #f5f5f5; }
|
||||
.action-sheet__cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; border-top: 8px solid #f5f5f5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">头像</span>
|
||||
</div>
|
||||
<div class="avatar-area">
|
||||
<div class="avatar-area__img">👤</div>
|
||||
</div>
|
||||
<!-- 底部操作面板：从手机相册选择 / 拍照 -->
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet__item">从手机相册选择</div>
|
||||
<div class="action-sheet__item">拍照</div>
|
||||
<div class="action-sheet__cancel" onclick="history.back()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 查看头像 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #000; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: transparent; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #fff; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #fff; }
|
||||
.avatar-area { flex: 1; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-area__img { width: 280px; height: 280px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 120px; overflow: hidden; }
|
||||
.avatar-area__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">头像</span>
|
||||
</div>
|
||||
<!-- 头像大图展示 -->
|
||||
<div class="avatar-area">
|
||||
<div class="avatar-area__img">👤</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 修改密码 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; }
|
||||
.input-group { margin-bottom: 20px; }
|
||||
.input-group__label { font-size: 14px; color: #666; margin-bottom: 8px; }
|
||||
.input-group__field { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 10px 0; }
|
||||
.input-group__field input { flex: 1; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-group__field input::placeholder { color: #ccc; }
|
||||
.input-group__field .toggle-eye { font-size: 18px; color: #999; cursor: pointer; }
|
||||
.pwd-hint { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.6; }
|
||||
.pwd-hint strong { color: #ff4d4f; font-weight: 500; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
.alt-link { text-align: center; margin-top: 20px; font-size: 13px; color: #1677ff; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='settings.html'">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">修改密码</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">原密码：</div>
|
||||
<div class="input-group__field">
|
||||
<input type="password" placeholder="请输入密码">
|
||||
<span class="toggle-eye">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">新密码：</div>
|
||||
<div class="input-group__field">
|
||||
<input type="password" placeholder="请输入密码">
|
||||
<span class="toggle-eye">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">确认密码：</div>
|
||||
<div class="input-group__field">
|
||||
<input type="password" placeholder="请输入密码">
|
||||
<span class="toggle-eye">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pwd-hint">密码不能少于12位，必须包含<strong>大小写字母、数字、特殊符号</strong>。</div>
|
||||
<button class="submit-btn">确定</button>
|
||||
<!-- [交互] 忘记密码跳转身份验证 -->
|
||||
<div class="alt-link" onclick="location.href='forgot-password-verify.html'">忘记密码？</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 身份证验证 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.form-area__desc { font-size: 14px; color: #999; margin-bottom: 32px; line-height: 1.6; }
|
||||
.input-row { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 12px 0; margin-bottom: 8px; }
|
||||
.input-row input { flex: 1; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-row input::placeholder { color: #ccc; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">身份证验证</div>
|
||||
<div class="form-area__desc">请输入该账号身份证号完成验证</div>
|
||||
<div class="input-row">
|
||||
<input type="text" placeholder="请输入身份证">
|
||||
</div>
|
||||
<!-- [交互] 验证通过后跳转新手机号验证 -->
|
||||
<button class="submit-btn" onclick="location.href='change-phone-verify-new.html'">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 新手机号验证 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.input-row { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 12px 0; margin-bottom: 8px; }
|
||||
.input-row input { flex: 1; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-row input::placeholder { color: #ccc; }
|
||||
.input-row__btn { font-size: 14px; color: #1677ff; cursor: pointer; white-space: nowrap; padding-left: 12px; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: #666; }
|
||||
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">新手机号验证</div>
|
||||
<div class="input-row">
|
||||
<input type="tel" placeholder="请输入手机号">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<input type="text" placeholder="请输入验证码">
|
||||
<span class="input-row__btn">获取验证码</span>
|
||||
</div>
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" checked> 设为默认
|
||||
</div>
|
||||
<!-- [交互] 确定后返回手机号列表 -->
|
||||
<button class="submit-btn" onclick="location.href='phone-list.html'">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 原手机号验证 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.form-area__desc { font-size: 14px; color: #999; margin-bottom: 32px; line-height: 1.6; }
|
||||
.input-row { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 12px 0; margin-bottom: 8px; }
|
||||
.input-row input { flex: 1; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-row input::placeholder { color: #ccc; }
|
||||
.input-row__btn { font-size: 14px; color: #1677ff; cursor: pointer; white-space: nowrap; padding-left: 12px; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
/* [交互] 手机号无法接收验证码链接 */
|
||||
.alt-link { text-align: center; margin-top: 20px; font-size: 13px; color: #1677ff; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='phone-list.html'">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">原手机号验证</div>
|
||||
<div class="form-area__desc">请输入手机号18545643256验证码，完成手机验证</div>
|
||||
<div class="input-row">
|
||||
<input type="text" placeholder="请输入验证码">
|
||||
<!-- [交互] 获取验证码，120秒倒计时 -->
|
||||
<span class="input-row__btn">获取验证码</span>
|
||||
</div>
|
||||
<!-- [交互] 点击确定跳转 change-phone-verify-new.html -->
|
||||
<button class="submit-btn" onclick="location.href='change-phone-verify-new.html'">确定</button>
|
||||
<!-- [交互] 手机号无法接收验证码，跳转身份证验证 -->
|
||||
<div class="alt-link" onclick="location.href='change-phone-unavailable.html'">手机号无法接收验证码？</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 紧急联系人 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; padding: 0 0 34px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 分组 */
|
||||
.section { margin: 16px 16px 0; }
|
||||
.section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.section__hint { font-size: 12px; color: #999; }
|
||||
.section__add { font-size: 13px; color: #1677ff; cursor: pointer; display: flex; align-items: center; gap: 4px; }
|
||||
/* 联系人卡片 */
|
||||
.contact-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); position: relative; }
|
||||
.contact-card__row { display: flex; align-items: center; margin-bottom: 6px; }
|
||||
.contact-card__row:last-child { margin-bottom: 0; }
|
||||
.contact-card__label { font-size: 13px; color: #999; width: 60px; flex-shrink: 0; }
|
||||
.contact-card__value { font-size: 14px; color: #1a1a1a; flex: 1; }
|
||||
.contact-card__name { font-size: 16px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.contact-card__actions { display: flex; gap: 16px; }
|
||||
.contact-card__btn { font-size: 13px; cursor: pointer; padding: 4px 0; }
|
||||
.contact-card__btn--edit { color: #1677ff; }
|
||||
.contact-card__btn--delete { color: #ff4d4f; }
|
||||
/* 空状态 */
|
||||
.empty-state { text-align: center; padding: 32px 16px; color: #999; font-size: 14px; }
|
||||
/* 弹窗遮罩 */
|
||||
.modal-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-mask.active { display: flex; }
|
||||
.modal-box { width: 320px; background: #fff; border-radius: 16px; overflow: hidden; max-height: 600px; }
|
||||
.modal-box__header { padding: 16px 20px; font-size: 17px; font-weight: 700; text-align: center; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.modal-box__close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #999; cursor: pointer; }
|
||||
.modal-box__body { padding: 20px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group__label { font-size: 14px; color: #666; margin-bottom: 6px; }
|
||||
.form-group__input { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; font-size: 14px; color: #1a1a1a; outline: none; transition: border-color .2s; }
|
||||
.form-group__input:focus { border-color: #1677ff; }
|
||||
.form-group__select { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; font-size: 14px; color: #1a1a1a; outline: none; background: #fff; }
|
||||
.modal-box__footer { padding: 0 20px 20px; display: flex; gap: 12px; }
|
||||
.btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.btn--primary { background: #1677ff; color: #fff; }
|
||||
.btn--primary:active { opacity: 0.85; }
|
||||
/* 确认弹窗 */
|
||||
.confirm-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.confirm-box__title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; }
|
||||
.confirm-box__desc { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; }
|
||||
.confirm-box__actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.confirm-box__btn { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; text-align: center; }
|
||||
.confirm-box__btn--cancel { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.confirm-box__btn--danger { color: #ff4d4f; font-weight: 600; }
|
||||
/* 搜索选择框 */
|
||||
.search-select__input-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; height: 40px; transition: border-color .2s; }
|
||||
.search-select__input-wrap:focus-within { border-color: #1677ff; }
|
||||
.search-select__input { flex: 1; border: none; outline: none; font-size: 14px; color: #1a1a1a; background: transparent; }
|
||||
.search-select__input::placeholder { color: #ccc; }
|
||||
.search-select__list { max-height: 200px; overflow-y: auto; margin-top: 8px; border: 1px solid #e8e8e8; border-radius: 8px; display: none; }
|
||||
.search-select__list.visible { display: block; }
|
||||
.search-select__item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background .15s; }
|
||||
.search-select__item:last-child { border-bottom: none; }
|
||||
.search-select__item:hover, .search-select__item.selected { background: #e6f4ff; }
|
||||
.search-select__item-name { font-size: 14px; color: #1a1a1a; font-weight: 500; }
|
||||
.search-select__item-info { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.search-select__empty { padding: 16px; text-align: center; font-size: 13px; color: #999; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='./index.html'">‹</span>
|
||||
<span class="nav-title">紧急联系人</span>
|
||||
</div>
|
||||
<div class="scroll-content" id="contactList">
|
||||
<!-- 由 JS 渲染 -->
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑单位联系人弹窗 - 搜索选择模式 -->
|
||||
<div id="modal-unit" class="modal-mask">
|
||||
<div class="modal-box">
|
||||
<div class="modal-box__header"><span id="modal-unit-title">选择单位联系人</span><span class="modal-box__close" onclick="closeModal('modal-unit')">×</span></div>
|
||||
<div class="modal-box__body">
|
||||
<div class="search-select">
|
||||
<div class="search-select__input-wrap">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" style="flex-shrink:0;"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input class="search-select__input" id="unit-search" placeholder="搜索姓名" oninput="onUnitSearch(this.value)">
|
||||
</div>
|
||||
<div class="search-select__list" id="unit-search-list"></div>
|
||||
</div>
|
||||
<!-- 选中后显示的信息预览 -->
|
||||
<div id="unit-preview" style="display:none;margin-top:16px;padding:12px;background:#f5f7fa;border-radius:8px;">
|
||||
<div style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:8px;" id="preview-name"></div>
|
||||
<div style="font-size:13px;color:#666;margin-bottom:4px;" id="preview-company"></div>
|
||||
<div style="font-size:13px;color:#666;margin-bottom:4px;" id="preview-dept"></div>
|
||||
<div style="font-size:13px;color:#666;" id="preview-phone"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-box__footer">
|
||||
<button class="btn btn--cancel" onclick="closeModal('modal-unit')">取消</button>
|
||||
<button class="btn btn--primary" onclick="saveUnitContact()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑亲友联系人弹窗 -->
|
||||
<div id="modal-friend" class="modal-mask">
|
||||
<div class="modal-box">
|
||||
<div class="modal-box__header"><span id="modal-friend-title">新增亲友联系人</span><span class="modal-box__close" onclick="closeModal('modal-friend')">×</span></div>
|
||||
<div class="modal-box__body">
|
||||
<div class="form-group"><div class="form-group__label">姓名</div><input class="form-group__input" id="friend-name" placeholder="请输入姓名"></div>
|
||||
<div class="form-group"><div class="form-group__label">关系</div>
|
||||
<select class="form-group__select" id="friend-relation">
|
||||
<option value="">请选择关系</option>
|
||||
<option value="父亲">父亲</option><option value="母亲">母亲</option>
|
||||
<option value="配偶">配偶</option><option value="子女">子女</option>
|
||||
<option value="兄弟">兄弟</option><option value="姐妹">姐妹</option>
|
||||
<option value="朋友">朋友</option><option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><div class="form-group__label">联系电话</div><input class="form-group__input" id="friend-phone" placeholder="请输入联系电话" type="tel"></div>
|
||||
</div>
|
||||
<div class="modal-box__footer">
|
||||
<button class="btn btn--cancel" onclick="closeModal('modal-friend')">取消</button>
|
||||
<button class="btn btn--primary" onclick="saveFriendContact()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认弹窗 -->
|
||||
<div id="modal-delete" class="modal-mask">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-box__title">删除联系人</div>
|
||||
<div class="confirm-box__desc">确认删除该紧急联系人？</div>
|
||||
<div class="confirm-box__actions">
|
||||
<button class="confirm-box__btn confirm-box__btn--cancel" onclick="closeModal('modal-delete')">取消</button>
|
||||
<button class="confirm-box__btn confirm-box__btn--danger" onclick="confirmDelete()">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 数据模型 */
|
||||
var unitContact = { name: '李建军', company: '公司机关', dept: '安全环保部', phone: '13899876543' };
|
||||
var friendContacts = [
|
||||
{ name: '张美玲', relation: '配偶', phone: '13566778899' },
|
||||
{ name: '李国强', relation: '父亲', phone: '13012345678' }
|
||||
];
|
||||
|
||||
/* 模拟单位通讯录数据（搜索用） */
|
||||
var staffList = [
|
||||
{ name: '李建军', company: '公司机关', dept: '安全环保部', phone: '13899876543' },
|
||||
{ name: '李明辉', company: '公司机关', dept: '财务部', phone: '13700112233' },
|
||||
{ name: '王晓东', company: '采油一厂', dept: '生产运行科', phone: '13988776655' },
|
||||
{ name: '张伟', company: '采油二厂', dept: '安全环保科', phone: '15099887766' },
|
||||
{ name: '刘洋', company: '公司机关', dept: '人力资源部', phone: '13611223344' },
|
||||
{ name: '陈思远', company: '采气厂', dept: '技术科', phone: '13855667788' },
|
||||
{ name: '赵丽华', company: '公司机关', dept: '健康科', phone: '13922334455' },
|
||||
{ name: '李国栋', company: '炼化公司', dept: '生产部', phone: '13766554433' }
|
||||
];
|
||||
|
||||
var selectedStaff = null;
|
||||
var editingFriendIdx = -1;
|
||||
var deletingType = '';
|
||||
var deletingIdx = -1;
|
||||
|
||||
/* 渲染列表 */
|
||||
function render() {
|
||||
var html = '';
|
||||
/* 单位联系人 */
|
||||
html += '<div class="section">';
|
||||
html += '<div class="section__header"><span class="section__title">单位联系人</span><span class="section__hint">限1人</span></div>';
|
||||
if (unitContact) {
|
||||
html += '<div class="contact-card">';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__name">' + unitContact.name + '</span>';
|
||||
html += '<div class="contact-card__actions"><span class="contact-card__btn contact-card__btn--edit" onclick="editUnit()">编辑</span><span class="contact-card__btn contact-card__btn--delete" onclick="deleteContact(\'unit\',-1)">删除</span></div></div>';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__label">单位</span><span class="contact-card__value">' + unitContact.company + '</span></div>';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__label">部门</span><span class="contact-card__value">' + unitContact.dept + '</span></div>';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__label">电话</span><span class="contact-card__value">' + unitContact.phone + '</span></div>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '<div class="contact-card" style="text-align:center;cursor:pointer;" onclick="addUnit()"><span style="color:#1677ff;font-size:14px;">+ 添加单位联系人</span></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
/* 亲友联系人 */
|
||||
html += '<div class="section">';
|
||||
html += '<div class="section__header"><span class="section__title">亲友联系人</span><span class="section__hint">最多3人</span>';
|
||||
if (friendContacts.length < 3) {
|
||||
html += '<span class="section__add" onclick="addFriend()">+ 新增</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
if (friendContacts.length === 0) {
|
||||
html += '<div class="contact-card"><div class="empty-state">暂无亲友联系人</div></div>';
|
||||
}
|
||||
for (var i = 0; i < friendContacts.length; i++) {
|
||||
var f = friendContacts[i];
|
||||
html += '<div class="contact-card">';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__name">' + f.name + '</span>';
|
||||
html += '<div class="contact-card__actions"><span class="contact-card__btn contact-card__btn--edit" onclick="editFriend(' + i + ')">编辑</span><span class="contact-card__btn contact-card__btn--delete" onclick="deleteContact(\'friend\',' + i + ')">删除</span></div></div>';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__label">关系</span><span class="contact-card__value">' + f.relation + '</span></div>';
|
||||
html += '<div class="contact-card__row"><span class="contact-card__label">电话</span><span class="contact-card__value">' + f.phone + '</span></div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
document.getElementById('contactList').innerHTML = html;
|
||||
}
|
||||
|
||||
/* 弹窗控制 */
|
||||
function openModal(id) { document.getElementById(id).classList.add('active'); }
|
||||
function closeModal(id) { document.getElementById(id).classList.remove('active'); }
|
||||
|
||||
/* 单位联系人 - 搜索选择模式 */
|
||||
function addUnit() {
|
||||
document.getElementById('modal-unit-title').textContent = '选择单位联系人';
|
||||
document.getElementById('unit-search').value = '';
|
||||
document.getElementById('unit-search-list').classList.remove('visible');
|
||||
document.getElementById('unit-search-list').innerHTML = '';
|
||||
document.getElementById('unit-preview').style.display = 'none';
|
||||
selectedStaff = null;
|
||||
openModal('modal-unit');
|
||||
}
|
||||
function editUnit() {
|
||||
document.getElementById('modal-unit-title').textContent = '更换单位联系人';
|
||||
document.getElementById('unit-search').value = '';
|
||||
document.getElementById('unit-search-list').classList.remove('visible');
|
||||
document.getElementById('unit-search-list').innerHTML = '';
|
||||
selectedStaff = unitContact;
|
||||
showPreview(unitContact);
|
||||
openModal('modal-unit');
|
||||
}
|
||||
function onUnitSearch(keyword) {
|
||||
var list = document.getElementById('unit-search-list');
|
||||
var kw = keyword.trim();
|
||||
if (!kw) { list.classList.remove('visible'); list.innerHTML = ''; return; }
|
||||
var results = staffList.filter(function(s) { return s.name.indexOf(kw) !== -1; });
|
||||
if (results.length === 0) {
|
||||
list.innerHTML = '<div class="search-select__empty">未找到匹配的联系人</div>';
|
||||
} else {
|
||||
var html = '';
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var s = results[i];
|
||||
html += '<div class="search-select__item" onclick="selectStaff(' + staffList.indexOf(s) + ')">';
|
||||
html += '<div class="search-select__item-name">' + s.name + '</div>';
|
||||
html += '<div class="search-select__item-info">' + s.company + ' · ' + s.dept + ' · ' + s.phone + '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
list.innerHTML = html;
|
||||
}
|
||||
list.classList.add('visible');
|
||||
}
|
||||
function selectStaff(idx) {
|
||||
selectedStaff = staffList[idx];
|
||||
document.getElementById('unit-search').value = selectedStaff.name;
|
||||
document.getElementById('unit-search-list').classList.remove('visible');
|
||||
showPreview(selectedStaff);
|
||||
}
|
||||
function showPreview(staff) {
|
||||
var el = document.getElementById('unit-preview');
|
||||
el.style.display = 'block';
|
||||
document.getElementById('preview-name').textContent = staff.name;
|
||||
document.getElementById('preview-company').textContent = '单位：' + staff.company;
|
||||
document.getElementById('preview-dept').textContent = '部门：' + staff.dept;
|
||||
document.getElementById('preview-phone').textContent = '电话：' + staff.phone;
|
||||
}
|
||||
function saveUnitContact() {
|
||||
if (!selectedStaff) { alert('请搜索并选择一位单位联系人'); return; }
|
||||
unitContact = { name: selectedStaff.name, company: selectedStaff.company, dept: selectedStaff.dept, phone: selectedStaff.phone };
|
||||
closeModal('modal-unit');
|
||||
render();
|
||||
}
|
||||
|
||||
/* 亲友联系人 */
|
||||
function addFriend() {
|
||||
editingFriendIdx = -1;
|
||||
document.getElementById('modal-friend-title').textContent = '新增亲友联系人';
|
||||
document.getElementById('friend-name').value = '';
|
||||
document.getElementById('friend-relation').value = '';
|
||||
document.getElementById('friend-phone').value = '';
|
||||
openModal('modal-friend');
|
||||
}
|
||||
function editFriend(idx) {
|
||||
editingFriendIdx = idx;
|
||||
var f = friendContacts[idx];
|
||||
document.getElementById('modal-friend-title').textContent = '编辑亲友联系人';
|
||||
document.getElementById('friend-name').value = f.name;
|
||||
document.getElementById('friend-relation').value = f.relation;
|
||||
document.getElementById('friend-phone').value = f.phone;
|
||||
openModal('modal-friend');
|
||||
}
|
||||
function saveFriendContact() {
|
||||
var n = document.getElementById('friend-name').value.trim();
|
||||
var r = document.getElementById('friend-relation').value;
|
||||
var p = document.getElementById('friend-phone').value.trim();
|
||||
if (!n || !r || !p) { alert('请填写完整信息'); return; }
|
||||
if (editingFriendIdx === -1) {
|
||||
friendContacts.push({ name: n, relation: r, phone: p });
|
||||
} else {
|
||||
friendContacts[editingFriendIdx] = { name: n, relation: r, phone: p };
|
||||
}
|
||||
closeModal('modal-friend');
|
||||
render();
|
||||
}
|
||||
|
||||
/* 删除 */
|
||||
function deleteContact(type, idx) {
|
||||
deletingType = type;
|
||||
deletingIdx = idx;
|
||||
openModal('modal-delete');
|
||||
}
|
||||
function confirmDelete() {
|
||||
if (deletingType === 'unit') { unitContact = null; }
|
||||
else if (deletingType === 'friend') { friendContacts.splice(deletingIdx, 1); }
|
||||
closeModal('modal-delete');
|
||||
render();
|
||||
}
|
||||
|
||||
/* 初始化 */
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 重置密码 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; }
|
||||
.input-group { margin-bottom: 20px; }
|
||||
.input-group__label { font-size: 14px; color: #666; margin-bottom: 8px; }
|
||||
.input-group__field { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 10px 0; }
|
||||
.input-group__field input { flex: 1; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-group__field input::placeholder { color: #ccc; }
|
||||
.input-group__field .toggle-eye { font-size: 18px; color: #999; cursor: pointer; }
|
||||
.pwd-hint { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.6; }
|
||||
.pwd-hint strong { color: #ff4d4f; font-weight: 500; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">重置密码</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">新密码：</div>
|
||||
<div class="input-group__field">
|
||||
<input type="password" placeholder="请输入密码">
|
||||
<span class="toggle-eye">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">确认密码：</div>
|
||||
<div class="input-group__field">
|
||||
<input type="password" placeholder="请输入密码">
|
||||
<span class="toggle-eye">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pwd-hint">密码不能少于12位，必须包含<strong>大小写字母、数字、特殊符号</strong>。</div>
|
||||
<!-- [交互] 重置成功后返回设置页 -->
|
||||
<button class="submit-btn" onclick="location.href='settings.html'">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 身份验证 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.form-area { padding: 32px 24px; }
|
||||
.form-area__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; }
|
||||
.input-group { margin-bottom: 20px; }
|
||||
.input-group__label { font-size: 14px; color: #666; margin-bottom: 8px; }
|
||||
.input-group__field { border-bottom: 1px solid #e8e8e8; padding: 10px 0; }
|
||||
.input-group__field input { width: 100%; border: none; outline: none; font-size: 16px; color: #1a1a1a; background: transparent; }
|
||||
.input-group__field input::placeholder { color: #ccc; }
|
||||
.submit-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: #1677ff; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 32px; }
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="form-area">
|
||||
<div class="form-area__title">身份验证</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">姓名：</div>
|
||||
<div class="input-group__field"><input type="text" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">手机号：</div>
|
||||
<div class="input-group__field"><input type="tel" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__label">身份证号：</div>
|
||||
<div class="input-group__field"><input type="text" placeholder="请输入"></div>
|
||||
</div>
|
||||
<!-- [交互] 验证通过后跳转重置密码 -->
|
||||
<button class="submit-btn" onclick="location.href='forgot-password-reset.html'">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 我的 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 底部 Tab */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
/* 头部用户信息 */
|
||||
.profile-header { background: linear-gradient(135deg, #1677ff, #0958d9); padding: 60px 20px 24px; flex-shrink: 0; position: relative; }
|
||||
.profile-header__user { display: flex; align-items: center; gap: 14px; }
|
||||
.profile-header__avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 32px; border: 3px solid rgba(255,255,255,0.5); cursor: pointer; overflow: hidden; }
|
||||
.profile-header__avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.profile-header__info { flex: 1; }
|
||||
.profile-header__name { color: #fff; font-size: 20px; font-weight: 700; }
|
||||
.profile-header__dept { color: rgba(255,255,255,0.8); font-size: 13px; margin-top: 3px; }
|
||||
.profile-header__id { color: rgba(255,255,255,0.7); font-size: 12px; margin-top: 4px; }
|
||||
/* 编辑按钮 */
|
||||
.profile-header__edit { position: absolute; top: 56px; right: 20px; color: rgba(255,255,255,0.9); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
|
||||
/* 应用记录入口 */
|
||||
.app-record { margin: 12px 16px 0; background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer; }
|
||||
.app-record__label { font-size: 15px; color: #1a1a1a; font-weight: 500; display: flex; align-items: center; gap: 8px; }
|
||||
/* PLACEHOLDER_MENU_CARD */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 头部用户信息区 -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-header__user">
|
||||
<!-- [交互] 点击头像跳转查看头像页 avatar-view.html -->
|
||||
<div class="profile-header__avatar" onclick="location.href='avatar-view.html'">👤</div>
|
||||
<div class="profile-header__info">
|
||||
<div class="profile-header__name">张旭晨</div>
|
||||
<div class="profile-header__dept">公司机关-财务部</div>
|
||||
<div class="profile-header__id">员工编号：87566650</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击编辑跳转个人资料页 personal-info.html -->
|
||||
<div class="profile-header__edit" onclick="location.href='personal-info.html'">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
编辑
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- [交互] 紧急联系人入口，跳转 emergency-contacts.html -->
|
||||
<div class="app-record" onclick="location.href='emergency-contacts.html'" style="cursor:pointer;">
|
||||
<span class="app-record__label">🆘 紧急联系人</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div style="margin:12px 16px 0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.05);">
|
||||
<!-- [交互] 应用记录 -->
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📋</span>
|
||||
<span style="font-size:15px;color:#1a1a1a;flex:1;">应用记录</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 我的点赞 -->
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">👍</span>
|
||||
<span style="font-size:15px;color:#1a1a1a;flex:1;">我的点赞</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 我的收藏 -->
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">⭐</span>
|
||||
<span style="font-size:15px;color:#1a1a1a;flex:1;">我的收藏</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 设置，跳转 settings.html -->
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;" onclick="location.href='settings.html'">
|
||||
<span style="font-size:18px;margin-right:12px;">⚙️</span>
|
||||
<span style="font-size:15px;color:#1a1a1a;flex:1;">设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<div style="margin:16px 16px;">
|
||||
<button onclick="openModal('modal-logout')" style="width:100%;height:48px;border:none;border-radius:12px;background:#fff1f0;color:#ff4d4f;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,0.05);">退出登录</button>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录确认弹窗 -->
|
||||
<div id="modal-logout" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center;">
|
||||
<div style="width:280px;background:#fff;border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">退出登录</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;">确认退出当前账号？</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ff4d4f;font-weight:600;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<!-- [交互] 点击跳转至: ../home/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../home/index.html'"><span class="tab-icon">🏠</span><span class="tab-label">应用</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">📁</span><span class="tab-label">档案</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">📚</span><span class="tab-label">知识</span></div>
|
||||
<div class="tab-item active"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(id){var m=document.getElementById(id);if(m)m.style.display='flex';}
|
||||
function closeModal(id){var m=document.getElementById(id);if(m)m.style.display='none';}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 个人资料 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.info-group { background: #fff; margin: 12px 0; }
|
||||
.info-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.info-item:last-child { border-bottom: none; }
|
||||
.info-item__label { font-size: 15px; color: #666; width: 80px; flex-shrink: 0; }
|
||||
.info-item__value { font-size: 15px; color: #1a1a1a; flex: 1; text-align: right; }
|
||||
.info-item__arrow { margin-left: 8px; }
|
||||
.info-item__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 导航栏，返回我的主页 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='./index.html'">‹</span>
|
||||
<span class="nav-title">个人资料</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="info-group">
|
||||
<!-- [交互] 点击头像行跳转 avatar-view.html -->
|
||||
<div class="info-item" style="cursor:pointer;" onclick="location.href='avatar-view.html'">
|
||||
<span class="info-item__label">头像</span>
|
||||
<div style="flex:1;display:flex;justify-content:flex-end;">
|
||||
<div class="info-item__avatar">👤</div>
|
||||
</div>
|
||||
<svg class="info-item__arrow" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">姓名</span>
|
||||
<span class="info-item__value">张旭</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">员工编号</span>
|
||||
<span class="info-item__value">56999852</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">单位</span>
|
||||
<span class="info-item__value">公司机关</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">部门</span>
|
||||
<span class="info-item__value">健康科</span>
|
||||
</div>
|
||||
<!-- [交互] 点击手机号行跳转 phone-list.html -->
|
||||
<div class="info-item" style="cursor:pointer;" onclick="location.href='phone-list.html'">
|
||||
<span class="info-item__label">手机号</span>
|
||||
<span class="info-item__value">18544555589</span>
|
||||
<svg class="info-item__arrow" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 手机号 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.phone-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; display: flex; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
|
||||
.phone-card__number { font-size: 17px; color: #1a1a1a; font-weight: 600; flex: 1; }
|
||||
.phone-card__badge { font-size: 11px; color: #1677ff; background: #e6f4ff; padding: 2px 8px; border-radius: 10px; margin-right: 12px; }
|
||||
.phone-card__edit { font-size: 14px; color: #1677ff; cursor: pointer; }
|
||||
.add-phone { margin: 0 16px; background: #fff; border-radius: 12px; padding: 16px; text-align: center; color: #1677ff; font-size: 15px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
/* 底部操作面板 */
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; }
|
||||
.action-sheet-mask.active { display: flex; align-items: flex-end; }
|
||||
.action-sheet { width: 100%; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 34px; }
|
||||
.action-sheet__item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet__item--danger { color: #ff4d4f; }
|
||||
.action-sheet__item:active { background: #f5f5f5; }
|
||||
.action-sheet__cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; border-top: 8px solid #f5f5f5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='personal-info.html'">‹</span>
|
||||
<span class="nav-title">手机号</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 手机号卡片 -->
|
||||
<div class="phone-card">
|
||||
<span class="phone-card__number">15899655523</span>
|
||||
<span class="phone-card__badge">默认</span>
|
||||
<!-- [交互] 点击编辑弹出底部操作面板 -->
|
||||
<span class="phone-card__edit" onclick="openSheet()">编辑</span>
|
||||
</div>
|
||||
<!-- [交互] 新增手机号，跳转 change-phone-verify-new.html -->
|
||||
<div class="add-phone" onclick="location.href='change-phone-verify-new.html'">
|
||||
<span style="font-size:18px;">+</span> 新增手机号
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作面板：修改/删除/设为默认 -->
|
||||
<div id="action-sheet" class="action-sheet-mask">
|
||||
<div class="action-sheet">
|
||||
<div style="padding:12px 16px;font-size:13px;color:#999;text-align:center;">15899655523</div>
|
||||
<!-- [交互] 修改 → 跳转修改手机号流程 -->
|
||||
<div class="action-sheet__item" onclick="location.href='change-phone-verify-old.html'">修改</div>
|
||||
<div class="action-sheet__item action-sheet__item--danger">删除</div>
|
||||
<div class="action-sheet__item">设为默认</div>
|
||||
<div class="action-sheet__cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openSheet(){document.getElementById('action-sheet').classList.add('active');}
|
||||
function closeSheet(){document.getElementById('action-sheet').classList.remove('active');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 设置 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.section-label { font-size: 13px; color: #999; padding: 16px 16px 8px; }
|
||||
.menu-group { background: #fff; }
|
||||
.menu-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item__label { font-size: 15px; color: #1a1a1a; flex: 1; }
|
||||
.menu-item__value { font-size: 14px; color: #999; margin-right: 8px; }
|
||||
.menu-item__arrow svg { display: block; }
|
||||
.switch { width: 44px; height: 26px; border-radius: 13px; background: #e8e8e8; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
|
||||
.switch.on { background: #1677ff; }
|
||||
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .2s; }
|
||||
.switch.on::after { transform: translateX(18px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='./index.html'">‹</span>
|
||||
<span class="nav-title">设置</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 账号 -->
|
||||
<div class="section-label">账号</div>
|
||||
<div class="menu-group">
|
||||
<!-- [交互] 跳转个人资料 -->
|
||||
<div class="menu-item" onclick="location.href='personal-info.html'">
|
||||
<span class="menu-item__label">个人资料</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
<!-- [交互] 跳转修改密码 -->
|
||||
<div class="menu-item" onclick="location.href='change-password.html'">
|
||||
<span class="menu-item__label">修改密码</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 通用 -->
|
||||
<div class="section-label">通用</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">主题色</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">健康精灵配置</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 短信提醒 -->
|
||||
<div class="section-label">短信提醒</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">体重管理报名</span>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">体检预约</span>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 关于 -->
|
||||
<div class="section-label">关于</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">版本号</span>
|
||||
<span class="menu-item__value">3.1.03</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">检查更新</span>
|
||||
<span class="menu-item__value">已是最新版本</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">备案号</span>
|
||||
<span class="menu-item__value">陕ICP备1558852号-4A</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">用户协议</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item__label">隐私政策</span>
|
||||
<span class="menu-item__arrow"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user