<template>
  <div class="pv-video" :style="{aspectRatio:'16/9'}">
    <div v-if="props.poster" class="pv-vposter" :style="{backgroundImage:'url('+props.poster+')'}">
      <div class="pv-play-btn">▶</div>
    </div>
    <div v-else class="pv-vplaceholder">
      <div class="pv-play-btn">▶</div>
      <div class="pv-vlabel">{{ props.videoUrl ? '视频' : '视频模块' }}</div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-video{position:relative;background:#111;display:flex;align-items:center;justify-content:center;margin:0 8px;border-radius:8px;overflow:hidden}
.pv-vposter{width:100%;height:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.pv-vplaceholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#666}
.pv-play-btn{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;backdrop-filter:blur(4px)}
.pv-vlabel{font-size:12px;color:#999}
</style>
