帮我用uni-app写一个评论卡

好的，下面是一个简单的评论卡的示例代码：

<template>
  <div class="comment-card">
    <div class="avatar">
      <img :src="avatarUrl" alt="avatar">
    </div>
    <div class="comment">
      <div class="username">{{ username }}</div>
      <div class="content">{{ content }}</div>
      <div class="time">{{ time }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    avatarUrl: String,
    username: String,
    content: String,
    time: String
  }
}
</script>

<style>
.comment-card {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.content {
  font-size: 14px;
  margin-bottom: 5px;
}

.time {
  font-size: 12px;
  color: #666;
}
</style>

这个评论卡组件接受四个 props：头像 URL、用户名、评论内容和评论时间。可以在父组件中通过传递这些 props 来渲染多个评论卡。

例如：

<template>
  <div>
    <comment-card
      v-for="comment in comments"
      :key="comment.id"
      :avatar-url="comment.avatarUrl"
      :username="comment.username"
      :content="comment.content"
      :time="comment.time"
    />
  </div>
</template>

<script>
import CommentCard from '@/components/CommentCard.vue'

export default {
  components: {
    CommentCard
  },
  data() {
    return {
      comments: [
        {
          id: 1,
          avatarUrl: 'https://picsum.photos/id/1/50/50',
          username: 'Alice',
          content: '这个评论卡真棒！',
          time: '2022-01-01 10:00'
        },
        {
          id: 2,
          avatarUrl: 'https://picsum.photos/id/2/50/50',
          username: 'Bob',
          content: '我也觉得不错。',
          time: '2022-01-02 11:00'
        }
      ]
    }
  }
}
</script>

这里使用了 v-for 指令来渲染多个评论卡，comments 数组中包含了两个评论的数据。