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}`">
      <div style="position: relative; width: 320px; height: 180px;">
        <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="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 class="text-over" 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>
.text-over {
  /* 指定宽度 */
  white-space: nowrap;  /* 不换行，如果是span就可以不用这个 */
  overflow: hidden;     /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
</style>