持有物

AssetCard 业务组件

用于背包、奖励、消耗确认和变动记录中的持有物展示,统一呈现名称、数量、稀有度、期限和详情。以下使用本地示例数据演示。

图标区域与角标图纸

图像始终完整放在中央区域,四周留白用于稀有度装饰。透明图片透出底板,非透明图片保留自身背景;两者都不会覆盖外侧装饰。

外层容器 192 × 192 · 圆角 48px图像区域 128 × 128 · contain 完整显示四周各 32px · 容器边长的 1/6内层圆角 16px = 48px − 32px虚线仅为标注 · 实线为稀有度相框
同心圆角:外层半径为边长的 1/4;图像边长为 2/3、四周留白为 1/6,内层半径为外层半径减去留白。相框沿相同圆心向内收进。
80001d星芒碎片
时间:警告色 · 不足 1 天危险色胶囊高 24px · 字号 14px · 左右 8px数量:14px · section 内部区域背景与正文色数量区高 24px · 上延填充底角空隙时间胶囊向外探出 6px · 双层阴影卡片 120 × 180px · 名称间距 12px
实物组件:直接复用 AssetCard;数量在图标下方等宽色块中居中显示,不带乘号,使用整行灰底白字,时间胶囊向外探出、不裁切。虚线仅标出卡片与图标范围。
透明图片
普通
稀有
史诗
传说

普通:四角简洁弧线;稀有:四角卷草与叶饰;史诗:角部增加成对外展叶片;传说:四瓣花结、成对叶饰与双层短卷草。复杂度集中在四角,四边中央保持留白,不进入图像区域。

单个持有物

单个持有物默认使用小号横向布局:图标在左,名称与数量胶囊在右,与下方名称右侧示例使用同一结构。

名称在右侧

namePosition="right" 将名称放在图标右侧;数量使用同高度胶囊放在名称下面,保持14px及原配色;图标下方不再显示数量色块,时间仍在右上角。适用于奖励、消耗确认和变动记录,长名称可换行。

数量含义

持有量保持正文色;获取量使用绿色与加号,消耗量使用红色与减号。数量区和胶囊均跟随此语义,字号保持14px。

持有

1280星芒碎片

获取

+1280星芒碎片

消耗

−1280星芒碎片

网格列表

有数量的卡片固定为 120 × 180px,图标固定为 96px,名称为 14px,数量为 14px/24px,时间胶囊为 14px/24px,宽窄屏只改变每行数量。整张卡片都可点击,悬停底色标明点击范围;外层交互背景使用直角,与折角标记边界重合。数量位于图标下方 24px 高的等宽色块中,不带乘号;色块与图标无间距,背景为 section 内部区域色、文字为正文色。图片保持原来的 64px 大小与居中位置,四位数以内保留原数(例如 8000),更大数量使用 K/M/B 单位并保留 4 位有效数字,悬停图标及打开详情可查看完整数量,数量跟随主题正文色,不描边,名称使用对应稀有度颜色。有到期时间时,右上角胶囊同样向外探出 6px,带时钟图标显示剩余时间,并自动更新;时间胶囊直接复用 warning-color/warning-color-alpha-opaque 警告色及 danger-color/danger-color-alpha-opaque 危险色,明暗模式跟随全局状态色,不单独定义色值;不足 1 天及已过期使用红色。点击物品打开详情;这里的数量与稀有度仅用于样式演示。

透明图片

小号网格列表

通过 gridSize="small" 使用 72px 图标和 96 × 148px 固定卡片;保留数量与时间,数量为 14px/20px,时间为 12px/20px、时钟 12px,右上外探 4px。名称为 14px;透明与非透明图片使用同一布局,点击可查看完整数量和详情。

透明图片

表格列表

物品名称和数量分列,适用于变动记录、管理列表与对照展示。

持有物
数量
128
1280
1280000
1280000000

稀有度与图标尺寸

普通为灰色,稀有为蓝色,史诗为紫色,传说为金色。容器圆角为边长的 25%,图像与相框采用同心圆角;四角装饰通过弧线、卷草、三叶和四瓣花结区分稀有度,四边中央保持简洁。史诗使用小范围紫色柔光,传说使用更大范围金色柔光;发光随图标尺寸同比缩放,不影响布局。

28px
48px
72px
120px