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
@@ -154,7 +154,7 @@
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 + 标题 + 右侧消息图标 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" style="cursor:default;color:#999;">← 返回</span>
|
||||
<span class="nav-back" onclick="goBackFromSource()">← 返回</span>
|
||||
<span class="nav-title">健康咨询</span>
|
||||
|
||||
</div>
|
||||
@@ -261,6 +261,20 @@
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
<!-- index.html 是模块入口页，返回按钮仅作占位，无点击事件 -->
|
||||
<script>
|
||||
function goBackFromSource() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var from = params.get('from');
|
||||
if (from === 'index') {
|
||||
window.location.href = '../home/index.html';
|
||||
return;
|
||||
}
|
||||
if (document.referrer) {
|
||||
history.back();
|
||||
return;
|
||||
}
|
||||
window.location.href = '../home/index.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,419 @@
|
||||
<!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: #f5f7fa; 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; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.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; }
|
||||
/* 功能按钮区 */
|
||||
.func-area { background: #fff; padding: 16px 12px 12px; }
|
||||
.func-grid { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 16px; }
|
||||
.func-grid.collapsed .func-item:nth-child(n+6) { display: none; }
|
||||
.func-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
|
||||
.func-item__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.func-item__icon svg { width: 24px; height: 24px; }
|
||||
.func-item__name { font-size: 11px; color: #333; text-align: center; }
|
||||
.func-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: #999; margin-top: 8px; cursor: pointer; user-select: none; }
|
||||
.func-toggle svg { width: 12px; height: 12px; }
|
||||
/* 模块通用 */
|
||||
.module { margin: 10px 12px 0; background: #fff; border-radius: 12px; padding: 16px; }
|
||||
.module__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.module__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.module__more { font-size: 12px; color: #999; cursor: pointer; }
|
||||
/* 体重管理 */
|
||||
.weight-stats { display: flex; justify-content: space-around; text-align: center; margin-bottom: 16px; }
|
||||
.weight-stats__item span { display: block; }
|
||||
.weight-stats__val { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.weight-stats__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.weight-ball-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
|
||||
.weight-side { width: 74px; text-align: center; flex-shrink: 0; }
|
||||
.weight-side__label { font-size: 12px; color: #666; margin-bottom: 6px; }
|
||||
.weight-side__val { font-size: 32px; line-height: 1; font-weight: 700; color: #1a1a1a; }
|
||||
.weight-side__unit { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.weight-ball { width: 140px; height: 140px; margin: 0; border-radius: 50%; background: linear-gradient(180deg, #e6f7ff 0%, #1890ff 100%); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(24,144,255,0.3); }
|
||||
.weight-ball__inner { width: 110px; height: 110px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.weight-ball__val { font-size: 28px; font-weight: 800; color: #1890ff; }
|
||||
.weight-ball__unit { font-size: 12px; color: #999; }
|
||||
.weight-ball__wave { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; border-radius: 0 0 70px 70px; background: linear-gradient(180deg, rgba(24,144,255,0.15), rgba(24,144,255,0.4)); overflow: hidden; }
|
||||
.daily-date { font-size: 14px; color: #666; text-align: center; margin-bottom: 10px; }
|
||||
.daily-checkin { display: flex; justify-content: space-around; margin-bottom: 14px; }
|
||||
.checkin-item { text-align: center; flex: 1; }
|
||||
.checkin-item__icon { font-size: 24px; margin-bottom: 4px; }
|
||||
.checkin-item__label { font-size: 11px; color: #999; }
|
||||
.checkin-item__val { font-size: 13px; font-weight: 600; color: #333; margin-top: 2px; }
|
||||
.checkin-item__sub { font-size: 11px; color: #999; margin-top: 2px; line-height: 1.4; }
|
||||
.bmi-box { background: #f5f7fa; border-radius: 8px; padding: 12px; text-align: center; }
|
||||
.bmi-box__formula { font-size: 13px; color: #666; }
|
||||
.bmi-box__result { font-size: 20px; font-weight: 700; color: #52c41a; margin-top: 4px; }
|
||||
.bmi-box__tag { display: inline-block; font-size: 11px; color: #52c41a; background: #f6ffed; border-radius: 4px; padding: 2px 8px; margin-top: 4px; }
|
||||
/* 健康数据 */
|
||||
.health-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
|
||||
.health-scroll::-webkit-scrollbar { display: none; }
|
||||
.health-card { min-width: 130px; background: #f5f7fa; border-radius: 10px; padding: 14px 12px; flex-shrink: 0; }
|
||||
.health-card__title { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.health-card__val { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.health-card__unit { font-size: 11px; color: #999; font-weight: 400; }
|
||||
.health-card__status { font-size: 11px; margin-top: 4px; padding: 2px 6px; border-radius: 4px; display: inline-block; }
|
||||
.health-card__status--normal { color: #52c41a; background: #f6ffed; }
|
||||
.health-card__status--warn { color: #faad14; background: #fffbe6; }
|
||||
/* 智能监测 */
|
||||
.monitor-tabs { display: flex; gap: 0; margin-bottom: 12px; background: #f5f7fa; border-radius: 8px; overflow: hidden; }
|
||||
.monitor-tab { flex: 1; text-align: center; padding: 8px 0; font-size: 12px; color: #666; cursor: pointer; transition: all .2s; }
|
||||
.monitor-tab.active { background: #1890ff; color: #fff; border-radius: 8px; }
|
||||
.monitor-chart { background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid #e6f4ff; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
|
||||
.monitor-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.monitor-chart__title { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.monitor-chart__time { font-size: 11px; color: #999; }
|
||||
.monitor-chart__svg { width: 100%; height: 132px; display: block; }
|
||||
.monitor-chart__axis { display: flex; justify-content: space-between; font-size: 10px; color: #bbb; margin-top: 4px; }
|
||||
.monitor-data { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
|
||||
.monitor-data__item { flex: 1; background: #f5f7fa; border-radius: 10px; padding: 10px 6px; }
|
||||
.monitor-data__item span { display: block; }
|
||||
.monitor-data__val { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.1; }
|
||||
.monitor-data__unit { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.monitor-data__label { font-size: 11px; color: #666; margin-top: 6px; }
|
||||
.monitor-data__time { font-size: 10px; color: #999; margin-top: 2px; }
|
||||
/* 膳食摄入 */
|
||||
.diet-module { padding: 0; overflow: hidden; background: linear-gradient(180deg, #efeaff 0%, #ffffff 26%); }
|
||||
.diet-module .module__hd { padding: 16px 16px 12px; margin-bottom: 0; }
|
||||
.diet-module .module__more { color: #8f8f8f; font-weight: 600; }
|
||||
.diet-panel { background: #fff; border-radius: 18px 18px 0 0; padding-bottom: 16px; }
|
||||
.diet-month-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #f2f2f2; }
|
||||
.diet-month-arrow { width: 24px; height: 24px; border-radius: 50%; background: #f7f7f7; color: #999; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
|
||||
.diet-month-title { font-size: 17px; font-weight: 700; color: #1f1f1f; }
|
||||
.diet-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 12px; padding: 18px 16px 10px; margin-bottom: 6px; }
|
||||
.diet-day { text-align: center; background: transparent; padding: 0; border-radius: 0; cursor: pointer; }
|
||||
.diet-day__week { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
|
||||
.diet-day__num { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; }
|
||||
.diet-day.active .diet-day__num { border: 2px solid #8b6cff; color: #8b6cff; background: #fff; }
|
||||
.diet-day--today .diet-day__week { color: #8b6cff; }
|
||||
.diet-day--today .diet-day__num { background: #8b6cff; color: #fff; }
|
||||
.diet-orbs { display: flex; gap: 16px; padding: 10px 16px 18px; }
|
||||
.diet-orb { flex: 1; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f5fff7 42%, #dafbe2 72%, #c0f2cf 100%); box-shadow: inset 0 0 0 10px rgba(115, 221, 137, 0.18), 0 4px 18px rgba(115, 221, 137, 0.18); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
|
||||
.diet-orb::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -4%; height: 32%; background: #3fd266; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
|
||||
.diet-orb__content { position: relative; z-index: 1; padding: 0 10px; }
|
||||
.diet-orb__top { font-size: 12px; line-height: 1.45; color: #36a454; margin-bottom: 10px; }
|
||||
.diet-orb__value { font-size: 28px; line-height: 1; font-weight: 800; color: #1f1f1f; }
|
||||
.diet-orb__unit { font-size: 13px; color: #36a454; margin-left: 4px; }
|
||||
.diet-orb__bottom { margin-top: 12px; font-size: 12px; color: rgba(0,0,0,0.28); }
|
||||
.diet-summary { display: flex; gap: 12px; padding: 0 16px; }
|
||||
.diet-summary__card { flex: 1; background: #f7f7f7; border-radius: 14px; padding: 14px 10px 12px; text-align: center; }
|
||||
.diet-summary__value { font-size: 18px; font-weight: 800; color: #1f1f1f; line-height: 1.2; }
|
||||
.diet-summary__meta { font-size: 12px; color: #58c96d; margin-top: 6px; min-height: 18px; }
|
||||
.diet-summary__label { font-size: 12px; color: #808080; margin-top: 8px; }
|
||||
/* 底部 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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 功能按钮区 -->
|
||||
<div class="func-area">
|
||||
<div class="func-grid collapsed" id="funcGrid">
|
||||
<!-- JS 渲染 -->
|
||||
</div>
|
||||
<div class="func-toggle" id="funcToggle">
|
||||
<span>展开</span>
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 4.5l4 4 4-4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体重管理模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">体重管理</span><span class="module__more">查看详情 ›</span></div>
|
||||
<div class="weight-stats">
|
||||
<div class="weight-stats__item"><span class="weight-stats__val">28</span><span class="weight-stats__label">活动天数</span></div>
|
||||
<div class="weight-stats__item"><span class="weight-stats__val">156</span><span class="weight-stats__label">排名</span></div>
|
||||
</div>
|
||||
<div class="weight-ball-row">
|
||||
<div class="weight-side">
|
||||
<div class="weight-side__label">初始体重</div>
|
||||
<div class="weight-side__val">75.0</div>
|
||||
<div class="weight-side__unit">BMI:30</div>
|
||||
</div>
|
||||
<div class="weight-ball">
|
||||
<div class="weight-ball__wave"></div>
|
||||
<div class="weight-ball__inner">
|
||||
<span class="weight-ball__val">70.5</span>
|
||||
<span class="weight-ball__unit">当前体重(kg)</span>
|
||||
<span class="weight-ball__unit">BMI:28</span>
|
||||
<span class="weight-ball__unit">体脂率:26</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weight-side">
|
||||
<div class="weight-side__label">目标体重</div>
|
||||
<div class="weight-side__val">65.0</div>
|
||||
<div class="weight-side__unit">BMI:25</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bmi-box">
|
||||
<div class="bmi-box__formula">BMI = 体重(kg) ÷ 身高(m)² = 70.5 ÷ 1.75² </div>
|
||||
<div class="bmi-box__formula">BMI<18.5消瘦 BMI<24正常 BMI<28超重 BMI>32肥胖</div>
|
||||
<span class="bmi-box__tag">中心型肥胖：男性腰围≥90cm 女性腰围≥85cm</span>
|
||||
</div>
|
||||
<div class="daily-date">📅 2026年4月29日 星期三</div>
|
||||
<div class="daily-checkin">
|
||||
<div class="checkin-item"><div class="checkin-item__icon">🍽️</div><div class="checkin-item__label">吃</div><div class="checkin-item__val">1680 kcal</div><div class="checkin-item__sub">推荐 1900 kcal</div><div class="checkin-item__sub">累计行动 52 天</div></div>
|
||||
<div class="checkin-item"><div class="checkin-item__icon">🏃</div><div class="checkin-item__label">动</div><div class="checkin-item__val">320 kcal</div><div class="checkin-item__sub">推荐 300 kcal</div><div class="checkin-item__sub">累计行动 36 天</div></div>
|
||||
<div class="checkin-item"><div class="checkin-item__icon">⚖️</div><div class="checkin-item__label">体重</div><div class="checkin-item__val">70.5 kg</div><div class="checkin-item__sub">推荐 68.0 kg</div><div class="checkin-item__sub">累计行动 28 天</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康数据模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">健康数据</span><span class="module__more">全部 ›</span></div>
|
||||
<div class="health-scroll">
|
||||
<div class="health-card"><div class="health-card__title">血压</div><div class="health-card__val">120<span class="health-card__unit">/80 mmHg</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">体重</div><div class="health-card__val">70.5<span class="health-card__unit"> kg</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">血脂</div><div class="health-card__val">4.8<span class="health-card__unit"> mmol/L</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">血糖</div><div class="health-card__val">5.6<span class="health-card__unit"> mmol/L</span></div><span class="health-card__status health-card__status--warn">偏高</span></div>
|
||||
<div class="health-card"><div class="health-card__title">尿酸</div><div class="health-card__val">380<span class="health-card__unit"> μmol/L</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 智能监测模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">智能监测</span><span class="module__more">查看设备 ›</span></div>
|
||||
<div class="monitor-tabs" id="monitorTabs">
|
||||
<div class="monitor-tab active" data-type="heart">心率</div>
|
||||
<div class="monitor-tab" data-type="oxygen">血氧</div>
|
||||
<div class="monitor-tab" data-type="stress">压力</div>
|
||||
<div class="monitor-tab" data-type="temp">体温</div>
|
||||
<div class="monitor-tab" data-type="sleep">睡眠</div>
|
||||
</div>
|
||||
<div class="monitor-chart">
|
||||
<div class="monitor-chart__head">
|
||||
<span class="monitor-chart__title" id="monitorChartTitle">最近24小时心率波动</span>
|
||||
<span class="monitor-chart__time">2026-03-24 13:02</span>
|
||||
</div>
|
||||
<svg class="monitor-chart__svg" id="monitorChart" viewBox="0 0 320 132" preserveAspectRatio="none"></svg>
|
||||
<div class="monitor-chart__axis"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div>
|
||||
</div>
|
||||
<div class="monitor-data" id="monitorData">
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">126</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">最高</span><span class="monitor-data__time">14:20</span></div>
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">68</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">最低</span><span class="monitor-data__time">03:40</span></div>
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">82</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">平均</span><span class="monitor-data__time">24h均值</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 膳食摄入模块 -->
|
||||
<div class="module diet-module">
|
||||
<div class="module__hd"><span class="module__title">膳食摄入</span><span class="module__more">更多 ›</span></div>
|
||||
<div class="diet-panel">
|
||||
<div class="diet-month-bar">
|
||||
<div class="diet-month-arrow" id="prevWeek">‹</div>
|
||||
<div class="diet-month-title" id="weekText">2026年03月</div>
|
||||
<div class="diet-month-arrow" id="nextWeek">›</div>
|
||||
</div>
|
||||
<div class="diet-days" id="dietDays">
|
||||
<div class="diet-day"><div class="diet-day__week">一</div><div class="diet-day__num">10</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">二</div><div class="diet-day__num">11</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">三</div><div class="diet-day__num">12</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">四</div><div class="diet-day__num">13</div></div>
|
||||
<div class="diet-day diet-day--today active"><div class="diet-day__week">五</div><div class="diet-day__num">今</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">六</div><div class="diet-day__num">15</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">日</div><div class="diet-day__num">16</div></div>
|
||||
</div>
|
||||
<div class="diet-orbs">
|
||||
<div class="diet-orb">
|
||||
<div class="diet-orb__content">
|
||||
<div class="diet-orb__top">早餐可摄入<br>580千卡</div>
|
||||
<div><span class="diet-orb__value">586</span><span class="diet-orb__unit">千卡</span></div>
|
||||
<div class="diet-orb__bottom">早餐已摄入</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diet-orb">
|
||||
<div class="diet-orb__content">
|
||||
<div class="diet-orb__top">全天可摄入<br>2536千卡</div>
|
||||
<div><span class="diet-orb__value">586</span><span class="diet-orb__unit">千卡</span></div>
|
||||
<div class="diet-orb__bottom">全天已摄入</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diet-summary" id="dietDetail">
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">586</div>
|
||||
<div class="diet-summary__meta">70%(适量)</div>
|
||||
<div class="diet-summary__label">早餐(kcal)</div>
|
||||
</div>
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">--</div>
|
||||
<div class="diet-summary__meta">--</div>
|
||||
<div class="diet-summary__label">午餐(kcal)</div>
|
||||
</div>
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">--</div>
|
||||
<div class="diet-summary__meta">--</div>
|
||||
<div class="diet-summary__label">晚餐(kcal)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active"><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" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var funcItems = [
|
||||
{ name: '健康咨询', color: '#1890FF', icon: '💬', href: '../health-consult/index.html' },
|
||||
{ name: '应急就医', color: '#FF4D4F', icon: '🚑', href: '../emergency-medical/index.html' },
|
||||
{ name: '一线医疗', color: '#52C41A', icon: '🏥', href: '../frontline-medical/index.html' },
|
||||
{ name: '健康体检', color: '#FAAD14', icon: '📋', href: '../health-checkup/index.html' },
|
||||
{ name: '体重管理', color: '#722ED1', icon: '⚖️', href: '../weight-management/index.html' },
|
||||
{ name: '营养管理', color: '#52C41A', icon: '🥗', href: '../nutrition/index.html' },
|
||||
{ name: '运动管理', color: '#FA8C16', icon: '🏃', href: '../exercise/index.html' },
|
||||
{ name: '健康监测', color: '#13C2C2', icon: '💓', href: '../health-monitor/index.html' },
|
||||
{ name: '健康评估', color: '#2F54EB', icon: '📊', href: '../health-assessment/index.html' },
|
||||
{ name: '健康档案', color: '#1890FF', icon: '📁', href: '../health-record/index.html' },
|
||||
{ name: '心脑血管', color: '#F5222D', icon: '❤️', href: '../cardiovascular/index.html' },
|
||||
{ name: '糖尿病', color: '#722ED1', icon: '💉', href: '../diabetes/index.html' },
|
||||
{ name: '癌症预防', color: '#EB2F96', icon: '🛡️', href: '../cancer/index.html' },
|
||||
{ name: '知识普及', color: '#1890FF', icon: '📖', href: '../knowledge/index.html' }
|
||||
];
|
||||
var monitorMap = {
|
||||
heart: {
|
||||
title: '最近24小时心率波动',
|
||||
unit: '次/分',
|
||||
max: '126',
|
||||
maxTime: '14:20',
|
||||
min: '68',
|
||||
minTime: '03:40',
|
||||
avg: '82',
|
||||
avgTime: '24h均值',
|
||||
color: '#ff7a8a',
|
||||
points: [84,82,80,78,76,74,72,70,68,75,79,83,88,96,102,126,108,94,90,87,85,84,83,82]
|
||||
},
|
||||
oxygen: {
|
||||
title: '最近24小时血氧波动',
|
||||
unit: '%',
|
||||
max: '99',
|
||||
maxTime: '10:10',
|
||||
min: '95',
|
||||
minTime: '02:50',
|
||||
avg: '97',
|
||||
avgTime: '24h均值',
|
||||
color: '#52c41a',
|
||||
points: [97,97,96,96,95,96,96,97,98,98,97,97,98,99,98,97,97,96,97,98,98,97,97,97]
|
||||
},
|
||||
stress: {
|
||||
title: '最近24小时压力波动',
|
||||
unit: '',
|
||||
max: '82',
|
||||
maxTime: '16:30',
|
||||
min: '18',
|
||||
minTime: '05:10',
|
||||
avg: '46',
|
||||
avgTime: '24h均值',
|
||||
color: '#faad14',
|
||||
points: [35,32,30,28,24,18,22,26,34,40,52,60,68,74,82,78,66,58,49,45,41,38,36,34]
|
||||
},
|
||||
temp: {
|
||||
title: '最近24小时体温波动',
|
||||
unit: '°C',
|
||||
max: '37.1',
|
||||
maxTime: '13:00',
|
||||
min: '36.2',
|
||||
minTime: '04:20',
|
||||
avg: '36.6',
|
||||
avgTime: '24h均值',
|
||||
color: '#722ed1',
|
||||
points: [36.5,36.4,36.4,36.3,36.2,36.2,36.3,36.4,36.5,36.5,36.6,36.7,36.8,37.1,36.9,36.8,36.7,36.6,36.6,36.5,36.5,36.4,36.4,36.5]
|
||||
},
|
||||
sleep: {
|
||||
title: '最近24小时睡眠深度波动',
|
||||
unit: 'h',
|
||||
max: '8.1',
|
||||
maxTime: '07:00',
|
||||
min: '5.3',
|
||||
minTime: '01:30',
|
||||
avg: '6.8',
|
||||
avgTime: '24h均值',
|
||||
color: '#1890ff',
|
||||
points: [5.6,5.3,5.5,5.9,6.2,6.8,7.1,8.1,7.8,7.4,7.0,6.8,6.6,6.4,6.2,6.1,6.3,6.5,6.7,6.8,6.9,6.8,6.7,6.8]
|
||||
}
|
||||
};
|
||||
function renderMonitorChart(type) {
|
||||
var cfg = monitorMap[type];
|
||||
var svg = document.getElementById('monitorChart');
|
||||
var title = document.getElementById('monitorChartTitle');
|
||||
title.textContent = cfg.title;
|
||||
var points = cfg.points;
|
||||
var max = Math.max.apply(null, points);
|
||||
var min = Math.min.apply(null, points);
|
||||
var width = 320;
|
||||
var height = 132;
|
||||
var step = width / (points.length - 1);
|
||||
var line = points.map(function(v, i) {
|
||||
var x = i * step;
|
||||
var y = height - ((v - min) / (max - min || 1)) * 92 - 20;
|
||||
return x.toFixed(1) + ',' + y.toFixed(1);
|
||||
}).join(' ');
|
||||
var area = '0,' + height + ' ' + line + ' ' + width + ',' + height;
|
||||
svg.innerHTML = '<defs><linearGradient id="monitorGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="' + cfg.color + '" stop-opacity="0.35"/><stop offset="100%" stop-color="' + cfg.color + '" stop-opacity="0.02"/></linearGradient></defs>' +
|
||||
'<polyline points="' + line + '" fill="none" stroke="' + cfg.color + '" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>' +
|
||||
'<polygon points="' + area + '" fill="url(#monitorGradient)"/>';
|
||||
document.getElementById('monitorData').innerHTML =
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.max + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">最高</span><span class="monitor-data__time">' + cfg.maxTime + '</span></div>' +
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.min + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">最低</span><span class="monitor-data__time">' + cfg.minTime + '</span></div>' +
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.avg + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">平均</span><span class="monitor-data__time">' + cfg.avgTime + '</span></div>';
|
||||
}
|
||||
function renderFuncGrid() {
|
||||
var grid = document.getElementById('funcGrid');
|
||||
var toggle = document.getElementById('funcToggle');
|
||||
var html = '';
|
||||
funcItems.forEach(function(item) {
|
||||
html += '<a class="func-item" href="' + item.href + '"><div class="func-item__icon" style="background:' + item.color + '"><span style="font-size:22px">' + item.icon + '</span></div><div class="func-item__name">' + item.name + '</div></a>';
|
||||
});
|
||||
html += '<div class="func-item"><div class="func-item__icon" style="background:#52c41a"><span style="font-size:22px">▦</span></div><div class="func-item__name">更多</div></div>';
|
||||
grid.innerHTML = html;
|
||||
toggle.onclick = function() {
|
||||
var collapsed = grid.classList.toggle('collapsed');
|
||||
toggle.innerHTML = collapsed
|
||||
? '<span>展开</span><svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 4.5l4 4 4-4"/></svg>'
|
||||
: '<span>收起</span><svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 7.5l4-4 4 4"/></svg>';
|
||||
};
|
||||
}
|
||||
renderFuncGrid();
|
||||
document.querySelectorAll('.monitor-tab').forEach(function(tab) {
|
||||
tab.onclick = function() {
|
||||
document.querySelectorAll('.monitor-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
renderMonitorChart(tab.dataset.type);
|
||||
};
|
||||
});
|
||||
renderMonitorChart('heart');
|
||||
document.querySelectorAll('.diet-day').forEach(function(day) {
|
||||
day.onclick = function() {
|
||||
document.querySelectorAll('.diet-day').forEach(function(d) {
|
||||
if (!d.classList.contains('diet-day--today')) d.classList.remove('active');
|
||||
else if (d !== day) d.classList.remove('active');
|
||||
});
|
||||
day.classList.add('active');
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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