# UniappxLoginDemo

**Repository Path**: sunjulee/uniappx-login-demo

## Basic Information

- **Project Name**: UniappxLoginDemo
- **Description**: 专为 Uni-App X 项目设计的登录页面集合，包含数种不同风格 的登录界面，支持微信小程序、H5、App 等多端平台
- **Primary Language**: HTML/CSS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://ext.dcloud.net.cn/plugin?id=27099
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Uni-App X 登录页面模板

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

---

## 预览

### 首页 - 风格列表

<img src="截图/index.jpg" width="300" />

---

## 多种登录风格

### 1. 简约现代风格
主打微信一键登录，支持手机号+密码/验证码登录

<img src="截图/login1.jpg" width="300" />

---

### 2. 商务深色风格
主打手机密码登录，深色主题，适合商务类应用

<img src="截图/login2.jpg" width="300" />

---

### 3. 活泼渐变风格
主打手机验证码登录，渐变背景，年轻化设计

<img src="截图/login3.jpg" width="300" />

---

### 4. 新拟态风格 (Neumorphism)
软 UI 设计，凸起凹陷效果

<img src="截图/login4.jpg" width="300" />

---

### 5. 卡片切换风格
横向滑动卡片选择登录方式

<img src="截图/login5.jpg" width="300" />

---

### 6. 全屏大图风格
沉浸式全屏背景，视觉冲击力

<img src="截图/login6.jpg" width="300" />

---

### 7. 极简线条风格
极致简约，去除多余元素

<img src="截图/login7.jpg" width="300" />

---

### 8. 毛玻璃效果风格 (Glassmorphism)
半透明磨砂玻璃效果，渐变背景

<img src="截图/login8.jpg" width="300" />

---

### 9. 分屏左右风格
左右分割布局，品牌展示+登录表单

<img src="截图/login9.jpg" width="300" />

---

### 10. 底部卡片风格
Bottom Sheet 设计，从底部滑出的登录卡片

<img src="截图/login10.jpg" width="300" />

---

## 快速开始

### 1. 导入插件

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

### 2. 配置页面路由

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

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

### 3. 跳转到登录页

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

---

## 自定义修改

### 修改配色

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

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

### 添加字段

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

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

---

## 注意事项

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