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

<template>
  <div style="width: 240px; height: 180px">
    <router-link :to="`/video/${videoInfo.videoId}`">
      <div style="position: relative;">
        <v-img
          :src="videoInfo.coverUrl"
          outlined
          aspect-ratio="1.77"
        />
        <span style="position: absolute; bottom: 0; right: 0; color:red">{{ videoInfo.duration }}</span>
      </div>
    </router-link>
    <v-row>
      <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>
      </v-col>
    </v-row>
  </div>
</template>

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

<style>
</style>