Empty 缺省图

v1.4.0 · 画板 414px · 页面级 120×120px / 卡片级 40×40px · 标题14px · 按钮调用 BUTTON-SPEC 大/中按钮 · 调用 Web 版图标库

页面级缺省图 · 120×120px

暂无内容（Primary 大按钮）
暂无内容 暂无内容
无搜索结果（无按钮）
无搜索结果 无搜索结果
无消息（无按钮）
无消息 暂无消息
无审批（无按钮）
无审批 暂无审批
无评论（Outline 中按钮）
无评论 暂无评论
无图片（Outline 中按钮）
无图片 暂无图片

卡片级缺省图 · 40×40px

暂无内容
暂无内容 暂无内容
无搜索结果
无搜索结果 无搜索结果
无消息
无消息 暂无消息
无审批
无审批 暂无审批
无评论
无评论 暂无评论
无图片
无图片 暂无图片

操作按钮 · 调用 BUTTON-SPEC

场景按钮类型规格
暂无内容（+ 新增）Primary 大按钮44px高 / 16px字号 / 渐变DB60→DB40背景 / 白色文字 / 全圆角999px
无评论（发表评论）Secondary Outline 中按钮36px高 / 16px字号 / 透明背景 / G60文字 / G10描边 / 全圆角999px
无图片（上传图片）Secondary Outline 中按钮36px高 / 16px字号 / 透明背景 / G60文字 / G10描边 / 全圆角999px
无搜索结果/无消息/无审批无按钮—

详细规范

属性页面级卡片级
画板宽度414px414px（内嵌卡片）
图标尺寸120×120px40×40px
图标分辨率@2x 高清@1x 标准
标题字号14px / 400 / G60 #22335514px / 400 / G50 #6B7A99
描述文字可选，14px / 400 / G50无
主操作按钮Primary 大按钮 44px (BUTTON-SPEC)无
次操作按钮Secondary Outline 中按钮 36px (BUTTON-SPEC)无
容器内边距48px 024px 0
元素间距12px8px
按钮间距标题下方 8px—
容器背景G0 #FFFFFFG0 #FFFFFF

CSS 变量

变量默认值来源
--empty-page-icon-size120pxEmpty 组件
--empty-card-icon-size40pxEmpty 组件
--empty-page-title-size14pxEmpty 组件
--empty-page-desc-size14pxEmpty 组件
--empty-card-title-size14pxEmpty 组件
--empty-title-color#223355 (G60)Empty 组件
--empty-desc-color#6B7A99 (G50)Empty 组件
--empty-page-gap12pxEmpty 组件
--empty-card-gap8pxEmpty 组件
--empty-page-padding48px 0Empty 组件
--empty-card-padding24px 0Empty 组件
--btn-height-lg44pxBUTTON-SPEC
--btn-height-md36pxBUTTON-SPEC
--btn-font-size16pxBUTTON-SPEC
--btn-radius999pxBUTTON-SPEC

类名说明

类名说明来源
.empty-page页面级缺省图容器，120px图标+标题+描述+按钮Empty
.empty-card卡片级缺省图容器，40px图标+标题Empty
.empty-icon-page页面级缺省图图标，120×120pxEmpty
.empty-icon-card卡片级缺省图图标，40×40pxEmpty
.empty-title页面级标题，14px/400/G60Empty
.empty-desc页面级描述文字，14px/400/G50Empty
.empty-card-title卡片级标题，14px/400/G50Empty
.btn-primary-lgPrimary大按钮，44px/16px/渐变DB60→DB40/白色文字BUTTON-SPEC
.btn-outline-mdSecondary Outline中按钮，36px/16px/透明/G60文字/G10描边BUTTON-SPEC
返回组件首页