更新记录

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

新增10种登录方式

平台兼容性

uni-app x(5.0)

其他

Uni-App X 登录页面模板

专为 Uni-App X 项目设计的登录页面集合，包含 10种不同风格 的登录界面，支持微信小程序、H5、App 等多端平台。

预览

首页 - 风格列表

多种登录风格

1. 简约现代风格

主打微信一键登录，支持手机号+密码/验证码登录

2. 商务深色风格

主打手机密码登录，深色主题，适合商务类应用

3. 活泼渐变风格

主打手机验证码登录，渐变背景，年轻化设计

4. 新拟态风格 (Neumorphism)

软 UI 设计，凸起凹陷效果

5. 卡片切换风格

横向滑动卡片选择登录方式

6. 全屏大图风格

沉浸式全屏背景，视觉冲击力

7. 极简线条风格

极致简约，去除多余元素

8. 毛玻璃效果风格 (Glassmorphism)

半透明磨砂玻璃效果，渐变背景

9. 分屏左右风格

左右分割布局，品牌展示+登录表单

10. 底部卡片风格

Bottom Sheet 设计，从底部滑出的登录卡片

快速开始

1. 导入插件

将插件目录复制到您的 Uni-App X 项目中，或将 pages 文件夹内容合并到您的项目对应目录。

2. 配置页面路由

在 pages.json 中添加相应页面配置：

{
  "pages": [
    {
      "path": "pages/login1/login1",
      "style": {
        "navigationBarTitleText": "登录"
      }
    }
  ]
}

3. 跳转到登录页

// 跳转到指定风格登录页
uni.navigateTo({
  url: '/pages/login1/login1'
});

自定义修改

修改配色

每个登录页面的样式都在 <style> 标签中，可以直接修改颜色值：

/* 例如修改主色调 */
.btn-primary {
  background-color: #ff6b6b;  /* 修改为您想要的颜色 */
}

添加字段

如需增加新的输入项，直接在模板中添加：

<view class="input-wrap">
  <text class="input-icon">📧</text>
  <input 
    class="input" 
    placeholder="请输入邮箱"
    v-model="email"
  />
</view>

注意事项

1. 平台兼容性：部分样式在小程序和 H5 中表现可能略有差异，建议在各端测试
2. 图片资源：部分登录页使用了占位图片，请替换为您自己的图片
3. API 对接：示例中的登录逻辑仅为演示，需要接入您自己的后端 API