<template>
  <div class="pv-article" :style="{padding:'8px 12px',background:'#fff'}">
    <div v-if="props.title" class="pv-a-title">{{ props.title }}</div>
    <div v-for="i in (props.count||3)" :key="i" class="pv-a-item">
      <div class="pv-a-info">
        <div class="pv-a-name">文章标题 {{ i }}</div>
        <div v-if="props.showDesc" class="pv-a-desc">文章摘要内容展示...</div>
        <div v-if="props.showDate" class="pv-a-date">2026-06-{{ String(i).padStart(2,'0') }}</div>
      </div>
      <div class="pv-a-thumb">📰</div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-a-title{font-size:15px;font-weight:700;color:#333;margin-bottom:10px}
.pv-a-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5}
.pv-a-info{flex:1}
.pv-a-name{font-size:14px;color:#333;font-weight:500}
.pv-a-desc{font-size:12px;color:#999;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-a-date{font-size:11px;color:#bbb;margin-top:4px}
.pv-a-thumb{font-size:24px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px;flex-shrink:0}
</style>
