介绍
持有物
AssetCard 业务组件
用于背包、奖励、消耗确认和变动记录中的持有物展示,统一呈现名称、数量、稀有度、期限和详情。以下使用本地示例数据演示。
图标区域与角标图纸
图像始终完整放在中央区域,四周留白用于稀有度装饰。透明图片透出底板,非透明图片保留自身背景;两者都不会覆盖外侧装饰。
星芒碎片
透明图片
普通
稀有
史诗
传说
普通:四角简洁弧线;稀有:四角卷草与叶饰;史诗:角部增加成对外展叶片;传说:四瓣花结、成对叶饰与双层短卷草。复杂度集中在四角,四边中央保持留白,不进入图像区域。
单个持有物
单个持有物默认使用小号横向布局:图标在左,名称与数量胶囊在右,与下方名称右侧示例使用同一结构。
名称在右侧
namePosition="right" 将名称放在图标右侧;数量使用同高度胶囊放在名称下面,保持14px及原配色;图标下方不再显示数量色块,时间仍在右上角。适用于奖励、消耗确认和变动记录,长名称可换行。
数量含义
持有量保持正文色;获取量使用绿色与加号,消耗量使用红色与减号。数量区和胶囊均跟随此语义,字号保持14px。
持有
星芒碎片
获取
星芒碎片
消耗
星芒碎片
网格列表
有数量的卡片固定为 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;透明与非透明图片使用同一布局,点击可查看完整数量和详情。
透明图片
表格列表
物品名称和数量分列,适用于变动记录、管理列表与对照展示。
稀有度与图标尺寸
普通为灰色,稀有为蓝色,史诗为紫色,传说为金色。容器圆角为边长的 25%,图像与相框采用同心圆角;四角装饰通过弧线、卷草、三叶和四瓣花结区分稀有度,四边中央保持简洁。史诗使用小范围紫色柔光,传说使用更大范围金色柔光;发光随图标尺寸同比缩放,不影响布局。
普通
稀有
史诗
传说
28px
48px
72px
120px
