<template>
  <div class="pv-cdb" :style="props.bgImage ? {backgroundImage:'url('+props.bgImage+')'} : {background: props.bgColor || '#EE6B2F'}">
    <div class="pv-cdb-content">
      <div class="pv-cdb-title">{{ props.title || '限时特惠' }}</div>
      <div class="pv-cdb-subtitle">{{ props.subtitle || '错过再等一年' }}</div>
      <div class="pv-cdb-clock">
        <span class="pv-cdb-box">00</span><b>:</b><span class="pv-cdb-box">12</span><b>:</b><span class="pv-cdb-box">58</span><b>:</b><span class="pv-cdb-box">30</span>
      </div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-cdb{border-radius:8px;margin:8px 12px;padding:20px;color:#fff;background-size:cover;background-position:center}
.pv-cdb-content{text-align:center}
.pv-cdb-title{font-size:18px;font-weight:700}
.pv-cdb-subtitle{font-size:12px;opacity:.9;margin:4px 0 10px}
.pv-cdb-clock{display:flex;align-items:center;justify-content:center;gap:4px;font-size:16px}
.pv-cdb-box{background:rgba(0,0,0,.35);border-radius:6px;padding:2px 6px;font-weight:700}
</style>
