定制工作台“宣传栏”小组件图片上传规范

​

💡

“宣传栏”小组件目前仅适用于 定制工作台 功能。关于定制工作台，可阅读 定制工作台功能介绍；关于如何使用“宣传栏”小组件，可阅读 “宣传栏”小组件使用手册。​

​

工作台宣传栏由管理员负责维护，是查看和了解组织文化的好地方。重大新闻、活动通知等信息都可以在这里呈现，供成员知悉。​

• 如果你定制过工作台，可以通过“宣传栏”小组件上传宣传栏图片。本文档将介绍定制工作台“宣传栏”小组件的图片上传规范及相关示例。​

• 如果你没有定制过工作台，即使用的是 默认工作台，可以在 工作台 > 设置 > 宣传栏管理 上传宣传栏图片，具体规范可见工作台宣传栏规范。​

一、图片规范​

​

尺寸规范​	格式​	大小​	背景色​	按钮样式规范​	圆角​	透明度​
请参照 小组件设置 页中的建议尺寸​ 注：建议尺寸不是固定的，而是会随小组件模块大小、页面边距等参数而变化。​ ​ 250px|700px|reset ​​ ​	JPG/PNG​ ​ ​	小于 3 MB​ （需保持图片高清）​ ​	不限制​ ​	定制工作台和默认工作台规范相同，非必须（见 按钮规范）​ ​	不支持​ ​	不支持​ ​

​

二、建议尺寸数值​

宣传栏图片提供了 填充 和 适应 两种图片展示方式。​

​

展示方式​	说明​	示意图​
填充​	上传的图片会撑满宣传栏，并根据客户端大小进行裁切展示。​ 裁剪方式支持 居左裁剪 和 居中裁剪；选择裁剪方式时需确保核心内容展示在无蒙层区域。​ 注：蒙层区域不会直接全部裁剪，会按照屏幕尺寸自适应裁剪后展示。​ ​	居左裁剪：​ ​ 250px|700px|reset ​​ 居中裁剪：​ ​ 250px|700px|reset ​​
适应​	上传的图片会保持原尺寸比例，并根据客户端窗口大小等比缩放展示。​ 注：上传的图片不会被裁切，图片比例与小组件不一致时周边区域背景模糊处理（模糊色色值来源于图片）。​	​ 250px|700px|reset ​​

​

管理员在上传宣传栏图片时，需根据小组件模块大小、页面边距等参数，选择 尺寸适当、适合相应裁切方式（仅适用“填充”方式） 的图片。​

桌面端​

桌面端上有 5 种布局模块，如下图所示。​

​

250px|700px|reset

​​

以下示例提供了宣传栏图片在各个模块中的建议数值，系根据默认数值算出（页面两侧边距为 40 px，模块横向间距为 24 px，边距与间距均可在编辑器中更改）。上传图片时，请关注界面的“图片尺寸建议”。​

模块 A​

​

模块介绍​ 尺寸建议：3,288 x 720 px，图片大小不超过 3 MB​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​

​

模块 B​

​

模块介绍​ 尺寸建议：3,048 x 720 px，图片大小不超过 3 MB​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​

​

模块 C​

​

模块介绍​ 尺寸建议：2,008 x 720 px，图片大小不超过 3 MB​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​ ​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​

​

模块 D​

​

模块介绍​ 尺寸建议：967 x 720 px，图片大小不超过 3 MB​ ​	​ 250px|700px|reset ​​ ​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​ ​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​

​

模块 E ​

​

模块介绍​ 尺寸建议：1,488 x 720 px，图片大小不超过 3 MB​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​

​

移动端​

移动端只有两种布局：“通栏布局”和“单栏布局”。​

通栏布局​

​

模块介绍​ 尺寸建议：1,272 x 450 px，图片大小不超过 3 MB​ （各小组件在编辑器中的默认高度为 280 px；为便于移动端展示，建议将“宣传栏”小组件的高度改为 190 px。关于具体操作，见 “宣传栏”小组件使用手册）​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​ ​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​	​ 250px|700px|reset ​​ ​

​

单栏布局​

​

模块介绍​ 尺寸建议：1,176 x 450 px，图片大小不超过 3 MB​ （各小组件在编辑器中的默认高度为 280 px；为便于移动端展示，建议将“宣传栏”小组件的高度改为 190 px。关于具体操作，见 “宣传栏”小组件使用手册）​ ​	​ 250px|700px|reset ​​		​
裁剪规则（仅适用“填充”方式展示图片）​ 蒙层区域会根据图片自适应进行裁剪，建议不要将重要内容与文字放在该区域中​ ​	居中裁剪​	居左裁剪​
	​	​ 250px|700px|reset ​​ ​	​ 250px|700px|reset ​​

​