更新记录

v 1.0（2026-03-05） 下载此版本

初始发布

平台兼容性

uni-app(3.6.17)

其他

✨ 特性 🎨 五大主题：紫（知识）、橙（商城）、蓝（ERP）、绿（CRM）、红（培训），配色符合业务调性，提升品牌感知。

📱 多端兼容：基于 uni-app 开发，已配置条件编译，一套代码发布到多个小程序平台。

⚡ 开箱即用：包含完整登录表单（手机号/密码、验证码登录入口、第三方登录示意），仅需微调即可上线。

🧩 模块化结构：每个登录页独立，路由首页提供导航，方便组合或单独使用。

🔧 易自定义：所有样式使用 rpx 单位，颜色变量集中在 <style> 顶部，修改方便。

📦 安装 方式一：通过 DCloud 插件市场导入（推荐） 访问插件市场页面 多风格登录插件（实际链接替换）

点击“使用 HBuilder X 导入插件”或“下载插件 ZIP”

导入到你的 uni-app 项目中即可

方式二：手动复制文件 将下方文件结构中的 pages 文件夹及 pages.json 配置合并到你的项目。

📁 文件结构 text ├── pages │ ├── index │ │ └── index.vue // 路由首页（五个入口） │ ├── knowledge │ │ └── login.vue // 知识付费登陆页 │ ├── mall │ │ └── login.vue // 商城系统登陆页 │ ├── erp │ │ └── login.vue // ERP系统登陆页 │ ├── crm │ │ └── login.vue // CRM系统登陆页 │ └── training │ └── login.vue // 培训系统登陆页 ├── pages.json // 路由配置（需合并） └── manifest.json // 小程序 appid 配置（需填写你自己的） 🖼️ 页面预览 页面 主题色 适用场景 风格特点 知识付费登陆 #8B5F9C 紫 知识课程、内容付费 柔和渐变、书卷气息 商城系统登陆 #F9A826 橙 电商购物、促销活动 活力暖色、购物氛围 ERP系统登陆 #2D6A9F 蓝 企业管理、协同办公 商务理性、直角设计 CRM系统登陆 #00A896 翠绿 客户管理、销售系统 清新信任、圆润卡片 培训系统登陆 #E86A6A 珊瑚 在线教育、职场培训 温暖活力、友好圆角 每个页面均包含：品牌标识、账号/密码输入框、登录按钮、辅助链接（验证码登录/注册）、第三方登录图标示意。

🚀 快速使用 配置 pages.json 将以下路由片段合并到你项目的 pages.json 中：

json { "pages": [ {"path": "pages/index/index", "style": {"navigationBarTitleText": "登陆风格导航"}}, {"path": "pages/knowledge/login", "style": {"navigationBarTitleText": "知识付费登陆"}}, {"path": "pages/mall/login", "style": {"navigationBarTitleText": "商城登陆"}}, {"path": "pages/erp/login", "style": {"navigationBarTitleText": "ERP登陆"}}, {"path": "pages/crm/login", "style": {"navigationBarTitleText": "CRM登陆"}}, {"path": "pages/training/login", "style": {"navigationBarTitleText": "培训登陆"}} ] } 填写小程序 appid 在 manifest.json 中对应平台（微信/百度/钉钉/抖音）填写你的 appid。

运行 使用 HBuilder X 运行到小程序模拟器或真机，即可看到效果。

🎨 自定义样式 所有颜色变量均定义在每个页面的 <style> 顶部，例如知识付费页面：

css .knowledge { background: linear-gradient(145deg, #f5edf8, #f9f2fc); } .login-btn { background: #8B5F9C; } 只需修改对应色值即可快速匹配你的品牌色。图标和文字也可按需替换。

📱 兼容性 ✅ 微信小程序

✅ 百度小程序

✅ 钉钉小程序

✅ 抖音小程序（头条小程序）

✅ H5（需自行测试，理论上支持）

所有页面仅使用 uni-app 内置组件及标准 CSS，未调用平台专有 API，确保跨端一致性。

⚠️ 注意事项 本插件仅提供前端登录界面，不包含后端接口逻辑，登录按钮需自行绑定点击事件并调用 uni.login 或 uni.request。

第三方登录图标为纯文字示意，建议替换为实际图片或字体图标。

如不需要路由首页，可直接删除 pages/index 文件夹并从 pages.json 中移除对应路由。

📄 版本历史 v1.0.0 (2025-03-05) 初始发布，包含五大主题登录页及导航首页。