<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>保障金计算器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{background:#f5f6fa;color:#333;font-size:16px;line-height:1.5;padding:20px 12px}
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
h1{font-size:22px;text-align:center;margin-bottom:24px;font-weight:700}
.form-group{margin-bottom:20px}
label{display:block;font-weight:600;margin-bottom:8px;font-size:15px}
.radio-box{display:flex;justify-content:space-between;gap:8px}
.radio-box label{
flex:1;
text-align:center;
background:#f2f4f7;
border:2px solid transparent;
border-radius:8px;
padding:12px 0;
font-weight:500;
font-size:14px;
cursor:pointer;
transition:all .2s;
}
.radio-box input[type=radio]{display:none}
.radio-box input[type=radio]:checked+span{
color:#007bff;
border-color:#007bff;
}
.medication-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.medication-table th,.medication-table td{padding:8px 4px;text-align:center;border-bottom:1px solid #eee}
.medication-table th{font-weight:600;background:#fafafa}
.medication-table input{width:100%;border:1px solid #e0e0e0;border-radius:6px;padding:6px 4px;font-size:14px;text-align:center}
.btn{
width:100%;
background:#007bff;
color:#fff;
border:none;
border-radius:8px;
padding:14px;
font-size:16px;
font-weight:700;
margin-bottom:30px; /* 与下方结果卡间距增大 */
}
.result-card{
background:#e9f7ff;
border:1px solid #b3d7ff;
color:#0056b3;
text-align:center;
font-size:18px;
font-weight:700;
margin-top:10px;
}
</style>
</head>
<body>
<h1>保障金计算器</h1>
<!-- 购药日期 -->
<div class="card">
<div class="form-group">
<label>购药日期</label>
<div class="radio-box">
<label>
<input type="radio" name="date" value="before" checked>
<span>2025-08-05 之前</span>
</label>
<label>
<input type="radio" name="date" value="after">
<span>2025-08-06 及之后</span>
</label>
</div>
</div>
<!-- 3mg权益 -->
<div class="form-group">
<label>是否已申请过 3mg 权益</label>
<div class="radio-box">
<label>
<input type="radio" name="applied3mg" value="yes" checked>
<span>是</span>
</label>
<label>
<input type="radio" name="applied3mg" value="no">
<span>否</span>
</label>
</div>
</div>
</div>
<!-- 购药信息 -->
<div class="card">
<label>购药信息</label>
<table class="medication-table">
<thead>
<tr>
<th colspan="4">诺和忻<sup>®</sup>（司美格鲁肽片）</th>
</tr>
<tr>
<th>规格</th>
<th>3mg</th>
<th>7mg</th>
<th>14mg</th>
</tr>
</thead>
<tbody>
<tr>
<td>数量(盒)</td>
<td><input type="number" id="qty3" min="0" value="0"></td>
<td><input type="number" id="qty7" min="0" value="0"></td>
<td><input type="number" id="qty14" min="0" value="0"></td>
</tr>
<tr>
<td>单价(元)</td>
<td><input type="number" id="price3" min="0" step="0.01" value="0.00"></td>
<td><input type="number" id="price7" min="0" step="0.01" value="0.00"></td>
<td><input type="number" id="price14" min="0" step="0.01" value="0.00"></td>
</tr>
</tbody>
</table>
</div>
<button class="btn" onclick="calc()">立即计算</button>
<div id="resultCard" class="card result-card" style="display:none;">
预估保障金<br/><span id="amount">0.00</span> 元
</div>
<script>
function calc() {
let total = 0;
[3, 7, 14].forEach(mg => {
const qty = Number(document.getElementById('qty' + mg).value) || 0;
const price = Number(document.getElementById('price' + mg).value) || 0;
total += qty * price;
});
const estimated = total * 0.8;
document.getElementById('amount').innerText = estimated.toFixed(2);
document.getElementById('resultCard').style.display = 'block';
}
</script>
</body>
</html>
index.html
index.html