tnbapp/src/components/card/ArticleCard.vue

<template>
  <el-col style="padding-right: 7px; padding-left: 7px">
    <div style="cursor: pointer" :title="article.title">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row>
            <router-link target="_blank" :to="`/article/${article.articleId}`">
              <span style="left: 0;margin-bottom: 0px;color: black;">{{ article.title | ellipsis }}</span>
            </router-link>
          </el-row>
        </div>
        <div class="text item">
          <el-row>
            <span v-html="article.excerpt"/>
          </el-row>
        </div>
      </el-card>
    </div>
  </el-col>
</template>

<script>
export default {
  name: 'ArticleCard',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 10
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  props: {
    article: {
      type: Object,
      default: null
    },
    // 时间前的描述
    dateTit: {
      type: String,
      default: ''
    }
  },
  methods: {
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>