<template>
  <div class="pv-seckill" :style="{background:props.bgColor||'#FFF0F0',color:props.textColor||'#E74C3C'}">
    <div class="pv-left">
      <span class="pv-icon">⚡</span>
      <span class="pv-title">{{ props.title||'限时秒杀' }}</span>
    </div>
    <div class="pv-timer">
      <span class="pv-num">02</span><span class="pv-sep">:</span>
      <span class="pv-num">35</span><span class="pv-sep">:</span>
      <span class="pv-num">48</span>
    </div>
    <span class="pv-arrow">›</span>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-seckill{display:flex;align-items:center;padding:12px 14px;gap:10px;margin:0}
.pv-left{display:flex;align-items:center;gap:6px}
.pv-icon{font-size:20px}
.pv-title{font-size:14px;font-weight:600}
.pv-timer{display:flex;align-items:center;gap:2px;margin-left:auto}
.pv-num{background:currentColor;color:#fff;font-size:11px;font-weight:700;padding:2px 4px;border-radius:3px;min-width:20px;text-align:center}
.pv-sep{font-weight:700;font-size:11px}
.pv-arrow{font-size:18px;color:#ccc}
</style>
