<template>
  <div class="pv-notice" :style="{background:props.bgColor||'#FFF3CD',color:props.textColor||'#856404'}">
    <span class="pv-icon">{{ props.icon || '📢' }}</span>
    <div class="pv-scroll">
      <span class="pv-text" :style="{animationDuration: speedMap[props.speed] || '8s'}">{{ props.text || '欢迎光临' }}</span>
    </div>
  </div>
</template>
<script setup>
const props=defineProps({props:{type:Object,default:()=>({})}})
const speedMap={slow:'16s',normal:'8s',fast:'4s'}
</script>
<style scoped>
.pv-notice{display:flex;align-items:center;padding:8px 12px;gap:6px;overflow:hidden;font-size:12px}
.pv-icon{flex-shrink:0;font-size:14px}
.pv-scroll{flex:1;overflow:hidden;white-space:nowrap}
.pv-text{display:inline-block;animation:pvMarquee 8s linear infinite;white-space:nowrap}
@keyframes pvMarquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
</style>
