H5页面客户端+管理后台产品系统Vibe Coding

本项目旨在解决信用卡推广业务中，传统线下推广效率低、客户信息管理混乱、订单跟踪困难等问题。在金融行业数字化转型的大背景下，越来越多的信用卡推广业务需要线上化、标准化的管理工具。通过搭建H5推广平台，推广员可以随时随地查看产品、扫码申请、登记订单、跟踪审核状态和佣金结算，大幅提升推广效率和客户体验，降低人工管理成本。

本项目包含以下核心功能模块：

1. 产品列表页：顶部广告位展示推广二维码和客服信息，分类标签筛选不同类型信用卡产品，搜索框支持按银行名称快速查找，九宫格布局展示各银行信用卡产品卡片，包含银行logo、卡名称、标签、奖励金额等信息。

2. 产品详情页：展示银行logo、卡名称、奖励金额，营销区域说明全国或限城市办理，结算规则详细说明支持城市、结算周期、新户定义、客服电话等，底部按钮支持分享生成专属推广二维码和扫码申请跳转银行官方链接。

3. 订单管理页：顶部搜索栏支持按客户姓名、手机号、身份证号搜索，状态标签栏横向滚动筛选全部、进件、初审、面签、终审、激活、首刷、已结算、已拒绝等状态，报单记录列表展示客户姓名、申请的卡、申请时间、状态、佣金等信息。

4. 个人中心页：顶部资料卡展示头像、推广员身份、id号，账户余额模块展示已结算佣金总额，支持隐藏/显示余额，我的服务模块包含我的订单、我的团队、邀请成员、办卡进度、隐私政策等功能入口。

5. 申请流程：产品详情页点击扫码申请弹出二维码大图，确认信息页填写姓名手机号并勾选协议，动态二维码页生成带银行logo的专属推广码，底部展示推广员姓名、工号、有效期等信息。

本人独立负责本项目从需求分析、页面设计、前端开发到部署上线的全流程工作。

技术栈方面：采用纯HTML5/CSS3/JavaScript原生开发，无框架依赖，代码简洁高效，加载速度快；使用响应式布局，完美适配手机、平板、电脑等多种设备；CSS3实现页面动画和交互效果，JavaScript实现表单验证、弹窗、导航切换、数据存储等交互逻辑。

实现亮点：1. 纯静态页面，无需后端服务器，部署简单，维护成本低；2. 响应式设计，一套代码适配所有设备；3. 界面采用蓝色为主白色背景的商务风格，专业大气；4. 底部导航栏、弹窗、状态标签等交互完整，用户体验好。

技术难点：1. 多页面之间的数据传递和状态管理；2. 动态二维码生成和分享功能的实现；3. 各种设备屏幕尺寸的适配和兼容性处理。