<template>
  <div class="pv-ns" :style="{background: props.bgColor || '#fff8ec'}">
    <span class="pv-ns-icon">📢</span>
    <div class="pv-ns-track">
      <span class="pv-ns-text" :style="{color: props.textColor || '#8a6d3b'}">
        {{ (props.items && props.items[0]) || '公告滚动内容，多条公告无缝轮播' }}
      </span>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-ns{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px}
.pv-ns-icon{flex-shrink:0}
.pv-ns-track{flex:1;overflow:hidden;white-space:nowrap}
.pv-ns-text{display:inline-block;animation:pv-ns-scroll 8s linear infinite}
@keyframes pv-ns-scroll{0%{transform:translateX(60%)}100%{transform:translateX(-60%)}}
</style>
