编辑页面

HTML内容
<!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>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f5f5f5; color: #333; }
    
    /* 手机容器 */
    .phone-container { width: 375px; min-height: 667px; margin: 20px auto; background: #f5f5f5; position: relative; overflow: hidden; }
    
    /* 状态栏 */
    .status-bar { height: 44px; background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; color: #fff; font-size: 12px; }
    .status-bar span { letter-spacing: 1px; }
    
    /* 导航栏 */
    .nav-bar { height: 50px; background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #fff; }
    .nav-bar .back { font-size: 24px; cursor: pointer; }
    .nav-bar .title { font-size: 17px; font-weight: 600; }
    .nav-bar .more { font-size: 20px; cursor: pointer; }
    
    /* 页面内容区 */
    .page-content { position: absolute; top: 94px; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; }
    .page-content::-webkit-scrollbar { display: none; }
    
    /* 首页 */
    .home-page { padding: 15px; }
    
    /* 资金总览卡片 */
    .fund-card { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); border-radius: 16px; padding: 25px 20px; color: #fff; margin-bottom: 15px; box-shadow: 0 8px 25px rgba(26, 54, 93, 0.3); }
    .fund-card .label { font-size: 13px; opacity: 0.85; margin-bottom: 8px; }
    .fund-card .amount { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
    .fund-card .amount span { font-size: 18px; }
    .fund-card .stats { display: flex; justify-content: space-between; }
    .fund-card .stat-item { text-align: center; }
    .fund-card .stat-value { font-size: 18px; font-weight: 600; }
    .fund-card .stat-label { font-size: 11px; opacity: 0.75; margin-top: 4px; }
    .fund-card .stat-item.in .stat-value { color: #68d391; }
    .fund-card .stat-item.out .stat-value { color: #fc8181; }
    
    /* 快捷功能 */
    .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
    .quick-action { background: #fff; border-radius: 12px; padding: 15px 10px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s; }
    .quick-action:active { transform: scale(0.95); }
    .quick-action .icon { width: 40px; height: 40px; margin: 0 auto 8px; background: #e2e8f0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
    .quick-action .label { font-size: 12px; color: #666; }
    
    /* 预警提示 */
    .alert-banner { background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); border-radius: 12px; padding: 15px; margin-bottom: 15px; display: flex; align-items: center; border-left: 4px solid #e53e3e; }
    .alert-banner .icon { font-size: 24px; margin-right: 12px; }
    .alert-banner .info { flex: 1; }
    .alert-banner .info .title { font-size: 14px; font-weight: 600; color: #c53030; margin-bottom: 4px; }
    .alert-banner .info .desc { font-size: 12px; color: #e53e3e; }
    
    /* 账户卡片标题 */
    .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .section-header .title { font-size: 16px; font-weight: 600; }
    .section-header .more { font-size: 13px; color: #999; cursor: pointer; }
    
    /* 账户列表 */
    .account-list { background: #fff; border-radius: 12px; overflow: hidden; }
    .account-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
    .account-item:last-child { border-bottom: none; }
    .account-item:active { background: #f9f9f9; }
    .account-item .icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }
    .account-item .info { flex: 1; }
    .account-item .info .name { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
    .account-item .info .bank { font-size: 12px; color: #999; }
    .account-item .balance { text-align: right; }
    .account-item .balance .amount { font-size: 16px; font-weight: 600; color: #1a365d; }
    .account-item .balance .trend { font-size: 11px; color: #68d391; margin-top: 3px; }
    .account-item .balance .trend.down { color: #e53e3e; }
    
    /* 预测卡片 */
    .forecast-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 12px; }
    .forecast-card .header { display: flex; justify-content: space-between; margin-bottom: 15px; }
    .forecast-card .header .title { font-size: 15px; font-weight: 600; }
    .forecast-card .header .tag { font-size: 11px; background: #e2e8f0; padding: 3px 8px; border-radius: 4px; color: #4a5568; }
    .forecast-card .chart { display: flex; align-items: flex-end; justify-content: space-between; height: 60px; margin-bottom: 15px; }
    .forecast-card .bar-wrap { display: flex; flex-direction: column; align-items: center; }
    .forecast-card .bar { width: 24px; background: linear-gradient(180deg, #4299e1 0%, #2c5282 100%); border-radius: 4px 4px 0 0; }
    .forecast-card .bar.highlight { background: linear-gradient(180deg, #68d391 0%, #38a169 100%); }
    .forecast-card .bar-label { font-size: 10px; color: #999; margin-top: 5px;}
    .forecast-card .summary { font-size: 13px; color: #666; }
    
    /* 调拨卡片 */
    .transfer-card { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; cursor: pointer; margin-bottom: 12px; }
    .transfer-card:active { background: #f9f9f9; }
    .transfer-card .icon { width: 50px; height: 50px; border-radius: 12px; background: #ebf8ff; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 15px; }
    .transfer-card .info { flex: 1; }
    .transfer-card .info .title { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
    .transfer-card .info .desc { font-size: 12px; color: #999; }
    .transfer-card .arrow { color: #ccc; font-size: 20px; }
    
    /* 详情页 */
    .detail-page { padding: 0; }
    .detail-header { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); color: #fff; padding: 25px 20px; text-align: center; }
    .detail-header .label { font-size: 14px; opacity: 0.85; margin-bottom: 10px; }
    .detail-header .amount { font-size: 40px; font-weight: 700; }
    .detail-header .amount span { font-size: 20px; }
    .detail-info { background: #fff; margin: 15px; border-radius: 12px; padding: 15px; }
    .detail-info .info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
    .detail-info .info-row:last-child { border-bottom: none; }
    .detail-info .info-row .label { color: #999; font-size: 14px; }
    .detail-info .info-row .value { font-size: 14px; color: #333; }
    
    /* 表单 */
    .form-section { background: #fff; border-radius: 12px; margin: 15px; padding: 20px; }
    .form-section .form-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
    .form-group { margin-bottom: 20px; }
    .form-group .label { font-size: 14px; color: #666; margin-bottom: 8px; }
    .form-group .input { width: 100%; height: 48px; border: 1px solid #e5e5e5; border-radius: 8px; padding: 0 15px; font-size: 15px; outline: none; transition: border-color 0.2s; }
    .form-group .input:focus { border-color: #2c5282; }
    .form-group .input::placeholder { color: #ccc; }
    
    .amount-input { display: flex; align-items: center; background: #f7fafc; border-radius: 8px; padding: 0 15px; }
    .amount-input .yuan { font-size: 24px; font-weight: 600; color: #333; margin-right: 5px; }
    .amount-input input { flex: 1; height: 48px; border: none; background: transparent; font-size: 28px; font-weight: 600; outline: none; }
    
    .account-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .account-option { display: flex; align-items: center; padding: 12px; border-radius: 8px; background: #f7fafc; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
    .account-option:active { border-color: #2c5282; }
    .account-option .icon { font-size: 20px; margin-right: 10px; }
    .account-option .name { font-size: 14px; font-weight: 500; }
    .account-option.active { background: #ebf8ff; border-color: #2c5282; }
    
    /* 按钮 */
    .btn-submit { width: calc(100% - 30px); margin: 20px 15px; height: 48px; background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); border: none; border-radius: 24px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(26, 54, 93, 0.4); }
    .btn-submit:active { opacity: 0.9; transform: scale(0.98); }
    
    /* 底部标签栏 */
    .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); border-top: 1px solid #f0f0f0; }
    .tab-item { text-align: center; cursor: pointer; }
    .tab-item .icon { font-size: 22px; margin-bottom: 3px; }
    .tab-item .label { font-size: 10px; color: #999; }
    .tab-item.active .icon { color: #1a365d; }
    .tab-item.active .label { color: #1a365d; }
    
    /* 页面切换动画 */
    .page { display: none; opacity: 0; transition: opacity 0.3s; }
    .page.active { display: block; opacity: 1; }
    
    /* 弹窗遮罩 */
    .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; }
    .mask.show { display: block; }
    
    /* 底部弹窗*/
    .bottom-sheet { position: fixed; bottom: -400px; left: 0; right: 0; background: #fff; border-radius: 20px 20px 0 0; z-index: 101; transition: bottom 0.3s; padding-bottom: 30px; }
    .bottom-sheet.show { bottom: 0; }
    .bottom-sheet .handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 12px auto; }
    .bottom-sheet .content { padding: 0 20px; }
    .bottom-sheet .title { font-size: 17px; font-weight: 600; text-align: center; margin-bottom: 20px; }
    .bottom-sheet .option { padding: 15px 0; text-align: center; font-size: 15px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
    .bottom-sheet .option:last-child { border-bottom: none; color: #e53e3e; }
    
    /* Toast提示 */
    .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background: rgba(0,0,0,0.8); color: #fff; padding: 15px 30px; border-radius: 8px; font-size: 14px; z-index: 200; transition: transform 0.2s; }
    .toast.show { transform: translate(-50%, -50%) scale(1); }
    
    /* 统计页面 */
    .stats-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 15px; }
    .stats-card .title { font-size: 16px; font-weight: 600; margin-bottom: 15px; }
    .stats-card .chart-area { height: 150px; background: #f7fafc; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding: 15px; }
    .stats-card .line { width: 100%; height: 100px; display: flex; align-items: flex-end; justify-content: space-around; }
    .stats-card .dot { width: 8px; height: 8px; background: #2c5282; border-radius: 50%; margin: 0 5px; }
    .stats-card .line-chart { position: relative; }
    .stats-card .line-chart::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(66, 153, 225, 0.3) 0%, rgba(66, 153, 225, 0) 100%); }
    
    /* 预警页面 */
    .warning-list { background: #fff; border-radius: 12px; overflow: hidden; }
    .warning-item { padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
    .warning-item:last-child { border-bottom: none; }
    .warning-item:active { background: #f9f9f9; }
    .warning-item .level { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
    .warning-item .level.high { background: #fed7d7; color: #c53030; }
    .warning-item .level.medium { background: #feebc8; color: #c05621; }
    .warning-item .level.low { background: #c6f6d5; color: #276749; }
    .warning-item .content { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
    .warning-item .time { font-size: 12px; color: #999; }
  </style>
</head>
<body>
  <div class="phone-container">
    <!-- 状态栏 -->
    <div class="status-bar"><span>9:41</span></div>
    
    <!-- 首页 -->
    <div id="page-home" class="page active">
      <div class="nav-bar">
        <span class="back"></span>
        <span class="title">资金管控平台</span>
        <span class="more">⋮</span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div class="home-page">
          <!-- 资金总览卡片 -->
          <div class="fund-card">
            <div class="label">集团资金总额</div>
            <div class="amount"><span>¥</span> 12,856,000.00</div>
            <div class="stats">
              <div class="stat-item in">
                <div class="stat-value">+¥2,380万</div>
                <div class="stat-label">本月流入</div>
              </div>
              <div class="stat-item out">
                <div class="stat-value">-¥1,680万</div>
                <div class="stat-label">本月流出</div>
              </div>
            </div>
          </div>
          
          <!-- 预警提示 -->
          <div class="alert-banner">
            <div class="icon">⚠️</div>
            <div class="info">
              <div class="title">资金风险预警</div>
              <div class="desc">华东区账户流动性低于阈值，请关注</div>
            </div>
          </div>
          
          <!-- 快捷功能 -->
          <div class="quick-actions">
            <div class="quick-action" onclick="showPage('transfer')">
              <div class="icon">↔️</div>
              <div class="label">资金调拨</div>
            </div>
            <div class="quick-action" onclick="showPage('forecast')">
              <div class="icon">📈</div>
              <div class="label">现金流预测</div>
            </div>
            <div class="quick-action" onclick="showPage('warning')">
              <div class="icon">🔔</div>
              <div class="label">风险预警</div>
            </div>
            <div class="quick-action" onclick="showPage('account')">
              <div class="icon">🏦</div>
              <div class="label">账户管理</div>
            </div>
          </div>
          
          <!-- 账户列表 -->
          <div class="section-header">
            <span class="title">账户资金分布</span>
            <span class="more">全部 ></span>
          </div>
          <div class="account-list">
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #ebf8ff;">🏦</div>
              <div class="info">
                <div class="name">工商银行-主账户</div>
                <div class="bank">中国工商银行北京分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥5,680,000</div>
                <div class="trend">↑ 12.3%</div>
              </div>
</div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #f0fff4;">💳</div>
              <div class="info">
                <div class="name">建设银行-运营账户</div>
                <div class="bank">中国建设银行上海分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥3,250,000</div>
                <div class="trend down">↓ 5.2%</div>
              </div>
            </div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #fffaf0;">💰</div>
              <div class="info">
                <div class="name">农业银行-项目账户</div>
                <div class="bank">中国农业银行深圳分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥2,180,000</div>
                <div class="trend">↑ 3.8%</div>
              </div>
            </div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #faf5ff;">💵</div>
              <div class="info">
                <div class="name">招商银行-结算账户</div>
                <div class="bank">招商银行广州分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥1,746,000</div>
                <div class="trend">↑ 8.1%</div>
              </div>
            </div>
          </div>
          
          <!-- 调拨入口 -->
          <div class="section-header">
            <span class="title">智能调拨建议</span>
          </div>
          <div class="transfer-card" onclick="showPage('transfer')">
            <div class="icon">↔️</div>
            <div class="info">
              <div class="title">跨账户资金调拨</div>
              <div class="desc">建议从主账户转500万至运营账户，优化利息收益</div>
            </div>
            <div class="arrow">›</div>
          </div>
          
          <!-- 现金流预测 -->
          <div class="forecast-card">
            <div class="header">
              <span class="title">30天现金流预测</span>
              <span class="tag">智能预测</span>
            </div>
            <div class="chart">
              <div class="bar-wrap">
                <div class="bar" style="height: 50px;"></div>
                <span class="bar-label">周一</span>
              </div>
              <div class="bar-wrap">
                <div class="bar" style="height: 70px;"></div>
                <span class="bar-label">周二</span>
              </div>
              <div class="bar-wrap">
                <div class="bar highlight" style="height: 90px;"></div>
                <span class="bar-label">周三</span>
              </div>
              <div class="bar-wrap">
                <div class="bar" style="height: 60px;"></div>
                <span class="bar-label">周四</span>
              </div>
              <div class="bar-wrap">
                <div class="bar" style="height: 45px;"></div>
                <span class="bar-label">周五</span>
              </div>
            </div>
            <div class="summary">预测净流入：+¥680万 | 预测净流出：-¥420万</div>
          </div>
        </div>
      </div>
      
      <!-- 底部标签栏 -->
      <div class="tab-bar">
        <div class="tab-item active" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 资金调拨页面 -->
    <div id="page-transfer" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">资金调拨</span>
        <span class="more"></span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div class="form-section">
          <div class="form-group">
            <div class="label">调拨金额</div>
            <div class="amount-input">
              <span class="yuan">¥</span>
              <input type="text" placeholder="0.00">
            </div>
          </div>
          
          <div class="form-group">
            <div class="label">源账户</div>
            <div class="account-selector">
              <div class="account-option active" onclick="selectAccount(this)">
                <div class="icon">🏦</div>
                <div class="name">工商银行主账户</div>
              </div>
              <div class="account-option" onclick="selectAccount(this)">
                <div class="icon">💳</div>
                <div class="name">建设银行运营账户</div>
              </div>
              <div class="account-option" onclick="selectAccount(this)">
                <div class="icon">💰</div>
                <div class="name">农业银行项目账户</div>
              </div>
              <div class="account-option" onclick="selectAccount(this)">
                <div class="icon">💵</div>
                <div class="name">招商银行结算账户</div>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <div class="label">目标账户</div>
            <div class="account-selector">
              <div class="account-option" onclick="selectAccount2(this)">
                <div class="icon">🏦</div>
                <div class="name">工商银行主账户</div>
              </div>
              <div class="account-option active" onclick="selectAccount2(this)">
                <div class="icon">💳</div>
                <div class="name">建设银行运营账户</div>
              </div>
              <div class="account-option" onclick="selectAccount2(this)">
                <div class="icon">💰</div>
                <div class="name">农业银行项目账户</div>
              </div>
              <div class="account-option" onclick="selectAccount2(this)">
                <div class="icon">💵</div>
                <div class="name">招商银行结算账户</div>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <div class="label">调拨原因</div>
            <input class="input" type="text" placeholder="请输入调拨原因...">
          </div>
          
          <div class="form-group">
            <div class="label">预计到账时间</div>
            <div style="font-size: 14px; color: #666;">即时到账（同行转账）</div>
          </div>
        </div>
      </div>
      <button class="btn-submit" onclick="submitTransfer()">确认调拨</button>
      <div class="tab-bar">
        <div class="tab-item" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 现金流预测页面 -->
    <div id="page-forecast" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">现金流预测</span>
        <span class="more">···</span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div style="padding: 15px;">
          <!-- 预测周期选择 -->
          <div style="display: flex; justify-content: center; gap: 30px; margin-bottom: 20px;">
            <span style="color: #999;">‹</span>
            <span style="font-size: 16px; font-weight: 600;">2024年12月</span>
            <span style="color: #999;">›</span>
          </div>
          
          <!-- 预测总览 -->
          <div class="stats-card">
            <div class="title">月度资金走势</div>
            <div class="chart-area">
              <div class="line-chart">
                <svg width="100%" height="100" viewBox="0 0 300 100" preserveAspectRatio="none">
                  <polyline fill="none" stroke="#2c5282" stroke-width="2" points="0,80 50,60 100,70 150,40 200,50 250,30 300,45" />
                  <circle cx="150" cy="40" r="4" fill="#2c5282" />
                </svg>
              </div>
            </div>
          </div>
          
          <!-- 预测数据 -->
          <div class="stats-card">
            <div class="title">资金预测概览</div>
            <div style="display: flex; justify-content: space-between; text-align: center;">
              <div>
                <div style="color: #999; font-size: 12px; margin-bottom: 8px;">预测流入</div>
                <div style="font-size: 22px; font-weight: 600; color: #38a169;">+¥2,680万</div>
              </div>
              <div style="border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; padding: 0 25px;">
                <div style="color: #999; font-size: 12px; margin-bottom: 8px;">预测流出</div>
                <div style="font-size: 22px; font-weight: 600; color: #e53e3e;">-¥1,920万</div>
              </div>
              <div>
                <div style="color: #999; font-size: 12px; margin-bottom: 8px;">净增长</div>
                <div style="font-size: 22px; font-weight: 600; color: #2c5282;">+¥760万</div>
              </div>
            </div>
          </div>
          
          <!-- 周预测 -->
          <div class="stats-card">
            <div class="title">本周每日预测</div>
            <div style="display: flex; justify-content: space-between; margin-top: 10px;">
              <div style="text-align: center;">
                <div style="color: #999; font-size: 11px; margin-bottom: 8px;">周一</div>
                <div style="font-size: 13px; color: #38a169;">+128万</div>
              </div>
              <div style="text-align: center;">
                <div style="color: #999; font-size: 11px; margin-bottom: 8px;">周二</div>
                <div style="font-size: 13px; color: #38a169;">+86万</div>
              </div>
              <div style="text-align: center;">
                <div style="color: #999; font-size: 11px; margin-bottom: 8px;">周三</div>
                <div style="font-size: 13px; color: #e53e3e;">-42万</div>
              </div>
              <div style="text-align: center;">
                <div style="color: #999; font-size: 11px; margin-bottom: 8px;">周四</div>
                <div style="font-size: 13px; color: #38a169;">+156万</div>
              </div>
              <div style="text-align: center;">
                <div style="color: #999; font-size: 11px; margin-bottom: 8px;">周五</div>
                <div style="font-size: 13px; color: #38a169;">+92万</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-bar">
        <div class="tab-item" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item active" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 风险预警页面 -->
    <div id="page-warning" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">风险预警</span>
        <span class="more">⚙</span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div style="padding: 15px;">
          <!-- 预警统计 -->
          <div style="display: flex; gap: 10px; margin-bottom: 15px;">
            <div style="flex: 1; background: #fed7d7; border-radius: 10px; padding: 15px; text-align: center;">
              <div style="font-size: 28px; font-weight: 700; color: #c53030;">3</div>
              <div style="font-size: 12px; color: #c53030;">高风险</div>
            </div>
            <div style="flex: 1; background: #feebc8; border-radius: 10px; padding: 15px; text-align: center;">
              <div style="font-size: 28px; font-weight: 700; color: #c05621;">5</div>
              <div style="font-size: 12px; color: #c05621;">中风险</div>
            </div>
            <div style="flex: 1; background: #c6f6d5; border-radius: 10px; padding: 15px; text-align: center;">
              <div style="font-size: 28px; font-weight: 700; color: #276749;">8</div>
              <div style="font-size: 12px; color: #276749;">低风险</div>
            </div>
          </div>
          
          <!-- 预警列表 -->
          <div class="section-header">
            <span class="title">预警详情</span>
          </div>
          <div class="warning-list">
            <div class="warning-item" onclick="showPage('detail')">
              <span class="level high">高风险</span>
              <div class="content">华东区账户流动性率低于15%，已触及预警阈值</div>
              <div class="time">2024-12-18 14:30</div>
            </div>
            <div class="warning-item" onclick="showPage('detail')">
              <span class="level high">高风险</span>
              <div class="content">运营账户可用余额不足以覆盖下周应付账款</div>
              <div class="time">2024-12-18 10:15</div>
            </div>
            <div class="warning-item" onclick="showPage('detail')">
              <span class="level high">高风险</span>
              <div class="content">单个供应商付款集中度超过30%上限</div>
              <div class="time">2024-12-17 16:45</div>
            </div>
            <div class="warning-item" onclick="showPage('detail')">
              <span class="level medium">中风险</span>
              <div class="content">项目账户资金沉淀率过高，建议进行归集</div>
              <div class="time">2024-12-17 09:20</div>
            </div>
            <div class="warning-item" onclick="showPage('detail')">
              <span class="level medium">中风险</span>
              <div class="content">预计15日后账户余额将低于日常备用金</div>
              <div class="time">2024-12-16 15:30</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-bar">
        <div class="tab-item" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item active" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 账户管理页面 -->
    <div id="page-account" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">账户管理</span>
        <span class="more">+</span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div style="padding: 15px;">
          <!-- 账户总览 -->
          <div style="background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); border-radius: 16px; padding: 25px 20px; color: #fff; margin-bottom: 15px;">
            <div style="font-size: 13px; opacity: 0.85; margin-bottom: 8px;">账户总数</div>
            <div style="font-size: 32px; font-weight: 700;">12 <span style="font-size: 16px; opacity: 0.85;">个账户</span></div>
            <div style="margin-top: 15px; font-size: 13px; opacity: 0.75;">涉及 4 家银行，8 个业务单元</div>
          </div>
          
          <!-- 账户列表 -->
          <div class="section-header">
            <span class="title">全部账户</span>
          </div>
          <div class="account-list">
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #ebf8ff;">🏦</div>
              <div class="info">
                <div class="name">工商银行-主账户</div>
                <div class="bank">中国工商银行北京分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥5,680,000</div>
                <div class="trend">↑ 12.3%</div>
              </div>
            </div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #f0fff4;">💳</div>
              <div class="info">
                <div class="name">建设银行-运营账户</div>
                <div class="bank">中国建设银行上海分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥3,250,000</div>
                <div class="trend down">↓ 5.2%</div>
              </div>
            </div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #fffaf0;">💰</div>
              <div class="info">
                <div class="name">农业银行-项目账户</div>
                <div class="bank">中国农业银行深圳分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥2,180,000</div>
                <div class="trend">↑ 3.8%</div>
              </div>
            </div>
            <div class="account-item" onclick="showPage('detail')">
              <div class="icon" style="background: #faf5ff;">💵</div>
              <div class="info">
                <div class="name">招商银行-结算账户</div>
                <div class="bank">招商银行广州分行</div>
              </div>
              <div class="balance">
                <div class="amount">¥1,746,000</div>
                <div class="trend">↑ 8.1%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-bar">
        <div class="tab-item" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item active" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 我的页面 -->
    <div id="page-mine" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">我的</span>
        <span class="more">⚙</span>
      </div>
      <div class="page-content" style="bottom: 60px;">
        <div style="padding: 15px;">
          <!-- 用户信息 -->
          <div style="background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; margin-bottom: 15px;">
            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; margin-right: 15px;">👤</div>
            <div>
              <div style="font-size: 18px; font-weight: 600; margin-bottom: 5px;">张财务总监</div>
              <div style="font-size: 13px; color: #999;">财务管理中心</div>
            </div>
          </div>
          
          <!-- 设置列表 -->
          <div style="background: #fff; border-radius: 12px;">
            <div class="account-item" style="border-radius: 12px;">
              <div class="icon" style="background: #ebf8ff; font-size: 18px;">📊</div>
              <div class="info">
                <div class="name">数据看板设置</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
            <div class="account-item">
              <div class="icon" style="background: #f0fff4; font-size: 18px;">🔔</div>
              <div class="info">
                <div class="name">预警规则配置</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
            <div class="account-item">
              <div class="icon" style="background: #fffaf0; font-size: 18px;">🔐</div>
              <div class="info">
                <div class="name">权限管理</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
            <div class="account-item">
              <div class="icon" style="background: #faf5ff; font-size: 18px;">📱</div>
              <div class="info">
                <div class="name">消息通知设置</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
          </div>
          
          <div style="background: #fff; border-radius: 12px; margin-top: 15px;">
            <div class="account-item">
              <div class="icon" style="background: #f5f5f5; font-size: 18px;">📋</div>
              <div class="info">
                <div class="name">操作日志</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
            <div class="account-item" onclick="showBottomSheet()">
              <div class="icon" style="background: #f5f5f5; font-size: 18px;">❓</div>
              <div class="info">
                <div class="name">帮助与反馈</div>
              </div>
              <span style="color: #ccc;">›</span>
            </div>
          </div>
          
          <button style="width: 100%; margin-top: 20px; height: 48px; background: #fff; border: 1px solid #f0f0f0; border-radius: 24px; font-size: 16px; color: #e53e3e; cursor: pointer;">退出登录</button>
        </div>
      </div>
      <div class="tab-bar">
        <div class="tab-item" onclick="showPage('home')">
          <div class="icon">🏠</div>
          <div class="label">首页</div>
        </div>
        <div class="tab-item" onclick="showPage('account')">
          <div class="icon">🏦</div>
          <div class="label">账户</div>
        </div>
        <div class="tab-item" onclick="showPage('forecast')">
          <div class="icon">📈</div>
          <div class="label">预测</div>
        </div>
        <div class="tab-item" onclick="showPage('warning')">
          <div class="icon">🔔</div>
          <div class="label">预警</div>
        </div>
        <div class="tab-item active" onclick="showPage('mine')">
          <div class="icon">👤</div>
          <div class="label">我的</div>
        </div>
      </div>
    </div>
    
    <!-- 账户详情页面 -->
    <div id="page-detail" class="page">
      <div class="nav-bar">
        <span class="back" onclick="showPage('home')">‹</span>
        <span class="title">账户详情</span>
        <span class="more">✏️</span>
      </div>
      <div class="page-content detail-page">
        <div class="detail-header">
          <div class="label">工商银行-主账户</div>
          <div class="amount"><span>¥</span>5,680,000.00</div>
        </div>
        <div class="detail-info">
          <div class="info-row">
            <span class="label">开户行</span>
            <span class="value">中国工商银行北京分行</span>
          </div>
          <div class="info-row">
            <span class="label">账户类型</span>
            <span class="value">一般户</span>
          </div>
          <div class="info-row">
            <span class="label">昨日余额</span>
            <span class="value">¥5,420,000.00</span>
          </div>
          <div class="info-row">
            <span class="label">本月流入</span>
            <span class="value" style="color: #38a169;">+¥2,180,000.00</span>
          </div>
          <div class="info-row">
            <span class="label">本月流出</span>
            <span class="value" style="color: #e53e3e;">-¥920,000.00</span>
          </div>
          <div class="info-row">
            <span class="label">可用额度</span>
            <span class="value">¥5,680,000.00</span>
          </div>
          <div class="info-row">
            <span class="label">归属部门</span>
            <span class="value">集团财务中心</span>
          </div>
        </div>
        <div style="margin: 15px;">
          <button style="width: 100%; height: 48px; background: #fff; border: 1px solid #2c5282; border-radius: 24px; font-size: 15px; color: #2c5282; cursor: pointer;">查看交易明细</button>
        </div>
      </div>
    </div>
    
    <!-- 遮罩 -->
    <div class="mask" id="mask" onclick="closeBottomSheet()"></div>
    
    <!-- 底部弹窗 -->
    <div class="bottom-sheet" id="bottomSheet">
      <div class="handle"></div>
      <div class="content">
        <div class="title">帮助与反馈</div>
        <div class="option" onclick="showToast('功能开发中')">联系技术支持</div>
        <div class="option" onclick="showToast('功能开发中')">意见反馈</div>
        <div class="option" onclick="showToast('功能开发中')">常见问题</div>
        <div class="option" onclick="closeBottomSheet()">取消</div>
      </div>
    </div>
    
    <!-- Toast -->
    <div class="toast" id="toast">操作成功</div>
  </div>
  
  <script>
    // 页面切换
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
      document.getElementById('page-' + pageId).classList.add('active');
      
      // 更新标签栏状态
      document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
      const tabMap = {
        'home': 0, 'account': 1, 'forecast': 2, 'warning': 3, 'mine': 4, 'transfer': 0, 'detail': 0
      };
      if (tabMap[pageId] !== undefined) {
        document.querySelectorAll('.tab-item')[tabMap[pageId]].classList.add('active');
      }
    }
    
    // 源账户选择
    function selectAccount(el) {
      el.parentElement.querySelectorAll('.account-option').forEach(opt => opt.classList.remove('active'));
      el.classList.add('active');
    }
    
    // 目标账户选择
    function selectAccount2(el) {
      el.parentElement.querySelectorAll('.account-option').forEach(opt => opt.classList.remove('active'));
      el.classList.add('active');
    }
    
    // 提交调拨
    function submitTransfer() {
      showToast('调拨申请已提交');
      setTimeout(() => showPage('home'), 1200);
    }
    
    // 底部弹窗
    function showBottomSheet() {
      document.getElementById('mask').classList.add('show');
      document.getElementById('bottomSheet').classList.add('show');
    }
    
    function closeBottomSheet() {
      document.getElementById('mask').classList.remove('show');
      document.getElementById('bottomSheet').classList.remove('show');
    }
    
    // Toast提示
    function showToast(msg) {
      const toast = document.getElementById('toast');
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 1500);
    }
  </script>
</body>
</html>