From a4f61cc65c4c13a54e26f4460e00c11f6844355b Mon Sep 17 00:00:00 2001 From: liuyunqin Date: Tue, 28 Jul 2026 17:55:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=93=E9=87=8D=E7=AE=A1=E7=90=86v2?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=BA=EF=BC=8C?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=93=9D=E7=89=99=E8=AE=BE=E5=A4=87=E3=80=81?= =?UTF-8?q?=E7=9B=AE=E6=A0=87=E5=8E=86=E5=8F=B2=E5=8F=8A=E4=BD=93=E9=87=8D?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E8=AF=A6=E6=83=85=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化目标详情页、目标管理页、体重主页及报告页样式与交互 - 新增蓝牙设备成员/秤/搜索/WiFi配网页面 - 新增目标历史记录页 - 新增体重记录详情页 --- .../bluetooth-device-members-v2.html | 362 +++++++++++ .../weight-management/bluetooth-scale-v2.html | 196 ++++++ .../bluetooth-search-v2.html | 136 +++++ .../weight-management/bluetooth-wifi-v2.html | 137 +++++ .../weight-management/goal-detail-v2.html | 577 ++++++++++++++++-- .../weight-management/goal-history-v2.html | 274 +++++++++ .../weight-management/goal-management-v2.html | 148 +++-- .../weight-management/weight-main-v2.html | 35 +- .../weight-record-detail-v2.html | 189 ++++++ .../weight-management/weight-report.html | 405 ++++++------ 10 files changed, 2143 insertions(+), 316 deletions(-) create mode 100644 employee-app/weight-management/bluetooth-device-members-v2.html create mode 100644 employee-app/weight-management/bluetooth-scale-v2.html create mode 100644 employee-app/weight-management/bluetooth-search-v2.html create mode 100644 employee-app/weight-management/bluetooth-wifi-v2.html create mode 100644 employee-app/weight-management/goal-history-v2.html create mode 100644 employee-app/weight-management/weight-record-detail-v2.html diff --git a/employee-app/weight-management/bluetooth-device-members-v2.html b/employee-app/weight-management/bluetooth-device-members-v2.html new file mode 100644 index 0000000..083af80 --- /dev/null +++ b/employee-app/weight-management/bluetooth-device-members-v2.html @@ -0,0 +1,362 @@ + + + + + +用户管理 - 蓝牙称 | 健康CQ原型 v2 + + + +
+
+ 09:40 +
+ + + +
+
+ +
+
+ +
+
用户管理
+
+
+ +
+ +
+ + +
+
⚖️
+
+
家庭蓝牙体脂秤 S1
+
型号：BS-A100
设备编码：BL2024A00158
+
+ 已连接 +
+ + + + + + + +
+
+ + +
+
+ +
同步成员至设备
+
正在同步信息，请勿离开...
+
+
0%
+
+
+ + +
+
+
⚠️
+
是否确认删除该成员？
+
+ + +
+
+
+
+ + + + diff --git a/employee-app/weight-management/bluetooth-scale-v2.html b/employee-app/weight-management/bluetooth-scale-v2.html new file mode 100644 index 0000000..a531a78 --- /dev/null +++ b/employee-app/weight-management/bluetooth-scale-v2.html @@ -0,0 +1,196 @@ + + + + + +蓝牙称 - 员工端 | 健康CQ原型 v2 + + + +
+
+ 09:40 +
+ + + +
+
+ +
+
+ +
+
蓝牙称
+
+
+ +
+ +
+
⚖️
+
暂未绑定蓝牙称设备
请点击下方按钮进行绑定
+ +
+ + +
+
+ 已配对设备 + +
+
+
+ +
+
⚖️
+
+
家庭蓝牙体脂秤 S1
+
型号：BS-A100
设备编码：BL2024A00158
+
+ 已连接 +
+
+ + + +
+
+
+ +
+
⚖️
+
+
办公蓝牙体重秤 B2
+
型号：BW-B200
设备编码：BL2024B00321
+
+ 未连接 +
+
+ + +
+
+
+ +
+
+
+
+ + + + diff --git a/employee-app/weight-management/bluetooth-search-v2.html b/employee-app/weight-management/bluetooth-search-v2.html new file mode 100644 index 0000000..632a87e --- /dev/null +++ b/employee-app/weight-management/bluetooth-search-v2.html @@ -0,0 +1,136 @@ + + + + + +搜索设备 - 蓝牙称 | 健康CQ原型 v2 + + + +
+
+ 09:40 +
+ + + +
+
+ +
+
+ +
+
搜索设备
+
+
+ +
+
+
+
+
⚖️
+
+
搜索设备中…
+
请确保手机蓝牙已开启
设备处于开启状态
+
📱 手机尽量靠近设备（2米以内）
+ +
+ +
🔍 发现的设备
+
+
+
⚖️
+
+
家庭蓝牙体脂秤 S1
+
+ 已连接 +
+
+
⚖️
+
+
办公蓝牙体重秤 B2
+
+ 未连接 + › +
+
+
+
+
+
+ + + + diff --git a/employee-app/weight-management/bluetooth-wifi-v2.html b/employee-app/weight-management/bluetooth-wifi-v2.html new file mode 100644 index 0000000..81867c2 --- /dev/null +++ b/employee-app/weight-management/bluetooth-wifi-v2.html @@ -0,0 +1,137 @@ + + + + + +WiFi连接 - 蓝牙称 | 健康CQ原型 v2 + + + +
+
+ 09:40 +
+ + + +
+
+ +
+
+ +
+
WiFi 连接
+ 跳过 +
+ +
+
+
📡
+
正在搜索附近 WiFi…
+
请稍候
+
+ +
+
+ 附近的 WiFi 网络 + 🔄 刷新 +
+
+
+ 📶 +
+
Office-5G
+
WPA2 安全
+
+ ✓ +
+
+ 📶 +
+
Health-Net
+
WPA2 安全
+
+ 🔒 +
+
+ 📶 +
+
Canteen-WiFi
+
开放网络
+
+
+
+ 📶 +
+
Guest-2.4G
+
开放网络
+
+
+
+
+
+
+ + + + diff --git a/employee-app/weight-management/goal-detail-v2.html b/employee-app/weight-management/goal-detail-v2.html index fcb77e3..e4c0bb9 100644 --- a/employee-app/weight-management/goal-detail-v2.html +++ b/employee-app/weight-management/goal-detail-v2.html @@ -15,12 +15,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; } .nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; } -.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; } -.nav-more { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } +.nav-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 17px; font-weight: 600; color: #1a1a1a; } +.nav-placeholder { width: 28px; height: 28px; } +.nav-more { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0; } .nav-more__dots { display: flex; flex-direction: column; gap: 3px; align-items: center; } .nav-more__dots span { width: 4px; height: 4px; border-radius: 50%; background: #333; } -.type-menu { display: none; position: absolute; top: 32px; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 20; min-width: 160px; overflow: hidden; } +.type-menu { display: none; position: absolute; top: 28px; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 20; min-width: 160px; overflow: hidden; } .type-menu.show { display: block; } .type-menu__item { padding: 13px 16px; font-size: 14px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f5f5f5; } .type-menu__item:last-child { border-bottom: none; } @@ -57,8 +58,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .goal-data__row + .goal-data__row { border-top: 1px dashed #e8e8e8; } .goal-data__label { width: 48px; font-size: 12px; color: #999; flex-shrink: 0; } .goal-data__init { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: #1a1a1a; } +.goal-data__current { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: #36cfc9; } .goal-data__arrow { width: 28px; text-align: center; font-size: 16px; color: #ccc; flex-shrink: 0; } -.goal-data__target { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: #36cfc9; } +.goal-data__target { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: #1a1a1a; } .goal-data__unit { font-size: 10px; font-weight: 400; color: #999; margin-left: 2px; } .goal-data__header { display: flex; align-items: center; margin-bottom: 10px; } .goal-data__header-label { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: #999; } @@ -81,6 +83,84 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .state-tab { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; cursor: pointer; background: #f0f0f0; color: #999; border: none; } .state-tab.active { background: #36cfc9; color: #fff; } +/* ===== 变化趋势卡片 ===== */ +.record-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; box-shadow: 0 4px 14px rgba(0,0,0,0.04); padding: 0 0 0 0; } +.record-card__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0; } +.record-card__title { font-size: 16px; font-weight: 800; color: #1a1a1a; } +.record-tabs { display: flex; border-bottom: 1px solid #f0f0f0; margin-top: 10px; } +.record-tab { flex: 1; text-align: center; padding: 10px 0 8px; font-size: 14px; font-weight: 600; color: #bbb; cursor: pointer; position: relative; } +.record-tab.active { color: #36cfc9; } +.record-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #36cfc9; border-radius: 2px; } +.record-body { padding: 12px 14px 16px; } +.stat-row { display: flex; gap: 8px; margin-bottom: 14px; } +.stat-item { flex: 1; background: #f7f8fa; border-radius: 12px; padding: 10px 8px; text-align: center; } +.stat-item__label { font-size: 11px; color: #999; margin-bottom: 4px; } +.stat-item__val { font-size: 16px; font-weight: 800; color: #1a1a1a; line-height: 1.1; } +.stat-item__unit { font-size: 10px; font-weight: 500; color: #666; margin-left: 1px; } +.stat-item--change .stat-item__val { color: #36cfc9; } +.chart-area { position: relative; width: 100%; height: 180px; margin-top: 4px; overflow: hidden; } +.chart-area svg { width: 100%; height: 100%; display: block; } +.chart-legend { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: nowrap; } +.chart-legend__item { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #666; white-space: nowrap; } +.chart-legend__line { width: 16px; height: 0; border-top: 1.5px dashed; flex-shrink: 0; } +.chart-legend__line--init { border-color: #ff6b81; } +.chart-legend__line--target { border-color: #36cfc9; } + +/* ===== 饮食/运动总结卡片 ===== */ +.summary-stats { display: flex; gap: 8px; } +.summary-stat { flex: 1; background: #f7f8fa; border-radius: 10px; padding: 10px 8px; text-align: center; } +.summary-stat__val { font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1; } +.summary-stat__val--good { color: #52c41a; } +.summary-stat__unit { font-size: 10px; font-weight: 400; color: #999; } +.summary-stat__label { font-size: 10px; color: #bbb; margin-top: 3px; } + +/* ===== 排行榜卡片 ===== */ +.rank-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 16px 16px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); cursor: pointer; } +.rank-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } +.rank-card__title { font-size: 16px; font-weight: 800; color: #1a1a1a; } +.rank-card__arrow { color: #bbb; display: flex; align-items: center; gap: 2px; font-size: 11px; } +.rank-card__my { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, #e8fbfa, #f0fffe); border-radius: 10px; margin-bottom: 10px; border: 1px solid #b6f0eb; } +.rank-card__my-rank { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; font-weight: 800; color: #36cfc9; line-height: 1; box-shadow: 0 2px 6px rgba(54,207,201,0.15); } +.rank-card__my-rank span { font-size: 8px; color: #999; font-weight: 500; margin-top: -1px; } +.rank-card__my-info { flex: 1; min-width: 0; } +.rank-card__my-name { font-size: 14px; font-weight: 700; color: #1a1a1a; } +.rank-card__my-dept { font-size: 11px; color: #999; margin-top: 1px; } +.rank-card__my-score { font-size: 14px; font-weight: 700; color: #333; text-align: right; flex-shrink: 0; } +.rank-card__my-score em { font-style: normal; font-size: 10px; color: #999; font-weight: 400; } +.rank-card__top3 { display: flex; flex-direction: column; gap: 4px; } +.rank-card__top-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12px; } +.rank-card__top-item:nth-child(1) { background: #fffbe6; } +.rank-card__top-item:nth-child(2) { background: #f7f8fa; } +.rank-card__top-item:nth-child(3) { background: #fdf4ed; } +.rank-card__top-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; } +.rank-card__top-item:nth-child(1) .rank-card__top-num { background: #fadb14; color: #fff; } +.rank-card__top-item:nth-child(2) .rank-card__top-num { background: #d9d9d9; color: #fff; } +.rank-card__top-item:nth-child(3) .rank-card__top-num { background: #ffbb96; color: #fff; } +.rank-card__top-name { flex: 1; color: #333; font-weight: 500; } +.rank-card__top-val { color: #666; font-weight: 600; } + +/* ===== 体重报告卡片 ===== */ +.report-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 16px 16px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); cursor: pointer; } +.report-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } +.report-card__title { font-size: 16px; font-weight: 800; color: #1a1a1a; } +.report-card__arrow { color: #bbb; display: flex; align-items: center; gap: 2px; font-size: 11px; } +.report-card__meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #999; margin-bottom: 12px; } +.report-card__meta em { font-style: normal; font-weight: 600; color: #666; } +.report-card__weight-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } +.report-card__weight-item { flex: 1; text-align: center; } +.report-card__weight-item-val { font-size: 18px; font-weight: 800; color: #1a1a1a; line-height: 1; } +.report-card__weight-item-label { font-size: 10px; color: #999; margin-top: 3px; } +.report-card__weight-arrow { color: #bbb; font-size: 14px; flex-shrink: 0; margin-top: -6px; } +.report-card__stats-row { display: flex; gap: 10px; margin-bottom: 10px; } +.report-card__stat { flex: 1; background: #f7f8fa; border-radius: 10px; padding: 8px 8px; text-align: center; } +.report-card__stat-val { font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1; } +.report-card__stat-val--good { color: #52c41a; } +.report-card__stat-label { font-size: 10px; color: #999; margin-top: 3px; } +.report-card__progress { margin-top: 2px; } +.report-card__progress-bar { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } +.report-card__progress-fill { height: 100%; background: linear-gradient(90deg, #36cfc9, #2ec4b6); border-radius: 4px; } +.report-card__progress-label { display: flex; justify-content: space-between; font-size: 10px; color: #999; margin-top: 4px; } + .hidden { display: none !important; } .bottom-safe { height: 16px; flex-shrink: 0; } @@ -101,14 +181,17 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
- - @@ -135,19 +219,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: -
-
活动信息活动详情
-
-
活动名称
2026年二季度体重管理活动
-
-
-
起止日期
2026-04-01 ~ 2026-09-30
-
组织机构
公司机关
-
+
2026年二季度体重管理活动活动详情
+
2026-04-01 ~ 2026-09-30 · 公司机关
-
目标信息
@@ -193,14 +269,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
-
活动信息活动详情
-
-
活动名称
2026年二季度体重管理活动
-
-
-
起止日期
2026-04-01 ~ 2026-09-30
-
组织机构
公司机关
-
+
2026年二季度体重管理活动活动详情
+
2026-04-01 ~ 2026-09-30 · 公司机关
@@ -247,14 +317,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
-
活动信息活动详情
-
-
活动名称
2026年二季度体重管理活动
-
-
-
起止日期
2026-04-01 ~ 2026-09-30
-
组织机构
公司机关
-
+
2026年二季度体重管理活动活动详情
+
2026-04-01 ~ 2026-09-30 · 公司机关
@@ -294,7 +358,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: 🎉
-
目标已签署，活动进行中
+
承诺书已签署，活动进行中
签署时间：2026-04-05 09:15
 @@ -302,14 +366,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
-
活动信息活动详情
-
-
活动名称
2026年二季度体重管理活动
-
-
-
起止日期
2026-04-01 ~ 2026-09-30
-
组织机构
公司机关
-
+
2026年二季度体重管理活动活动详情
+
2026-04-01 ~ 2026-09-30 · 公司机关
@@ -319,35 +377,277 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: 初始 + 当前 + 目标
体重 73.5kg → + 62.6kg + → 65.0kg
体脂率 28.6% → + 25.8% + → 22.0%
腰围 88cm → + 76.5cm + → 78cm
+ + + - -
+
+
+
变化趋势
+
+
+
体重变化
+
体脂变化
+
腰围变化
+
+
+
+
平均体重
68.2kg
+
最大体重
73.5kg
+
最小体重
62.6kg
+
体重变化
-10.9kg
+
+
+ + + 7570656055 + + 02-1202-1502-2203-0103-1303-18 + + + 73.5 + 68.0 + + + +
+
+
初始体重 73.50
+
目标体重 68.00
+
+
+ + +
+ + +
+
+ 📊 体重报告 + 查看详情 +
+
+ 截止至 2026-08-26|第 62天 +
+
+
73.5
初始体重 kg
+ → +
62.6
当前体重 kg
+ → +
62.0
目标体重 kg
+
+
+
-10.9kg
已减体重
+
0.6kg
距目标
+
95%
目标进度
+
+
+
+
0%目标 62.0kg
+
+
+ +
+
摄入消耗变化
+
+
1480kcal
日均饮食摄入
+
820kcal
日均热量消耗
+
-660kcal
日均热量差值
+
+
+ + + 0 + 500 + 1000 + 500 + 1000 + + 02-1202-1502-2203-0103-1303-18 + + + + + + + + + + + + + +
+
+
+ 热量摄入 +
+
+ 热量消耗 +
+
+
+
+ +
@@ -414,6 +873,7 @@ function initView() { }); document.getElementById('viewActivity').classList.toggle('hidden', currentView !== 'activity'); document.getElementById('viewPersonal').classList.toggle('hidden', currentView === 'activity'); + document.getElementById('signBar').style.display = currentView === 'activity' ? 'none' : ''; if (currentView === 'activity') { switchState(currentState); } @@ -449,6 +909,27 @@ function switchState(state) { document.getElementById('stateApproved').classList.toggle('hidden', state !== 'approved'); document.getElementById('stateRejected').classList.toggle('hidden', state !== 'rejected'); document.getElementById('stateSigned').classList.toggle('hidden', state !== 'signed'); + document.getElementById('stateEnded').classList.toggle('hidden', state !== 'ended'); +} + +/* ===== 变化趋势 Tab 切换 ===== */ +function switchRecTab(tab) { + var container = document.getElementById('stateEnded'); + container.querySelectorAll('.record-tab').forEach(function(t) { + t.classList.toggle('active', t.textContent.indexOf(tab === 'weight' ? '体重' : tab === 'fat' ? '体脂' : '腰围') !== -1); + }); + document.getElementById('rec-weight').style.display = tab === 'weight' ? '' : 'none'; + document.getElementById('rec-fat').style.display = tab === 'fat' ? '' : 'none'; + document.getElementById('rec-waist').style.display = tab === 'waist' ? '' : 'none'; +} +function switchRecTabP(tab) { + var container = document.getElementById('viewPersonal'); + container.querySelectorAll('.record-tab').forEach(function(t) { + t.classList.toggle('active', t.textContent.indexOf(tab === 'weight' ? '体重' : tab === 'fat' ? '体脂' : '腰围') !== -1); + }); + document.getElementById('prec-weight').style.display = tab === 'weight' ? '' : 'none'; + document.getElementById('prec-fat').style.display = tab === 'fat' ? '' : 'none'; + document.getElementById('prec-waist').style.display = tab === 'waist' ? '' : 'none'; } initView(); diff --git a/employee-app/weight-management/goal-history-v2.html b/employee-app/weight-management/goal-history-v2.html new file mode 100644 index 0000000..939e8b3 --- /dev/null +++ b/employee-app/weight-management/goal-history-v2.html @@ -0,0 +1,274 @@ + + + + + +历史计划 - 员工端 | 健康CQ原型 v2 + + + +
+ + +
+ 09:40 +
+ + + +
+
+ + +
+
+ +
+
历史计划
+
+
+ + +
+
活动计划
+
个人计划
+
+ +
+ + +
+
+
+ 2026年二季度体重管理活动 + 进行中 +
+
+ 起止：2026-04-01 ~ 2026-09-30 + 机构：公司机关 +
+
+
+
73.5kg
+
初始体重
+
+ → +
+
65.0kg
+
目标体重
+
+ → +
+
62.6kg
+
当前体重
+
+
+
+ 签署时间：2026-04-05 09:15 + 详情 +
+
+ +
+
+ 2026年一季度减重挑战赛 + 已结束 +
+
+ 起止：2026-01-01 ~ 2026-03-31 + 机构：第一采油厂 +
+
+
+
76.2kg
+
初始体重
+
+ → +
+
70.0kg
+
目标体重
+
+ → +
+
68.5kg
+
最终体重
+
+
+
+ 活动已结束 · 减重 7.7kg + 详情 +
+
+ +
+
+ 全员健康体重管理计划 + 已结束 +
+
+ 起止：2025-10-01 ~ 2026-06-30 + 机构：第一采气厂 +
+
+
+
78.0kg
+
初始体重
+
+ → +
+
72.0kg
+
目标体重
+
+ → +
+
73.5kg
+
最终体重
+
+
+
+ 活动已结束 · 减重 4.5kg + 详情 +
+
+ +
+
+ + + + +
+ +
+ + + + diff --git a/employee-app/weight-management/goal-management-v2.html b/employee-app/weight-management/goal-management-v2.html index e7481b1..cb55bcb 100644 --- a/employee-app/weight-management/goal-management-v2.html +++ b/employee-app/weight-management/goal-management-v2.html @@ -42,7 +42,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: /* 卡片内分区 */ .data-section { background: #f7f8fa; border-radius: 12px; padding: 12px; margin-bottom: 10px; } .data-section:last-child { margin-bottom: 0; } -.data-section__title { font-size: 12px; font-weight: 700; color: #999; margin-bottom: 10px; letter-spacing: .5px; } +.data-section__title { font-size: 12px; font-weight: 700; color: #999; margin-bottom: 10px; letter-spacing: .5px; display: flex; align-items: center; justify-content: space-between; } +.data-section__extra { font-size: 12px; font-weight: 500; color: #36cfc9; letter-spacing: 0; } /* 选择器 */ .selector { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 14px; background: #f7f8fa; border-radius: 10px; font-size: 14px; color: #bbb; cursor: pointer; transition: border-color .2s; border: 1.5px solid transparent; } @@ -73,7 +74,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .input-row__input::placeholder { color: #ccc; font-weight: 400; } .input-row__input:focus { border-color: #36cfc9; } .input-row__input:read-only { background: #f5f5f5; border-color: #eee; color: #999; } -.input-row__unit { font-size: 12px; color: #999; flex-shrink: 0; width: 24px; text-align: center; } + .input-row__unit { font-size: 12px; color: #999; flex-shrink: 0; width: 24px; text-align: center; } + .input-row__range { font-size: 11px; color: #36cfc9; margin-left: 64px; margin-top: -2px; } + .input-row__range span { font-weight: 600; } + .input-row__explain { font-size: 10px; color: #bbb; margin-left: 64px; margin-bottom: 8px; line-height: 1.5; } .input-row__select { flex: 1; height: 38px; padding: 0 12px; background: #fff; border-radius: 8px; border: 1.5px solid #e8e8e8; font-size: 14px; font-weight: 600; color: #1a1a1a; outline: none; appearance: none; cursor: pointer; } .input-row__select:focus { border-color: #36cfc9; } .input-row__select:disabled { background: #f5f5f5; border-color: #eee; color: #999; cursor: default; } @@ -234,30 +238,36 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: - -
-
目标数据
-
- 体重 - - kg -
-
- 体脂率 - - % -
-
- 腰围 - - cm -
-
- - - - - + +
+
目标数据共183天完成
+
+ 体重 + + kg +
+
推荐范围 54.7 ~ 70.7 kg
+
按您的身高 172cm 和健康 BMI 标准（18.5~23.9）换算：1.72²×18.5≈54.7，1.72²×23.9≈70.7。体重超标是高血压、糖尿病等慢性病的主要诱因；183 天周期充裕，每周减 0.5~1kg 即可安全达标。
+
+ 体脂率 + + % +
+
推荐范围 15% ~ 20%
+
按成年男性健康标准，体脂率应控制在 15%~20%。您当前 28.6% 处于肥胖水平，是代谢紊乱和脂肪肝的重要诱因；183 天内配合有氧运动可有效降低 5~8 个百分点。
+
+ 腰围 + + cm +
+
推荐范围 65 ~ 85 cm
+
按您的身高 172cm，腰围上限取身高×0.5=86cm 与男性中心性肥胖线 85cm 的较严值，下限按身高×0.4≈69cm 取整。腰围超标反映内脏脂肪堆积，是心血管疾病的独立危险因素。
+
+ + + + + - -
-
目标数据
-
- 体重 - - kg -
-
- 体脂率 - - % -
-
- 腰围 - - cm -
-
- - - + +
+
目标数据共31天完成
+
+ 体重 + + kg +
+
推荐范围 54.7 ~ 70.7 kg
+
按您的身高 172cm 和健康 BMI 标准（18.5~23.9）换算：1.72²×18.5≈54.7，1.72²×23.9≈70.7。体重超标是高血压、糖尿病等慢性病的主要诱因；31 天周期较短，建议目标设在区间偏上位置，周减 0.5~1kg 为宜。
+
+ 体脂率 + + % +
+
推荐范围 15% ~ 20%
+
按成年男性健康标准，体脂率应控制在 15%~20%。您当前 28.6% 处于肥胖水平，是代谢紊乱和脂肪肝的重要诱因；31 天内配合有氧运动可初步改善 2~3 个百分点。
+
+ 腰围 + + cm +
+
推荐范围 65 ~ 85 cm
+
按您的身高 172cm，腰围上限取身高×0.5=86cm 与男性中心性肥胖线 85cm 的较严值，下限按身高×0.4≈69cm 取整。腰围超标反映内脏脂肪堆积，是心血管疾病的独立危险因素。
+
+ + +
@@ -466,6 +482,9 @@ function confirmActivity() { // 显示活动详情链接 document.getElementById('actDetailLink').classList.remove('hidden'); + // 更新目标天数 + updateActTargetDays(period); + closeActivitySheet(); } @@ -539,7 +558,40 @@ function getParam(name) { document.getElementById('actPeriod').textContent = actPeriod; document.getElementById('actOrg').textContent = actOrg; document.getElementById('actDetailLink').classList.remove('hidden'); + updateActTargetDays(actPeriod); })(); + +/* ===== 共N天完成 ===== */ +function calcDays(periodStr) { + var parts = periodStr.split('~'); + if (parts.length !== 2) return null; + var s = new Date(parts[0].trim()); + var e = new Date(parts[1].trim()); + if (isNaN(s) || isNaN(e)) return null; + return Math.ceil((e - s) / (1000 * 60 * 60 * 24)) + 1; +} + +function updateActTargetDays(periodStr) { + var days = calcDays(periodStr); + var el = document.getElementById('actTargetDays'); + if (el && days) el.textContent = '共' + days + '天完成'; +} + +function updatePersonalTargetDays() { + var sd = document.getElementById('personalStartDate').value; + var ed = document.getElementById('personalEndDate').value; + if (!sd || !ed) return; + var days = calcDays(sd + ' ~ ' + ed); + var el = document.getElementById('personalTargetDays'); + if (el && days) el.textContent = '共' + days + '天完成'; +} + +// 监听个人目标日期变化 +document.getElementById('personalStartDate').addEventListener('change', updatePersonalTargetDays); +document.getElementById('personalEndDate').addEventListener('change', updatePersonalTargetDays); + +// 初始计算个人目标天数 +updatePersonalTargetDays(); diff --git a/employee-app/weight-management/weight-main-v2.html b/employee-app/weight-management/weight-main-v2.html index c84bf02..42607a6 100644 --- a/employee-app/weight-management/weight-main-v2.html +++ b/employee-app/weight-management/weight-main-v2.html @@ -14,13 +14,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .status-bar .icons { display: flex; gap: 6px; align-items: center; } .nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; } .nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; } -.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; } -.nav-more { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } -.nav-more__dots { display: flex; flex-direction: column; gap: 3px; align-items: center; } -.nav-more__dots span { display: block; width: 4px; height: 4px; border-radius: 50%; background: #333; } +.nav-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 17px; font-weight: 600; color: #1a1a1a; } +.nav-placeholder { width: 28px; height: 28px; } +.nav-action { font-size: 13px; color: #36cfc9; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; } +.nav-more { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0; } /* 类型切换下拉菜单 */ -.type-menu { display: none; position: absolute; top: 34px; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 100; min-width: 180px; overflow: hidden; } +.type-menu { display: none; position: absolute; top: 28px; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 100; min-width: 180px; overflow: hidden; } .type-menu.show { display: block; } .type-menu__item { padding: 13px 16px; font-size: 14px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; border-bottom: 1px solid #f5f5f5; } .type-menu__item:last-child { border-bottom: none; } @@ -301,18 +301,21 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
-
体重管理
-