一、简介
工作台设有滚动宣传栏,可以轮播展示多张图片。管理员在后台上传这些图片时,需要满足一定的规范,以使图片能自动适应飞书客户端界面的大小。
二、图片标准
- 上传图片时不能上传圆角的图片,但由于宣传栏组件是圆角,所以最终展示的效果仍然是圆角。
250px|700px|reset
- 建议将重点内容放入图片的核心区域,例如产品 Logo、主标题、副标题、行动点、主图形等。右侧区域建议放置辅助内容,辅助内容可能会在自适应过程中被裁切。
250px|700px|reset
- 如果图片中包含按钮样式,则按钮需要符合下列规范,否则可能在自适应过程中显示错误。
- 按钮文字:大小“30 px”;字重“Medium”;左右 Padding“48 px”。
- 按钮边框:高度“66 px”;形态“全圆角”;颜色“不限制”。
- 按钮应放入核心区域,与文字左对齐,距离左侧边距 60 px。
250px|700px|reset
三、宣传栏自适应规则
- 图片等比拉伸。
- 当宣传栏整体宽度小于 460 px,图片从右往左裁切。
- 当宣传栏整体宽度大于 460 px,图片宽度同容器宽度,图片上下裁切。
例如,当宣传栏的尺寸是 460x150 px 时,桌面端自适应的宽度范围是 308-470 px,移动端自适应的宽度范围是 280-600 px。
自适应过程如下图所示:
250px|700px|reset