feat: 新增蓝牙体重秤小程序原型页面，更新工单详情及导航
- 新增 other-module/bluetooth-scale-miniprogram/ 11个原型页面（首页、主页、搜索设备、WiFi连接、数据详情、成员管理等） - 工单详情页新增目的地和备注信息字段 - index.html 站点导航新增蓝牙称小程序入口 - .gitignore 新增 .zcode/ 本地工作目录忽略规则
This commit is contained in:
liuyunqin
@@ -4,6 +4,9 @@ node_modules/
|
||||
AGENTS.md
|
||||
.claude/settings.local.json
|
||||
|
||||
# ZCode 本地工作目录
|
||||
.zcode/
|
||||
|
||||
# 临时文件（工具自动生成，下划线开头）
|
||||
_*.png
|
||||
_*.jpg
|
||||
|
||||
@@ -170,6 +170,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="info-item"><span class="info-item__label">驾驶人电话</span><span class="info-item__value">138-9101-2001</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">138-9201-5001</span></div>
|
||||
<div class="info-item"><span class="info-item__label">目的地</span><span class="info-item__value">CQ能源职工医院急诊科</span></div>
|
||||
<div class="info-item"><span class="info-item__label">备注</span><span class="info-item__value">患者疑似脑血管意外，请携带心电监护设备</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -998,6 +998,14 @@ const SITE_MAP = [
|
||||
{label:'净菜包装贴标秤 · 包装作业', file:'clean-veg-packaging-labeler/02-labeling.html'},
|
||||
{label:'净菜包装贴标秤 · 包装历史', file:'clean-veg-packaging-labeler/03-history.html'},
|
||||
{label:'净菜包装贴标秤 · 标签预览', file:'clean-veg-packaging-labeler/label-preview.html'}
|
||||
] },
|
||||
{ name:'蓝牙称小程序', dir:'other-module/bluetooth-scale-miniprogram', entry:'index.html', done:true, pages:[
|
||||
{label:'登录页', file:'index.html'},
|
||||
{label:'主页（四Tab）', file:'main.html'},
|
||||
{label:'搜索设备', file:'search-device.html'},
|
||||
{label:'WiFi连接', file:'wifi-connect.html'},
|
||||
{label:'测量数据详情', file:'data-detail.html'},
|
||||
{label:'设备成员管理', file:'device-members.html'}
|
||||
] }
|
||||
]}
|
||||
];
|
||||
|
||||
@@ -0,0 +1,368 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>添加成员 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 用户类型选择 */
|
||||
.type-selector { margin-bottom: 16px; }
|
||||
.type-selector__label { font-size: 13px; color: #666; font-weight: 600; margin-bottom: 8px; }
|
||||
.type-selector__options { display: flex; gap: 10px; }
|
||||
.type-option {
|
||||
flex: 1; padding: 12px; border-radius: 12px; border: 2px solid #eee;
|
||||
background: #fafafa; text-align: center; font-size: 14px; color: #999;
|
||||
font-weight: 600; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.type-option--active { border-color: var(--primary); background: #e8f8ef; color: var(--primary); }
|
||||
|
||||
/* 表单 */
|
||||
.form-card {
|
||||
background: #fff; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 12px;
|
||||
}
|
||||
.form-item {
|
||||
display: flex; align-items: center; padding: 14px 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.form-item:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 14px; color: #333; width: 80px; flex-shrink: 0; font-weight: 500; }
|
||||
.form-input {
|
||||
flex: 1; border: none; outline: none; font-size: 14px; color: #333;
|
||||
text-align: right; background: transparent;
|
||||
}
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.form-unit { color: #999; font-size: 13px; margin-left: 4px; }
|
||||
|
||||
/* 性别选择 */
|
||||
.gender-row {
|
||||
flex-direction: column; align-items: flex-start; gap: 10px;
|
||||
}
|
||||
.gender-options { display: flex; gap: 10px; width: 100%; }
|
||||
.gender-option {
|
||||
flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #eee;
|
||||
background: #fafafa; text-align: center; font-size: 14px; color: #999;
|
||||
cursor: pointer; font-weight: 600;
|
||||
}
|
||||
.gender-option--active { border-color: var(--primary); background: #e8f8ef; color: var(--primary); }
|
||||
|
||||
/* 员工查询 */
|
||||
.emp-result {
|
||||
background: rgba(7,193,96,0.08); border-radius: 14px;
|
||||
margin-bottom: 12px; padding: 16px; border: 1px solid rgba(7,193,96,0.2);
|
||||
}
|
||||
.emp-result__title { font-size: 12px; color: #666; margin-bottom: 10px; }
|
||||
.emp-result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.emp-result__item {
|
||||
background: rgba(7,193,96,0.06); border-radius: 8px; padding: 8px 10px;
|
||||
}
|
||||
.emp-result__label { font-size: 10px; color: #999; }
|
||||
.emp-result__val { font-size: 14px; color: #1a1a1a; font-weight: 600; margin-top: 2px; }
|
||||
|
||||
.emp-hint { text-align: center; font-size: 11px; color: #bbb; padding: 16px; }
|
||||
|
||||
/* 按钮 */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #07c160, #06ad56); color: #fff;
|
||||
border: none; border-radius: 12px; padding: 14px; font-size: 16px;
|
||||
font-weight: 600; width: 100%; cursor: pointer;
|
||||
box-shadow: 0 4px 14px rgba(7,193,96,0.35);
|
||||
}
|
||||
.btn-primary:active { opacity: 0.85; }
|
||||
.btn-outline {
|
||||
width: 100%; background: #e8f8ef; color: var(--primary);
|
||||
border: 2px solid var(--primary); border-radius: 12px;
|
||||
padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17,24,39,0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="javascript:history.back()">‹</a>
|
||||
<span class="title">添加成员</span>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 用户类型选择 -->
|
||||
<div class="type-selector" id="typeSelector">
|
||||
<div class="type-selector__label">用户类型</div>
|
||||
<div class="type-selector__options">
|
||||
<div class="type-option type-option--active" id="typeEmployee" onclick="selectType('employee')">👔 员工</div>
|
||||
<div class="type-option" id="typeFamily" onclick="selectType('family')">👨👩👧 家庭成员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工表单 -->
|
||||
<div id="employeeForm">
|
||||
<div class="form-card">
|
||||
<div class="form-item">
|
||||
<span class="form-label">员工编号</span>
|
||||
<input id="employeeNo" class="form-input" placeholder="请输入员工编号">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="queryEmployee()" style="margin-bottom:12px;">确认查询</button>
|
||||
|
||||
<!-- 查询结果 -->
|
||||
<div class="emp-result" id="empResult" style="display:none;">
|
||||
<div class="emp-result__title">员工信息</div>
|
||||
<div class="emp-result__grid">
|
||||
<div class="emp-result__item">
|
||||
<div class="emp-result__label">姓名</div>
|
||||
<div class="emp-result__val" id="empInfoName">—</div>
|
||||
</div>
|
||||
<div class="emp-result__item">
|
||||
<div class="emp-result__label">单位-部门</div>
|
||||
<div class="emp-result__val" id="empInfoDept">—</div>
|
||||
</div>
|
||||
<div class="emp-result__item">
|
||||
<div class="emp-result__label">性别</div>
|
||||
<div class="emp-result__val" id="empInfoGender">—</div>
|
||||
</div>
|
||||
<div class="emp-result__item">
|
||||
<div class="emp-result__label">年龄</div>
|
||||
<div class="emp-result__val" id="empInfoAge">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 补充信息 -->
|
||||
<div id="empSupplement" style="display:none;">
|
||||
<div class="form-card">
|
||||
<div style="padding:12px 16px 8px;font-size:13px;color:#666;font-weight:600;">补充信息</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">身高<span style="color:#ff4d4f;">*</span></span>
|
||||
<input id="empHeight" class="form-input" type="number" placeholder="请输入身高"><span class="form-unit">cm</span>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">体重</span>
|
||||
<input id="empWeight" class="form-input" type="number" placeholder="有数据则自动填入"><span class="form-unit">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="saveMember()">保存用户信息</button>
|
||||
</div>
|
||||
|
||||
<div class="emp-hint" id="empHint">输入员工编号后自动查询员工信息</div>
|
||||
</div>
|
||||
|
||||
<!-- 家庭成员表单 -->
|
||||
<div id="familyForm" style="display:none;">
|
||||
<button id="selectMemberBtn" onclick="openMemberSelector()" style="width:100%;margin-bottom:12px;background:#e8f8ef;color:#07c160;border:2px solid #07c160;border-radius:12px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;">从已有成员中选择</button>
|
||||
<div class="form-card">
|
||||
<div class="form-item">
|
||||
<span class="form-label">昵称<span style="color:#ff4d4f;">*</span></span>
|
||||
<input id="memberName" class="form-input" placeholder="请输入昵称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">身份证</span>
|
||||
<input id="memberId" class="form-input" placeholder="选填，填写后自动识别性别和出生年月" oninput="parseIdCard()">
|
||||
</div>
|
||||
<div class="form-item gender-row">
|
||||
<span class="form-label">性别<span style="color:#ff4d4f;">*</span></span>
|
||||
<div class="gender-options">
|
||||
<div class="gender-option gender-option--active" id="genderMale" onclick="selectGender('male')">👨 男</div>
|
||||
<div class="gender-option" id="genderFemale" onclick="selectGender('female')">👩 女</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">出生年月<span style="color:#ff4d4f;">*</span></span>
|
||||
<input id="memberBirth" class="form-input" type="month" placeholder="请选择出生年月">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">身高<span style="color:#ff4d4f;">*</span></span>
|
||||
<input id="memberHeight" class="form-input" type="number" placeholder="请输入身高"><span class="form-unit">cm</span>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">体重</span>
|
||||
<input id="memberWeight" class="form-input" type="number" placeholder="选填"><span class="form-unit">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="saveMember()">保存用户信息</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
|
||||
<!-- 成员选择器模态框 -->
|
||||
<div id="memberSelectorModal" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:flex-end;border-radius:44px;overflow:hidden;">
|
||||
<div style="width:100%;height:70%;background:#fff;border-radius:20px 20px 0 0;display:flex;flex-direction:column;box-shadow:0 -4px 20px rgba(0,0,0,0.15);overflow:hidden;">
|
||||
<div style="padding:16px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;">
|
||||
<div style="font-size:16px;font-weight:600;color:#333;">选择已有成员</div>
|
||||
<div onclick="closeMemberSelector()" style="font-size:24px;cursor:pointer;color:#999;line-height:1;">×</div>
|
||||
</div>
|
||||
<div style="flex:1;overflow-y:auto;">
|
||||
<div onclick="selectMember('李明','male','1990-12','170')" style="padding:12px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#07c160,#0aad50);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;flex-shrink:0;">李</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:14px;font-weight:600;color:#333;">李明</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">男 · 1990-12 · 170cm</div>
|
||||
</div>
|
||||
<span style="color:#07c160;font-size:13px;">选择</span>
|
||||
</div>
|
||||
<div onclick="selectMember('王芳','female','1992-06','162')" style="padding:12px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ff85c0,#ffadd2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;flex-shrink:0;">王</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:14px;font-weight:600;color:#333;">王芳</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">女 · 1992-06 · 162cm</div>
|
||||
</div>
|
||||
<span style="color:#07c160;font-size:13px;">选择</span>
|
||||
</div>
|
||||
<div onclick="selectMember('张伟','male','1985-03','178')" style="padding:12px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1890ff,#096dd9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;flex-shrink:0;">张</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:14px;font-weight:600;color:#333;">张伟</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">男 · 1985-03 · 178cm</div>
|
||||
</div>
|
||||
<span style="color:#07c160;font-size:13px;">选择</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currentType = 'employee';
|
||||
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
/* 用户类型切换 */
|
||||
function selectType(type) {
|
||||
currentType = type;
|
||||
document.getElementById('typeEmployee').classList.toggle('type-option--active', type === 'employee');
|
||||
document.getElementById('typeFamily').classList.toggle('type-option--active', type === 'family');
|
||||
document.getElementById('employeeForm').style.display = (type === 'employee') ? '' : 'none';
|
||||
document.getElementById('familyForm').style.display = (type === 'family') ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 性别选择 */
|
||||
function selectGender(gender) {
|
||||
document.getElementById('genderMale').classList.toggle('gender-option--active', gender === 'male');
|
||||
document.getElementById('genderFemale').classList.toggle('gender-option--active', gender === 'female');
|
||||
}
|
||||
|
||||
/* 身份证解析 */
|
||||
function parseIdCard() {
|
||||
var id = document.getElementById('memberId').value;
|
||||
if (id.length >= 17) {
|
||||
// 第17位：奇数为男，偶数为女
|
||||
var genderCode = parseInt(id.charAt(16));
|
||||
if (genderCode % 2 === 1) {
|
||||
selectGender('male');
|
||||
} else {
|
||||
selectGender('female');
|
||||
}
|
||||
// 第7-14位为出生日期
|
||||
var year = id.substring(6, 10);
|
||||
var month = id.substring(10, 12);
|
||||
document.getElementById('memberBirth').value = year + '-' + month;
|
||||
}
|
||||
}
|
||||
|
||||
/* 员工查询 */
|
||||
function queryEmployee() {
|
||||
var no = document.getElementById('employeeNo').value.trim();
|
||||
if (!no) { showToast('请输入员工编号'); return; }
|
||||
// 模拟查询
|
||||
document.getElementById('empInfoName').textContent = '张建国';
|
||||
document.getElementById('empInfoDept').textContent = '技术部-研发组';
|
||||
document.getElementById('empInfoGender').textContent = '男';
|
||||
document.getElementById('empInfoAge').textContent = '45岁';
|
||||
document.getElementById('empResult').style.display = '';
|
||||
document.getElementById('empSupplement').style.display = '';
|
||||
document.getElementById('empHint').style.display = 'none';
|
||||
}
|
||||
|
||||
/* 保存 */
|
||||
function saveMember() {
|
||||
showToast('保存成功！');
|
||||
setTimeout(function() {
|
||||
history.back();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
/* 成员选择器 */
|
||||
function openMemberSelector() {
|
||||
document.getElementById('memberSelectorModal').style.display = 'flex';
|
||||
}
|
||||
function closeMemberSelector() {
|
||||
document.getElementById('memberSelectorModal').style.display = 'none';
|
||||
}
|
||||
function selectMember(name, gender, birth, height) {
|
||||
document.getElementById('memberName').value = name;
|
||||
selectGender(gender);
|
||||
document.getElementById('memberBirth').value = birth;
|
||||
document.getElementById('memberHeight').value = height;
|
||||
closeMemberSelector();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>详细报告 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--primary-dark: #06ad56;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 12px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 报告头部 */
|
||||
.report-header {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
border-radius: 16px; padding: 20px; color: #fff; margin-bottom: 12px;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.report-header::after {
|
||||
content: ''; position: absolute; top: -30px; right: -30px;
|
||||
width: 100px; height: 100px; background: rgba(255,255,255,0.08); border-radius: 50%;
|
||||
}
|
||||
.report-header__top {
|
||||
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.report-header__time { font-size: 13px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
|
||||
.report-header__main {
|
||||
display: flex; align-items: center; gap: 20px; position: relative; z-index: 1;
|
||||
}
|
||||
.report-header__weight { display: flex; align-items: baseline; gap: 4px; }
|
||||
.report-header__weight-num { font-size: 42px; font-weight: 800; line-height: 1; }
|
||||
.report-header__weight-unit { font-size: 16px; opacity: 0.8; }
|
||||
.report-header__tags { display: flex; flex-direction: column; gap: 6px; }
|
||||
.report-tag {
|
||||
display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
|
||||
border-radius: 20px; font-size: 12px; font-weight: 500;
|
||||
}
|
||||
.report-tag--normal { background: rgba(255,255,255,0.2); color: #fff; }
|
||||
.report-tag--change { background: rgba(255,255,255,0.15); color: #fff; }
|
||||
|
||||
/* 数据分区 */
|
||||
.data-section { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
|
||||
.data-section__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
||||
.data-section__title::before {
|
||||
content: ''; width: 3px; height: 16px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 网格布局 */
|
||||
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
||||
.data-cell {
|
||||
padding: 12px; border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.data-cell:nth-child(odd) { border-right: 1px solid #f5f5f5; }
|
||||
.data-cell:nth-last-child(-n+2) { border-bottom: none; }
|
||||
.data-cell:nth-last-child(1):nth-child(odd) { border-bottom: none; border-right: none; }
|
||||
.data-cell__label { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.data-cell__value { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.data-cell__unit { font-size: 11px; color: #999; margin-left: 2px; }
|
||||
.data-cell__status {
|
||||
display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px;
|
||||
}
|
||||
.data-cell__status--normal { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.data-cell__status--high { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
|
||||
|
||||
/* 行布局 */
|
||||
.data-row {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 12px 0; border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.data-row:last-child { border-bottom: none; }
|
||||
.data-row__label { font-size: 14px; color: #666; }
|
||||
.data-row__right { display: flex; align-items: center; gap: 6px; }
|
||||
.data-row__value { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.data-row__unit { font-size: 12px; color: #999; }
|
||||
|
||||
/* BMI 指示条 */
|
||||
.bmi-bar { margin-top: 12px; }
|
||||
.bmi-bar__track {
|
||||
height: 8px; border-radius: 4px;
|
||||
background: linear-gradient(90deg, #69c0ff 0%, #69c0ff 17.5%, #52c41a 17.5%, #52c41a 45%, #faad14 45%, #faad14 65%, #ff4d4f 65%, #ff4d4f 100%);
|
||||
position: relative;
|
||||
}
|
||||
.bmi-bar__pointer {
|
||||
position: absolute; top: -4px; width: 16px; height: 16px;
|
||||
background: #fff; border: 3px solid var(--primary); border-radius: 50%;
|
||||
transform: translateX(-50%); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
.bmi-bar__labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: #999; }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html">‹</a>
|
||||
<span class="title">详细报告</span>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 报告头部 -->
|
||||
<div class="report-header">
|
||||
<div class="report-header__top">
|
||||
<div class="report-header__time">📅 2026-07-16 08:32</div>
|
||||
</div>
|
||||
<div class="report-header__main">
|
||||
<div class="report-header__weight">
|
||||
<span class="report-header__weight-num">72.5</span>
|
||||
<span class="report-header__weight-unit">kg</span>
|
||||
</div>
|
||||
<div class="report-header__tags">
|
||||
<span class="report-tag report-tag--normal">BMI 正常</span>
|
||||
<span class="report-tag report-tag--change">较上次 -0.3kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础指标 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">基础指标</div>
|
||||
<div class="data-grid">
|
||||
<div class="data-cell"><div class="data-cell__label">身高</div><div class="data-cell__value">175<span class="data-cell__unit">cm</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体重</div><div class="data-cell__value">72.5<span class="data-cell__unit">kg</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">BMI</div><div class="data-cell__value">23.7<span class="data-cell__status data-cell__status--normal">正常</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">基础代谢</div><div class="data-cell__value">1,680<span class="data-cell__unit">kcal</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体脂肪量</div><div class="data-cell__value">15.2<span class="data-cell__unit">kg</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体脂肪率</div><div class="data-cell__value">21.0<span class="data-cell__unit">%</span><span class="data-cell__status data-cell__status--normal">正常</span></div></div>
|
||||
</div>
|
||||
<div class="bmi-bar">
|
||||
<div class="bmi-bar__track"><div class="bmi-bar__pointer" style="left:43.5%"></div></div>
|
||||
<div class="bmi-bar__labels"><span>BMI<18.5 消瘦</span><span>18.5≤BMI<24 正常</span><span>24≤BMI<28 超重</span><span>BMI≥28 肥胖</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 水分与蛋白质 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">水分与蛋白质</div>
|
||||
<div class="data-row"><span class="data-row__label">体水分量</span><div class="data-row__right"><span class="data-row__value">37.8</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体水分率</span><div class="data-row__right"><span class="data-row__value">52.1</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">蛋白质量</span><div class="data-row__right"><span class="data-row__value">8.2</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">蛋白质率</span><div class="data-row__right"><span class="data-row__value">11.3</span><span class="data-row__unit">%</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 肌肉与骨骼 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">肌肉与骨骼</div>
|
||||
<div class="data-row"><span class="data-row__label">体肌肉量</span><div class="data-row__right"><span class="data-row__value">30.5</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体肌肉率</span><div class="data-row__right"><span class="data-row__value">42.1</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体骨骼量</span><div class="data-row__right"><span class="data-row__value">3.0</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 脂肪分析 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">脂肪分析</div>
|
||||
<div class="data-row"><span class="data-row__label">皮下脂肪量</span><div class="data-row__right"><span class="data-row__value">12.8</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">皮下脂肪率</span><div class="data-row__right"><span class="data-row__value">17.7</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">除脂肪量</span><div class="data-row__right"><span class="data-row__value">57.3</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 细胞液 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">细胞液</div>
|
||||
<div class="data-row"><span class="data-row__label">细胞外液量</span><div class="data-row__right"><span class="data-row__value">14.2</span><span class="data-row__unit">L</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞外液率</span><div class="data-row__right"><span class="data-row__value">37.6</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞内液量</span><div class="data-row__right"><span class="data-row__value">23.6</span><span class="data-row__unit">L</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞内液率</span><div class="data-row__right"><span class="data-row__value">62.4</span><span class="data-row__unit">%</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 其他 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">其他</div>
|
||||
<div class="data-row"><span class="data-row__label">矿物质量</span><div class="data-row__right"><span class="data-row__value">3.48</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>成员管理 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1677ff;
|
||||
--primary-light: #e6f4ff;
|
||||
--success: #52c41a;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 设备信息卡片 */
|
||||
.device-info {
|
||||
background: #fff; border-radius: 12px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
|
||||
}
|
||||
.device-info__icon {
|
||||
width: 48px; height: 48px; border-radius: 12px;
|
||||
background: var(--primary-light); display: flex;
|
||||
align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
|
||||
}
|
||||
.device-info__detail { flex: 1; }
|
||||
.device-info__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.device-info__sn { font-size: 12px; color: var(--text-placeholder); margin-top: 2px; line-height: 1.6; }
|
||||
.device-info__status {
|
||||
font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.device-info__status--online { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.device-info__status--offline { background: #f5f5f5; color: #999; border: 1px solid #e8e8e8; }
|
||||
|
||||
/* 成员列表 */
|
||||
.section-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.add-btn {
|
||||
font-size: 13px; color: var(--primary); cursor: pointer; text-decoration: none;
|
||||
display: flex; align-items: center; gap: 4px; font-weight: 500;
|
||||
}
|
||||
.sync-btn {
|
||||
font-size: 12px; padding: 5px 12px; border-radius: 8px; border: none;
|
||||
font-weight: 600; cursor: pointer; white-space: nowrap;
|
||||
background: var(--primary); color: #fff; transition: all 0.2s;
|
||||
}
|
||||
.sync-btn:active { opacity: 0.8; }
|
||||
.sync-btn--disabled {
|
||||
background: #e8e8e8; color: #bbb; cursor: not-allowed; pointer-events: none;
|
||||
}
|
||||
.member-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.member-card {
|
||||
background: #fff; border-radius: 12px; padding: 14px 16px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
.member-avatar {
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; color: #fff; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.member-avatar--male { background: linear-gradient(135deg, var(--primary), #69b1ff); }
|
||||
.member-avatar--female { background: linear-gradient(135deg, #ff85c0, #ffadd2); }
|
||||
.member-avatar--child { background: linear-gradient(135deg, #ffc069, #ffd591); }
|
||||
.member-avatar--elder { background: linear-gradient(135deg, #95de64, #b7eb8f); }
|
||||
.member-info { flex: 1; min-width: 0; }
|
||||
.member-top { display: flex; align-items: center; gap: 8px; }
|
||||
.member-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.member-tag--self {
|
||||
font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;
|
||||
background: var(--primary-light); color: var(--primary); flex-shrink: 0;
|
||||
}
|
||||
.member-tag--type {
|
||||
font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500;
|
||||
background: #f5f5f5; color: #888; flex-shrink: 0;
|
||||
}
|
||||
.member-sync { font-size: 11px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
|
||||
.member-sync--done { color: #389e0d; }
|
||||
.member-sync--pending { color: #ff4d4f; }
|
||||
.member-detail { font-size: 12px; color: var(--text-placeholder); margin-top: 4px; }
|
||||
.member-actions { display: flex; gap: 12px; margin-top: 8px; }
|
||||
.action-btn {
|
||||
font-size: 12px; padding: 4px 14px; border-radius: 6px; border: none;
|
||||
font-weight: 500; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.action-btn:active { opacity: 0.7; }
|
||||
.action-btn--edit { background: var(--primary-light); color: var(--primary); }
|
||||
.action-btn--delete { background: #fff2f0; color: #ff4d4f; }
|
||||
|
||||
/* 同步提示 */
|
||||
.sync-hint {
|
||||
margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
|
||||
font-size: 12px; background: #fff7e6; color: #d46b08;
|
||||
border-left: 3px solid #fa8c16; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 添加按钮 */
|
||||
.add-member-card {
|
||||
background: #fff; border: 1.5px dashed #d9d9d9; border-radius: 12px;
|
||||
padding: 16px; display: flex; align-items: center; justify-content: center;
|
||||
gap: 6px; color: var(--text-placeholder); cursor: pointer; font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.add-member-card:hover { border-color: var(--primary); color: var(--primary); }
|
||||
.add-member-card .plus { font-size: 20px; font-weight: 300; }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17, 24, 39, 0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
/* 同步弹窗 */
|
||||
.sync-overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
|
||||
display: none; align-items: center; justify-content: center;
|
||||
}
|
||||
.sync-overlay--show { display: flex; }
|
||||
.sync-dialog {
|
||||
width: 280px; background: #fff; border-radius: 16px; padding: 32px 24px 24px;
|
||||
text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
|
||||
animation: syncDialogIn 0.3s ease;
|
||||
}
|
||||
@keyframes syncDialogIn {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.sync-spinner {
|
||||
width: 48px; height: 48px; margin: 0 auto 16px;
|
||||
border: 4px solid #f0f0f0; border-top-color: var(--primary);
|
||||
border-radius: 50%; animation: syncSpin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes syncSpin { to { transform: rotate(360deg); } }
|
||||
.sync-dialog__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.sync-dialog__desc { font-size: 13px; color: #999; margin-bottom: 16px; line-height: 1.5; }
|
||||
.sync-progress {
|
||||
width: 100%; height: 6px; background: #f0f0f0; border-radius: 3px;
|
||||
overflow: hidden; margin-bottom: 8px;
|
||||
}
|
||||
.sync-progress__bar {
|
||||
height: 100%; background: linear-gradient(90deg, var(--primary), #0aad50);
|
||||
border-radius: 3px; width: 0%; transition: width 0.3s ease;
|
||||
}
|
||||
.sync-progress__text { font-size: 11px; color: #bbb; }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html#tab-device">‹</a>
|
||||
<span class="title">成员管理</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<div class="device-info">
|
||||
<div class="device-info__icon">⚖️</div>
|
||||
<div class="device-info__detail">
|
||||
<div class="device-info__name" id="devName">家庭蓝牙体脂秤 S1</div>
|
||||
<div class="device-info__sn" id="devMeta">型号：BS-A100<br>设备编码：BL2024A00158</div>
|
||||
</div>
|
||||
<span class="device-info__status device-info__status--online" id="devStatus">已连接</span>
|
||||
</div>
|
||||
|
||||
<!-- S1 成员列表 -->
|
||||
<div id="membersS1" style="display:none;">
|
||||
<div class="section-header">
|
||||
<span class="section-title" id="sectionTitleS1">已录入成员</span>
|
||||
<button class="sync-btn" id="syncBtnS1" onclick="syncMembers()">同步成员至设备</button>
|
||||
</div>
|
||||
<div class="sync-hint" id="syncHintS1">当前成员信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步</div>
|
||||
<div class="member-list">
|
||||
<!-- 本人置顶 -->
|
||||
<div class="member-card">
|
||||
<div class="member-avatar member-avatar--male">张</div>
|
||||
<div class="member-info">
|
||||
<div class="member-top">
|
||||
<span class="member-name">张建国</span>
|
||||
<span class="member-tag--self">本人</span>
|
||||
<span class="member-sync member-sync--done">已同步</span>
|
||||
</div>
|
||||
<div class="member-detail">男 · 45岁 · 175cm</div>
|
||||
<div class="member-actions">
|
||||
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
|
||||
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<div class="member-avatar member-avatar--female">李</div>
|
||||
<div class="member-info">
|
||||
<div class="member-top">
|
||||
<span class="member-name">李秀英</span>
|
||||
<span class="member-tag--type">家庭成员</span>
|
||||
<span class="member-sync member-sync--done">已同步</span>
|
||||
</div>
|
||||
<div class="member-detail">女 · 43岁 · 162cm <span style="font-size:11px;color:#bbb;">（他人添加）</span></div>
|
||||
<div class="member-actions">
|
||||
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
|
||||
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<div class="member-avatar member-avatar--child">张</div>
|
||||
<div class="member-info">
|
||||
<div class="member-top">
|
||||
<span class="member-name">张晓明</span>
|
||||
<span class="member-tag--type">家庭成员</span>
|
||||
<span class="member-sync member-sync--done">已同步</span>
|
||||
</div>
|
||||
<div class="member-detail">男 · 12岁 · 152cm</div>
|
||||
<div class="member-actions">
|
||||
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
|
||||
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<div class="member-avatar member-avatar--elder">王</div>
|
||||
<div class="member-info">
|
||||
<div class="member-top">
|
||||
<span class="member-name">王淑芬</span>
|
||||
<span class="member-tag--type">家庭成员</span>
|
||||
<span class="member-sync member-sync--pending">未同步</span>
|
||||
</div>
|
||||
<div class="member-detail">女 · 68岁 · 158cm</div>
|
||||
<div class="member-actions">
|
||||
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
|
||||
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<div class="add-member-card" onclick="location.href='add-member.html'">
|
||||
<span class="plus">＋</span> 添加新成员
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /membersS1 -->
|
||||
|
||||
<!-- B2 成员列表 -->
|
||||
<div id="membersB2" style="display:none;">
|
||||
<div class="section-header">
|
||||
<span class="section-title" id="sectionTitleB2">已录入成员</span>
|
||||
<button class="sync-btn" id="syncBtnB2" onclick="syncMembers()">同步成员至设备</button>
|
||||
</div>
|
||||
<div class="sync-hint" id="syncHintB2">当前成员信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步</div>
|
||||
<div class="member-list">
|
||||
<div class="member-card">
|
||||
<div class="member-avatar member-avatar--male">张</div>
|
||||
<div class="member-info">
|
||||
<div class="member-top">
|
||||
<span class="member-name">张建国</span>
|
||||
<span class="member-tag--self">本人</span>
|
||||
<span class="member-sync member-sync--pending">未同步</span>
|
||||
</div>
|
||||
<div class="member-detail">男 · 45岁 · 175cm</div>
|
||||
<div class="member-actions">
|
||||
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
|
||||
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<div class="add-member-card" onclick="location.href='add-member.html'">
|
||||
<span class="plus">＋</span> 添加新成员
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /membersB2 -->
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
/* 根据 URL 参数初始化设备信息 */
|
||||
(function() {
|
||||
var params = new URLSearchParams(location.search);
|
||||
var device = params.get('device');
|
||||
|
||||
// 设备数据
|
||||
var devices = {
|
||||
s1: {
|
||||
name: '家庭蓝牙体脂秤 S1',
|
||||
model: 'BS-A100',
|
||||
code: 'BL2024A00158',
|
||||
status: 'online',
|
||||
statusText: '已连接',
|
||||
membersDiv: 'membersS1',
|
||||
memberCount: 4,
|
||||
sectionTitleId: 'sectionTitleS1',
|
||||
syncBtnId: 'syncBtnS1'
|
||||
},
|
||||
b2: {
|
||||
name: '办公蓝牙体重秤 B2',
|
||||
model: 'BW-B200',
|
||||
code: 'BL2024B00321',
|
||||
status: 'offline',
|
||||
statusText: '未连接',
|
||||
membersDiv: 'membersB2',
|
||||
memberCount: 1,
|
||||
sectionTitleId: 'sectionTitleB2',
|
||||
syncBtnId: 'syncBtnB2'
|
||||
}
|
||||
};
|
||||
|
||||
var data = devices[device] || devices['s1'];
|
||||
|
||||
// 更新设备信息
|
||||
document.getElementById('devName').textContent = data.name;
|
||||
document.getElementById('devMeta').innerHTML = '型号：' + data.model + '<br>设备编码：' + data.code;
|
||||
|
||||
var statusEl = document.getElementById('devStatus');
|
||||
statusEl.textContent = data.statusText;
|
||||
statusEl.className = 'device-info__status device-info__status--' + data.status;
|
||||
|
||||
// 显示对应成员列表
|
||||
document.getElementById(data.membersDiv).style.display = '';
|
||||
|
||||
// 更新标题显示容量
|
||||
document.getElementById(data.sectionTitleId).textContent = '已录入成员(' + data.memberCount + '/10)';
|
||||
|
||||
// 更新同步按钮状态
|
||||
var syncBtn = document.getElementById(data.syncBtnId);
|
||||
if (data.status === 'offline') {
|
||||
syncBtn.classList.add('sync-btn--disabled');
|
||||
syncBtn.disabled = true;
|
||||
}
|
||||
|
||||
// 更新返回按钮，带上设备参数
|
||||
document.querySelector('.nav-bar .back').href = 'main.html#tab-device-paired';
|
||||
})();
|
||||
|
||||
/* 同步成员至设备 */
|
||||
function syncMembers() {
|
||||
var overlay = document.getElementById('syncOverlay');
|
||||
var bar = document.getElementById('syncProgressBar');
|
||||
var text = document.getElementById('syncProgressText');
|
||||
var pct = document.getElementById('syncPercent');
|
||||
overlay.classList.add('sync-overlay--show');
|
||||
bar.style.width = '0%';
|
||||
pct.textContent = '0%';
|
||||
text.textContent = '正在同步信息，请勿离开...';
|
||||
|
||||
// 模拟进度
|
||||
var progress = 0;
|
||||
var timer = setInterval(function() {
|
||||
progress += Math.random() * 25 + 10;
|
||||
if (progress >= 100) {
|
||||
progress = 100;
|
||||
clearInterval(timer);
|
||||
bar.style.width = '100%';
|
||||
pct.textContent = '100%';
|
||||
text.textContent = '同步完成';
|
||||
setTimeout(function() {
|
||||
overlay.classList.remove('sync-overlay--show');
|
||||
showToast('成员信息同步成功！');
|
||||
}, 600);
|
||||
} else {
|
||||
bar.style.width = progress + '%';
|
||||
pct.textContent = Math.floor(progress) + '%';
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 同步弹窗 -->
|
||||
<div class="sync-overlay" id="syncOverlay">
|
||||
<div class="sync-dialog">
|
||||
<div class="sync-spinner"></div>
|
||||
<div class="sync-dialog__title">同步成员至设备</div>
|
||||
<div class="sync-dialog__desc" id="syncProgressText">正在同步信息，请勿离开...</div>
|
||||
<div class="sync-progress">
|
||||
<div class="sync-progress__bar" id="syncProgressBar"></div>
|
||||
</div>
|
||||
<div class="sync-progress__text" id="syncPercent">0%</div>
|
||||
</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>帮助中心 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
.faq-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.faq-item {
|
||||
background: #fff; padding: 14px 16px; border-bottom: 1px solid #f5f5f5;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
text-decoration: none; color: inherit;
|
||||
}
|
||||
.faq-item:first-child { border-radius: 14px 14px 0 0; }
|
||||
.faq-item:last-child { border-radius: 0 0 14px 14px; border-bottom: none; }
|
||||
.faq-item:only-child { border-radius: 14px; }
|
||||
.faq-item:active { background: #fafafa; }
|
||||
.faq-item__icon {
|
||||
width: 36px; height: 36px; border-radius: 10px;
|
||||
background: #f0faf5; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 16px; flex-shrink: 0;
|
||||
}
|
||||
.faq-item__info { flex: 1; min-width: 0; }
|
||||
.faq-item__title { font-size: 14px; font-weight: 500; color: #1a1a1a; }
|
||||
.faq-item__arrow { font-size: 16px; color: #ccc; }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html#tab-me">‹</a>
|
||||
<span class="title">帮助中心</span>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="faq-list">
|
||||
<a class="faq-item" href="help-detail.html?id=1">
|
||||
<div class="faq-item__icon">📡</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">如何连接蓝牙设备？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="faq-item" href="help-detail.html?id=2">
|
||||
<div class="faq-item__icon">📶</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">设备无法连接WiFi怎么办？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="faq-item" href="help-detail.html?id=3">
|
||||
<div class="faq-item__icon">👥</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">如何添加和管理成员？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="faq-item" href="help-detail.html?id=4">
|
||||
<div class="faq-item__icon">📊</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">测量数据不准确如何校准？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="faq-item" href="help-detail.html?id=5">
|
||||
<div class="faq-item__icon">🔄</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">数据补传功能如何使用？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="faq-item" href="help-detail.html?id=6">
|
||||
<div class="faq-item__icon">🔋</div>
|
||||
<div class="faq-item__info">
|
||||
<div class="faq-item__title">设备电量消耗过快？</div>
|
||||
</div>
|
||||
<span class="faq-item__arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>问题详情 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #fff; padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
.detail-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; line-height: 1.5; }
|
||||
.detail-content { font-size: 14px; color: #666; line-height: 1.8; }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="help-center.html">‹</a>
|
||||
<span class="title">问题详情</span>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-content" id="detailContent"></div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var faqData = {
|
||||
1: {
|
||||
title: '如何连接蓝牙设备？',
|
||||
content: '1. 确保手机蓝牙已开启；<br>2. 确保设备处于开机状态并靠近手机（2米以内）；<br>3. 打开小程序，进入"设备"页面；<br>4. 点击"绑定设备"按钮，系统将自动搜索附近蓝牙设备；<br>5. 在搜索结果中选择您的设备，点击即可完成绑定。'
|
||||
},
|
||||
2: {
|
||||
title: '设备无法连接WiFi怎么办？',
|
||||
content: '1. 确保设备在WiFi信号覆盖范围内；<br>2. 进入"设备"页面，点击已连接设备的"设备WIFI"按钮；<br>3. 选择附近可用的WiFi网络；<br>4. 输入正确的WiFi密码完成连接；<br>5. 如仍无法连接，尝试重启设备和路由器。'
|
||||
},
|
||||
3: {
|
||||
title: '如何添加和管理成员？',
|
||||
content: '1. 进入"设备"页面，点击设备的"成员管理"按钮；<br>2. 点击"添加新成员"进入添加页面；<br>3. 选择用户类型（员工/家庭成员）；<br>4. 填写成员信息后保存；<br>5. 在设备连接状态下，点击"同步成员至设备"将成员信息同步到设备。'
|
||||
},
|
||||
4: {
|
||||
title: '测量数据不准确如何校准？',
|
||||
content: '1. 请将设备放置在坚硬平整的地面上使用；<br>2. 测量时保持身体直立、双脚均匀站在秤面上；<br>3. 确保已正确填写个人信息（身高、年龄、性别）；<br>4. 避免在运动后、沐浴后立即测量；<br>5. 建议每天固定时间（如早晨空腹）测量，以获得更准确的数据对比。'
|
||||
},
|
||||
5: {
|
||||
title: '数据补传功能如何使用？',
|
||||
content: '1. 确保设备已连接；<br>2. 进入"设备"页面，点击已连接设备的"数据补传"按钮；<br>3. 系统将自动获取设备本地未上传的测量数据；<br>4. 在数据列表中点击"一键上传"将数据同步至云端；<br>5. 上传完成后即可在历史数据中查看。'
|
||||
},
|
||||
6: {
|
||||
title: '设备电量消耗过快？',
|
||||
content: '1. 检查设备是否长时间处于WiFi搜索状态；<br>2. 在不使用时建议关闭设备电源；<br>3. 避免设备长期处于高温或低温环境；<br>4. 如电池老化，建议联系售后更换电池；<br>5. 正常使用情况下，设备电池可持续使用约3-6个月。'
|
||||
}
|
||||
};
|
||||
|
||||
var id = new URLSearchParams(location.search).get('id') || '1';
|
||||
var data = faqData[id] || faqData['1'];
|
||||
document.getElementById('detailTitle').textContent = data.title;
|
||||
document.getElementById('detailContent').innerHTML = data.content;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--primary-dark: #129451;
|
||||
--bg: #f5f5f5;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #999;
|
||||
--text-muted: #bbb;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; height: 812px;
|
||||
background: #fff;
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.page-content {
|
||||
flex: 1; overflow-y: auto; background: #fff;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 0 32px; position: relative;
|
||||
}
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Logo 区域 */
|
||||
.logo-area { margin-top: 80px; text-align: center; }
|
||||
.logo-icon {
|
||||
width: 80px; height: 80px; border-radius: 20px;
|
||||
background: linear-gradient(135deg, #07c160 0%, #12b981 54%, #1f9d64 100%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 14px 28px rgba(7, 193, 96, 0.24);
|
||||
}
|
||||
.logo-icon svg { width: 44px; height: 44px; }
|
||||
.app-name { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.app-sub { font-size: 13px; color: #999; }
|
||||
|
||||
/* 功能介绍 */
|
||||
.features { display: flex; gap: 32px; margin-top: 48px; }
|
||||
.feature-item { text-align: center; }
|
||||
.feature-icon {
|
||||
width: 48px; height: 48px; border-radius: 14px;
|
||||
background: #f0fdf4; display: flex; align-items: center;
|
||||
justify-content: center; margin: 0 auto 8px; font-size: 24px;
|
||||
}
|
||||
.feature-text { font-size: 12px; color: #666; }
|
||||
|
||||
/* 底部区域 */
|
||||
.bottom-area { margin-top: auto; width: 100%; padding: 0 0 40px; }
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%; height: 52px; border: none; border-radius: 14px;
|
||||
font-size: 17px; font-weight: 700; color: #fff; cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
box-shadow: 0 12px 24px rgba(7, 193, 96, 0.24);
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.login-btn:active { transform: scale(0.98); }
|
||||
.login-btn .btn-icon {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.25); display: flex;
|
||||
align-items: center; justify-content: center; font-size: 14px;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: absolute; top: 20px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17, 24, 39, 0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 44 44" fill="none">
|
||||
<rect x="12" y="3" width="20" height="24" rx="4" stroke="#fff" stroke-width="2.5"/>
|
||||
<path d="M18 13h8M18 18h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="32" r="7" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="2"/>
|
||||
<path d="M19 31l2 2 4-4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12l4-4 4 4M2 20l4-4 4 4" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">蓝牙称</div>
|
||||
<div class="app-sub">智能蓝牙体重管理</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能亮点 -->
|
||||
<div class="features">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">⚖️</div>
|
||||
<div class="feature-text">精准称重</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">📊</div>
|
||||
<div class="feature-text">趋势分析</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">👨👩👧</div>
|
||||
<div class="feature-text">多成员管理</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部登录 -->
|
||||
<div class="bottom-area">
|
||||
<button class="login-btn" onclick="handleLogin()">
|
||||
<span class="btn-icon">微</span>
|
||||
微信一键登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
function handleLogin() {
|
||||
showToast('授权成功，正在进入…');
|
||||
setTimeout(function() {
|
||||
window.location.href = 'profile-complete.html';
|
||||
}, 600);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,946 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>蓝牙称 - 主页 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1677ff;
|
||||
--primary-light: #e6f4ff;
|
||||
--success: #52c41a;
|
||||
--warning: #fa8c16;
|
||||
--danger: #ff4d4f;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Tab 内容面板 */
|
||||
.tab-panel { display: none; padding: 16px; }
|
||||
.tab-panel--active { display: block; }
|
||||
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center;
|
||||
gap: 2px; text-decoration: none; font-size: 10px; color: #999;
|
||||
padding: 6px 0; cursor: pointer; transition: color 0.2s;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: var(--primary); }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
|
||||
/* ===== 首页 Tab 样式 ===== */
|
||||
.home-header {
|
||||
background: linear-gradient(135deg, #07c160, #0aad50); padding: 16px 16px 18px;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.home-header::after {
|
||||
content: ''; position: absolute; top: -20px; right: -20px;
|
||||
width: 100px; height: 100px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.home-header__title { font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
|
||||
.home-header__sub { font-size: 13px; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
|
||||
|
||||
.device-card {
|
||||
background: #fff; border-radius: 14px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||||
}
|
||||
.device-card__icon {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: #f0faf5; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
|
||||
}
|
||||
.device-card__info { flex: 1; min-width: 0; }
|
||||
.device-card__name-row { display: flex; align-items: center; gap: 8px; }
|
||||
.device-card__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.device-card__switch-btn {
|
||||
background: #fff; border: 1px solid #d9d9d9; border-radius: 8px;
|
||||
padding: 4px 10px; font-size: 11px; font-weight: 600; color: #666; cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.device-card__status { font-size: 12px; color: #07c160; margin-top: 6px; }
|
||||
|
||||
.measure-card {
|
||||
background: #fff; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||||
}
|
||||
.measure-card__head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 16px 8px; border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.measure-card__head-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.measure-card__head-link { font-size: 12px; color: #07c160; cursor: pointer; font-weight: 600; text-decoration: none; }
|
||||
.measure-card__time { padding: 8px 16px 12px; font-size: 11px; color: #999; border-bottom: 1px solid #f5f5f5; }
|
||||
.measure-card__body {
|
||||
text-align: center; padding: 12px 16px 20px;
|
||||
border-bottom: 1px solid #f5f5f5; background: #fafafa;
|
||||
}
|
||||
.measure-card__body-label { font-size: 12px; color: #999; margin-bottom: 8px; }
|
||||
.measure-card__weight { font-size: 48px; font-weight: 700; color: #1a1a1a; line-height: 1; }
|
||||
.measure-card__weight span { font-size: 18px; font-weight: 400; color: #999; }
|
||||
.measure-card__change { font-size: 13px; color: #07c160; margin-top: 8px; }
|
||||
.measure-card__stats { display: flex; justify-content: center; gap: 20px; margin-top: 14px; }
|
||||
.measure-card__stat { text-align: center; }
|
||||
.measure-card__stat-label { font-size: 10px; color: #999; }
|
||||
.measure-card__stat-val { font-size: 16px; font-weight: 700; color: #333; }
|
||||
.measure-card__stat-tag { display: inline-block; margin-top: 2px; }
|
||||
.measure-card__stat-divider { width: 1px; background: #f0f0f0; }
|
||||
.measure-card__detail { padding: 14px 16px; }
|
||||
.measure-card__detail-title { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 12px; }
|
||||
.measure-card__detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||||
.detail-card {
|
||||
border-radius: 10px; padding: 12px; text-align: center;
|
||||
}
|
||||
.detail-card--green { background: #f0faf5; }
|
||||
.detail-card--orange { background: #fff7e6; }
|
||||
.detail-card--blue { background: #e6f7ff; }
|
||||
.detail-card__label { font-size: 9px; color: #999; margin-bottom: 4px; }
|
||||
.detail-card__val { font-size: 16px; font-weight: 700; }
|
||||
.detail-card__val--green { color: #07c160; }
|
||||
.detail-card__val--orange { color: #fa8c16; }
|
||||
.detail-card__val--blue { color: #1890ff; }
|
||||
.detail-card__unit { font-size: 9px; color: #999; margin-top: 2px; }
|
||||
.tag-green {
|
||||
background: #e8f8ef; color: #07c160; border-radius: 6px;
|
||||
padding: 2px 8px; font-size: 10px; font-weight: 500; display: inline-block;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center; padding: 40px 20px;
|
||||
}
|
||||
.empty-state__icon { font-size: 64px; margin-bottom: 12px; opacity: 0.6; }
|
||||
.empty-state__text { font-size: 14px; color: var(--text-placeholder); }
|
||||
|
||||
/* ===== 设备 Tab 样式 ===== */
|
||||
.device-section-title {
|
||||
font-size: 15px; font-weight: 600; color: #1a1a1a;
|
||||
margin-bottom: 12px; padding: 0 2px;
|
||||
}
|
||||
.device-add-btn {
|
||||
width: 100%; height: 44px; border: 1px dashed #d9d9d9; border-radius: 12px;
|
||||
background: #fafafa; color: var(--text-secondary); font-size: 14px;
|
||||
font-weight: 500; cursor: pointer; margin-top: 20px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.device-add-btn:active { background: #f0f0f0; border-color: #bbb; }
|
||||
.device-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.device-item {
|
||||
background: #fff; border-radius: 14px; padding: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
.device-item__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
||||
.device-item__icon {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: var(--primary-light); display: flex;
|
||||
align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.device-item__info { flex: 1; }
|
||||
.device-item__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.device-item__model { font-size: 12px; color: var(--text-placeholder); margin-top: 2px; line-height: 1.6; }
|
||||
.device-item__status {
|
||||
font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600;
|
||||
}
|
||||
.device-item__status--online { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.device-item__status--offline { background: #f5f5f5; color: #999; border: 1px solid #e8e8e8; }
|
||||
.device-item__meta {
|
||||
display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
|
||||
font-size: 12px; color: var(--text-secondary);
|
||||
}
|
||||
.device-item__meta svg { margin-right: 2px; }
|
||||
.device-item__actions { display: flex; gap: 10px; }
|
||||
.btn {
|
||||
flex: 1; height: 34px; border: none; border-radius: 8px; font-size: 13px;
|
||||
font-weight: 600; cursor: pointer; transition: all 0.2s;
|
||||
display: flex; align-items: center; justify-content: center; gap: 4px;
|
||||
}
|
||||
.btn--primary { background: var(--primary); color: #fff; }
|
||||
.btn--primary:active { background: #0958d9; }
|
||||
.btn--outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
|
||||
.btn--outline:active { background: var(--primary-light); }
|
||||
.btn--warning { background: #fff; color: var(--warning); border: 1px solid var(--warning); }
|
||||
.btn--warning:active { background: #fffbe6; }
|
||||
|
||||
/* ===== 数据 Tab 样式 ===== */
|
||||
.user-info-card {
|
||||
background: #fff; border-radius: 14px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
.user-avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), #69b1ff);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; color: #fff; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.user-detail { flex: 1; }
|
||||
.user-name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.user-summary { font-size: 12px; color: var(--text-placeholder); margin-top: 2px; }
|
||||
.user-weight { text-align: right; }
|
||||
.user-weight-val { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.user-weight-bmi { font-size: 11px; color: var(--text-placeholder); }
|
||||
|
||||
/* 时间筛选 */
|
||||
.time-filter {
|
||||
display: flex; gap: 0; margin-bottom: 16px;
|
||||
background: #fff; border-radius: 10px; padding: 3px;
|
||||
}
|
||||
.time-filter__item {
|
||||
flex: 1; text-align: center; padding: 8px 0; font-size: 13px;
|
||||
font-weight: 600; color: var(--text-secondary); cursor: pointer;
|
||||
border-radius: 8px; transition: all 0.2s;
|
||||
}
|
||||
.time-filter__item--active { background: var(--primary); color: #fff; }
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
|
||||
.stat-card {
|
||||
background: #fff; border-radius: 10px; padding: 10px 8px; text-align: center;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
||||
}
|
||||
.stat-card__label { font-size: 10px; color: #999; margin-bottom: 4px; }
|
||||
.stat-card__val { font-size: 14px; font-weight: 700; color: #1a1a1a; }
|
||||
.stat-card__val--green { color: var(--success); }
|
||||
.stat-card__val--orange { color: var(--warning); }
|
||||
.stat-card__val--blue { color: var(--primary); }
|
||||
|
||||
/* 成员选择弹窗 */
|
||||
.member-modal {
|
||||
display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5);
|
||||
z-index: 1000; align-items: flex-end; border-radius: 44px; overflow: hidden;
|
||||
}
|
||||
.member-modal--show { display: flex; }
|
||||
.member-modal__sheet {
|
||||
width: 100%; max-height: 75%; background: #fff;
|
||||
border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
|
||||
box-shadow: 0 -4px 20px rgba(0,0,0,0.15); overflow: hidden;
|
||||
}
|
||||
.member-modal__head {
|
||||
padding: 16px; border-bottom: 1px solid #f0f0f0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.member-modal__title { font-size: 16px; font-weight: 600; color: #333; }
|
||||
.member-modal__close { font-size: 24px; cursor: pointer; color: #999; line-height: 1; }
|
||||
.member-modal__list { flex: 1; overflow-y: auto; }
|
||||
.member-modal__item {
|
||||
padding: 12px 16px; border-bottom: 1px solid #f5f5f5;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
}
|
||||
.member-modal__item:active { background: #fafafa; }
|
||||
.member-modal__avatar {
|
||||
width: 44px; height: 44px; border-radius: 50%; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 18px;
|
||||
color: #fff; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.member-modal__avatar--male { background: linear-gradient(135deg, var(--primary), #69b1ff); }
|
||||
.member-modal__avatar--female { background: linear-gradient(135deg, #ff85c0, #ffadd2); }
|
||||
.member-modal__avatar--child { background: linear-gradient(135deg, #ffc069, #ffd591); }
|
||||
.member-modal__avatar--elder { background: linear-gradient(135deg, #95de64, #b7eb8f); }
|
||||
.member-modal__info { flex: 1; min-width: 0; }
|
||||
.member-modal__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.member-modal__meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.member-modal__tag {
|
||||
font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 500;
|
||||
background: #f5f5f5; color: #888; margin-left: 6px;
|
||||
}
|
||||
.member-modal__tag--self { background: var(--primary-light); color: var(--primary); }
|
||||
|
||||
/* 体重记录列表 */
|
||||
.record-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.record-item {
|
||||
background: #fff; border-radius: 12px; padding: 14px 16px;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
||||
}
|
||||
.record-item:active { background: #fafafa; }
|
||||
.record-date { text-align: center; flex-shrink: 0; }
|
||||
.record-date__day { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.record-date__month { font-size: 11px; color: var(--text-placeholder); }
|
||||
.record-info { flex: 1; }
|
||||
.record-weight { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.record-meta { font-size: 11px; color: var(--text-placeholder); margin-top: 2px; display: flex; gap: 12px; }
|
||||
.record-change {
|
||||
font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 2px;
|
||||
}
|
||||
.record-change--up { color: var(--danger); }
|
||||
.record-change--down { color: var(--success); }
|
||||
.record-change--flat { color: var(--text-placeholder); }
|
||||
.record-arrow { font-size: 16px; color: #ccc; }
|
||||
|
||||
/* ===== 我的 Tab 样式 ===== */
|
||||
.profile-card {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, #4096ff 100%);
|
||||
border-radius: 16px; padding: 24px 20px; color: #fff; margin-bottom: 16px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 60px; height: 60px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.25); display: flex;
|
||||
align-items: center; justify-content: center;
|
||||
font-size: 26px; color: #fff; font-weight: 700; flex-shrink: 0;
|
||||
border: 2px solid rgba(255,255,255,0.4);
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name { font-size: 18px; font-weight: 700; }
|
||||
.profile-phone { font-size: 13px; opacity: 0.75; margin-top: 4px; }
|
||||
|
||||
.menu-group { background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
|
||||
.menu-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 16px;
|
||||
cursor: pointer; transition: background 0.15s; text-decoration: none; color: inherit;
|
||||
border-bottom: 0.5px solid var(--border);
|
||||
}
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item:active { background: #fafafa; }
|
||||
.menu-item__icon {
|
||||
width: 36px; height: 36px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 18px;
|
||||
}
|
||||
.menu-item__icon--blue { background: var(--primary-light); color: var(--primary); }
|
||||
.menu-item__icon--green { background: #f6ffed; color: var(--success); }
|
||||
.menu-item__icon--orange { background: #fff7e6; color: var(--warning); }
|
||||
.menu-item__label { flex: 1; font-size: 15px; font-weight: 500; color: #1a1a1a; }
|
||||
.menu-item__arrow { font-size: 16px; color: #ccc; }
|
||||
|
||||
.logout-btn {
|
||||
width: 100%; height: 44px; border: none; border-radius: 12px;
|
||||
background: #fff; color: var(--danger); font-size: 15px; font-weight: 600;
|
||||
cursor: pointer; border: 1px solid #ffccc7;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.logout-btn:active { background: #fff2f0; }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17, 24, 39, 0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
/* 连接弹窗 */
|
||||
.connect-overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
|
||||
display: none; align-items: center; justify-content: center;
|
||||
}
|
||||
.connect-overlay--show { display: flex; }
|
||||
.connect-dialog {
|
||||
width: 260px; background: #fff; border-radius: 16px; padding: 32px 24px 24px;
|
||||
text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
|
||||
animation: connectDialogIn 0.3s ease;
|
||||
}
|
||||
@keyframes connectDialogIn {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.connect-spinner {
|
||||
width: 48px; height: 48px; margin: 0 auto 16px;
|
||||
border: 4px solid #f0f0f0; border-top-color: var(--primary);
|
||||
border-radius: 50%; animation: connectSpin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes connectSpin { to { transform: rotate(360deg); } }
|
||||
.connect-dialog__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.connect-dialog__desc { font-size: 13px; color: #999; line-height: 1.5; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="page-content">
|
||||
|
||||
<!-- ===== 首页 Tab ===== -->
|
||||
<div class="tab-panel tab-panel--active" id="panel-home" style="padding:0;">
|
||||
<!-- 绿色头部 -->
|
||||
<div class="home-header">
|
||||
<div class="home-header__title">智能体重秤 👋</div>
|
||||
<div class="home-header__sub">设备智联 · 掌握健康</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:-14px;padding:0 14px;">
|
||||
<!-- 个人信息卡片 -->
|
||||
<div class="device-card" style="margin:12px 0;">
|
||||
<div style="display:flex;align-items:center;gap:12px;flex:1;">
|
||||
<div class="device-card__icon" style="background:linear-gradient(135deg,#07c160,#0aad50);color:#fff;font-size:18px;font-weight:700;">张</div>
|
||||
<div>
|
||||
<div class="device-card__name" style="font-size:16px;">张建国</div>
|
||||
<div class="device-card__status" style="color:#999;">175cm · 45岁 · 男</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近测量数据 -->
|
||||
<div class="measure-card" style="margin-bottom:12px;">
|
||||
<!-- 标题栏 -->
|
||||
<div class="measure-card__head">
|
||||
<div class="measure-card__head-title">最近测量</div>
|
||||
<!-- [交互] 点击切换至数据Tab -->
|
||||
<a class="measure-card__head-link" href="data-detail.html">详细报告 ›</a>
|
||||
</div>
|
||||
<div class="measure-card__time">2026年7月16日 08:32</div>
|
||||
<!-- 体重大卡片 -->
|
||||
<div class="measure-card__body">
|
||||
<div class="measure-card__body-label">体重</div>
|
||||
<div class="measure-card__weight">72.5<span> kg</span></div>
|
||||
<div class="measure-card__change">↓ 较上次减少 0.2 kg</div>
|
||||
<div class="measure-card__stats">
|
||||
<div class="measure-card__stat">
|
||||
<div class="measure-card__stat-label">BMI</div>
|
||||
<div class="measure-card__stat-val">23.8</div>
|
||||
<div class="measure-card__stat-tag"><span class="tag-green">正常范围</span></div>
|
||||
</div>
|
||||
<div class="measure-card__stat-divider"></div>
|
||||
<div class="measure-card__stat">
|
||||
<div class="measure-card__stat-label">体脂率</div>
|
||||
<div class="measure-card__stat-val">22.1<span style="font-size:11px;color:#999;">%</span></div>
|
||||
<div class="measure-card__stat-tag"><span class="tag-green">标准</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详细数据网格 -->
|
||||
<div class="measure-card__detail">
|
||||
<div class="measure-card__detail-grid">
|
||||
<div class="detail-card detail-card--orange">
|
||||
<div class="detail-card__label">体脂肪量</div>
|
||||
<div class="detail-card__val detail-card__val--orange">16.0</div>
|
||||
<div class="detail-card__unit">kg</div>
|
||||
</div>
|
||||
<div class="detail-card detail-card--green">
|
||||
<div class="detail-card__label">体水分量</div>
|
||||
<div class="detail-card__val detail-card__val--green">39.7</div>
|
||||
<div class="detail-card__unit">kg</div>
|
||||
</div>
|
||||
<div class="detail-card detail-card--blue">
|
||||
<div class="detail-card__label">蛋白质量</div>
|
||||
<div class="detail-card__val detail-card__val--blue">1680</div>
|
||||
<div class="detail-card__unit">kcal</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 设备 Tab ===== -->
|
||||
<div class="tab-panel" id="panel-device">
|
||||
<!-- 空状态：未绑定设备 -->
|
||||
<div id="deviceEmpty" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;text-align:center;">
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:20px;">⚖️</div>
|
||||
<div style="font-size:15px;color:#999;margin-bottom:24px;">请绑定设备</div>
|
||||
<!-- [交互] 点击跳转至搜索设备页 -->
|
||||
<button style="background:linear-gradient(135deg,#07c160,#06ad56);color:#fff;border:none;border-radius:12px;padding:14px 48px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(7,193,96,0.35);"
|
||||
onclick="location.href='search-device.html'">绑定设备</button>
|
||||
</div>
|
||||
<!-- 已配对设备列表 -->
|
||||
<div id="devicePaired" style="display:none;">
|
||||
<div class="device-section-title">已配对设备</div>
|
||||
<div class="device-list">
|
||||
<div class="device-item">
|
||||
<div class="device-item__header">
|
||||
<div class="device-item__icon">⚖️</div>
|
||||
<div class="device-item__info">
|
||||
<div class="device-item__name">家庭蓝牙体脂秤 S1</div>
|
||||
<div class="device-item__model">型号：BS-A100<br>设备编码：BL2024A00158</div>
|
||||
</div>
|
||||
<span class="device-item__status device-item__status--online">已连接</span>
|
||||
</div>
|
||||
<div class="device-item__actions">
|
||||
<button class="btn btn--warning" onclick="location.href='wifi-connect.html#paired'">📶 设备WIFI</button>
|
||||
<button class="btn btn--outline" onclick="location.href='device-members.html?device=s1'">👥 成员管理(4)</button>
|
||||
<button class="btn btn--outline" onclick="startDataRetransmission()">📤 数据补传</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-item">
|
||||
<div class="device-item__header">
|
||||
<div class="device-item__icon">⚖️</div>
|
||||
<div class="device-item__info">
|
||||
<div class="device-item__name">办公蓝牙体重秤 B2</div>
|
||||
<div class="device-item__model">型号：BW-B200<br>设备编码：BL2024B00321</div>
|
||||
</div>
|
||||
<span class="device-item__status device-item__status--offline">未连接</span>
|
||||
</div>
|
||||
<div class="device-item__actions">
|
||||
<button class="btn btn--primary" onclick="connectDevice()">📡 连接设备</button>
|
||||
<button class="btn btn--outline" onclick="location.href='device-members.html?device=b2'">👥 成员管理(1)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="device-add-btn" onclick="location.href='search-device.html'">＋ 添加设备</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 数据 Tab ===== -->
|
||||
<div class="tab-panel" id="panel-data">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-info-card" style="justify-content:space-between;">
|
||||
<div style="display:flex;align-items:center;gap:12px;flex:1;">
|
||||
<div class="user-avatar">张</div>
|
||||
<div class="user-detail">
|
||||
<div class="user-name">张建国 <span style="font-size:10px;background:#e8f8ef;color:#07c160;border-radius:4px;padding:1px 5px;margin-left:4px;">本人</span></div>
|
||||
<div class="user-summary">175cm · 45岁 · 男</div>
|
||||
</div>
|
||||
</div>
|
||||
<button style="background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:6px 12px;font-size:12px;color:#666;cursor:pointer;flex-shrink:0;white-space:nowrap;" onclick="openMemberModal()">切换用户</button>
|
||||
</div>
|
||||
|
||||
<!-- 时间筛选 -->
|
||||
<div class="time-filter" id="timeFilter">
|
||||
<div class="time-filter__item time-filter__item--active" data-range="7" onclick="switchTimeRange(this)">近7日</div>
|
||||
<div class="time-filter__item" data-range="30" onclick="switchTimeRange(this)">近30日</div>
|
||||
<div class="time-filter__item" data-range="90" onclick="switchTimeRange(this)">近90日</div>
|
||||
</div>
|
||||
|
||||
<!-- 7日统计 -->
|
||||
<div class="stats-row" id="stats7">
|
||||
<div class="stat-card"><div class="stat-card__label">最高体重</div><div class="stat-card__val stat-card__val--orange">72.9 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">最低体重</div><div class="stat-card__val stat-card__val--green">72.4 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">平均体重</div><div class="stat-card__val">72.6 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">体重变化</div><div class="stat-card__val stat-card__val--green">↓0.3 kg</div></div>
|
||||
</div>
|
||||
<!-- 7日记录 -->
|
||||
<div class="record-list" id="recordList7">
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">16</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.5 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.8</span><span>体脂 22.1%</span><span>08:32</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--down">▼0.2</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">15</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.7 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.9</span><span>体脂 22.3%</span><span>07:50</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--up">▲0.3</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">14</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.4 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.7</span><span>体脂 22.0%</span><span>08:15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--down">▼0.5</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">13</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.9 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.9</span><span>体脂 22.4%</span><span>08:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--flat">━ 0</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">12</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.9 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.9</span><span>体脂 22.2%</span><span>07:45</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--up">▲0.3</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">11</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.6 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.8</span><span>体脂 22.0%</span><span>08:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--down">▼0.2</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'">
|
||||
<div class="record-date">
|
||||
<div class="record-date__day">10</div>
|
||||
<div class="record-date__month">7月</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-weight">72.8 kg</div>
|
||||
<div class="record-meta">
|
||||
<span>BMI 23.9</span><span>体脂 22.3%</span><span>08:10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-change record-change--flat">━ 0</div>
|
||||
<span class="record-arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 30日统计 -->
|
||||
<div class="stats-row" id="stats30" style="display:none;">
|
||||
<div class="stat-card"><div class="stat-card__label">最高体重</div><div class="stat-card__val stat-card__val--orange">74.0 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">最低体重</div><div class="stat-card__val stat-card__val--green">72.4 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">平均体重</div><div class="stat-card__val">73.0 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">体重变化</div><div class="stat-card__val stat-card__val--green">↓0.7 kg</div></div>
|
||||
</div>
|
||||
<!-- 30日记录（默认隐藏） -->
|
||||
<div class="record-list" id="recordList30" style="display:none;">
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">16</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.5 kg</div><div class="record-meta"><span>BMI 23.8</span><span>体脂 22.1%</span></div></div><div class="record-change record-change--down">▼0.2</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">14</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.4 kg</div><div class="record-meta"><span>BMI 23.7</span><span>体脂 22.0%</span></div></div><div class="record-change record-change--down">▼0.5</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">12</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.9 kg</div><div class="record-meta"><span>BMI 23.9</span><span>体脂 22.2%</span></div></div><div class="record-change record-change--up">▲0.3</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">10</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.8 kg</div><div class="record-meta"><span>BMI 23.9</span><span>体脂 22.3%</span></div></div><div class="record-change record-change--flat">━ 0</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">8</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">73.1 kg</div><div class="record-meta"><span>BMI 24.0</span><span>体脂 22.5%</span></div></div><div class="record-change record-change--up">▲0.3</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">6</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.6 kg</div><div class="record-meta"><span>BMI 23.8</span><span>体脂 21.9%</span></div></div><div class="record-change record-change--down">▼0.4</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">4</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">73.0 kg</div><div class="record-meta"><span>BMI 24.0</span><span>体脂 22.6%</span></div></div><div class="record-change record-change--flat">━ 0</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">2</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">73.2 kg</div><div class="record-meta"><span>BMI 24.0</span><span>体脂 22.8%</span></div></div><div class="record-change record-change--up">▲0.2</div><span class="record-arrow">›</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 90日统计 -->
|
||||
<div class="stats-row" id="stats90" style="display:none;">
|
||||
<div class="stat-card"><div class="stat-card__label">最高体重</div><div class="stat-card__val stat-card__val--orange">74.5 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">最低体重</div><div class="stat-card__val stat-card__val--green">72.4 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">平均体重</div><div class="stat-card__val">73.3 kg</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">体重变化</div><div class="stat-card__val stat-card__val--green">↓1.5 kg</div></div>
|
||||
</div>
|
||||
<!-- 90日记录（默认隐藏） -->
|
||||
<div class="record-list" id="recordList90" style="display:none;">
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">16</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.5 kg</div><div class="record-meta"><span>BMI 23.8</span><span>体脂 22.1%</span></div></div><div class="record-change record-change--down">▼0.2</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">10</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">72.8 kg</div><div class="record-meta"><span>BMI 23.9</span><span>体脂 22.3%</span></div></div><div class="record-change record-change--flat">━ 0</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">5</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">73.0 kg</div><div class="record-meta"><span>BMI 24.0</span><span>体脂 22.5%</span></div></div><div class="record-change record-change--up">▲0.3</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">1</div><div class="record-date__month">7月</div></div><div class="record-info"><div class="record-weight">73.2 kg</div><div class="record-meta"><span>BMI 24.0</span><span>体脂 22.8%</span></div></div><div class="record-change record-change--flat">━ 0</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">25</div><div class="record-date__month">6月</div></div><div class="record-info"><div class="record-weight">73.5 kg</div><div class="record-meta"><span>BMI 24.1</span><span>体脂 23.0%</span></div></div><div class="record-change record-change--down">▼0.5</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">20</div><div class="record-date__month">6月</div></div><div class="record-info"><div class="record-weight">74.0 kg</div><div class="record-meta"><span>BMI 24.3</span><span>体脂 23.2%</span></div></div><div class="record-change record-change--up">▲0.2</div><span class="record-arrow">›</span></div>
|
||||
<div class="record-item" onclick="location.href='data-detail.html'"><div class="record-date"><div class="record-date__day">17</div><div class="record-date__month">6月</div></div><div class="record-info"><div class="record-weight">73.8 kg</div><div class="record-meta"><span>BMI 24.2</span><span>体脂 23.0%</span></div></div><div class="record-change record-change--down">▼0.3</div><span class="record-arrow">›</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 我的 Tab ===== -->
|
||||
<div class="tab-panel" id="panel-me">
|
||||
<!-- 个人信息卡片 -->
|
||||
<div class="profile-card">
|
||||
<div class="profile-avatar">张</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">张建国</div>
|
||||
<div class="profile-phone">男 · 45岁</div>
|
||||
<div class="profile-phone">健康科技公司 · 技术部-研发组</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="menu-group">
|
||||
<a class="menu-item" href="profile.html">
|
||||
<div class="menu-item__icon menu-item__icon--blue">👤</div>
|
||||
<span class="menu-item__label">个人信息</span>
|
||||
<span class="menu-item__arrow">›</span>
|
||||
</a>
|
||||
<a class="menu-item" href="help-center.html">
|
||||
<div class="menu-item__icon menu-item__icon--green">📖</div>
|
||||
<span class="menu-item__label">帮助中心</span>
|
||||
<span class="menu-item__arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击退出登录，返回登录页 -->
|
||||
<button class="logout-btn" onclick="if(confirm('确定要退出登录吗？')){location.href='index.html'}">退出登录</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab 栏 -->
|
||||
<div class="tab-bar" id="tabBar">
|
||||
<div class="tab-item active" data-tab="home">
|
||||
<span class="tab-icon">🏠</span>首页
|
||||
</div>
|
||||
<div class="tab-item" data-tab="device">
|
||||
<span class="tab-icon">📱</span>设备
|
||||
</div>
|
||||
<div class="tab-item" data-tab="data">
|
||||
<span class="tab-icon">📊</span>数据
|
||||
</div>
|
||||
<div class="tab-item" data-tab="me">
|
||||
<span class="tab-icon">👤</span>我的
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
|
||||
<!-- 成员选择弹窗 -->
|
||||
<div class="member-modal" id="memberModal">
|
||||
<div class="member-modal__sheet">
|
||||
<div class="member-modal__head">
|
||||
<span class="member-modal__title">切换用户</span>
|
||||
<span class="member-modal__close" onclick="closeMemberModal()">×</span>
|
||||
</div>
|
||||
<div class="member-modal__list">
|
||||
<div class="member-modal__item" onclick="selectMember('张建国','male')">
|
||||
<div class="member-modal__avatar member-modal__avatar--male">张</div>
|
||||
<div class="member-modal__info">
|
||||
<span class="member-modal__name">张建国<span class="member-modal__tag member-modal__tag--self">本人</span></span>
|
||||
<div class="member-modal__meta">男 · 45岁 · 175cm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-modal__item" onclick="selectMember('李秀英','female')">
|
||||
<div class="member-modal__avatar member-modal__avatar--female">李</div>
|
||||
<div class="member-modal__info">
|
||||
<span class="member-modal__name">李秀英<span class="member-modal__tag">家庭成员</span></span>
|
||||
<div class="member-modal__meta">女 · 43岁 · 162cm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-modal__item" onclick="selectMember('张晓明','child')">
|
||||
<div class="member-modal__avatar member-modal__avatar--child">张</div>
|
||||
<div class="member-modal__info">
|
||||
<span class="member-modal__name">张晓明<span class="member-modal__tag">家庭成员</span></span>
|
||||
<div class="member-modal__meta">男 · 12岁 · 152cm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-modal__item" onclick="selectMember('王淑芬','elder')">
|
||||
<div class="member-modal__avatar member-modal__avatar--elder">王</div>
|
||||
<div class="member-modal__info">
|
||||
<span class="member-modal__name">王淑芬<span class="member-modal__tag">家庭成员</span></span>
|
||||
<div class="member-modal__meta">女 · 68岁 · 158cm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== Toast ===== */
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
/* ===== Tab 切换 ===== */
|
||||
var tabBar = document.getElementById('tabBar');
|
||||
tabBar.addEventListener('click', function(e) {
|
||||
var item = e.target.closest('.tab-item');
|
||||
if (!item) return;
|
||||
var tab = item.dataset.tab;
|
||||
|
||||
// 更新 Tab 选中态
|
||||
tabBar.querySelectorAll('.tab-item').forEach(function(el) { el.classList.remove('active'); });
|
||||
item.classList.add('active');
|
||||
|
||||
// 切换内容面板
|
||||
document.querySelectorAll('.tab-panel').forEach(function(el) { el.classList.remove('tab-panel--active'); });
|
||||
document.getElementById('panel-' + tab).classList.add('tab-panel--active');
|
||||
|
||||
// 设备 Tab：根据是否已配对决定显示空状态还是设备列表
|
||||
if (tab === 'device') updateDeviceTabView();
|
||||
});
|
||||
|
||||
/* ===== 设备 Tab 视图：sessionStorage 持久化，关闭浏览器后重置 ===== */
|
||||
function updateDeviceTabView() {
|
||||
if (sessionStorage.getItem('devicePaired')) {
|
||||
document.getElementById('deviceEmpty').style.display = 'none';
|
||||
document.getElementById('devicePaired').style.display = '';
|
||||
} else {
|
||||
document.getElementById('deviceEmpty').style.display = '';
|
||||
document.getElementById('devicePaired').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 支持通过 URL hash 定位 Tab（如从设备页返回时） ===== */
|
||||
function showTab(tabName) {
|
||||
tabBar.querySelectorAll('.tab-item').forEach(function(el) { el.classList.remove('active'); });
|
||||
var target = tabBar.querySelector('[data-tab="' + tabName + '"]');
|
||||
if (target) target.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(function(el) { el.classList.remove('tab-panel--active'); });
|
||||
var panel = document.getElementById('panel-' + tabName);
|
||||
if (panel) panel.classList.add('tab-panel--active');
|
||||
}
|
||||
|
||||
if (location.hash) {
|
||||
var hashTab = location.hash.replace('#tab-', '');
|
||||
if (hashTab === 'device-paired') {
|
||||
sessionStorage.setItem('devicePaired', '1');
|
||||
showTab('device');
|
||||
updateDeviceTabView();
|
||||
} else if (hashTab) {
|
||||
showTab(hashTab);
|
||||
}
|
||||
// 清除 hash，确保刷新时默认回到首页
|
||||
history.replaceState(null, '', location.pathname);
|
||||
}
|
||||
|
||||
// 页面初始化：从 sessionStorage 恢复设备配对状态（刷新保留，关闭浏览器重置）
|
||||
updateDeviceTabView();
|
||||
|
||||
/* ===== 数据页时间筛选 ===== */
|
||||
function switchTimeRange(el) {
|
||||
var filter = document.getElementById('timeFilter');
|
||||
filter.querySelectorAll('.time-filter__item').forEach(function(item) { item.classList.remove('time-filter__item--active'); });
|
||||
el.classList.add('time-filter__item--active');
|
||||
|
||||
var range = el.dataset.range;
|
||||
document.getElementById('recordList7').style.display = (range === '7') ? '' : 'none';
|
||||
document.getElementById('recordList30').style.display = (range === '30') ? '' : 'none';
|
||||
document.getElementById('recordList90').style.display = (range === '90') ? '' : 'none';
|
||||
|
||||
document.getElementById('stats7').style.display = (range === '7') ? '' : 'none';
|
||||
document.getElementById('stats30').style.display = (range === '30') ? '' : 'none';
|
||||
document.getElementById('stats90').style.display = (range === '90') ? '' : 'none';
|
||||
}
|
||||
|
||||
/* ===== 连接设备 ===== */
|
||||
function connectDevice() {
|
||||
var overlay = document.getElementById('connectOverlay');
|
||||
overlay.classList.add('connect-overlay--show');
|
||||
// 模拟连接过程
|
||||
setTimeout(function() {
|
||||
overlay.classList.remove('connect-overlay--show');
|
||||
showToast('设备连接成功！');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
/* ===== 数据补传 ===== */
|
||||
var _dataUploaded = false;
|
||||
|
||||
function startDataRetransmission() {
|
||||
var overlay = document.getElementById('retransmissionOverlay');
|
||||
var title = document.getElementById('retransmissionTitle');
|
||||
var desc = document.getElementById('retransmissionDesc');
|
||||
var spinner = overlay.querySelector('.connect-spinner');
|
||||
|
||||
if (_dataUploaded) {
|
||||
// 已上传过，直接提示
|
||||
spinner.style.display = 'none';
|
||||
title.textContent = '设备本地数据已全部上传成功';
|
||||
desc.textContent = '';
|
||||
overlay.classList.add('connect-overlay--show');
|
||||
setTimeout(function() {
|
||||
overlay.classList.remove('connect-overlay--show');
|
||||
spinner.style.display = '';
|
||||
}, 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
spinner.style.display = '';
|
||||
title.textContent = '正在获取设备本地未上传数据...';
|
||||
desc.textContent = '请稍候';
|
||||
overlay.classList.add('connect-overlay--show');
|
||||
|
||||
// 2秒后切换为上传状态
|
||||
setTimeout(function() {
|
||||
title.textContent = '正在上传数据，请稍后...';
|
||||
desc.textContent = '';
|
||||
}, 2000);
|
||||
|
||||
// 4秒后关闭弹窗并提示
|
||||
setTimeout(function() {
|
||||
overlay.classList.remove('connect-overlay--show');
|
||||
_dataUploaded = true;
|
||||
showToast('数据已成功上传');
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
/* ===== 成员选择弹窗 ===== */
|
||||
function openMemberModal() {
|
||||
document.getElementById('memberModal').classList.add('member-modal--show');
|
||||
}
|
||||
function closeMemberModal() {
|
||||
document.getElementById('memberModal').classList.remove('member-modal--show');
|
||||
}
|
||||
function selectMember(name, gender) {
|
||||
closeMemberModal();
|
||||
showToast('已切换到「' + name + '」');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 连接弹窗 -->
|
||||
<div class="connect-overlay" id="connectOverlay">
|
||||
<div class="connect-dialog">
|
||||
<div class="connect-spinner"></div>
|
||||
<div class="connect-dialog__title">正在连接设备</div>
|
||||
<div class="connect-dialog__desc">请确保设备处于开启状态<br>请勿离开...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据补传弹窗 -->
|
||||
<div class="connect-overlay" id="retransmissionOverlay">
|
||||
<div class="connect-dialog">
|
||||
<div class="connect-spinner"></div>
|
||||
<div class="connect-dialog__title" id="retransmissionTitle">正在获取设备本地未上传数据...</div>
|
||||
<div class="connect-dialog__desc" id="retransmissionDesc">请稍候</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>完善个人信息 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 提示条 */
|
||||
.alert-bar {
|
||||
padding: 10px 14px; border-radius: 10px; font-size: 12px;
|
||||
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
|
||||
background: #fff7e6; color: #d46b08; border-left: 3px solid #fa8c16;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.form-card {
|
||||
background: #fff; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 12px;
|
||||
}
|
||||
.form-item {
|
||||
display: flex; align-items: center; padding: 14px 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.form-item:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 14px; color: #333; width: 72px; flex-shrink: 0; font-weight: 500; }
|
||||
.form-input {
|
||||
flex: 1; border: none; outline: none; font-size: 14px; color: #333;
|
||||
text-align: right; background: transparent;
|
||||
}
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.form-unit { color: #999; font-size: 13px; margin-left: 4px; }
|
||||
|
||||
/* 性别选择 */
|
||||
.gender-row {
|
||||
flex-direction: column; align-items: flex-start; gap: 10px;
|
||||
}
|
||||
.gender-options { display: flex; gap: 10px; width: 100%; }
|
||||
.gender-option {
|
||||
flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #eee;
|
||||
background: #fafafa; text-align: center; font-size: 14px; color: #999;
|
||||
cursor: pointer; font-weight: 600;
|
||||
}
|
||||
.gender-option--active { border-color: var(--primary); background: #e8f8ef; color: var(--primary); }
|
||||
.gender-option--auto {
|
||||
border-color: #d9d9d9; background: #fafafa; color: #999; cursor: default; pointer-events: none;
|
||||
}
|
||||
.form-input--auto { color: #999; background: transparent; }
|
||||
|
||||
/* 按钮 */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #07c160, #06ad56); color: #fff;
|
||||
border: none; border-radius: 12px; padding: 14px; font-size: 16px;
|
||||
font-weight: 600; width: 100%; cursor: pointer;
|
||||
box-shadow: 0 4px 14px rgba(7,193,96,0.35);
|
||||
}
|
||||
.btn-primary:active { opacity: 0.85; }
|
||||
.form-hint { text-align: center; font-size: 11px; color: #bbb; padding: 8px; }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17,24,39,0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="title" id="pageTitle">完善个人信息</span>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 提示 -->
|
||||
<div class="alert-bar"><span>⚠️</span><span>请完整填写信息，用于精准计算体脂数据</span></div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-card">
|
||||
<div class="form-item">
|
||||
<span class="form-label">姓名<span style="color:#ff4d4f;">*</span></span>
|
||||
<input class="form-input" id="inputName" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">身份证<span style="color:#ff4d4f;">*</span></span>
|
||||
<input class="form-input" id="inputId" placeholder="请输入身份证" oninput="parseIdCard(this)">
|
||||
</div>
|
||||
<div class="form-item gender-row">
|
||||
<span class="form-label">性别<span style="color:#ff4d4f;">*</span></span>
|
||||
<div class="gender-options">
|
||||
<div class="gender-option gender-option--auto" id="genderMale">👨 男</div>
|
||||
<div class="gender-option gender-option--auto" id="genderFemale">👩 女</div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#bbb;width:100%;text-align:right;" id="genderHint">根据身份证自动识别</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">年龄<span style="color:#ff4d4f;">*</span></span>
|
||||
<input class="form-input form-input--auto" id="inputAge" type="number" placeholder="根据身份证自动识别" readonly><span class="form-unit">岁</span>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">身高<span style="color:#ff4d4f;">*</span></span>
|
||||
<input class="form-input" id="inputHeight" type="number" placeholder="请输入身高"><span class="form-unit">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn-primary" id="submitBtn" onclick="submitProfile()">完成并进入首页</button>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 编辑模式：从 URL 参数回填信息 */
|
||||
(function() {
|
||||
var params = new URLSearchParams(location.search);
|
||||
if (params.get('edit') === '1') {
|
||||
document.getElementById('pageTitle').textContent = '修改个人信息';
|
||||
document.getElementById('submitBtn').textContent = '保存修改';
|
||||
var name = params.get('name');
|
||||
var gender = params.get('gender');
|
||||
var age = params.get('age');
|
||||
var height = params.get('height');
|
||||
if (name) document.getElementById('inputName').value = name;
|
||||
if (gender) selectGender(gender);
|
||||
if (age) document.getElementById('inputAge').value = age;
|
||||
if (height) document.getElementById('inputHeight').value = height;
|
||||
}
|
||||
})();
|
||||
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
function selectGender(gender) {
|
||||
var maleEl = document.getElementById('genderMale');
|
||||
var femaleEl = document.getElementById('genderFemale');
|
||||
maleEl.classList.remove('gender-option--auto');
|
||||
femaleEl.classList.remove('gender-option--auto');
|
||||
maleEl.classList.toggle('gender-option--active', gender === 'male');
|
||||
femaleEl.classList.toggle('gender-option--active', gender === 'female');
|
||||
}
|
||||
|
||||
function parseIdCard(input) {
|
||||
var id = input.value;
|
||||
if (id.length >= 17) {
|
||||
var genderCode = parseInt(id.charAt(16));
|
||||
selectGender(genderCode % 2 === 1 ? 'male' : 'female');
|
||||
var year = id.substring(6, 10);
|
||||
var month = id.substring(10, 12);
|
||||
var birthYear = parseInt(year);
|
||||
var age = new Date().getFullYear() - birthYear;
|
||||
document.getElementById('inputAge').value = age;
|
||||
}
|
||||
}
|
||||
|
||||
function submitProfile() {
|
||||
var params = new URLSearchParams(location.search);
|
||||
if (params.get('edit') === '1') {
|
||||
showToast('信息修改成功！');
|
||||
setTimeout(function() { history.back(); }, 800);
|
||||
} else {
|
||||
showToast('信息保存成功，正在进入…');
|
||||
setTimeout(function() { location.href = 'main.html'; }, 800);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人信息 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 头像区 */
|
||||
.avatar-area {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 24px 0 20px;
|
||||
}
|
||||
.avatar-img {
|
||||
width: 72px; height: 72px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), #0aad50);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 28px; color: #fff; font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 信息列表 */
|
||||
.info-card {
|
||||
background: #fff; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
.info-row {
|
||||
display: flex; align-items: center; padding: 14px 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label { font-size: 14px; color: var(--text-secondary); width: 72px; flex-shrink: 0; }
|
||||
.info-value { flex: 1; font-size: 14px; color: var(--text-primary); text-align: right; }
|
||||
|
||||
/* 修改按钮 */
|
||||
.edit-btn {
|
||||
width: 100%; height: 44px; border: 1px solid var(--primary); border-radius: 12px;
|
||||
background: #fff; color: var(--primary); font-size: 15px; font-weight: 600;
|
||||
cursor: pointer; margin-top: 24px;
|
||||
}
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html#tab-me">‹</a>
|
||||
<span class="title">个人信息</span>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar-area">
|
||||
<div class="avatar-img">张</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息列表 -->
|
||||
<div class="info-card">
|
||||
<div class="info-row"><span class="info-label">姓名</span><span class="info-value">张建国</span></div>
|
||||
<div class="info-row"><span class="info-label">身份证</span><span class="info-value">4301**********1234</span></div>
|
||||
<div class="info-row"><span class="info-label">性别</span><span class="info-value">男</span></div>
|
||||
<div class="info-row"><span class="info-label">年龄</span><span class="info-value">45岁</span></div>
|
||||
<div class="info-row"><span class="info-label">单位</span><span class="info-value">健康科技公司</span></div>
|
||||
<div class="info-row"><span class="info-label">部门</span><span class="info-value">技术部-研发组</span></div>
|
||||
<div class="info-row"><span class="info-label">身高</span><span class="info-value">175cm</span></div>
|
||||
</div>
|
||||
|
||||
<button class="edit-btn" onclick="location.href='profile-complete.html?edit=1&name=张建国&gender=male&age=45&height=175'">修改信息</button>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast(msg) {
|
||||
var t = document.createElement('div');
|
||||
t.textContent = msg;
|
||||
t.style.cssText = 'position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(17,24,39,0.88);color:#fff;font-size:14px;padding:10px 24px;border-radius:999px;white-space:nowrap;z-index:999;';
|
||||
document.body.appendChild(t);
|
||||
setTimeout(function() { t.remove(); }, 1800);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>搜索设备 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--primary-dark: #06ad56;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 搜索动画区域 */
|
||||
.search-area {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 60px 32px 0; text-align: center;
|
||||
}
|
||||
.search-icon-wrap {
|
||||
position: relative; width: 90px; height: 90px; margin-bottom: 28px;
|
||||
}
|
||||
.search-icon-inner {
|
||||
width: 90px; height: 90px; border-radius: 50%;
|
||||
background: #f0faf5; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 42px;
|
||||
}
|
||||
.search-ring {
|
||||
position: absolute; inset: -8px; border-radius: 50%;
|
||||
border: 2px solid var(--primary); opacity: 0;
|
||||
animation: searchPulse 1.5s ease-out infinite;
|
||||
}
|
||||
.search-ring:nth-child(2) { animation-delay: 0.5s; }
|
||||
.search-ring:nth-child(3) { animation-delay: 1s; }
|
||||
@keyframes searchPulse {
|
||||
0% { transform: scale(0.85); opacity: 0.6; }
|
||||
100% { transform: scale(1.3); opacity: 0; }
|
||||
}
|
||||
.search-text {
|
||||
font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px;
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 13px; color: var(--text-placeholder); line-height: 1.6;
|
||||
}
|
||||
.search-distance {
|
||||
margin-top: 40px; font-size: 12px; color: #bbb;
|
||||
}
|
||||
|
||||
/* 结果区域 */
|
||||
.result-area { display: none; padding: 0 14px 20px; }
|
||||
.result-area--show { display: block; }
|
||||
.result-title {
|
||||
font-size: 14px; font-weight: 600; color: #1a1a1a;
|
||||
padding: 16px 0 12px; display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.result-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.result-item {
|
||||
background: #fff; border-radius: 14px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06); cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.result-item:active { background: #fafafa; }
|
||||
.result-item__icon {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: #f0faf5; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.result-item__info { flex: 1; }
|
||||
.result-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.result-item__signal { font-size: 12px; color: var(--text-placeholder); margin-top: 4px; }
|
||||
.result-item__arrow { font-size: 16px; color: #ccc; }
|
||||
.result-item__rssi { font-size: 12px; color: var(--primary); font-weight: 600; }
|
||||
.result-status {
|
||||
font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.result-status--online { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.result-status--offline { background: #f5f5f5; color: #999; border: 1px solid #e8e8e8; }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17,24,39,0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html#tab-device">‹</a>
|
||||
<span class="title">搜索设备</span>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 搜索中 -->
|
||||
<div class="search-area" id="searchArea">
|
||||
<div class="search-icon-wrap" id="searchIconWrap">
|
||||
<div class="search-ring"></div>
|
||||
<div class="search-ring"></div>
|
||||
<div class="search-ring"></div>
|
||||
<div class="search-icon-inner">⚖️</div>
|
||||
</div>
|
||||
<div class="search-text" id="searchText">搜索设备中…</div>
|
||||
<div class="search-hint">请确保手机蓝牙已开启<br>设备处于开启状态</div>
|
||||
<div class="search-distance">📱 手机尽量靠近设备（2米以内）</div>
|
||||
|
||||
<!-- 搜索结果（搜索完成后显示在下方） -->
|
||||
<div class="result-area" id="resultArea" style="margin-top:24px;">
|
||||
<!-- 重新搜索按钮 -->
|
||||
<button id="btnReSearch"
|
||||
style="width:100%;margin-bottom:12px;background:#fff;border:1px solid #07c160;color:#07c160;
|
||||
border-radius:10px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;"
|
||||
onclick="reSearch()">🔄 重新搜索</button>
|
||||
<div class="result-title">🔍 发现的设备</div>
|
||||
<div class="result-list">
|
||||
<!-- [交互] 点击绑定设备 -->
|
||||
<div class="result-item" onclick="location.href='main.html#tab-device-paired'">
|
||||
<div class="result-item__icon">⚖️</div>
|
||||
<div class="result-item__info">
|
||||
<div class="result-item__name">家庭蓝牙体脂秤 S1</div>
|
||||
</div>
|
||||
<span class="result-status result-status--online">已连接</span>
|
||||
</div>
|
||||
<!-- [交互] 点击未连接设备，跳转wifi连接页 -->
|
||||
<div class="result-item" onclick="location.href='wifi-connect.html'">
|
||||
<div class="result-item__icon">⚖️</div>
|
||||
<div class="result-item__info">
|
||||
<div class="result-item__name">办公蓝牙体重秤 B2</div>
|
||||
</div>
|
||||
<span class="result-status result-status--offline">未连接</span>
|
||||
<span class="result-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Toast */
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
/* 搜索模拟：5秒后显示结果 */
|
||||
setTimeout(function() {
|
||||
// 停止动画
|
||||
document.getElementById('searchIconWrap').querySelectorAll('.search-ring').forEach(function(r) {
|
||||
r.style.animation = 'none';
|
||||
r.style.display = 'none';
|
||||
});
|
||||
document.getElementById('searchText').textContent = '搜索完成';
|
||||
document.getElementById('resultArea').classList.add('result-area--show');
|
||||
}, 3000);
|
||||
|
||||
/* 重新搜索 */
|
||||
function reSearch() {
|
||||
// 隐藏结果
|
||||
document.getElementById('resultArea').classList.remove('result-area--show');
|
||||
// 恢复动画
|
||||
document.getElementById('searchIconWrap').querySelectorAll('.search-ring').forEach(function(r) {
|
||||
r.style.animation = '';
|
||||
r.style.display = '';
|
||||
});
|
||||
document.getElementById('searchText').textContent = '搜索设备中…';
|
||||
// 3秒后再次显示结果
|
||||
setTimeout(function() {
|
||||
document.getElementById('searchIconWrap').querySelectorAll('.search-ring').forEach(function(r) {
|
||||
r.style.animation = 'none';
|
||||
r.style.display = 'none';
|
||||
});
|
||||
document.getElementById('searchText').textContent = '搜索完成';
|
||||
document.getElementById('resultArea').classList.add('result-area--show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/* 绑定设备 */
|
||||
function bindDevice(name) {
|
||||
showToast('正在绑定「' + name + '」…');
|
||||
setTimeout(function() {
|
||||
showToast('绑定成功！');
|
||||
setTimeout(function() {
|
||||
window.location.href = 'main.html#tab-device-paired';
|
||||
}, 800);
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WiFi连接 - 蓝牙称 | 健康CQ原型</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07c160;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--text-placeholder: #999;
|
||||
--border: #f0f0f0;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 375px; min-height: 812px;
|
||||
background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 28px; font-size: 14px;
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.nav-bar .skip {
|
||||
position: absolute; right: 16px; font-size: 14px; color: #999;
|
||||
cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 搜索中 */
|
||||
.search-area {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 48px 32px 0; text-align: center;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 48px; margin-bottom: 16px;
|
||||
}
|
||||
.search-text { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.search-hint { font-size: 13px; color: var(--text-placeholder); }
|
||||
|
||||
/* WiFi 列表 */
|
||||
.wifi-area { display: none; padding: 0 14px 20px; }
|
||||
.wifi-area--show { display: block; }
|
||||
.wifi-title {
|
||||
font-size: 14px; font-weight: 600; color: #1a1a1a;
|
||||
padding: 16px 0 10px;
|
||||
}
|
||||
.wifi-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.wifi-item {
|
||||
background: #fff; border-radius: 12px; padding: 14px 16px;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04); transition: background 0.15s;
|
||||
}
|
||||
.wifi-item:active { background: #fafafa; }
|
||||
.wifi-icon { font-size: 20px; flex-shrink: 0; }
|
||||
.wifi-info { flex: 1; }
|
||||
.wifi-name { font-size: 14px; font-weight: 500; color: #1a1a1a; }
|
||||
.wifi-secure { font-size: 11px; color: var(--text-placeholder); margin-top: 2px; }
|
||||
.wifi-status {
|
||||
font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.wifi-status--connected { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.wifi-item--connected { border: 1px solid #b7eb8f; background: #fcfff5; }
|
||||
.wifi-check { font-size: 14px; color: #07c160; font-weight: 700; }
|
||||
.wifi-lock { font-size: 12px; color: var(--text-placeholder); }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
|
||||
background: rgba(17,24,39,0.88); color: #fff; font-size: 14px;
|
||||
padding: 10px 24px; border-radius: 999px; white-space: nowrap;
|
||||
opacity: 0; transition: all .2s ease; pointer-events: none; z-index: 999;
|
||||
}
|
||||
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px;
|
||||
background: #1a1a1a; border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<span class="icons">📶 🔋</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="javascript:goBack()">‹</a>
|
||||
<span class="title">WiFi 连接</span>
|
||||
<!-- [交互] 点击跳过，直接返回设备页；从设备页进入时隐藏 -->
|
||||
<a class="skip" id="skipBtn" href="main.html#tab-device-paired">跳过</a>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 搜索中 -->
|
||||
<div class="search-area" id="searchArea">
|
||||
<div class="search-icon">📡</div>
|
||||
<div class="search-text">正在搜索附近 WiFi…</div>
|
||||
<div class="search-hint">请稍候</div>
|
||||
</div>
|
||||
|
||||
<!-- WiFi 列表 -->
|
||||
<div class="wifi-area" id="wifiArea">
|
||||
<div class="wifi-title" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span>附近的 WiFi 网络</span>
|
||||
<a href="javascript:refreshWifi()" style="font-size:13px;color:#07c160;text-decoration:none;">🔄 刷新</a>
|
||||
</div>
|
||||
<div class="wifi-list">
|
||||
<!-- [交互] 点击连接WiFi -->
|
||||
<div class="wifi-item wifi-item--connected" onclick="connectWifi('Office-5G')">
|
||||
<span class="wifi-icon">📶</span>
|
||||
<div class="wifi-info">
|
||||
<div class="wifi-name">Office-5G</div>
|
||||
<div class="wifi-secure">WPA2 安全</div>
|
||||
</div>
|
||||
<span class="wifi-check">✓</span>
|
||||
</div>
|
||||
<div class="wifi-item" onclick="connectWifi('Health-Net')">
|
||||
<span class="wifi-icon">📶</span>
|
||||
<div class="wifi-info">
|
||||
<div class="wifi-name">Health-Net</div>
|
||||
<div class="wifi-secure">WPA2 安全</div>
|
||||
</div>
|
||||
<span class="wifi-lock">🔒</span>
|
||||
</div>
|
||||
<div class="wifi-item" onclick="connectWifi('Canteen-WiFi')">
|
||||
<span class="wifi-icon">📶</span>
|
||||
<div class="wifi-info">
|
||||
<div class="wifi-name">Canteen-WiFi</div>
|
||||
<div class="wifi-secure">开放网络</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wifi-item" onclick="connectWifi('Guest-2.4G')">
|
||||
<span class="wifi-icon">📶</span>
|
||||
<div class="wifi-info">
|
||||
<div class="wifi-name">Guest-2.4G</div>
|
||||
<div class="wifi-secure">开放网络</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer = setTimeout(function() { t.classList.remove('toast--show'); }, 1800);
|
||||
}
|
||||
|
||||
/* 返回上一页 */
|
||||
function goBack() {
|
||||
if (document.referrer && document.referrer.indexOf('main.html') !== -1) {
|
||||
location.href = 'main.html#tab-device-paired';
|
||||
} else {
|
||||
location.href = 'search-device.html';
|
||||
}
|
||||
}
|
||||
|
||||
/* 根据来源决定是否跳过搜索动画 */
|
||||
if (location.hash === '#paired') {
|
||||
// 从已配对设备进入，直接显示WiFi列表，隐藏跳过按钮
|
||||
document.getElementById('searchArea').style.display = 'none';
|
||||
document.getElementById('wifiArea').classList.add('wifi-area--show');
|
||||
document.getElementById('skipBtn').style.display = 'none';
|
||||
history.replaceState(null, '', location.pathname);
|
||||
} else {
|
||||
// 首次搜索：1.5秒后显示WiFi列表
|
||||
setTimeout(function() {
|
||||
document.getElementById('searchArea').style.display = 'none';
|
||||
document.getElementById('wifiArea').classList.add('wifi-area--show');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/* 刷新WiFi列表 */
|
||||
function refreshWifi() {
|
||||
document.getElementById('wifiArea').classList.remove('wifi-area--show');
|
||||
document.getElementById('searchArea').style.display = '';
|
||||
// 1.5秒后重新显示WiFi列表
|
||||
setTimeout(function() {
|
||||
document.getElementById('searchArea').style.display = 'none';
|
||||
document.getElementById('wifiArea').classList.add('wifi-area--show');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/* 连接WiFi */
|
||||
function connectWifi(name) {
|
||||
showToast('正在连接「' + name + '」…');
|
||||
setTimeout(function() {
|
||||
showToast('WiFi 连接成功！');
|
||||
setTimeout(function() {
|
||||
window.location.href = 'main.html#tab-device-paired';
|
||||
}, 800);
|
||||
}, 1200);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user