Skip to content

标签 Tag ​

严格按安井 S2B 视觉规范划分为商品属性标签(goods)、**规格价格标签(price)与营销活动标签(promo)**三大业务体系,分别匹配不同的高度、字号与描边规则。

1. 商品属性标签(category="goods") ​

规范高度 15px,圆角 2px,字号 10px:

  • 常规属性采用 0.5px 细描边浅底;
  • 前置状态角标(presale 预售、mustbuy 必买)采用无边框线性渐变实底。
预售必买安井9块9狂欢购限时促销冷链直发不计积分
vue
<Tag category="goods" type="presale">预售</Tag>
<Tag category="goods" type="mustbuy">必买</Tag>
<Tag category="goods" type="green">安井</Tag>
<Tag category="goods" type="orange">9块9狂欢购</Tag>
<Tag category="goods" type="red">限时促销</Tag>
<Tag category="goods" type="blue">冷链直发</Tag>
<Tag category="goods" type="gray">不计积分</Tag>

2. 规格价格标签(category="price") ​

规范高度 18px,内边距 2px 4px,圆角 3px,字号 11px,无描边浅底色,用于紧跟在规格单价右侧标识价格属性。

一客一价合约价特惠价限时折扣
vue
<Tag category="price" type="green">一客一价</Tag>
<Tag category="price" type="blue">合约价</Tag>
<Tag category="price" type="red">特惠价</Tag>
<Tag category="price" type="orange">限时折扣</Tag>

3. 营销活动标签(category="promo") ​

规范高度 14px,内边距 2px 3px,圆角 2px,字号 10px,纯实色底白字无描边,用于活动通知条头部。

限时秒杀限量买赠满减优惠
vue
<Tag category="promo" type="red">限时秒杀</Tag>
<Tag category="promo" type="orange">满减优惠</Tag>

API 参数说明 ​

参数名说明类型默认值
category标签业务大类:goods(商品属性)/ price(价格属性)/ promo(活动营销)string'goods'
type配色与视觉变体:green / red / orange / gray / blue / presale / mustbuystring'green'
text标签文字内容(也可直接通过默认插槽传入)string''