自定义登录页 BannerCopy Anchor Link

在宽屏设备上，YeeAuth 登录页分为左右两块：左侧是一整张 Banner 图，右侧是登录卡片。应用未上传 Banner 时，左侧显示平台默认图。你可以为自己的应用制作一张 Banner，用来介绍产品或展示品牌。

Banner 是一张完整的图片，平台不会在图上叠加任何文字。标题、卖点和插画都需要直接画进图里。

显示规则Copy Anchor Link

制图前先了解 Banner 在页面上是怎么显示的，后面的规范都由这些规则推导而来：

• 只在宽屏显示：浏览器宽度不小于 1024px 时才显示。手机和窄窗口只显示登录卡片，Banner 整个隐藏，所以不要把登录必需的信息放在图里。
• 显示宽度固定为 500px：图片按宽度等比缩放到 500px，高度随比例变化。
• 矮屏会缩小：图片高度最多为「浏览器窗口高度减 160px」。笔记本等矮屏幕上，图片会再等比缩小，并靠左、垂直居中对齐。
• 平台不加装饰：图片没有边框、圆角和阴影，直接放在页面的浅灰色渐变背景上。
• Logo 和应用名已由平台显示：页面左上角会显示应用 Logo 和名称，登录卡片标题是「欢迎来到 + 应用名」。图里不必再放 Logo 和应用名，放了反而重复。
• 加载失败自动回退：图片地址无法访问时，页面自动改为显示平台默认图。

尺寸与格式Copy Anchor Link

不是 3:4 的图片也能显示，但页面会按比例缩放：图片偏宽时整体会被压小，偏高时在矮屏上缩小得更厉害。

排版Copy Anchor Link

推荐沿用平台默认图的上下结构：上方是文字，下方是插画。

• 上半部分（约占 55%）：一行英文小标题（可选）、两行主标题、一行副标题，以及不超过 3 条卖点。每条卖点由图标、短标题和一句说明组成。
• 下半部分（约占 45%）：一张主体插画，例如产品界面、场景插图或品牌视觉。
• 内容靠左对齐：图片在页面上靠左摆放，文字左边缘贴近画布左边缘（留 4～10px 即可），这样和页面左上角的 Logo 对齐。
• 四周不要大面积留白：透明区域也占显示面积，留白越多，有效内容越小。

字号Copy Anchor Link

图片会被缩小显示。以 1620px 宽的画布为例，显示时只有原尺寸的约 31%，所以画布上的字要比平常设计稿大得多。下表列出画布上的字号以及在屏幕上的实际大小：

卖点说明不要小于 42px，否则在屏幕上会小于 13px，难以阅读。矮屏会把图片继续缩小，所以文字宁大勿小、宁少勿多。

配色Copy Anchor Link

• 页面背景是很浅的灰白渐变（约 #F6F8FA），Banner 应为浅色风格，文字用深色。
• 推荐文字色：主标题 #0C0D0E，卖点标题 #1D2129，副标题 #4E5969，说明文字 #86909C。
• 强调色可以用自己的品牌色。主标题中可以用品牌色或渐变色突出 2～4 个字。
• 不要使用深色或高饱和度的满版背景，它会和浅色页面、白色登录卡片形成强烈割裂。

文案Copy Anchor Link

• 短：主标题两行，每行不超过 6 个字；卖点最多 3 条，说明每条一句话、不超过 20 个字。
• 具体：写用户能感知的事，例如「审批随时随地处理」，少用「赋能」「助力」「一站式」这类空话。
• 真实：只写应用确实具备的能力。

上传与设置跳转链接Copy Anchor Link

1. 在 YeeAuth 控制台进入应用详情，打开 登录控制 标签页。
2. 在「登录页 Banner」区域点击上传框，选择图片。上传成功后立即生效。
3. （可选）在「点击跳转链接」中填入地址并保存。设置后，用户点击 Banner 会在新标签页打开该地址。链接必须以 http:// 或 https:// 开头。
4. 想恢复平台默认图时，点击 恢复默认图。

跳转链接只对自定义 Banner 生效。使用平台默认图时，设置的链接不会显示。

参考模板Copy Anchor Link

平台默认图就是按本规范制作的，可以下载后在设计工具中打开，作为排版和字号的参考：default-banner.svg（画布 810 × 1080，字号按 1620 宽画布的一半标注）。

上传前自查Copy Anchor Link

• 比例为 3:4，宽度不小于 1620px
• 背景透明，没有整块底色、边框和阴影
• 图里没有重复放应用 Logo 和应用名
• 卖点说明在 1620 宽画布上不小于 42px
• 文字靠左对齐，四周没有大面积留白
• 文件不超过 1MB
• 把图片缩放到 500px 宽查看，所有文字都能看清