# 登录框

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183669321541820429`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/基础类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 登录框

## 一、登录框组件概述

登录框组件内可对组件进行样式设置及其功能设置，整体可拆分为登录框、企业logo、选择语言、登录信息区、登录按钮、扫码按钮、隐私协议、底部信息文字、其他

### 1、背景框

1、

可对背景图进行开关显隐控制

2、

设置背景颜色或者背景图片（二者均设置，显示背景图片）

3、

边框线样式，背景宽度，圆角大小，背景不透明度，整个登录框的水平垂直位移

4、

背景框内的内部容器开关（开启内部容器后，可插入组件显示在整个登录框背景内）

5、

组件上下左右内边距

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544324311236615&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、企业logo

6、

可对企业logo显隐控制

7、

可切换企业logo类型，类型选择为文字是，文字内容默认为‘用户登录’，可自定义文字内容

8、

设置文字的水平、垂直位移，及其文字字体类型和样式

9、

类型切换为图片时，图片来源可由本地或者素材库，可设置图片宽高，默认开启宽高限制（开启宽高限制后，图片宽度不会超过登录框容器），设置图片旋转角度，不透明度

10、

可切换图片超链接类型，选择地址时，可设置链接地址内容，超链接打开方式；选择邮件时，可自定义邮件地址，及其打开方式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544753970380840&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、选择语言

11、

可对选择语言图标显隐控制

12、

切换语言图标类型，选择为图标，可设置水平、垂直位移方向，及其图标颜色

13、

切换为文字类型时，可设置水平垂直位移，字体和文字样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544942800044055&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 4、登录信息区

14、

背景：可设置登录信息区背景色，线段颜色、获焦线段颜色，线段可见性，背景圆角，登录信息区宽度，手机号密码验证码之间间距调整，账号、密码、验证码输入框背景色

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544294360645692&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

15、

文字：整体登录信息区文字字体样式，获焦动画文字及其动画开关【开启区位码后无效】，及其样式设置，账号密码输入提示语自定义；自定义输入框内边距

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544762509156482&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

16、

图标：可设置登录信息区左侧图标显隐，自定义账号、密码、验证码图标样式及其图标颜色

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544530538979516&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

17、

区位码：开启区位码后，可设置TAB选中和未选中状态下的样式，字体，及其区位码数字的样式，区位码菜单水平垂直位移

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544581995528246&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

18、

显示位置：整个登录信息区水平垂直位移，或单独对账号、密码、验证码水平垂直位移

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544878383923398&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 5、登录按钮

19、

可切换登录按钮类型：背景色、图片

20、

登录按钮为背景色时，可自定义登录按钮水平、垂直位移，按钮宽高，圆角，不透明度，按钮背景色，边框线样式，‘登录’字体样式

21、

登录按钮为图片时，图片来源可为本地上传或者素材库，可自定义图片按钮的水平、垂直方向位移，图片宽高比，图片按钮圆角，不透明度，是否显示登录文字，‘登录’字体样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544401654202494&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 6、扫码按钮

22、

可开关是否允许扫码【若后台登录页设置开启只允许扫码，此处默认开启不允许关闭】

23、

扫码页背景框：可设置背景图片或者背景色，同属性-背景框设置，自定义边框线、背景圆角，背景不透明度

24、

扫码页选择语言：开关语言选择是否显示，同属性-选择语言

25、

扫码角标：可切换图表类型【二维码、扫码】，点击前移入标题、点击后移入标题，三角背景颜色，角标图标颜色，水平垂直方向位移

26、

扫码页二维码：二维码宽高，水平垂直位移，二维码颜色

27、

扫码页文字内容：富文本框内自定义内容，也可自定义国际化内容，文字内容水平垂直位移

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544629340831991&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

### 7、隐私协议

28、

默认隐私协议：仅当启用数据安全中的隐私保护时显示该配置，此时用户登录时若存在对应国家的隐私协议，则展示对应隐私协议；若不存在对应国家的隐私协议时，则按下方自定义隐私协议展示

29、

启用是否显示隐私协议

30、

可添加多个隐私协议，自定义协议名称和链接地址，自定义固定内容名称，设置是否默认勾选协议，多个隐私协议的显示形式，和协议间距，协议水平、垂直位移，协议字体样式，及其固定内容和协议名称的样式，及其勾选框颜色

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544376013258800&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 8、底部信息文字

31、

勾选是否显示底部信息文字

32、

富文本框内自定义底部信息文字内容及样式

33、

设置底部信息文字水平垂直位移

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544655183101983&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 9、其他

34、

记住账号密码：开关是否显示记住账号密码，切换显示类型【下拉框、勾选框】，设置显示项【记住账号、记住账号密码、自动登录、不记住账号】，显示位置【左侧、右侧】，水平垂直方向，字体文字样式设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544985814728765&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

35、

注册、忘记密码：开关是否显示，均开启时，可设置注册与忘记密码的水平垂直布局，字体样式，悬浮文字样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544564955234342&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

36、

第三方登录：水平垂直位移，字体、线段样式

37、

切换服务器：水平垂直位移，字体、线段样式，网页端不生效，仅客户端生效

38、

登录内页图标：配置登录内页，如忘记密码/注册等页面所展示图标

## 二、详细概述及使用说明

### 1、PC端

#### 1.1PC端—高级版

1.2.1属性—背景框

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544474738786479&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

**背景框** ：开关背景框，设置边框线，组件宽度，背景圆角，背景不透明度，水平、垂直位移，内部容器开关

**内边距** ：上下左右边距设置

1.2.2属性—企业logo

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544624942170119&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

**类型切换** ：图片或者文字

 

**企业logo-图片** ：可从本地或者素材库上传，默认开启图片宽高限制，设置图片旋转角度，透明度，logo点击事件，logo水平、垂直位移

**企业logo-文字** ：自定义文字内容，水平垂直位移，字体样式

1.2.3 属性—选择语言

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544333052166180&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**类型切换** ：图标或者文字

**语言图标** ：水平垂直位移，图标颜色

**语言文字** ：自定义文字内容，水平垂直位移，字体样式

1.2.4 属性—登录信息区

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544801175175476&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1、背景

可设置整体背景色，线段颜色，获焦线段颜色，线段可见性【底部显示、四周均显示】，背景圆角，整体宽度，间距【默认30px】，账号/密码/验证码背景色

2、文字

设置登录信息框内提示文字，样式，内容及其国际化，输入框内边距

**获焦显示文字与文字动画：** 1.后台设置页面，开启区位码后无效 2.背景-线段可见性-由仅底部显示切换到四边皆显示，获焦动画开关会关闭，需要重启开启

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544702335467596&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、图标

默认关闭图标，可自定义账号、密码、验证码图标样式，自定义图标颜色【图标颜色包含密码显隐图标和删除图标】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544676439834775&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、区位码

区位码配置见2.1.6其他

 此处可设置tab页选中时/未选中样式，区位码数字样式及其菜单水平、垂直位移

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544371530711119&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5、显示位置

设置除区位码菜单的其余部分位移

1.2.5属性—登录按钮

按钮类型分为背景色与图片

 **背景色** ：默认取主题色，可自定义位移，宽高，圆角，透明度，颜色，边框线 ，‘登录’字体的样式

 

**图片** ：来源可由本地图片或素材库，可自定义图片位移，宽高比例，圆角，不透明度，是否显示‘登录’，‘登录’字体的样式

1.2.6属性—扫码按钮

**开关联动后台页面设置-扫码登录设置，详情见2.1.4**

1、扫码页背景

背景可设置背景色，或者从素材库选择图片

2、 扫码页选择语言

同属性-选择语言1.2.3配置

3、扫码角标

图表类型可切换二维码、扫码

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544740877861075&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

**二维码** ：设置点击前后移入标题提示，三角形背景色【默认取主题色】，角标颜色，位移方向

**扫码** ：设置点击前后移入标题提示，可隐藏三角背景，设置三角形背景色【默认取主题色】，角标颜色，位移方向

4 、扫码页二维码

设置二维码宽高，位移，二维码颜色

 **注意：** 二维码有效时间、扫码间隔频率，详情见2.1.4

5 、扫码页文字内容

富文本框内自定义扫码内容，颜色，样式，国际化等

 注意：修改扫码内容后，需先保存富文本框，再保存页面才能生效

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545007199387674&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1.2.7属性—隐私协议

**默认隐私协议：** 仅当启用数据安全中的隐私保护时显示该配置，此时用户登录时若存在对应国家的隐私协议，则展示对应隐私协议；若不存在对应国家的隐私协议时，则按自定义隐私协议展示

**注意：** 若A账号已经配置默认隐私协议，但未开启自定义隐私协议，登录时，输入A账号，显示默认隐私协议，输入其他账号则无隐私协议

 

**自定义隐私协议** ：

39、

可设置单个或者多个，是否默认勾选协议

40、

多个隐私协议可切换显示形式：分开展示；协议距离【单个协议不生效】

41、

自定义固定名称内容，固定内容及其协议名称样式，位移，勾选框样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544363119968284&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 1.2.8属性—底部信息文字

富文本框自定义内容，位移

 

1.2.9属性—其他

1、记住账号密码

显示类型分为下拉框与勾选框，类型之间互相切换，联动显示项配置，

注意：后台若已开启验证码，此处不允许开启自动登录

 实际运行效果：同一个页面下首次打开对应登录页，显示项为对应配置项，若登录时，切

换显示项，浏览器保存切换后显示项，同一个页面退出当前用户登录，显示为上次切换后的效果

**  例如：首次加载为不记住账号密码，切换到记住账号密码，登录后，退出登录，显示项为记住账号密码**

** **![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544547770007563&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544384499499029&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

2 、注册、忘记密码

忘记密码开关联动后台设置页面-忘记密码，详情见2.1.2

注册、密码均开启，联动显示两者布局【水平、垂直布局】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544874137190493&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3 、第三方登录

4 、切换服务器

设计器内，及其预览页面默认展示，实际运行时，网页端不生效，仅对客户端生效

 

5 、登录页内图标

配置登录内页，如忘记密码/注册等页面所展示图标

6 、切短信/密码验证

配置水平、垂直位移，字体文字样式

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544758136487938&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

7、 切为手机/其他

当后台设置中心-登录页设置—启用区位码—多方式展示形式为底部切换形式，可配置水平垂直位移，字体文字样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544960122519648&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、移动端

#### 2.1移动端-简易版

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544431766044703&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 可配置logo图片，logo链接，logo显示文字，底部信息文字自定义，注册、切换服务器开关，隐私协议

#### 2.2移动端—高级版

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544444545155329&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

移动端高级版登录页，无扫码页面，大部分配置同PC端高级版，配置差异如下所示：

 

背景框：增加高度，可切换自定义高度

企业logo：显示内容与logo图片可同时存在并自定义内容

其他：无记住账号密码配置

## 三、上下游关联功能点

页面布局基础点：首先了解容器样式：布局、间距、大小，定位

### 1、布局、间距

block (块级元素)：适用于希望元素独占一行

特点：独占一行，元素会占据其父元素的整个宽度，前后都会换行，例如，登录框和幻灯片组件各占一行，前后自动换行，此时设置，间距，上、左、右padding均生效

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544461797261342&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544595064979459&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 Inline-Block（行内块元素）:适用于需要水平排列且控制尺寸的元素

 特点：不换行，与其他行内元素共享一行；可以设置宽高 ，可以设置水平和垂直方向的内边距和外边距

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544358805192781&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

flex (弹性盒布局)：适用于需要元素的垂直居中、水平居中等对齐方式，使页面在不同屏幕尺寸下都能正常显示

 特点：控制子元素在容器中的排列方式、对齐方式和空间分配。

 方向：分为Horizontal【水平】、Vertical【垂直】

 垂直对齐方式：star【水平方向为顶部，垂直布局为左侧】、center【居中】、end【水平方向为底部、垂直布局为右侧】、Stretch【拉伸】

 水平对齐：star、center、end、Between、Around

换行：NoWrap、Wrap

 两个元素水平方向排列，整体水平垂直居中效果如图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544801086160979&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、大小

容器类组件——高度自动填充：根据页面剩余高度自动撑开；

 其余组件——可自定义组件高宽，最小高宽，最大高宽

 溢出处理：

visible (默认值): 内容不会被裁剪，会溢出元素框外显示。例如：容器设置高宽200px,图片宽度大于容器宽度，依旧溢出高宽，正常显示

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544680776745095&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544569062391916&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

hidden: 内容会被裁剪，超出元素框的部分不可见，适用于图片靠边显示时只需要展示一部分，但完整图片尺寸过大，显示会导致页面出现滚动条。

 scroll：功能 : 当内容超出容器的宽度或高度时，强制显示滚动条（无论内容是否真的溢出）。适用场景 :1、需要确保用户始终可以通过滚动查看隐藏内容的情况。2、设计上需要明确提示用户存在滚动区域的情况。

 auto： 当内容超出容器的宽度或高度时，自动显示滚动条；如果内容没有超出，则不显示滚动条。适用场景 :1、内容可能动态变化（例如用户输入、加载数据等），需要根据实际情况决定是否显示滚动条。2、希望保持界面整洁，避免不必要的滚动条。

## 四、搭建实例及其注意事项

### 1、登录框水平居中

#### 1.1春节主题

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544500384858205&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

搭建思路：

观察页面元素：整体分为背景+登录框，登录框页面水平垂直居中，

背景：可拆分为底部背景+顶部灯笼+左右文字+登录框上部文字图片

登录框：企业logo图片+登录按钮图片

 背景：

简单操作：将背景图所包含元素切到一张图片上，直接替换页面-样式-背景【此操作弊端：实际运行后，会随着屏幕比例不一致，图片显示畸变，与预想效果不一致】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544715094540295&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

建议操作：所有图片进行单独切割，图片组件内上传对应图片，设置好比例，再放置在容器内，对容器内的元素进行单独定位，可保证在不同比例显示屏上，元素与元素之间的位置固定，图片不会出现畸变效果

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544689455693827&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

登录框：

企业logot切换图片

登录按钮切换为图片

其余样式均可在登录框组件内设置样式

搭建步骤：

背景

1、页面样式内上传背景或者视频

2、图片定位

2.1页面左右侧固定图片：使用定位中absolute——letf/right，再调整图片margin，调整到适应位置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545028858773546&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.2和登录框组件紧贴类型图片

和登录框组件放置同一个容器内，可实现同步缩放，最外层容器样式内，显示布局选择flex布局，方向选择Vertical，水平、垂直均设置center居中对齐

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544844049350686&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.3登录框组件，属性设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545050339901505&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、整体左右布局

#### 2.1专项主题

搭建思路：

42、

登录框和页面图片呈现左右布局；实现方法：1、可拖入一个多列容器，左侧放置图片元素，右侧放入登录框 2、直接对登录框组件和图片组件进行定位

43、

对登录框组件进行样式设置

 

搭建步骤：

**方法一—多列容器** ：

44、

拖入多列容器， 左侧插入图片组件和文本组件，右侧插入登录框组件【多列容器默认自适应组件高度，为了整体效果更好，可对多列容器进行宽度设置：100vw，高度设置：100vh】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544852737024008&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

45、

图片组件组件设置好目标宽高，文本组件设置好文本内容和样式，多列容器各个列内，对内部元素进行flex布局，并且水平垂直居中，

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544350220386342&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、登录框组件样式设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544552080924718&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544771158638636&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

方法二——对各部分分别定位：

1、对于背景始终居右图片设置：Absolute-right

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544822457073747&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、定位整体靠右，但有间距时，定位设置Absolute-自定义margin距离

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544624935985234&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、登录框整体靠左显示，定位设置relative，左侧margin设置为0%，间距内设置margin 10%

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544650767433788&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、左上角图片logo：定位设置Absulute——top left，自定义margin调整间距

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544285684727858&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

46、

设置登录框组件样

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544723765100551&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.2能人家登录示例

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544981619597360&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 搭建思路：

47、

登录框和图片呈现左右布局，左侧图片撑满，右侧登录框只允许扫码登录，顶部有logo图片

48、

左右布局可优先拖入多列容器，左侧防止图片，右侧放置登录框和图片组件

 搭建步骤

49、

拖入多列容器，多列容器，容器样式内，设置宽度：100vw，高度：100vh

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544418753216788&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、左侧列容器内拖入图片组件，图片组件设置图片宽高，使其充满左侧容器

3、右侧列容器拖入容器，容器内拖入图片组件、登录框；图片组件设置好目标logo图片高宽，登录框组件调整样式；为了登录框和组件在列容器内整体水平和垂直居中，对列容器设置flex布局，水平垂直设置center

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544891344322683&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、登录框只允许扫码登录，需要在后台设置页面—扫码登录设置—只允许扫码登录

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544612185301036&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 5、底部信息文字，登录框内开启底部信息文字，可自定义目标内容;可拖入文本组件，自定义文本内容，给组件fixed定位—bottom，设置组件背景及其组件阴影

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544363127529635&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 预览效果：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545058762063907&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、整体上下布局

#### 3.1 361°登录页示例

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544397436936277&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 搭建思路：整体页面呈现上下布局，上部为整张图片，下部为文本和登录框；可拖入多列容器组件，设置为纵向排列，上部拖入图片组件，设置组件高宽，下部拖入文本组件和登录框组件

 搭建步骤：

50、

拖入多列容器，使用纵向排列

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545024530251846&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

51、

上层列拖入图片组件，设置图片组件宽高，且设置图片组件顶部margin

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544289934721250&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 3、下层列内拖入文本组件和登录框组件，列的样式内，列样式内使用Horizontal，垂直方向对齐为top，水平对齐为between，达到容器内的内部组件横向排列，且置顶显示，水平显示在容器内两端

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544371566469146&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544526154662040&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

4、登录框组件关闭所有不要样式，清空背景颜色，调整输入框、登录按钮颜色即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544526154662040&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 五、功能更新说明

10.0.25.0101  登录前页面支持网格布局

10.0.25.0301  登录框组件移动端拆分及新增样式配置

10.0.25.0401  登录框增加短信验证功能
