Bbs 卡片

话题列表

帖子标题-01

2025-04-04

199

199

瓜果

蔬菜

帖子标题-02

2025-04-04

299

299

豆菜类

叶菜类

帖子标题-03

2025-04-04

399

399

葱姜蒜类

根茎菜类

话题列表

这是 话题列表 基础例子

<script setup lang="ts">
const data = [
  { title: '帖子标题-01', time: '2025-04-04', view: 199, good: 199, tags: ['瓜果', '蔬菜'] },
  { title: '帖子标题-02', time: '2025-04-04', view: 299, good: 299, tags: ['豆菜类', '叶菜类'] },
  { title: '帖子标题-03', time: '2025-04-04', view: 399, good: 399, tags: ['葱姜蒜类', '根茎菜类'] },
]
</script>

<template>
  <div class="bbs-demo">
    <NpCard>
      <template #title>
        话题列表
      </template>
      <template #extra>
        <NpButton plain type="green" icon="plus">
          发布帖子
        </NpButton>
      </template>
      <NpBbsItem
        v-for="item in data"
        :key="item.title"
        :time="item.time"
        :view="item.view"
        :good="item.good"
        :tags="item.tags"
      >
        <template #avatar>
          <a href=""><img src="https://cytp.cn/avatar.png" alt=""></a>
        </template>
        <template #title>
          <a href="">{{ item.title }}</a>
        </template>
      </NpBbsItem>
    </NpCard>
  </div>
</template>

<style scoped>
.bbs-demo {
  padding: 20px;
}
</style>

帖子标题

张三

2025-04-04

199

99

瓜果

蔬菜

山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发

山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发

山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发

帖子详情

这是 帖子详情 基础例子

<script setup lang="ts">

</script>

<template>
  <div class="bbs-demo">
    <NpBbs
      title="帖子标题"
      time="2025-04-04"
      view="199"
      good="99"
      author="张三"
      :tags="['瓜果', '蔬菜']"
      :border="true"
    >
      <template #body>
        <p>山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发</p>
        <p>山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发</p>
        <p>山东发货，优质无花果苗，带叶辨认，拒绝网络假苗，需要什么品种直接联系，量大从优，品种齐全，苗圃直发</p>
        <img src="https://img.alicdn.com/imgextra/i1/2216071220018/O1CN01kLNlc21C0IAPB7O08_!!2216071220018.jpg" alt="">
      </template>
    </NpBbs>
  </div>
</template>

<style scoped>
.bbs-demo {
  padding: 20px;
}
</style>