项目简介link

Finapp 是一款面向移动端的钱包/银行/金融科技 HTML 模板，包含完整的页面和组件库，适用于快速搭建金融类移动 Web 应用或 PWA。模板基于 Bootstrap，集成了 Ionicons 图标库和 ApexCharts 图表，并支持 Service Worker 实现"添加到主屏幕"功能。

技术栈link

• HTML5 + CSS3（编译后的样式文件）
• Sass/SCSS（源码样式，支持自定义主题）
• Bootstrap 5（布局与组件基础框架）
• Splide.js（轮播组件）
• ApexCharts（数据可视化图表）
• Ionicons（图标）
• PWA（__manifest.json + __service-worker.js）

项目结构link

Finapp v2-2-1/
├── Documentation/
│   ├── index.html          ← 在线文档入口
│   └── assets/             ← 文档静态资源
└── HTML/
    ├── index.html          ← 主入口页面
    ├── __manifest.json     ← PWA 清单
    ├── __service-worker.js ← PWA Service Worker
    ├── app-*.html          ← 业务页面（登录、交易、设置等）
    ├── component-*.html    ← 可复用 UI 组件
    └── assets/             ← CSS / JS / 图片 / 字体

核心文件说明link

• HTML/index.html — 应用主页面，展示钱包卡片、余额、操作入口
• HTML/__manifest.json — PWA 配置文件，定义主题色、图标和显示模式
• HTML/__service-worker.js — Service Worker，实现离线缓存与添加到主屏幕
• Documentation/index.html — 模板官方文档，包含 Sass 编译、颜色、字体等配置说明
• HTML/app-*.html — 业务页面模板集（登录、注册、账单、通知、设置等）
• HTML/component-*.html — 独立 UI 组件示例（对话框、底部菜单、图表、表格等）

快速开始link

1. 用本地服务器打开 HTML/index.html（推荐 VS Code 安装 Live Server 插件）
2. 若在非本地环境编辑，需在 assets/js/base.js 中移除 Service Worker 的 if-block
3. 文档位于 Documentation/index.html，可查阅 Sass 编译、自定义主题色等详细步骤

使用建议link

本模板适合快速原型开发或作为金融类移动 Web 应用的起点。如需深度定制，建议直接修改 Sass 源文件后重新编译，而非直接编辑 style.css，以保持样式结构清晰。