SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- viewport-fit=cover 延伸到屏幕最边缘 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<!-- manifest改成fullscreen模式 -->
<link rel="manifest" href="data:application/json;base64,eyJuYW1lIjoi5L+u5aKe6LWE5rqQIiwic2hvcnRfbmFtZSI6IuW8oOWbqSIsInN0YXJ0X3VybCI6Ii4iLCJkaXNwbGF5IjoiZnVsbHNjcmVlbmIiLCJiYWNrZ3JvdW5kX2NvbG9yIjoiI2ZmZiIsInRoZW1lX2NvbG9yIjoiIzE1NjVEOCJ9">
<title>模拟建行银行卡详情（仅演示）</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
:root{
  /* 读取系统安全区，避开刘海、手势条 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
body{background:#fff;color:#333;padding:0;margin:0}
/* 顶部栏向上延伸到状态栏区域，背景蓝色融合 */
.header{
  background:#1565D8;color:#fff;
  padding-top: calc(16px + var(--safe-top));
  padding-bottom:16px;
  padding-left:16px;padding-right:16px;
  text-align:center;font-size:18px;font-weight:600;
  position:relative
}
.card-wrap{margin:12px;background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 8px rgba(0,0,0,0.1)}
.card-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.icon-logo{width:42px;height:42px;border-radius:50%;background:#1565D8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:18px}
.card-title{font-size:17px;font-weight:600}
.sub-text{font-size:13px;color:#666;margin-top:4px}
.tag-normal{border:1px solid #cccccc;border-radius:4px;font-size:12px;padding:1px 5px;margin-left:6px}
.info-item{font-size:15px;color:#444;margin:8px 0}
.box{margin:14px 12px;background:#fff;border-radius:12px;overflow:hidden}
.box-title{background:#E8F0FE;color:#1565D8;padding:10px 14px;font-size:15px}
.row{padding:16px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}
.balance{font-size:28px;font-weight:bold;color:#222;outline:none}
.small-row{padding:12px 14px;display:flex;justify-content:space-between;border-bottom:1px solid #eee;color:#555;font-size:15px}
.label-tag{color:#1565D8;font-size:13px}
.grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  padding:16px 6px;
  /* 底部留出手势条安全距离 */
  padding-bottom: calc(16px + var(--safe-bottom));
}
.grid-item{text-align:center;font-size:12px;color:#444}
</style>
</head>
<body>
<div class="header">银行卡详情</div>
<div class="card-wrap">
    <div class="card-top">
        <div class="icon-logo">建</div>
        <div>
            <div class="card-title">建设银行（7659）<span style="font-size:13px;color:#1565D8">查看卡号</span></div>
            <div class="sub-text">修改别名 <span class="tag-normal">正常</span></div>
        </div>
    </div>
    <div class="info-item">卡片类型：龙卡通</div>
    <div class="info-item">账户类别：其他账户</div>
    <div class="info-item">到期日期：2035/11/30</div>
    <div class="info-item">开户网点：济南站前广场支行</div>
</div>
<div class="box">
    <div class="box-title">活期储蓄</div>
    <div class="row">
        <div>人民币</div>
        <div class="balance" id="bal" contenteditable="true">57,084.00</div>
    </div>
    <div class="small-row">
        <div>人民币 <span class="label-tag">医保结存账户</span></div>
        <div>0.00</div>
    </div>
    <div class="small-row">
        <div>人民币 <span class="label-tag">医保当年账户</span></div>
        <div>0.00</div>
    </div>
</div>
<div class="grid">
    <div class="grid-item">转账限额</div>
    <div class="grid-item">流水打印</div>
    <div class="grid-item">开户行查询</div>
    <div class="grid-item">账户挂失</div>
    <div class="grid-item">预约换卡</div>
    <div class="grid-item">账户安全锁</div>
    <div class="grid-item">账户升降级</div>
    <div class="grid-item">设置首选账户</div>
    <div class="grid-item">账户激活</div>
    <div class="grid-item">更多</div>
</div>
<script>
const balDom = document.getElementById('bal');
balDom.addEventListener('blur', function(){
    let raw = this.innerText.replace(/[^\d.]/g, '');
    if(raw === '' || isNaN(Number(raw))){
        this.innerText = "0.00";
        return;
    }
    const num = parseFloat(raw);
    this.innerText = num.toLocaleString('zh-CN', {minimumFractionDigits:2, maximumFractionDigits:2})
})
</script>
</body>
</html>