designer-hub/packages/merchant/src/pages/home/components/article.vue

<script setup lang="ts">
import dayjs from 'dayjs'

defineProps({
  title: {
    type: String,
    default: '',
  },
  author: {
    type: Object,
    default: () => ({ name: '匿名' }),
  },
  createdAt: {
    type: Date,
    default: () => new Date(),
  },
  viewNum: {
    type: Number,
    default: 0,
  },
  content: {
    type: String,
    default: '<div>1111</div>',
  },
})
</script>
<template>
  <div class="px-3.5 bg-white flex-grow">
    <div class="text-black text-xl font-normal font-['PingFang SC'] leading-loose">
      {{ title }}
    </div>
    <div class="flex items-center my-5">
      <div class="w-7 h-7 overflow-hidden roudnded-full">
        <slot name="avatar"></slot>
      </div>
      <div class="flex-1 ml-1">
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          {{ author.name }}
        </div>
        <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
          编辑于
          {{ dayjs(createdAt).format('YYYY/MM/DD') }}
        </div>
      </div>
      <div class="flex items-center">
        <slot name="viewLeft"></slot>
        <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
          {{ viewNum }}
        </div>
      </div>
    </div>
    <div v-html="content"></div>
  </div>
</template>