218 lines
10 KiB
HTML
218 lines
10 KiB
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>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="./src/css/components/one-click-login.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 借款金额区域 -->
|
||
<div class="money-section money-first">
|
||
<div class="money-header">
|
||
<div class="money-label">借</div>
|
||
<input type="number" class="money-input" id="loanAmount" value="50000" maxlength="6">
|
||
<div class="max-loan" id="maxLoan">全部借出200000</div>
|
||
</div>
|
||
<div class="interest-rate-text">
|
||
年化利率<span class="rate-highlight">10.8%-24%</span>（单利），实际以审核为准
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 还款信息卡片 -->
|
||
<div class="money-section money-card">
|
||
<div class="info-item">
|
||
<div class="info-label">还款方式</div>
|
||
<div class="info-content">
|
||
<div class="info-main">随借随还</div>
|
||
<div class="info-desc">按日计算，提前还0手续费</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-item clickable" id="termTrigger">
|
||
<div class="info-label">还款期数</div>
|
||
<div class="info-content">
|
||
<div class="info-main" id="repaymentTerm">12个月</div>
|
||
<div class="info-desc">年化利率10.8%-24%（单利），以实际为准</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-item no-border">
|
||
<div class="info-label">还款计划</div>
|
||
<div class="info-content">
|
||
<div class="info-main" id="repaymentPlan">首期02月05日 应还 4916.67元</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="disclaimer-text">* 贷款试算功能，仅作为借还款信息参考</div>
|
||
|
||
<!-- 利率和用途信息 -->
|
||
<div class="money-section money-card money-compact">
|
||
<div class="info-item compact no-border">
|
||
<div class="info-label">利率</div>
|
||
<div class="info-content row">年化利率10.8%-24% （单利）</div>
|
||
</div>
|
||
<div class="info-item compact no-border clickable" id="loanPurposeTrigger">
|
||
<div class="info-label">借款用途</div>
|
||
<div class="info-content row">
|
||
<span id="loanPurpose" class="info-main">个人日常消费</span>
|
||
<span class="arrow-icon">></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 手机号输入区域 -->
|
||
<div class="money-section money-phone">
|
||
<div class="phone-input-wrapper">
|
||
<div class="phone-label">手机号</div>
|
||
<input type="tel" class="phone-input" id="phoneNumber" placeholder="凭手机号注册申请（已加密）" maxlength="11">
|
||
</div>
|
||
<div class="phone-error" id="phoneError" style="display: none;"></div>
|
||
|
||
<!-- 一键登录按钮容器 -->
|
||
<div class="one-click-login-wrapper" id="oneClickLoginWrapper">
|
||
<!-- 动态插入一键登录按钮 -->
|
||
</div>
|
||
|
||
<div class="button-wrapper">
|
||
<button class="apply-btn" id="applyBtn">立即申请</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 协议勾选 -->
|
||
<div class="agreement-section">
|
||
<label class="checkbox-wrapper">
|
||
<input type="checkbox" id="agreementCheck" class="checkbox-input">
|
||
<span class="checkbox-icon"></span>
|
||
<span class="checkbox-label">我已阅读并同意</span>
|
||
</label>
|
||
<a href="./agre/个人信息共享授权书.html" class="agreement-link">《个人信息共享授权书》</a>
|
||
<a href="./agre/用户注册服务协议.html" class="agreement-link">《白丫融注册协议》</a>
|
||
<a href="./agre/隐私政策.html" class="agreement-link">《隐私政策》</a>
|
||
</div>
|
||
|
||
<!-- 底部声明 -->
|
||
<div class="footer-section">
|
||
<p class="footer-title">郑重声明</p>
|
||
<p>本平台为金融信息服务平台</p>
|
||
<p>所有贷款申请在未成功贷款前绝不收取任何费用</p>
|
||
<p>为了保障您的资金安全请不要相信任何要求您支付费用短信、邮件、电话等不实信息</p>
|
||
<p>年利率10.8%~24%具体放款金额及放款时间视个人情况而定贷款有风险借款需谨慎!</p>
|
||
<p>京ICP备2025154270号-1</p>
|
||
<p>北京百雅科技有限公司</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 借款用途选择器模态框 -->
|
||
<div class="modal-overlay" id="purposeModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button class="modal-btn modal-btn-cancel" id="purposeCancelBtn">取消</button>
|
||
<button class="modal-btn modal-btn-confirm" id="purposeConfirmBtn">确认</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-option active" data-value="个人日常消费">
|
||
<span class="modal-option-text">个人日常消费</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="装修">
|
||
<span class="modal-option-text">装修</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="医疗">
|
||
<span class="modal-option-text">医疗</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="教育">
|
||
<span class="modal-option-text">教育</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="其他">
|
||
<span class="modal-option-text">其他</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 还款期数选择器模态框 -->
|
||
<div class="modal-overlay" id="termModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button class="modal-btn modal-btn-cancel" id="termCancelBtn">取消</button>
|
||
<button class="modal-btn modal-btn-confirm" id="termConfirmBtn">确认</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-option" data-value="3">
|
||
<span class="modal-option-text">3个月</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="6">
|
||
<span class="modal-option-text">6个月</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option active" data-value="12">
|
||
<span class="modal-option-text">12个月</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="24">
|
||
<span class="modal-option-text">24个月</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
<div class="modal-option" data-value="36">
|
||
<span class="modal-option-text">36个月</span>
|
||
<span class="modal-option-check"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 验证码输入弹窗 -->
|
||
<div class="modal-overlay" id="verifyCodeModal">
|
||
<div class="verify-code-modal">
|
||
<div class="verify-code-header">
|
||
<h3 class="verify-code-title">输入验证码</h3>
|
||
</div>
|
||
<div class="verify-code-body">
|
||
<div class="verify-code-tip" id="verifyCodeTip">已发送至:151****7153</div>
|
||
<div class="verify-code-input-wrapper">
|
||
<div class="verify-code-input-icon">🛡️</div>
|
||
<input type="text" class="verify-code-input" id="verifyCodeInput" placeholder="请输入验证码" maxlength="6">
|
||
<div class="verify-code-countdown" id="verifyCodeCountdown">59s</div>
|
||
</div>
|
||
<div class="verify-code-error" id="verifyCodeError" style="display: none;">验证码错误</div>
|
||
</div>
|
||
<div class="verify-code-footer">
|
||
<button class="verify-code-btn" id="verifyCodeConfirmBtn">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 协议提示弹窗 -->
|
||
<div class="modal-overlay" id="agreementModal">
|
||
<div class="agreement-modal">
|
||
<div class="agreement-modal-header">
|
||
<h3 class="agreement-modal-title">温馨提示</h3>
|
||
</div>
|
||
<div class="agreement-modal-body">
|
||
<div class="agreement-modal-text">我已阅读并同意</div>
|
||
<div class="agreement-modal-links">
|
||
<a href="./agre/个人信息共享授权书.html" class="agreement-modal-link">《个人信息共享授权书》</a>
|
||
<a href="./agre/用户注册服务协议.html" class="agreement-modal-link">《白丫融注册协议》</a>
|
||
<a href="./agre/隐私政策.html" class="agreement-modal-link">《隐私政策》</a>
|
||
</div>
|
||
</div>
|
||
<div class="agreement-modal-footer">
|
||
<button class="agreement-modal-btn agreement-modal-btn-cancel" id="agreementCancelBtn">取消</button>
|
||
<button class="agreement-modal-btn agreement-modal-btn-confirm" id="agreementConfirmBtn">同意并继续</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新的模块化架构 -->
|
||
<script type="module" src="./src/js/main.js"></script>
|
||
</body>
|
||
|
||
</html>
|