console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>镜片厚度估算</title>
<style>
:root{
--bg:#f2f4f7; --card:#fff; --text:#1a1a1a; --muted:#6b7280;
--line:#e3e6ea; --primary:#1f4e78; --inputbg:#fffbe6;
--ok:#2e7d32; --okbg:#e6f4ea; --bad:#c62828; --badbg:#fdecea;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
background:var(--bg); color:var(--text);
padding:12px 12px 190px; font-size:16px;
-webkit-text-size-adjust:100%;
transition:padding-bottom .1s;
}
/* 键盘弹出时的暴力撑高，保证能滚上去 */
body.kb-open {
padding-bottom: 400px !important;
}
h1{font-size:17px;font-weight:600;text-align:center;margin:6px 0 14px;color:var(--muted)}
.group{background:var(--card);border-radius:14px;padding:4px 14px;margin-bottom:12px;
box-shadow:0 1px 4px rgba(0,0,0,.06)}
.group-title{font-size:12px;color:var(--muted);padding:10px 0 4px;font-weight:600;letter-spacing:.5px}
.row{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row label{flex:1;font-size:15px;color:var(--text)}
.row .hint{font-size:12px;color:var(--muted);margin-left:4px}
.row input,.row select{
width:118px;padding:10px 12px;font-size:17px;text-align:right;
border:1px solid var(--line);border-radius:10px;outline:none;
background:var(--inputbg);color:var(--text);font-weight:600;
-webkit-appearance:none;appearance:none;
}
.row input:focus,.row select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,78,120,.15)}
.bar{
position:fixed;left:0;right:0;bottom:0;z-index:10;
background:var(--card);border-top:1px solid var(--line);
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
box-shadow:0 -4px 16px rgba(0,0,0,.08);
transition:transform .2s, opacity .2s;
}
/* 键盘弹出，直接让结果栏隐身 */
body.kb-open .bar{
display: none;
}
.bar-main{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.bar-label{font-size:12px;color:var(--muted);margin-bottom:2px}
.bar-value{font-size:28px;font-weight:700;line-height:1.1}
.bar-unit{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px}
.tag{
font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px;white-space:nowrap;
}
.tag.ok{color:var(--ok);background:var(--okbg)}
.tag.bad{color:var(--bad);background:var(--badbg)}
.bar-sub{display:flex;justify-content:space-between;margin-top:8px;
font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.bar-sub b{color:var(--text);font-weight:600}
.warn{color:var(--bad);font-size:12px;margin-top:6px;display:none}
.warn.show{display:block}
.note{font-size:12px;color:var(--muted);line-height:1.6;text-align:center;margin:16px 4px 0}
</style>
</head>
<body>
<h1>镜片厚度估算</h1>
<div class="group">
<div class="group-title">镜架参数</div>
<div class="row"><label>镜片宽度<span class="hint">mm</span></label><input id="w" type="number" inputmode="decimal" value="52"></div>
<div class="row"><label>最大斜角宽度<span class="hint">mm</span></label><input id="c" type="number" inputmode="decimal" value="56"></div>
<div class="row"><label>鼻梁尺寸<span class="hint">mm</span></label><input id="d" type="number" inputmode="decimal" value="18"></div>
<div class="row"><label>顾客瞳距<span class="hint">mm</span></label><input id="pd" type="number" inputmode="decimal" value="64"></div>
<div class="row"><label>镜架类型</label>
<select id="frame">
<option value="0.8">全框</option><option value="1.2">胶丝半框</option>
<option value="2.0">金属丝半框</option><option value="1.5">无框</option>
</select>
</div>
</div>
<div class="group">
<div class="group-title">镜片参数</div>
<div class="row"><label>球镜度数<span class="hint">度</span></label><input id="s" type="number" inputmode="numeric" step="25" value="300"></div>
<div class="row"><label>散光度数<span class="hint">度</span></label><input id="cyl" type="number" inputmode="numeric" step="25" value="100"></div>
<div class="row"><label>折射率</label>
<select id="n">
<option value="1.56">1.56</option><option value="1.60">1.60</option>
<option value="1.67">1.67</option><option value="1.71">1.71</option><option value="1.74">1.74</option>
</select>
</div>
<div class="row"><label>前表面基弯<span class="hint">D</span></label><input id="f1" type="number" inputmode="decimal" step="0.25" value="5"></div>
</div>
<div class="group">
<div class="group-title">加工参数</div>
<div class="row"><label>中心厚度<span class="hint">mm</span></label><input id="t" type="number" inputmode="decimal" step="0.1" value="1.5"></div>
<div class="row"><label>倒角深度<span class="hint">mm</span></label><input id="g" type="number" inputmode="decimal" step="0.1" value="0.5"></div>
</div>
<div class="bar">
<div class="bar-main">
<div>
<div class="bar-label">修正后成品边缘厚度</div>
<div><span class="bar-value" id="final">—</span><span class="bar-unit">mm</span></div>
</div>
<div class="tag ok" id="tag">—</div>
</div>
<div class="bar-sub">
<span>最远半径 <b id="rOut">—</b> mm</span>
<span>安全余量 <b id="margin">—</b> mm</span>
</div>
<div class="warn" id="warn"></div>
</div>
<script>
(function(){
var ids = ['w','c','d','pd','frame','s','cyl','n','f1','t','g'];
function v(id){ return document.getElementById(id).value; }
function n(id){ return parseFloat(v(id)) || 0; }
function calc(){
var w=n('w'), c=n('c'), d=n('d'), pd=n('pd');
var S=n('s'), Cyl=n('cyl'), ri=n('n'), F1=n('f1');
var T=n('t'), g=n('g'), Tmin=parseFloat(v('frame'));
var warnEl = document.getElementById('warn');
var tagEl = document.getElementById('tag');
warnEl.className = 'warn';
warnEl.textContent = '';
if(ri <= 1){ show('异常', '—', '—', false); warnEl.className='warn show'; warnEl.textContent='折射率必须大于 1'; return; }
var F = w + d;
var delta = Math.abs((F - pd) / 2);
var R = Math.max(w, c) / 2 + delta;
var S_eff = (S + Math.abs(Cyl)) / 100;
var F2 = -(S_eff + F1);
var simpleAdd = R*R*S_eff / (2000*(ri-1));
var simpleEdge = T + simpleAdd - g;
var finalEdge = simpleEdge;
var msg = '';
var r1 = 1000*(ri-1)/F1;
var r2 = 1000*(ri-1)/Math.abs(F2);
if(R >= r1 || R >= r2){
msg = '警告：R 过大，请检查参数';
} else {
var s1 = r1 - Math.sqrt(r1*r1 - R*R);
var s2 = r2 - Math.sqrt(r2*r2 - R*R);
finalEdge = T + s2 - s1 - g;
}
var margin = finalEdge - Tmin;
var safe = margin >= 0;
document.getElementById('final').textContent = finalEdge.toFixed(2);
document.getElementById('rOut').textContent = R.toFixed(1);
document.getElementById('margin').textContent = margin.toFixed(2);
tagEl.textContent = safe ? '安全合格' : '厚度不足';
tagEl.className = safe ? 'tag ok' : 'tag bad';
if(msg){ warnEl.className='warn show'; warnEl.textContent=msg; }
}
ids.forEach(function(id){
var el = document.getElementById(id);
el.addEventListener('input', calc);
el.addEventListener('change', calc);
});
var body = document.body;
var fields = document.querySelectorAll('input,select');
fields.forEach(function(el){
// 聚焦时，隐藏底部栏并撑高
el.addEventListener('focus', function(){
body.classList.add('kb-open');
// 强制系统稍微等一下再滚动，应对在线编辑器的小窗口
setTimeout(function(){
el.scrollIntoView({block:'center', behavior:'smooth'});
}, 250);
});
// 失去焦点时，恢复
el.addEventListener('blur', function(){
setTimeout(function(){
if(!document.activeElement || !document.activeElement.matches('input,select')){
body.classList.remove('kb-open');
}
}, 100);
});
});
calc();
})();
</script>
</body>
</html>