<template>
  <div class="pv-nav">
    <div class="pv-grid" :style="{ gridTemplateColumns: 'repeat(' + (props.columns || 4) + ',1fr)' }">
      <div v-for="(item, i) in (props.items || [])" :key="i" class="pv-item">
        <div class="pv-icon-wrap">{{ item.icon || '📄' }}</div>
        <div class="pv-text">{{ item.text || '导航' }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-nav{padding:14px 8px;background:#fff}
.pv-grid{display:grid;gap:12px 0}
.pv-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.pv-icon-wrap{font-size:22px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#f5f7fa;border-radius:12px}
.pv-text{font-size:11px;color:#666;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
</style>
