活动通知条 ActivityBanner

嵌入在商品卡片中间区域的整宽营销活动条，支持单行倒计时、活动规则详情跳转，以及第 2 行独立倒计时或浅红底活动细则胶囊（已参与 / 限购 / 剩余库存）。

形态一：带右侧倒计时与跳转箭头

适用于限时秒杀、限量买赠活动，空间不足时右侧倒计时自动换行避免文字重叠。

限量买赠满200送1包虾滑

剩28天09:01:57

<ActivityBanner :activity="activity"/>

<script setup lang="ts">
const activity = {
  tagText: '限量买赠',
  tagType: 'red',
  title: '满200送1包虾滑',
  countdownText: '剩28天09:01:57'
}
</script>

形态二：双行展示 + 细则胶囊（ruleBadge）

当活动包含参与状态、限购数量与剩余名额时，自动在第二行生成浅红底 0.5px 细描边胶囊。

满减优惠跨店每满300减30元

查看规则

已参与活动限10包剩余: 86

<script setup lang="ts">
const activityWithRule = {
  tagText: '满减优惠',
  tagType: 'orange',
  title: '跨店每满300减30元',
  linkText: '查看规则',
  ruleBadge: {
    joined: true,
    limit: 10,
    remain: 86
  }
}
</script>

API 参数说明

参数名	说明	类型	默认值
activity	活动配置对象（含 tagText、title、countdownText、subCountdown、ruleBadge 等）	ActivityInfo	-

事件说明

事件名	说明	回调参数
click-action	点击活动通知栏时触发	(activity: ActivityInfo)