feat: 员工端记录详情页周日历新增来源标签,运动/体重页新增数据来源卡片并移除底部记录按钮;体重页身高秤更名为体重秤

This commit is contained in:
liuyunqin
2026-08-25 11:58:43 +08:00
parent c4ca35ec60
commit e663982b77
3 changed files with 194 additions and 23 deletions
@@ -64,6 +64,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.cal-day__ring--auto { border-color: #1890ff; }
.cal-day__ring--manual { border-color: #fa8c16; }
.cal-day__ring--mixed { border-color: #722ed1; }
/* 日期下来源标签:智 / 自 / 智+自 */
.cal-day__src { font-size: 9px; font-weight: 600; margin-top: 3px; line-height: 1.2; height: 11px; }
.cal-day__src--auto { color: #1890ff; }
.cal-day__src--manual { color: #fa8c16; }
.cal-day__src--mixed { color: #722ed1; }
/* ===== 图例:三种来源 ===== */
.month-picker__legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; padding-top: 8px; font-size: 11px; color: #666; }
@@ -567,7 +572,8 @@ function renderWeek() {
'<div class="cal-day__date-wrap">' +
(daySource ? '<div class="cal-day__ring cal-day__ring--' + daySource + '"></div>' : '') +
'<span class="cal-day__num">' + dayNum + '</span>' +
'</div>';
'</div>' +
(daySource ? '<div class="cal-day__src cal-day__src--' + daySource + '">' + (daySource === 'auto' ? '智' : daySource === 'manual' ? '自' : '智+自') + '</div>' : '<div class="cal-day__src"></div>');
container.appendChild(dayEl);
}
@@ -67,6 +67,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.cal-day__ring--wechat { border-color: #597ef7; }
.cal-day__ring--manual { border-color: #fa8c16; }
.cal-day__ring--mixed { border-color: #722ed1; }
/* 日期下来源标签 */
.cal-day__src { font-size: 9px; font-weight: 600; margin-top: 3px; line-height: 1.2; height: 11px; }
.cal-day__src--wearable { color: #1890ff; }
.cal-day__src--equip { color: #52c41a; }
.cal-day__src--wechat { color: #597ef7; }
.cal-day__src--manual { color: #fa8c16; }
.cal-day__src--mixed { color: #722ed1; }
/* ===== 图例 ===== */
.month-picker__legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 8px; font-size: 11px; color: #666; }
@@ -133,6 +140,27 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.toolbar__btn--manual { background: linear-gradient(160deg, #73d13d, #389e0d); box-shadow: 0 2px 10px rgba(82,196,26,0.3); }
.toolbar__btn svg { width: 15px; height: 15px; }
/* ===== 来源区域卡片(穿戴/器械/微信/自记) ===== */
.source-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 14px 12px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.source-card__title { font-size: 16px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.type-cards { display: flex; gap: 6px; }
.type-card { flex: 1; background: #f7f8fa; border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; position: relative; transition: background .2s; }
.type-card:hover { background: #f0f2f5; }
.type-card:active { transform: scale(0.97); }
.type-card__icon-wrap { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 4px; }
.type-card__icon-wrap--wearable { background: #e6f7ff; }
.type-card__icon-wrap--equip { background: #f6ffed; }
.type-card__icon-wrap--wechat { background: #f0f5ff; }
.type-card__icon-wrap--manual { background: #fff7e6; }
.type-card__icon-wrap svg { width: 16px; height: 16px; }
.type-card__label { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-bottom: 1px; }
.type-card__kcal { font-size: 10px; color: #666; line-height: 1.3; }
.type-card__kcal em { font-style: normal; font-weight: 700; color: #1a1a1a; }
.type-card__empty { font-size: 10px; color: #bbb; }
/* 微信同步按钮 */
.type-card__sync { position: absolute; top: 4px; right: 4px; background: #597ef7; color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 6px; font-weight: 600; cursor: pointer; white-space: nowrap; border: none; }
.type-card__sync:active { opacity: 0.8; }
/* ===== 变化趋势卡片 ===== */
.trend-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.trend-card__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0; }
@@ -331,6 +359,62 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
</div>
<!-- ====== 数据来源区域卡片 ====== -->
<div class="source-card">
<div class="type-cards">
<!-- 穿戴设备 -->
<div class="type-card" onclick="showSourceTip('穿戴设备')">
<div class="type-card__icon-wrap type-card__icon-wrap--wearable">
<svg viewBox="0 0 24 24" fill="none" stroke="#1890ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="6" y="3" width="12" height="18" rx="3"/>
<line x1="10" y1="7" x2="14" y2="7"/>
<line x1="10" y1="11" x2="14" y2="11"/>
<line x1="10" y1="15" x2="12" y2="15"/>
</svg>
</div>
<div class="type-card__label">穿戴</div>
<div class="type-card__kcal"><em>5600</em></div>
</div>
<!-- 器械运动 -->
<div class="type-card" onclick="showSourceTip('器械运动')">
<div class="type-card__icon-wrap type-card__icon-wrap--equip">
<svg viewBox="0 0 24 24" fill="none" stroke="#52c41a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6.5 6.5l11 11"/>
<circle cx="9" cy="7" r="3"/>
<circle cx="15" cy="17" r="3"/>
<line x1="4" y1="19" x2="8" y2="15"/>
</svg>
</div>
<div class="type-card__label">器械</div>
<div class="type-card__kcal"><em>220</em> 千卡</div>
</div>
<!-- 微信运动(含同步按钮) -->
<div class="type-card" onclick="showSourceTip('微信运动')">
<div class="type-card__icon-wrap type-card__icon-wrap--wechat">
<svg viewBox="0 0 24 24" fill="none" stroke="#597ef7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 10.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
<path d="M16 10.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
<path d="M3 17c0-3.3 4-6 9-6s9 2.7 9 6"/>
</svg>
</div>
<div class="type-card__label">微信</div>
<div class="type-card__kcal"><em>6800</em></div>
<button class="type-card__sync" onclick="syncWechat(event)" title="同步微信运动数据">同步</button>
</div>
<!-- 自记运动 -->
<div class="type-card" onclick="location.href='exercise-checkin-v2.html'">
<div class="type-card__icon-wrap type-card__icon-wrap--manual">
<svg viewBox="0 0 24 24" fill="none" stroke="#fa8c16" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="type-card__label">自记</div>
<div class="type-card__kcal"><em>3200</em></div>
</div>
</div>
</div>
<!-- ====== 变化趋势卡片 ====== -->
<div class="trend-card">
<div class="trend-card__header">
@@ -525,14 +609,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="height: 8px; flex-shrink: 0;"></div>
</div>
<!-- ====== 底部工具栏 ====== -->
<div class="toolbar">
<button class="toolbar__btn toolbar__btn--manual" onclick="addExercise()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
记录运动
</button>
</div>
</div>
<script>
@@ -650,7 +726,8 @@ function renderWeek() {
'<div class="cal-day__date-wrap">' +
(daySource ? '<div class="cal-day__ring cal-day__ring--' + daySource + '"></div>' : '') +
'<span class="cal-day__num">' + dayNum + '</span>' +
'</div>';
'</div>' +
(daySource ? '<div class="cal-day__src cal-day__src--' + daySource + '">' + (daySource === 'mixed' ? '多途径' : (SRC_LABEL[daySource] || daySource)) + '</div>' : '<div class="cal-day__src"></div>');
container.appendChild(dayEl);
}
@@ -1004,6 +1081,22 @@ function addExercise() {
location.href = 'exercise-checkin-v2.html';
}
/* ===== 来源卡片交互 ===== */
function syncWechat(e) {
e.stopPropagation();
var btn = e.target;
btn.textContent = '同步中';
btn.disabled = true;
setTimeout(function() {
btn.textContent = '已同步';
setTimeout(function() { btn.textContent = '同步'; btn.disabled = false; }, 2000);
}, 800);
}
function showSourceTip(name) {
alert(name + ':查看今日该来源的运动记录');
}
/* ===== 初始化 ===== */
renderWeek();
</script>
@@ -74,8 +74,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.cal-day__ring { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; z-index: 1; }
.cal-day__ring--manual { border-color: #c4b5fd; } /* 自记 浅紫 */
.cal-day__ring--bluetooth { border-color: #8b5cf6; } /* 蓝牙称 紫 */
.cal-day__ring--stadiometer { border-color: #5470c6; } /* 身高秤 蓝 */
.cal-day__ring--stadiometer { border-color: #5470c6; } /* 体重秤 蓝 */
.cal-day__ring--bodyanalyzer { border-color: #1e3a5f; } /* 体脂仪 深蓝 */
/* 日期下来源标签 */
.cal-day__src { font-size: 9px; font-weight: 600; margin-top: 3px; line-height: 1.2; height: 11px; }
.cal-day__src--manual { color: #c4b5fd; }
.cal-day__src--bluetooth { color: #8b5cf6; }
.cal-day__src--stadiometer { color: #5470c6; }
.cal-day__src--bodyanalyzer { color: #1e3a5f; }
/* ===== 数据来源区域卡片 ===== */
.source-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 14px 12px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.type-cards { display: flex; gap: 6px; }
.type-card { flex: 1; background: #f7f8fa; border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; position: relative; transition: background .2s; }
.type-card:hover { background: #f0f2f5; }
.type-card:active { transform: scale(0.97); }
.type-card__icon-wrap { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 4px; }
.type-card__icon-wrap--stadiometer { background: #eef2fb; }
.type-card__icon-wrap--bluetooth { background: #f3efff; }
.type-card__icon-wrap--bodyanalyzer { background: #e8edf5; }
.type-card__icon-wrap--manual { background: #fff7e6; }
.type-card__icon-wrap svg { width: 16px; height: 16px; }
.type-card__label { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-bottom: 1px; }
.type-card__val { font-size: 10px; color: #666; line-height: 1.3; }
.type-card__val em { font-style: normal; font-weight: 700; color: #1a1a1a; }
.type-card__val--empty { color: #bbb; }
/* ===== 日历卡片内:分隔线 + 最新记录区 ===== */
.cal-divider { height: 1px; background: #f0f0f0; margin: 14px 4px 14px; }
@@ -303,7 +326,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="month-picker__legend">
<span class="month-picker__legend-item"><span class="month-picker__legend-ring month-picker__legend-ring--manual"></span>自记</span>
<span class="month-picker__legend-item"><span class="month-picker__legend-ring month-picker__legend-ring--bluetooth"></span>蓝牙称</span>
<span class="month-picker__legend-item"><span class="month-picker__legend-ring month-picker__legend-ring--stadiometer"></span>身高</span>
<span class="month-picker__legend-item"><span class="month-picker__legend-ring month-picker__legend-ring--stadiometer"></span>体重</span>
<span class="month-picker__legend-item"><span class="month-picker__legend-ring month-picker__legend-ring--bodyanalyzer"></span>体脂仪</span>
</div>
</div>
@@ -356,6 +379,58 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
</div>
<!-- ====== 数据来源区域卡片 ====== -->
<div class="source-card">
<div class="type-cards">
<!-- 体重秤 -->
<div class="type-card" onclick="showSourceTip('体重秤')">
<div class="type-card__icon-wrap type-card__icon-wrap--stadiometer">
<svg viewBox="0 0 24 24" fill="none" stroke="#5470c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="16" rx="2"/>
<path d="M8 10a4 4 0 018 0"/>
<circle cx="12" cy="10" r="1"/>
</svg>
</div>
<div class="type-card__label">体重秤</div>
<div class="type-card__val"><em>72.4</em> kg</div>
</div>
<!-- 蓝牙称 -->
<div class="type-card" onclick="showSourceTip('蓝牙称')">
<div class="type-card__icon-wrap type-card__icon-wrap--bluetooth">
<svg viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6.5 6.5 17.5 17.5 12 22 12 2 17.5 6.5 6.5 17.5"/>
</svg>
</div>
<div class="type-card__label">蓝牙称</div>
<div class="type-card__val"><em>72.1</em> kg</div>
</div>
<!-- 体脂仪 -->
<div class="type-card" onclick="showSourceTip('体脂仪')">
<div class="type-card__icon-wrap type-card__icon-wrap--bodyanalyzer">
<svg viewBox="0 0 24 24" fill="none" stroke="#1e3a5f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="5" r="2.5"/>
<path d="M12 8v6"/>
<path d="M8 11h8"/>
<path d="M9 22l3-8 3 8"/>
</svg>
</div>
<div class="type-card__label">体脂仪</div>
<div class="type-card__val type-card__val--empty">尚未记录</div>
</div>
<!-- 自记 -->
<div class="type-card" onclick="addRecord()">
<div class="type-card__icon-wrap type-card__icon-wrap--manual">
<svg viewBox="0 0 24 24" fill="none" stroke="#fa8c16" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="type-card__label">自记</div>
<div class="type-card__val"><em>72.6</em> kg</div>
</div>
</div>
</div>
<!-- ====== 体重趋势卡片(照搬 weight-main.html 体重记录卡片) ====== -->
<div class="record-card">
<div class="record-card__header">
@@ -735,14 +810,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="height: 12px; flex-shrink: 0;"></div>
</div>
<!-- ====== 底部工具栏 ====== -->
<div class="toolbar">
<button class="toolbar__btn toolbar__btn--manual" onclick="addRecord('manual')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
记录体重
</button>
</div>
<!-- ====== 记录体重底部弹窗 ====== -->
<div class="sheet-mask" id="recordSheetMask" onclick="closeRecordSheet()"></div>
<div class="sheet" id="recordSheet">
@@ -847,7 +914,8 @@ function renderWeek() {
'<div class="cal-day__date-wrap">' +
(hasData ? '<div class="cal-day__ring cal-day__ring--' + (daySource || 'manual') + '"></div>' : '') +
'<span class="cal-day__num">' + dayNum + '</span>' +
'</div>';
'</div>' +
(hasData ? '<div class="cal-day__src cal-day__src--' + (daySource || 'manual') + '">' + ({ manual: '自记', bluetooth: '蓝牙称', stadiometer: '体重秤', bodyanalyzer: '体脂仪' }[daySource] || '自记') + '</div>' : '<div class="cal-day__src"></div>');
container.appendChild(dayEl);
}
@@ -1124,11 +1192,15 @@ function renderWaistMetric(waist) {
/* 来源标记文案映射 */
function sourceLabel(src) {
var map = { manual: '自记', bluetooth: '蓝牙称', stadiometer: '身高秤', bodyanalyzer: '体脂仪' };
var map = { manual: '自记', bluetooth: '蓝牙称', stadiometer: '体重秤', bodyanalyzer: '体脂仪' };
return map[src] || '自记';
}
/* ===== 工具栏按钮 ===== */
function showSourceTip(name) {
alert(name + ':查看今日该来源的体重记录');
}
function addRecord(type) {
openRecordSheet();
}
@@ -1403,7 +1475,7 @@ function renderRecordList(range) {
return;
}
var srcMap = { manual: '自记', bluetooth: '蓝牙称', stadiometer: '身高秤', bodyanalyzer: '体脂仪' };
var srcMap = { manual: '自记', bluetooth: '蓝牙称', stadiometer: '体重秤', bodyanalyzer: '体脂仪' };
// 来源 → 详细报告页跳转地址(体脂仪跳转独立报告页,其余复用 report-detail.html
var reportUrlMap = {
bluetooth: 'report-detail.html?device=bluetooth',