tnbapp/src/components/card/video-card.vue

<!-- TODO 使用 item-card 页面替换 -->
<template>
  <!-- padding-left: 10px; padding-right: 10px; -->
  <div style="width: 320px">
    <router-link :to="`/video/${videoInfo.videoId}`">
      <v-img
        :src="videoInfo.coverUrl"
        outlined
        aspect-ratio="1.77"
      />
    </router-link>
    <v-row>
      <v-col cols="2">
        <router-link :to="`/u/${videoInfo.userId}`">
          <v-avatar size="48">
            <v-img :src="videoInfo.avatarUrl" />
          </v-avatar>
        </router-link>
      </v-col>
      <v-col cols="10">
        <p style="font-size: 15px; margin-bottom: 0px;color: black;">
          <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
        </p>
        <p style="font-size: 10px; color: #606060;">
          <router-link :to="`/u/${videoInfo.userId}`"> {{ videoInfo.username }}</router-link>
          <br>
          {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
          {{ videoInfo.commentCount }} 评论 <span v-html="`&nbsp;&nbsp;`" />
          <span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)" />
        </p>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import TimeUtil from '@/utils/time-util.vue'
export default {
  name: 'UserVideoCard',
  props: {
    video: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      TimeUtil,
      videoInfo: this.video
    }
  },
  created() {
  }
}
</script>

<style>
</style>