120 lines
5.1 KiB
HTML
120 lines
5.1 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="basic-info.css">
|
||
</head>
|
||
<body>
|
||
<div class="basic-info-container">
|
||
<!-- 顶部卡片 -->
|
||
<div class="top-card">
|
||
<div class="top-title">根据您的基础信息进行评估，请如实填写</div>
|
||
<div class="top-money" id="topMoney">35,000</div>
|
||
<div class="top-text">*最终额度以最后审批为准</div>
|
||
<div class="progress-wrapper">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<div class="progress-text" id="progressText">0%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 资产信息区域 -->
|
||
<div class="asset-section">
|
||
<div class="asset-header" id="assetHeader">
|
||
<div class="asset-title">
|
||
<img class="asset-icon" src="./static/image/zc-pic.png" alt="资产信息">
|
||
<span>资产信息（<span id="completedCount">0</span>/6）</span>
|
||
</div>
|
||
<img class="section-arrow" id="assetArrow" src="./static/image/dropdown-down.png" alt="展开">
|
||
</div>
|
||
|
||
<div class="asset-list" id="assetList">
|
||
<!-- 选项会通过JS动态添加 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息区域 -->
|
||
<div class="basic-info-section" id="basicInfoSection" style="display: none;">
|
||
<div class="basic-info-header">
|
||
<div class="basic-info-title">
|
||
<img class="basic-info-icon" src="./static/image/base-pic.png" alt="基本信息">
|
||
<span>基本信息</span>
|
||
</div>
|
||
<img class="section-arrow" id="basicInfoArrow" src="./static/image/dropdown-down.png" alt="收起">
|
||
</div>
|
||
|
||
<div class="basic-info-list" id="basicInfoList">
|
||
<!-- 基本信息字段会通过JS动态添加 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="button-section" id="bottomSection" style="display: none;">
|
||
<div class="agreement-row">
|
||
<label class="agreement-checkbox">
|
||
<input type="checkbox" id="agreementCheckbox">
|
||
<span class="agreement-text">我已阅读并同意</span>
|
||
</label>
|
||
<span class="agreement-links">
|
||
《人脸识别验证个人信息使用授权书》
|
||
《个人信息授权书》
|
||
《个人信息共享授权书》
|
||
</span>
|
||
</div>
|
||
<button class="submit-btn" id="submitBtn" disabled>下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 城市选择器模态框 -->
|
||
<div class="city-picker-modal" id="cityPickerModal">
|
||
<div class="city-picker-overlay"></div>
|
||
<div class="city-picker-content">
|
||
<div class="city-picker-header">
|
||
<button class="city-picker-btn city-picker-cancel" id="cityCancelBtn">取消</button>
|
||
<button class="city-picker-btn city-picker-confirm" id="cityConfirmBtn">确认</button>
|
||
</div>
|
||
<div class="city-picker-body">
|
||
<div class="city-picker-column" id="provinceColumn">
|
||
<!-- 省份列表会通过JS动态添加 -->
|
||
</div>
|
||
<div class="city-picker-column" id="cityColumn">
|
||
<!-- 城市列表会通过JS动态添加 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast 提示 -->
|
||
<div class="toast" id="toast">
|
||
<div class="toast-content" id="toastContent"></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>
|