lxy/flux-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
绝尘
2026-01-22 18:31:30 +08:00
commit d703ac3574
46 changed files with 7751 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
index.html Normal file
View File

@@ -0,0 +1,217 @@
<!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="#" class="agreement-link">《个人信息共享授权书》</a>
<a href="#" class="agreement-link">《白丫融注册协议》</a>
<a href="#" 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="#" class="agreement-modal-link">《个人信息共享授权书》</a>
<a href="#" class="agreement-modal-link">《白丫融注册协议》</a>
<a href="#" 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>